Neutralino + SvelteKit Template

A modern, lightweight desktop application template combining the power of Neutralino.js with SvelteKit, TypeScript, and Vite for fast development and optimal performance.

🚀 Features

• 🔥 Lightweight: Neutralino.js provides a smaller footprint alternative to Electron
• ⚡ Fast Development: SvelteKit with Vite for instant HMR and blazing-fast builds
• 🎯 Type Safety: Full TypeScript support throughout the project
• 📱 Cross-Platform: Build for Windows, macOS, and Linux from a single codebase (Neutralino.js supports Windows, macOS, Linux, and FreeBSD)
• 🎨 Modern UI: Clean, responsive design with dark/light mode support
• 🔧 Developer Experience: Pre-configured with optimal settings and tooling

🎯 Why This Template?

Traditional desktop app frameworks like Electron can be resource-heavy. This template provides:

• Smaller bundle sizes compared to Electron
• Lower memory usage for better performance
• Modern web technologies with desktop capabilities
• Fast development cycle with hot module replacement
• Easy deployment as static files

📋 Prerequisites

Before getting started, ensure you have the following installed:

• Bun (recommended) or Node.js (v18 or higher)
• Neutralino CLI (npm install -g @neutralinojs/neu)

🛠️ Installation

1. Clone the repository

   git clone <your-repo-url>
   cd neutralino-sveltekit-template
   

2. Install dependencies

   bun install
   # or
   npm install
   

3. Initialize Neutralino

   neu update
   

🏃‍♂️ Development

Start the development server with hot module replacement:

bun run dev
# or
npm run dev

This will:

• Start the Vite development server
• Launch the Neutralino desktop application
• Enable live reloading for both frontend and desktop app changes
• Provide developer tools access in the desktop app

🏗️ Building

Create a production build:

bun run build
# or
npm run build

The build process will:

1. Build the SvelteKit application optimized for production
2. Generate the Neutralino desktop application binaries
3. Output the final application in the dist/ directory

📁 Project Structure

neutralino-sveltekit-template/
├── src/
│   ├── lib/                    # Reusable Svelte components
│   │   ├── App.svelte         # Main application component
│   │   ├── Counter.svelte     # Example counter component
│   │   └── NeutralinoCheck.svelte # Neutralino API demo
│   ├── routes/                # SvelteKit routes
│   │   ├── +layout.svelte     # Root layout
│   │   ├── +layout.ts         # Layout configuration
│   │   └── +page.svelte       # Home page
│   ├── app.css               # Global styles
│   ├── app.html             # HTML template
│   └── vite-env.d.ts        # Vite type definitions
├── static/                   # Static assets
├── public/                   # Public assets (icon, etc.)
├── neutralino.config.json   # Neutralino configuration
├── svelte.config.js        # SvelteKit configuration
├── vite.config.ts          # Vite configuration with Neutralino plugin
├── package.json            # Dependencies and scripts
└── tsconfig.json          # TypeScript configuration

⚙️ Configuration

Neutralino Configuration

The neutralino.config.json file contains the desktop application settings:

• Window properties: Size, title, icon, resizability
• Native API permissions: Control which Neutralino APIs are accessible
• Build settings: Binary name, output paths, and versions

SvelteKit Configuration

The svelte.config.js configures:

• Adapter: Uses @sveltejs/adapter-static for SPA generation
• Aliases: Convenient import paths for common directories
• Build optimization: Configured for Neutralino's static file requirements

Vite Configuration

The vite.config.ts includes a custom Neutralino plugin that:

• Automatically starts the Neutralino app during development
• Copies assets and builds the desktop app in production
• Configures the development server for optimal integration

🔌 Available APIs

This template demonstrates integration with Neutralino's native APIs:

• OS Operations: Access file system, execute commands, get system info
• Computer Info: Retrieve hardware and operating system details
• App Control: Manage application lifecycle and window properties

Example usage in src/lib/NeutralinoCheck.svelte:

import { computer } from '@neutralinojs/lib'
let osInfo = computer.getOSInfo()

📦 Scripts

🎨 Styling

The template includes:

• Modern CSS: CSS variables for theming and responsive design
• Dark/Light Mode: Automatic system preference detection
• Component Scoping: Svelte's scoped styling capabilities
• Responsive Layout: Mobile-first approach with desktop optimizations

🔧 Customization

Changing App Details

1. Update package.json: Modify name, description, and author
2. Update neutralino.config.json: Change applicationId, title, and window properties
3. Replace icons: Update files in public/ and static/ directories
4. Modify metadata: Update title and meta tags in src/app.html

Adding New Features

1. Create components: Add new .svelte files in src/lib/
2. Add routes: Create new pages in src/routes/
3. Integrate APIs: Use Neutralino APIs for native functionality
4. Style components: Use scoped CSS or global styles in src/app.css

🚀 Deployment

Desktop Distribution

After building, you'll find platform-specific binaries in the dist/ directory:

• Windows: .exe executable
• macOS: .app bundle
• Linux: Binary executable

Code Signing (Recommended)

For production distribution, consider code signing your applications:

• Windows: Use signtool with a code signing certificate
• macOS: Use Xcode command line tools with Apple Developer certificate
• Linux: Use gpg for package signing

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

📄 License

This project is licensed under the ISC License - see the LICENSE file for details.

🙏 Acknowledgments

• Neutralino.js - Lightweight cross-platform desktop app framework
• SvelteKit - Full-stack web framework
• Vite - Next generation frontend tooling
• TypeScript - Typed JavaScript at scale

📚 Additional Resources

• Neutralino.js Documentation
• SvelteKit Documentation
• Svelte Tutorial
• TypeScript Handbook
• Vite Guide

Happy coding! 🎉 If you find this template helpful, please consider giving it a ⭐ on GitHub.