├── src ├── routes │ ├── +layout.ts │ ├── +layout.svelte │ └── +page.svelte ├── app.d.ts ├── lib │ ├── components │ │ └── ui │ │ │ └── button │ │ │ ├── index.ts │ │ │ └── button.svelte │ └── utils.ts ├── app.html └── app.css ├── src-tauri ├── .gitignore ├── build.rs ├── icons │ ├── icon.ico │ ├── icon.png │ ├── 128x128.png │ ├── 32x32.png │ ├── icon.icns │ ├── StoreLogo.png │ ├── 128x128@2x.png │ ├── Square107x107Logo.png │ ├── Square142x142Logo.png │ ├── Square150x150Logo.png │ ├── Square284x284Logo.png │ ├── Square30x30Logo.png │ ├── Square310x310Logo.png │ ├── Square44x44Logo.png │ ├── Square71x71Logo.png │ └── Square89x89Logo.png ├── src │ ├── lib.rs │ └── main.rs ├── Cargo.toml └── tauri.conf.json ├── static └── favicon.png ├── .gitignore ├── svelte.config.js ├── components.json ├── biome.json ├── vite.config.ts ├── tsconfig.json ├── LICENSE ├── package.json └── README.md /src/routes/+layout.ts: -------------------------------------------------------------------------------- 1 | export const prerender = true; 2 | export const ssr = false; 3 | -------------------------------------------------------------------------------- /src-tauri/.gitignore: -------------------------------------------------------------------------------- 1 | # Generated by Cargo 2 | # will have compiled files and executables 3 | /target/ -------------------------------------------------------------------------------- /src-tauri/build.rs: -------------------------------------------------------------------------------- 1 | fn main() { 2 | tauri_runtime_verso_build::get_verso_as_external_bin().unwrap(); 3 | tauri_build::build(); 4 | } 5 | -------------------------------------------------------------------------------- /static/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nopsled/template-sveltekit-rolldown-tauri-servo-biome-tailwind-shadcn-bun/HEAD/static/favicon.png -------------------------------------------------------------------------------- /src-tauri/icons/icon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nopsled/template-sveltekit-rolldown-tauri-servo-biome-tailwind-shadcn-bun/HEAD/src-tauri/icons/icon.ico -------------------------------------------------------------------------------- /src-tauri/icons/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nopsled/template-sveltekit-rolldown-tauri-servo-biome-tailwind-shadcn-bun/HEAD/src-tauri/icons/icon.png -------------------------------------------------------------------------------- /src-tauri/icons/128x128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nopsled/template-sveltekit-rolldown-tauri-servo-biome-tailwind-shadcn-bun/HEAD/src-tauri/icons/128x128.png -------------------------------------------------------------------------------- /src-tauri/icons/32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nopsled/template-sveltekit-rolldown-tauri-servo-biome-tailwind-shadcn-bun/HEAD/src-tauri/icons/32x32.png -------------------------------------------------------------------------------- /src-tauri/icons/icon.icns: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nopsled/template-sveltekit-rolldown-tauri-servo-biome-tailwind-shadcn-bun/HEAD/src-tauri/icons/icon.icns -------------------------------------------------------------------------------- /src-tauri/icons/StoreLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nopsled/template-sveltekit-rolldown-tauri-servo-biome-tailwind-shadcn-bun/HEAD/src-tauri/icons/StoreLogo.png -------------------------------------------------------------------------------- /src-tauri/icons/128x128@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nopsled/template-sveltekit-rolldown-tauri-servo-biome-tailwind-shadcn-bun/HEAD/src-tauri/icons/128x128@2x.png -------------------------------------------------------------------------------- /src-tauri/icons/Square107x107Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nopsled/template-sveltekit-rolldown-tauri-servo-biome-tailwind-shadcn-bun/HEAD/src-tauri/icons/Square107x107Logo.png -------------------------------------------------------------------------------- /src-tauri/icons/Square142x142Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nopsled/template-sveltekit-rolldown-tauri-servo-biome-tailwind-shadcn-bun/HEAD/src-tauri/icons/Square142x142Logo.png -------------------------------------------------------------------------------- /src-tauri/icons/Square150x150Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nopsled/template-sveltekit-rolldown-tauri-servo-biome-tailwind-shadcn-bun/HEAD/src-tauri/icons/Square150x150Logo.png -------------------------------------------------------------------------------- /src-tauri/icons/Square284x284Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nopsled/template-sveltekit-rolldown-tauri-servo-biome-tailwind-shadcn-bun/HEAD/src-tauri/icons/Square284x284Logo.png -------------------------------------------------------------------------------- /src-tauri/icons/Square30x30Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nopsled/template-sveltekit-rolldown-tauri-servo-biome-tailwind-shadcn-bun/HEAD/src-tauri/icons/Square30x30Logo.png -------------------------------------------------------------------------------- /src-tauri/icons/Square310x310Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nopsled/template-sveltekit-rolldown-tauri-servo-biome-tailwind-shadcn-bun/HEAD/src-tauri/icons/Square310x310Logo.png -------------------------------------------------------------------------------- /src-tauri/icons/Square44x44Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nopsled/template-sveltekit-rolldown-tauri-servo-biome-tailwind-shadcn-bun/HEAD/src-tauri/icons/Square44x44Logo.png -------------------------------------------------------------------------------- /src-tauri/icons/Square71x71Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nopsled/template-sveltekit-rolldown-tauri-servo-biome-tailwind-shadcn-bun/HEAD/src-tauri/icons/Square71x71Logo.png -------------------------------------------------------------------------------- /src-tauri/icons/Square89x89Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nopsled/template-sveltekit-rolldown-tauri-servo-biome-tailwind-shadcn-bun/HEAD/src-tauri/icons/Square89x89Logo.png -------------------------------------------------------------------------------- /src-tauri/src/lib.rs: -------------------------------------------------------------------------------- 1 | #[cfg_attr(mobile, tauri::mobile_entry_point)] 2 | pub fn run() { 3 | tauri_runtime_verso::builder() 4 | .run(tauri::generate_context!()) 5 | .unwrap(); 6 | } 7 | -------------------------------------------------------------------------------- /src/routes/+layout.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | {#if children} 7 | {@render children()} 8 | {:else} 9 |

Fallback content

10 | {/if} 11 | -------------------------------------------------------------------------------- /src/app.d.ts: -------------------------------------------------------------------------------- 1 | // See https://kit.svelte.dev/docs/types#app 2 | // for information about these interfaces 3 | declare global { 4 | namespace App { 5 | // interface Error {} 6 | // interface Locals {} 7 | // interface PageData {} 8 | // interface Platform {} 9 | } 10 | } 11 | 12 | export {}; 13 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /build 4 | /.svelte-kit 5 | /package 6 | .env 7 | .env.* 8 | !.env.example 9 | vite.config.js.timestamp-* 10 | vite.config.ts.timestamp-* 11 | 12 | # Tauri 13 | /src-tauri/target 14 | /src-tauri/gen 15 | /src-tauri/versoview 16 | 17 | # Lock files 18 | package-lock.json 19 | bun.lock 20 | src-tauri/Cargo.lock 21 | -------------------------------------------------------------------------------- /src/lib/components/ui/button/index.ts: -------------------------------------------------------------------------------- 1 | import Root, { 2 | type ButtonProps, 3 | type ButtonSize, 4 | type ButtonVariant, 5 | buttonVariants, 6 | } from "./button.svelte"; 7 | 8 | export { 9 | Root, 10 | type ButtonProps as Props, 11 | // 12 | Root as Button, 13 | buttonVariants, 14 | type ButtonProps, 15 | type ButtonSize, 16 | type ButtonVariant, 17 | }; 18 | -------------------------------------------------------------------------------- /svelte.config.js: -------------------------------------------------------------------------------- 1 | import adapter from "@sveltejs/adapter-static"; 2 | 3 | /** @type {import('@sveltejs/kit').Config} */ 4 | export default { 5 | compilerOptions: { 6 | runes: true, 7 | }, 8 | adapter: adapter({ 9 | pages: "build", 10 | assets: "build", 11 | fallback: "index.html", 12 | }), 13 | alias: { 14 | $lib: "src/lib", 15 | }, 16 | }; -------------------------------------------------------------------------------- /components.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://shadcn-svelte.com/schema.json", 3 | "tailwind": { 4 | "css": "src/app.css", 5 | "baseColor": "slate" 6 | }, 7 | "aliases": { 8 | "components": "$lib/components", 9 | "utils": "$lib/utils", 10 | "ui": "$lib/components/ui", 11 | "hooks": "$lib/hooks", 12 | "lib": "$lib" 13 | }, 14 | "typescript": true, 15 | "registry": "https://shadcn-svelte.com/registry" 16 | } 17 | -------------------------------------------------------------------------------- /src/app.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | %sveltekit.head% 8 | 9 | 10 |
%sveltekit.body%
11 | 12 | 13 | -------------------------------------------------------------------------------- /biome.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://biomejs.dev/schemas/2.2.0/schema.json", 3 | "formatter": { 4 | "enabled": true, 5 | "indentStyle": "tab", 6 | "lineWidth": 120 7 | }, 8 | "linter": { 9 | "enabled": true, 10 | "rules": { 11 | "recommended": true 12 | } 13 | }, 14 | "javascript": { 15 | "formatter": { 16 | "quoteStyle": "single", 17 | "trailingCommas": "none", 18 | "semicolons": "always" 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /vite.config.ts: -------------------------------------------------------------------------------- 1 | import { sveltekit } from "@sveltejs/kit/vite"; 2 | import { defineConfig } from "vite"; 3 | import tailwindcss from "@tailwindcss/vite"; 4 | 5 | export default defineConfig({ 6 | plugins: [tailwindcss(), sveltekit()], 7 | build: { 8 | rollupOptions: { 9 | output: { 10 | advancedChunks: { 11 | groups: [ 12 | { 13 | name: "some", 14 | }, 15 | ], 16 | }, 17 | }, 18 | }, 19 | }, 20 | experimental: { 21 | enableNativePlugin: true, 22 | }, 23 | esbuild: false, 24 | }); 25 | -------------------------------------------------------------------------------- /src-tauri/src/main.rs: -------------------------------------------------------------------------------- 1 | #![cfg_attr(not(debug_assertions), windows_subsystem = "windows")] 2 | 3 | use tauri::Manager; 4 | 5 | #[tauri::command] 6 | fn greet(name: &str) -> String { 7 | format!("Hello {name}, You have been greeted from Rust!") 8 | } 9 | 10 | fn main() { 11 | tauri_runtime_verso::builder() 12 | .invoke_handler(tauri::generate_handler![greet]) 13 | .setup(|app| { 14 | dbg!(app.get_webview_window("main").unwrap().inner_size()).unwrap(); 15 | Ok(()) 16 | }) 17 | .run(tauri::generate_context!()) 18 | .expect("error while running tauri application") 19 | } 20 | -------------------------------------------------------------------------------- /src/lib/utils.ts: -------------------------------------------------------------------------------- 1 | import { clsx, type ClassValue } from 'clsx'; 2 | import { twMerge } from 'tailwind-merge'; 3 | 4 | export function cn(...inputs: ClassValue[]) { 5 | return twMerge(clsx(inputs)); 6 | } 7 | 8 | // eslint-disable-next-line @typescript-eslint/no-explicit-any 9 | export type WithoutChild = T extends { child?: any } ? Omit : T; 10 | // eslint-disable-next-line @typescript-eslint/no-explicit-any 11 | export type WithoutChildren = T extends { children?: any } ? Omit : T; 12 | export type WithoutChildrenOrChild = WithoutChildren>; 13 | export type WithElementRef = T & { ref?: U | null }; 14 | -------------------------------------------------------------------------------- /src-tauri/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "template-sveltekit-rolldown-tauri-servo-biome-tailwind-shadcn-bun" 3 | version = "0.0.1" 4 | default-run = "template-sveltekit-rolldown-tauri-servo-biome-tailwind-shadcn-bun" 5 | edition = "2024" 6 | 7 | [lib] 8 | name = "app_lib" 9 | crate-type = ["staticlib", "cdylib", "rlib"] 10 | 11 | [build-dependencies] 12 | tauri-build = { version = "2", features = [] } 13 | tauri-runtime-verso-build = { git = "https://github.com/versotile-org/tauri-runtime-verso.git" } 14 | 15 | [dependencies] 16 | serde_json = "1" 17 | serde = { version = "1", features = ["derive"] } 18 | tauri = { version = "2", default-features = false, features = ["common-controls-v6"] } 19 | tauri-runtime-verso = { git = "https://github.com/versotile-org/tauri-runtime-verso.git" } 20 | 21 | [features] 22 | default = [ "custom-protocol" ] 23 | custom-protocol = [ "tauri/custom-protocol" ] 24 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | // Keep SvelteKit’s autogenerated config for paths, ambient types, etc. 3 | "extends": "./.svelte-kit/tsconfig.json", 4 | "compilerOptions": { 5 | "allowJs": true, 6 | "checkJs": true, 7 | "esModuleInterop": true, 8 | "forceConsistentCasingInFileNames": true, 9 | "resolveJsonModule": true, 10 | "skipLibCheck": true, 11 | "sourceMap": true, 12 | "strict": true, 13 | "target": "ESNext", 14 | "module": "ESNext", 15 | "moduleResolution": "bundler", 16 | "allowSyntheticDefaultImports": true, 17 | "isolatedModules": true, 18 | "noEmit": true, 19 | "lib": [ 20 | "ESNext", 21 | "DOM", 22 | "DOM.Iterable" 23 | ], 24 | "types": [ 25 | "vite/client", 26 | "node" 27 | ] 28 | }, 29 | "exclude": [ 30 | "node_modules", 31 | ".svelte-kit/**", 32 | "dist", 33 | "build" 34 | ] 35 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2025 Nopsled 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src-tauri/tauri.conf.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://schema.tauri.app/config/2", 3 | "productName": "template-sveltekit-rolldown-tauri-servo-biome-tailwind-shadcn-bun", 4 | "version": "0.0.1", 5 | "identifier": "com.nopsled.template-sveltekit-rolldown-tauri-servo-biome-tailwind-shadcn-bun", 6 | "build": { 7 | "beforeBuildCommand": "bun run sveltekit:build", 8 | "beforeDevCommand": "bun run sveltekit:dev", 9 | "devUrl": "http://localhost:5173", 10 | "frontendDist": "../build" 11 | }, 12 | "app": { 13 | "windows": [ 14 | { 15 | "title": "Template: Sveltekit (Rolldown) x Tauri (with Servo) x Biome x Tailwind x ShadCn x Bun", 16 | "width": 800, 17 | "height": 600, 18 | "resizable": true, 19 | "fullscreen": false 20 | } 21 | ], 22 | "security": { 23 | "csp": null 24 | } 25 | }, 26 | "bundle": { 27 | "active": true, 28 | "targets": "all", 29 | "category": "DeveloperTool", 30 | "copyright": "", 31 | "shortDescription": "", 32 | "longDescription": "", 33 | "icon": [ 34 | "icons/32x32.png", 35 | "icons/128x128.png", 36 | "icons/128x128@2x.png", 37 | "icons/icon.icns", 38 | "icons/icon.ico" 39 | ], 40 | "resources": [], 41 | "externalBin": ["versoview/versoview"], 42 | "linux": { 43 | "deb": { 44 | "depends": [] 45 | } 46 | }, 47 | "macOS": { 48 | "frameworks": [], 49 | "entitlements": null, 50 | "exceptionDomain": "", 51 | "providerShortName": null, 52 | "signingIdentity": null 53 | }, 54 | "windows": { 55 | "certificateThumbprint": null, 56 | "digestAlgorithm": "sha256", 57 | "timestampUrl": "" 58 | } 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /src/routes/+page.svelte: -------------------------------------------------------------------------------- 1 |
5 |
8 |
9 |

10 | Welcome to SvelteKit with Rolldown × Tauri with Servo rendering 11 | × Biome × Tailwind × ShadCn × Bun 12 |

13 |

14 | A powerful desktop app framework combining Rust and modern web 15 | tech 16 |

17 |
18 | 19 |
20 |
21 | 24 | Svelte v5 + SvelteKit v2 25 | 26 | 29 | Vite v7 (with Rolldown) 30 | 31 | 34 | Tauri v2 (with Servo rendering engine) 35 | 36 | 39 | Biome v2 40 | 41 | 44 | Tailwind v4 45 | 46 | 49 | ShadCn 50 | 51 | 54 | Bun v1.2 55 | 56 | 57 |
58 |
59 |
60 |
61 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "template-sveltekit-tauri-servo-rolldown-tailwind-shadcn-bun", 3 | "version": "0.0.2", 4 | "private": true, 5 | "description": "A modern full-stack template combining SvelteKit, Tauri, Rolldown, TailwindCSS, shadcn/ui, and Bun for building fast desktop applications", 6 | "type": "module", 7 | "packageManager": "bun@1.2.19", 8 | "engines": { 9 | "node": ">=22.12.0", 10 | "bun": ">=1.2.0" 11 | }, 12 | "keywords": [ 13 | "sveltekit", 14 | "tauri", 15 | "rolldown", 16 | "tailwindcss", 17 | "shadcn", 18 | "bun", 19 | "desktop", 20 | "typescript", 21 | "biome" 22 | ], 23 | "scripts": { 24 | "dev": "bun run tauri dev", 25 | "build": "bun run tauri build", 26 | "preview": "vite preview", 27 | "tauri": "tauri", 28 | "sveltekit:dev": "vite dev", 29 | "sveltekit:build": "vite build", 30 | "sveltekit:preview": "vite preview", 31 | "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json", 32 | "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch", 33 | "type-check": "tsc --noEmit", 34 | "sync": "svelte-kit sync", 35 | "format": "biome format --write ./src", 36 | "format:check": "biome format ./src", 37 | "lint": "biome lint ./src", 38 | "lint:fix": "biome lint --write ./src", 39 | "lint:unsafe": "biome lint --write --unsafe ./src", 40 | "code-quality": "bun run format && bun run lint:fix && bun run check", 41 | "clean": "rm -rf node_modules && rm -rf .svelte-kit && rm -rf src-tauri/gen && rm -rf src-tauri/target && rm -rf src-tauri/versoview", 42 | "reinstall": "bun run clean && bun install" 43 | }, 44 | "dependencies": { 45 | "@tailwindcss/vite": "^4.1.12", 46 | "clsx": "^2.1.1", 47 | "tailwind-merge": "^3.3.1", 48 | "tailwind-variants": "^2.1.0", 49 | "tailwindcss": "^4.1.12" 50 | }, 51 | "devDependencies": { 52 | "@biomejs/biome": "^2.2.0", 53 | "@sveltejs/adapter-static": "^3.0.9", 54 | "@sveltejs/kit": "^2.31.1", 55 | "@tauri-apps/cli": "^2.7.1", 56 | "@types/node": "^24.3.0", 57 | "svelte": "^5.38.1", 58 | "svelte-check": "^4.3.1", 59 | "tw-animate-css": "^1.3.7", 60 | "typescript": "^5.9.2", 61 | "vite": "npm:rolldown-vite@7.1.2" 62 | }, 63 | "peerDependencies": { 64 | "@tauri-apps/api": ">=2.6.0" 65 | }, 66 | "browserslist": [ 67 | "defaults", 68 | "not IE 11" 69 | ], 70 | "repository": { 71 | "type": "git", 72 | "url": "https://github.com/Nopsled/template-sveltekit-rolldown-tauri-servo-biome-tailwind-shadcn-bun.git" 73 | }, 74 | "bugs": { 75 | "url": "https://github.com/Nopsled/template-sveltekit-rolldown-tauri-servo-biome-tailwind-shadcn-bun/issues" 76 | }, 77 | "homepage": "https://github.com/Nopsled/template-sveltekit-rolldown-tauri-servo-biome-tailwind-shadcn-bun#readme", 78 | "license": "MIT", 79 | "files": [ 80 | "build", 81 | "src", 82 | "static", 83 | "svelte.config.js", 84 | "vite.config.ts", 85 | "tsconfig.json" 86 | ] 87 | } -------------------------------------------------------------------------------- /src/lib/components/ui/button/button.svelte: -------------------------------------------------------------------------------- 1 | 41 | 42 | 55 | 56 | {#if href} 57 | 67 | {@render children?.()} 68 | 69 | {:else} 70 | 80 | {/if} 81 | -------------------------------------------------------------------------------- /src/app.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss"; 2 | 3 | @import "tw-animate-css"; 4 | 5 | @custom-variant dark (&:is(.dark *)); 6 | 7 | :root { 8 | --radius: 0.625rem; 9 | --background: oklch(1 0 0); 10 | --foreground: oklch(0.129 0.042 264.695); 11 | --card: oklch(1 0 0); 12 | --card-foreground: oklch(0.129 0.042 264.695); 13 | --popover: oklch(1 0 0); 14 | --popover-foreground: oklch(0.129 0.042 264.695); 15 | --primary: oklch(0.208 0.042 265.755); 16 | --primary-foreground: oklch(0.984 0.003 247.858); 17 | --secondary: oklch(0.968 0.007 247.896); 18 | --secondary-foreground: oklch(0.208 0.042 265.755); 19 | --muted: oklch(0.968 0.007 247.896); 20 | --muted-foreground: oklch(0.554 0.046 257.417); 21 | --accent: oklch(0.968 0.007 247.896); 22 | --accent-foreground: oklch(0.208 0.042 265.755); 23 | --destructive: oklch(0.577 0.245 27.325); 24 | --border: oklch(0.929 0.013 255.508); 25 | --input: oklch(0.929 0.013 255.508); 26 | --ring: oklch(0.704 0.04 256.788); 27 | --chart-1: oklch(0.646 0.222 41.116); 28 | --chart-2: oklch(0.6 0.118 184.704); 29 | --chart-3: oklch(0.398 0.07 227.392); 30 | --chart-4: oklch(0.828 0.189 84.429); 31 | --chart-5: oklch(0.769 0.188 70.08); 32 | --sidebar: oklch(0.984 0.003 247.858); 33 | --sidebar-foreground: oklch(0.129 0.042 264.695); 34 | --sidebar-primary: oklch(0.208 0.042 265.755); 35 | --sidebar-primary-foreground: oklch(0.984 0.003 247.858); 36 | --sidebar-accent: oklch(0.968 0.007 247.896); 37 | --sidebar-accent-foreground: oklch(0.208 0.042 265.755); 38 | --sidebar-border: oklch(0.929 0.013 255.508); 39 | --sidebar-ring: oklch(0.704 0.04 256.788); 40 | } 41 | 42 | .dark { 43 | --background: oklch(0.129 0.042 264.695); 44 | --foreground: oklch(0.984 0.003 247.858); 45 | --card: oklch(0.208 0.042 265.755); 46 | --card-foreground: oklch(0.984 0.003 247.858); 47 | --popover: oklch(0.208 0.042 265.755); 48 | --popover-foreground: oklch(0.984 0.003 247.858); 49 | --primary: oklch(0.929 0.013 255.508); 50 | --primary-foreground: oklch(0.208 0.042 265.755); 51 | --secondary: oklch(0.279 0.041 260.031); 52 | --secondary-foreground: oklch(0.984 0.003 247.858); 53 | --muted: oklch(0.279 0.041 260.031); 54 | --muted-foreground: oklch(0.704 0.04 256.788); 55 | --accent: oklch(0.279 0.041 260.031); 56 | --accent-foreground: oklch(0.984 0.003 247.858); 57 | --destructive: oklch(0.704 0.191 22.216); 58 | --border: oklch(1 0 0 / 10%); 59 | --input: oklch(1 0 0 / 15%); 60 | --ring: oklch(0.551 0.027 264.364); 61 | --chart-1: oklch(0.488 0.243 264.376); 62 | --chart-2: oklch(0.696 0.17 162.48); 63 | --chart-3: oklch(0.769 0.188 70.08); 64 | --chart-4: oklch(0.627 0.265 303.9); 65 | --chart-5: oklch(0.645 0.246 16.439); 66 | --sidebar: oklch(0.208 0.042 265.755); 67 | --sidebar-foreground: oklch(0.984 0.003 247.858); 68 | --sidebar-primary: oklch(0.488 0.243 264.376); 69 | --sidebar-primary-foreground: oklch(0.984 0.003 247.858); 70 | --sidebar-accent: oklch(0.279 0.041 260.031); 71 | --sidebar-accent-foreground: oklch(0.984 0.003 247.858); 72 | --sidebar-border: oklch(1 0 0 / 10%); 73 | --sidebar-ring: oklch(0.551 0.027 264.364); 74 | } 75 | 76 | @theme inline { 77 | --radius-sm: calc(var(--radius) - 4px); 78 | --radius-md: calc(var(--radius) - 2px); 79 | --radius-lg: var(--radius); 80 | --radius-xl: calc(var(--radius) + 4px); 81 | --color-background: var(--background); 82 | --color-foreground: var(--foreground); 83 | --color-card: var(--card); 84 | --color-card-foreground: var(--card-foreground); 85 | --color-popover: var(--popover); 86 | --color-popover-foreground: var(--popover-foreground); 87 | --color-primary: var(--primary); 88 | --color-primary-foreground: var(--primary-foreground); 89 | --color-secondary: var(--secondary); 90 | --color-secondary-foreground: var(--secondary-foreground); 91 | --color-muted: var(--muted); 92 | --color-muted-foreground: var(--muted-foreground); 93 | --color-accent: var(--accent); 94 | --color-accent-foreground: var(--accent-foreground); 95 | --color-destructive: var(--destructive); 96 | --color-border: var(--border); 97 | --color-input: var(--input); 98 | --color-ring: var(--ring); 99 | --color-chart-1: var(--chart-1); 100 | --color-chart-2: var(--chart-2); 101 | --color-chart-3: var(--chart-3); 102 | --color-chart-4: var(--chart-4); 103 | --color-chart-5: var(--chart-5); 104 | --color-sidebar: var(--sidebar); 105 | --color-sidebar-foreground: var(--sidebar-foreground); 106 | --color-sidebar-primary: var(--sidebar-primary); 107 | --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); 108 | --color-sidebar-accent: var(--sidebar-accent); 109 | --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); 110 | --color-sidebar-border: var(--sidebar-border); 111 | --color-sidebar-ring: var(--sidebar-ring); 112 | } 113 | 114 | @layer base { 115 | * { 116 | @apply border-border outline-ring/50; 117 | } 118 | body { 119 | @apply bg-background text-foreground; 120 | } 121 | } 122 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # SvelteKit × Rolldown × Tauri × Servo × Biome × Tailwind × ShadCn × Bun × Template 2 | A cutting-edge desktop application template that combines the latest web technologies with Rust-powered desktop capabilities and experimental web rendering. 3 | 4 | image 5 | 6 | 7 | ## 🚀 What This Template Provides 8 | 9 | This template demonstrates a modern approach to desktop application development by combining: 10 | 11 | - **Svelte v5 & SvelteKit v2** - The latest version of the powerful full-stack web framework 12 | - **Rolldown via Vite v7** - Ultra-fast Rust-powered bundler as a Vite plugin replacement 13 | - **Tauri v2** - Lightweight Rust-based framework for building desktop apps 14 | - **Servo Rendering Engine** - Experimental high-performance web engine written in Rust 15 | - **Biome v2** - Lightning-fast formatter and linter that replaces ESLint + Prettier 16 | - **Tailwind CSS v4** - Latest version with improved performance and new features 17 | - **ShadCn Svelte** - Beautiful, accessible UI components built with Tailwind 18 | 19 | ## ✨ Key Features 20 | 21 | ### Performance & Speed 22 | - **Rolldown Bundling with Vite v7** - Significantly faster builds compared to traditional bundlers 23 | - **Servo Rendering Engine** - Experimental web engine with potential performance benefits 24 | - **Tauri v2** - Smaller bundle sizes and better performance than Electron 25 | - **Biome v2** - 10-100x faster than ESLint/Prettier combinations 26 | 27 | ### Developer Experience 28 | - **TypeScript** support out of the box 29 | - **Hot module reloading** for rapid development 30 | - **Consistent code formatting** with Biome 31 | - **Modern CSS** with Tailwind v4 features 32 | - **Component library** with ShadCN Svelte components 33 | 34 | ### Cross-Platform 35 | - Build for **Windows**, **macOS**, and **Linux** 36 | - Native system integration through Tauri 37 | - Web-based UI with native performance 38 | 39 | ## 📋 Prerequisites 40 | 41 | Make sure you have the following installed: 42 | 43 | - **[Bun](https://bun.sh/)** (latest version) - Package manager and runtime 44 | - **[Rust](https://rustup.rs/)** (latest stable) - Required for Tauri 45 | - **[Node.js](https://nodejs.org/)** (v22.12+) - Fallback runtime support 46 | 47 | ### Platform-Specific Requirements 48 | 49 | #### Windows 50 | - Microsoft C++ Build Tools or Visual Studio with C++ support 51 | 52 | #### macOS 53 | - Xcode Command Line Tools: `xcode-select --install` 54 | 55 | #### Linux (Ubuntu/Debian) 56 | ```bash 57 | sudo apt update 58 | sudo apt install libwebkit2gtk-4.1-dev \ 59 | build-essential \ 60 | curl \ 61 | wget \ 62 | file \ 63 | libxdo-dev \ 64 | libssl-dev \ 65 | libayatana-appindicator3-dev \ 66 | librsvg2-dev 67 | ``` 68 | 69 | ## 🛠️ Setup 70 | 71 | 1. **Clone or use this template** 72 | ```bash 73 | git clone 74 | cd template-sveltekit-rolldown-tauri-servo-biome-tailwind-shadcn-bun 75 | ``` 76 | 77 | 2. **Install dependencies** 78 | ```bash 79 | bun install 80 | ``` 81 | 82 | 3. **Install Tauri CLI** (if not already installed) 83 | ```bash 84 | bun add -g @tauri-apps/cli@latest 85 | ``` 86 | 87 | ## 🏃‍♂️ Running the Project 88 | 89 | ### Development Mode 90 | Start the development server with hot reloading: 91 | ```bash 92 | bun run dev 93 | ``` 94 | This will: 95 | - Start the SvelteKit dev server on `http://localhost:5173` 96 | - Launch the Tauri desktop application 97 | - Enable hot module reloading for both frontend and backend changes 98 | 99 | ### SvelteKit Only (Web Development) 100 | If you want to develop just the web portion: 101 | ```bash 102 | bun run sveltekit:dev 103 | ``` 104 | 105 | ### Building for Production 106 | Build the complete desktop application: 107 | ```bash 108 | bun run build 109 | ``` 110 | 111 | ### Preview Production Build 112 | Preview the built SvelteKit application: 113 | ```bash 114 | bun run preview 115 | ``` 116 | 117 | ## 📁 Project Structure 118 | 119 | ``` 120 | ├── src/ # SvelteKit application source 121 | │ ├── lib/ # Shared components and utilities 122 | │ │ ├── components/ # Reusable Svelte components 123 | │ │ │ └── ui/ # ShadCN UI components 124 | │ │ ├── hooks/ # SvelteKit hooks 125 | │ │ └── utils.ts # Utility functions 126 | │ ├── routes/ # SvelteKit routes (pages) 127 | │ │ ├── +layout.svelte # Root layout component 128 | │ │ ├── +layout.ts # Layout load function 129 | │ │ └── +page.svelte # Home page 130 | │ ├── app.css # Global styles (Tailwind imports) 131 | │ ├── app.d.ts # TypeScript declarations 132 | │ └── app.html # HTML template 133 | ├── src-tauri/ # Tauri Rust backend 134 | │ ├── src/ # Rust source code 135 | │ ├── Cargo.toml # Rust dependencies 136 | │ ├── tauri.conf.json # Tauri configuration 137 | │ └── build.rs # Build script 138 | ├── static/ # Static assets 139 | ├── biome.json # Biome configuration 140 | ├── components.json # ShadCN component configuration 141 | ├── package.json # Node.js dependencies and scripts 142 | ├── svelte.config.js # SvelteKit configuration 143 | ├── tsconfig.json # TypeScript configuration 144 | └── vite.config.ts # Vite configuration (with Rolldown) 145 | ``` 146 | 147 | ## 🔧 Available Scripts 148 | 149 | | Script | Description | 150 | |--------|-------------| 151 | | `bun run dev` | Start development server with Tauri app | 152 | | `bun run build` | Build production desktop application | 153 | | `bun run sveltekit:dev` | Start only SvelteKit dev server | 154 | | `bun run sveltekit:build` | Build only SvelteKit application | 155 | | `bun run preview` | Preview production SvelteKit build | 156 | | `bun run check` | Run SvelteKit type checking | 157 | | `bun run check:watch` | Run type checking in watch mode | 158 | | `bun run tauri` | Access Tauri CLI commands | 159 | 160 | ## 🎨 Styling & Components 161 | 162 | ### Tailwind CSS v4 163 | This template uses Tailwind CSS v4 with: 164 | - Modern configuration 165 | - JIT compilation 166 | - Custom design tokens 167 | - Responsive design utilities 168 | 169 | ### ShadCn Svelte Components 170 | Pre-configured with ShadCn Svelte for beautiful, accessible components: 171 | - Button components included 172 | - Easy to add more components via CLI 173 | - Customizable design system 174 | - TypeScript support 175 | 176 | To add new ShadCn components: 177 | ```bash 178 | bunx shadcn-svelte@latest add button # Example 179 | ``` 180 | 181 | ## 🧹 Code Quality 182 | 183 | ### Biome Configuration 184 | Biome is configured with: 185 | - **Formatting**: 2-space indentation, single quotes, trailing commas 186 | - **Linting**: Recommended rules enabled 187 | - **Performance**: Much faster than ESLint + Prettier 188 | 189 | Run code quality checks: 190 | ```bash 191 | bunx biome check . # Check all files 192 | bunx biome format . # Format all files 193 | bunx biome lint . # Lint all files 194 | bunx biome check . --fix # Fix auto-fixable issues 195 | ``` 196 | 197 | ## ⚠️ Experimental Features 198 | 199 | ### Servo Rendering Engine 200 | This template uses the experimental Servo rendering engine through `tauri-runtime-verso`. This provides: 201 | - **Potential performance benefits** over traditional webviews 202 | - **Modern web standards** support 203 | - **Rust-based rendering** for consistency with Tauri 204 | 205 | **Note**: Servo integration is experimental and may have compatibility issues. For production applications, consider using the standard Tauri webview until Servo reaches stability. 206 | 207 | ### Rolldown Bundler 208 | Rolldown is used via `rolldown-vite` package, providing: 209 | - **Faster builds** than traditional bundlers 210 | - **Rust-powered performance** 211 | - **Vite compatibility** for familiar development experience 212 | 213 | ## 🚀 Deployment 214 | 215 | ### Building for Different Platforms 216 | ```bash 217 | # Build for current platform 218 | bun run build 219 | 220 | # Build for specific platforms (configure in tauri.conf.json) 221 | bun run tauri build --target x86_64-pc-windows-msvc # Windows 222 | bun run tauri build --target x86_64-apple-darwin # macOS Intel 223 | bun run tauri build --target aarch64-apple-darwin # macOS Apple Silicon 224 | bun run tauri build --target x86_64-unknown-linux-gnu # Linux 225 | ``` 226 | 227 | ### Distribution 228 | Built applications will be in `src-tauri/target/release/bundle/`: 229 | - **Windows**: `.msi` installer and `.exe` executable 230 | - **macOS**: `.dmg` disk image and `.app` bundle 231 | - **Linux**: `.deb` package and `.appimage` 232 | 233 | ## 🤝 Contributing 234 | 235 | 1. Fork the repository 236 | 2. Create a feature branch: `git checkout -b feature/amazing-feature` 237 | 3. Make your changes 238 | 4. Run quality checks: `bunx biome check . --fix` 239 | 5. Test your changes: `bun run dev` 240 | 6. Commit your changes: `git commit -m 'Add amazing feature'` 241 | 7. Push to the branch: `git push origin feature/amazing-feature` 242 | 8. Open a Pull Request 243 | 244 | ## 📝 License 245 | 246 | This template is available under the MIT License. See the LICENSE file for more details. 247 | 248 | ## 🔗 Useful Links 249 | 250 | - [SvelteKit Documentation](https://kit.svelte.dev/) 251 | - [Tauri Documentation](https://tauri.app/) 252 | - [Servo Project](https://servo.org/) 253 | - [Rolldown](https://rolldown.rs/) 254 | - [Biome](https://biomejs.dev/) 255 | - [Tailwind CSS](https://tailwindcss.com/) 256 | - [ShadCn Svelte](https://shadcn-svelte.com/) 257 | 258 | ## 💡 Tips 259 | 260 | - Use `bun run dev` for the full development experience 261 | - The Servo rendering engine is experimental - report issues to help improve it 262 | - Biome is much faster than ESLint/Prettier - leverage it for better DX 263 | - Take advantage of Tailwind v4's new features for better styling 264 | - Use ShadCn components for consistent, accessible UI elements 265 | 266 | --- 267 | 268 | **Happy coding!** 🎉 This template represents the cutting edge of desktop application development with web technologies. 269 | 270 | ## Star History 271 | 272 | 273 | 274 | 275 | 276 | Star History Chart 277 | 278 | 279 | --------------------------------------------------------------------------------