add svelte

.changeset/smart-pandas-sing.md

@@ -0,0 +1,5 @@
+---
+"create-better-t-stack": patch
+---
+
+add svelte

apps/cli/README.md

@@ -21,22 +21,35 @@ Follow the prompts to configure your project or use the `--yes` flag for default
 
 ## Features
 
-- **Monorepo**: Turborepo for optimized build system and workspace management
-- **Frontend**: React, TanStack Router, TanStack Query, Tailwind CSS with shadcn/ui components
-- **Native Apps**: Create React Native apps with Expo for iOS and Android
-- **Backend Frameworks**: Choose between Hono, Express, or Elysia
-- **API Layer**: End-to-end type safety with tRPC
-- **Runtime Options**: Choose between Bun or Node.js for your server
-- **Database Options**: SQLite (via Turso), PostgreSQL, MongoDB, or no database
-- **ORM Selection**: Choose between Drizzle ORM or Prisma
-- **Authentication**: Optional auth setup with Better-Auth
-- **Progressive Web App**: Add PWA support with service workers and installable apps
-- **Desktop Apps**: Build native desktop apps with Tauri integration
-- **Documentation**: Add an Astro Starlight documentation site to your project
-- **Code Quality**: Biome for linting and formatting
-- **Git Hooks**: Husky with lint-staged for pre-commit checks
-- **Examples**: Todo app with full CRUD functionality, AI Chat using AI SDK
-- **Developer Experience**: Git initialization, various package manager support (npm, pnpm, bun)
+- **TypeScript**: End-to-end type safety.
+- **Monorepo Structure**: Choose between Turborepo for optimized builds or standard pnpm/npm/bun workspaces.
+- **Frontend Options**:
+  - React with Vite: TanStack Router, React Router, or TanStack Start.
+  - Next.js (Full-stack or frontend-only).
+  - Nuxt (Vue framework).
+  - SvelteKit.
+  - React Native with Expo for mobile apps.
+  - None.
+- **UI**: Tailwind CSS with shadcn/ui components pre-configured.
+- **Backend Frameworks**: Choose between Hono, Express, Elysia, or use Next.js API routes.
+- **API Layer**: End-to-end type safety with tRPC or oRPC.
+- **Runtime Options**: Choose between Bun or Node.js for your server.
+- **Database Options**: SQLite, PostgreSQL, MySQL, MongoDB, or no database.
+- **ORM Selection**: Choose between Drizzle ORM (TypeScript-first), Prisma (feature-rich), or no ORM.
+- **Database Setup**: Optional automated setup for Turso (SQLite), Neon (Postgres), Prisma Postgres (Supabase), or MongoDB Atlas.
+- **Authentication**: Optional auth setup using Better-Auth (email/password, OAuth coming soon).
+- **Addons**:
+  - **PWA**: Add Progressive Web App support.
+  - **Tauri**: Build native desktop applications.
+  - **Starlight**: Add an Astro-based documentation site.
+  - **Biome**: Integrated linting and formatting.
+  - **Husky**: Git hooks for code quality checks (lint-staged).
+  - **Turborepo**: Optimized monorepo build system.
+- **Examples**: Include pre-built examples like a Todo app or an AI Chat interface (using Vercel AI SDK).
+- **Developer Experience**:
+  - Automatic Git initialization.
+  - Choice of package manager (npm, pnpm, bun).
+  - Optional automatic dependency installation.
 
 ## Usage
 
@@ -50,53 +63,61 @@ Options:
   --orm <type>                    ORM type (none, drizzle, prisma)
   --auth                          Include authentication
   --no-auth                       Exclude authentication
-  --frontend <types...>           Frontend types (tanstack-router, react-router, tanstack-start, native, none)
-  --addons <types...>             Additional addons (pwa, tauri, starlight, biome, husky, none)
+  --frontend <types...>           Frontend types (tanstack-router, react-router, tanstack-start, next, nuxt, svelte, native, none)
+  --addons <types...>             Additional addons (pwa, tauri, starlight, biome, husky, turborepo, none)
   --examples <types...>           Examples to include (todo, ai, none)
   --git                           Initialize git repository
   --no-git                        Skip git initialization
   --package-manager <pm>          Package manager (npm, pnpm, bun)
   --install                       Install dependencies
   --no-install                    Skip installing dependencies
-  --db-setup <setup>              Database setup (turso, prisma-postgres, mongodb-atlas, none)
+  --db-setup <setup>              Database setup (turso, neon, prisma-postgres, mongodb-atlas, none)
   --backend <framework>           Backend framework (hono, express, elysia)
   --runtime <runtime>             Runtime (bun, node)
+  --api <type>                    API type (trpc, orpc)
   -h, --help                      Display help
 ```
 
 ## Examples
 
 Create a project with default configuration:
+
 ```bash
 npx create-better-t-stack my-app --yes
 ```
 
 Create a project with specific options:
+
 ```bash
 npx create-better-t-stack my-app --database postgres --orm drizzle --auth --addons pwa biome
 ```
 
 Create a project with Elysia and Node.js runtime:
+
 ```bash
 npx create-better-t-stack my-app --backend elysia --runtime node
 ```
 
 Create a project with specific frontend options:
+
 ```bash
 npx create-better-t-stack my-app --frontend tanstack-router native
 ```
 
 Create a project with examples:
+
 ```bash
 npx create-better-t-stack my-app --examples todo ai
 ```
 
 Create a project with Turso database setup:
+
 ```bash
 npx create-better-t-stack my-app --db-setup turso
 ```
 
 Create a project with documentation site:
+
 ```bash
 npx create-better-t-stack my-app --addons starlight
 ```

apps/cli/src/constants.ts

@@ -75,6 +75,7 @@ export const dependencyVersionMap = {
 	ai: "^4.2.8",
 	"@ai-sdk/google": "^1.2.3",
 	"@ai-sdk/vue": "^1.2.8",
+	"@ai-sdk/svelte": "^2.1.9",
 
 	"@prisma/extension-accelerate": "^1.3.0",
 
@@ -82,6 +83,7 @@ export const dependencyVersionMap = {
 	"@orpc/client": "^1.1.0",
 	"@orpc/react-query": "^1.1.0",
 	"@orpc/vue-query": "^1.1.0",
+	"@orpc/svelte-query": "^1.1.0",
 
 	"@trpc/tanstack-react-query": "^11.0.0",
 	"@trpc/server": "^11.0.0",

apps/cli/src/helpers/addons-setup.ts

@@ -13,6 +13,7 @@ export async function setupAddons(config: ProjectConfig) {
 	const hasReactWebFrontend =
 		frontend.includes("react-router") || frontend.includes("tanstack-router");
 	const hasNuxtFrontend = frontend.includes("nuxt");
+	const hasSvelteFrontend = frontend.includes("svelte");
 
 	if (addons.includes("turborepo")) {
 		await addPackageDependency({
@@ -24,7 +25,10 @@ export async function setupAddons(config: ProjectConfig) {
 	if (addons.includes("pwa") && hasReactWebFrontend) {
 		await setupPwa(projectDir, frontend);
 	}
-	if (addons.includes("tauri") && (hasReactWebFrontend || hasNuxtFrontend)) {
+	if (
+		addons.includes("tauri") &&
+		(hasReactWebFrontend || hasNuxtFrontend || hasSvelteFrontend)
+	) {
 		await setupTauri(config);
 	}
 	if (addons.includes("biome")) {
@@ -38,10 +42,17 @@ export async function setupAddons(config: ProjectConfig) {
 	}
 }
 
-export function getWebAppDir(
+function getWebAppDir(
 	projectDir: string,
 	frontends: ProjectFrontend[],
 ): string {
+	if (
+		frontends.some((f) =>
+			["react-router", "tanstack-router", "nuxt", "svelte"].includes(f),
+		)
+	) {
+		return path.join(projectDir, "apps/web");
+	}
 	return path.join(projectDir, "apps/web");
 }
 

apps/cli/src/helpers/api-setup.ts

@@ -13,6 +13,7 @@ export async function setupApi(config: ProjectConfig): Promise<void> {
 		["tanstack-router", "react-router", "tanstack-start", "next"].includes(f),
 	);
 	const hasNuxtWeb = frontend.includes("nuxt");
+	const hasSvelteWeb = frontend.includes("svelte");
 
 	if (api === "orpc") {
 		await addPackageDependency({
@@ -61,6 +62,13 @@ export async function setupApi(config: ProjectConfig): Promise<void> {
 					projectDir: webDir,
 				});
 			}
+		} else if (hasSvelteWeb) {
+			if (api === "orpc") {
+				await addPackageDependency({
+					dependencies: ["@orpc/svelte-query", "@orpc/client", "@orpc/server"],
+					projectDir: webDir,
+				});
+			}
 		}
 	}
 

apps/cli/src/helpers/auth-setup.ts

@@ -32,6 +32,7 @@ export async function setupAuth(config: ProjectConfig): Promise<void> {
 				"tanstack-start",
 				"next",
 				"nuxt",
+				"svelte",
 			].includes(f),
 		);
 

apps/cli/src/helpers/create-readme.ts

@@ -39,20 +39,34 @@ function generateReadmeContent(options: ProjectConfig): string {
 	const hasNative = frontend.includes("native");
 	const hasNext = frontend.includes("next");
 	const hasTanstackStart = frontend.includes("tanstack-start");
+	const hasSvelte = frontend.includes("svelte");
+	const hasNuxt = frontend.includes("nuxt");
 
 	const packageManagerRunCmd =
 		packageManager === "npm" ? "npm run" : packageManager;
 
 	let webPort = "3001";
-	if (hasReactRouter) {
+	if (hasReactRouter || hasSvelte) {
 		webPort = "5173";
-	} else if (hasNext) {
-		webPort = "3000";
 	}
 
 	return `# ${projectName}
 
-This project was created with [Better-T-Stack](https://github.com/AmanVarshney01/create-better-t-stack), a modern TypeScript stack that combines React, ${hasTanstackRouter ? "TanStack Router" : hasReactRouter ? "React Router" : hasNext ? "Next.js" : hasTanstackStart ? "TanStack Start" : ""}, ${backend[0].toUpperCase() + backend.slice(1)}, tRPC, and more.
+This project was created with [Better-T-Stack](https://github.com/AmanVarshney01/create-better-t-stack), a modern TypeScript stack that combines React, ${
+		hasTanstackRouter
+			? "TanStack Router"
+			: hasReactRouter
+				? "React Router"
+				: hasNext
+					? "Next.js"
+					: hasTanstackStart
+						? "TanStack Start"
+						: hasSvelte
+							? "SvelteKit"
+							: hasNuxt
+								? "Nuxt"
+								: ""
+	}, ${backend[0].toUpperCase() + backend.slice(1)}, tRPC, and more.
 
 ## Features
 
@@ -75,7 +89,12 @@ ${packageManagerRunCmd} dev
 \`\`\`
 
 ${
-	hasTanstackRouter || hasReactRouter || hasNext || hasTanstackStart
+	hasTanstackRouter ||
+	hasReactRouter ||
+	hasNext ||
+	hasTanstackStart ||
+	hasSvelte ||
+	hasNuxt
 		? `Open [http://localhost:${webPort}](http://localhost:${webPort}) in your browser to see the web application.`
 		: ""
 }
@@ -93,12 +112,53 @@ ${
 \`\`\`
 ${projectName}/
 ├── apps/
-${hasTanstackRouter || hasReactRouter || hasNext || hasTanstackStart ? `│   ├── web/         # Frontend application (${hasTanstackRouter ? "React + TanStack Router" : hasReactRouter ? "React + React Router" : hasNext ? "Next.js" : "React + TanStack Start"})\n` : ""}${hasNative ? "│   ├── native/      # Mobile application (React Native, Expo)\n" : ""}${addons.includes("starlight") ? "│   ├── docs/        # Documentation site (Astro Starlight)\n" : ""}│   └── server/      # Backend API (${backend[0].toUpperCase() + backend.slice(1)}, tRPC)
+${
+	hasTanstackRouter ||
+	hasReactRouter ||
+	hasNext ||
+	hasTanstackStart ||
+	hasSvelte ||
+	hasNuxt
+		? `│   ├── web/         # Frontend application (${
+				hasTanstackRouter
+					? "React + TanStack Router"
+					: hasReactRouter
+						? "React + React Router"
+						: hasNext
+							? "Next.js"
+							: hasTanstackStart
+								? "React + TanStack Start"
+								: hasSvelte
+									? "SvelteKit"
+									: hasNuxt
+										? "Nuxt"
+										: ""
+			})\n`
+		: ""
+}${
+	hasNative
+		? "│   ├── native/      # Mobile application (React Native, Expo)\n"
+		: ""
+}${
+	addons.includes("starlight")
+		? "│   ├── docs/        # Documentation site (Astro Starlight)\n"
+		: ""
+}│   └── server/      # Backend API (${
+		backend[0].toUpperCase() + backend.slice(1)
+	}, tRPC)
 \`\`\`
 
 ## Available Scripts
 
-${generateScriptsList(packageManagerRunCmd, database, orm, auth, hasNative, addons, backend)}
+${generateScriptsList(
+	packageManagerRunCmd,
+	database,
+	orm,
+	auth,
+	hasNative,
+	addons,
+	backend,
+)}
 `;
 }
 
@@ -116,6 +176,8 @@ function generateFeaturesList(
 	const hasNative = frontend.includes("native");
 	const hasNext = frontend.includes("next");
 	const hasTanstackStart = frontend.includes("tanstack-start");
+	const hasSvelte = frontend.includes("svelte");
+	const hasNuxt = frontend.includes("nuxt");
 
 	const addonsList = [
 		"- **TypeScript** - For type safety and improved developer experience",
@@ -133,6 +195,10 @@ function generateFeaturesList(
 		addonsList.push(
 			"- **TanStack Start** - SSR framework with TanStack Router",
 		);
+	} else if (hasSvelte) {
+		addonsList.push("- **SvelteKit** - Web framework for building Svelte apps");
+	} else if (hasNuxt) {
+		addonsList.push("- **Nuxt** - The Intuitive Vue Framework");
 	}
 
 	if (hasNative) {
@@ -162,8 +228,18 @@ function generateFeaturesList(
 
 	if (database !== "none") {
 		addonsList.push(
-			`- **${orm === "drizzle" ? "Drizzle" : "Prisma"}** - TypeScript-first ORM`,
-			`- **${database === "sqlite" ? "SQLite/Turso" : database === "postgres" ? "PostgreSQL" : database === "mysql" ? "MySQL" : "MongoDB"}** - Database engine`,
+			`- **${
+				orm === "drizzle" ? "Drizzle" : "Prisma"
+			}** - TypeScript-first ORM`,
+			`- **${
+				database === "sqlite"
+					? "SQLite/Turso"
+					: database === "postgres"
+						? "PostgreSQL"
+						: database === "mysql"
+							? "MySQL"
+							: "MongoDB"
+			}** - Database engine`,
 		);
 	}
 
@@ -203,7 +279,9 @@ function generateDatabaseSetup(
 	let setup = "## Database Setup\n\n";
 
 	if (database === "sqlite") {
-		setup += `This project uses SQLite${orm === "drizzle" ? " with Drizzle ORM" : " with Prisma"}.
+		setup += `This project uses SQLite${
+			orm === "drizzle" ? " with Drizzle ORM" : " with Prisma"
+		}.
 
 1. Start the local SQLite database:
 \`\`\`bash
@@ -213,13 +291,17 @@ cd apps/server && ${packageManagerRunCmd} db:local
 2. Update your \`.env\` file in the \`apps/server\` directory with the appropriate connection details if needed.
 `;
 	} else if (database === "postgres") {
-		setup += `This project uses PostgreSQL${orm === "drizzle" ? " with Drizzle ORM" : " with Prisma"}.
+		setup += `This project uses PostgreSQL${
+			orm === "drizzle" ? " with Drizzle ORM" : " with Prisma"
+		}.
 
 1. Make sure you have a PostgreSQL database set up.
 2. Update your \`apps/server/.env\` file with your PostgreSQL connection details.
 `;
 	} else if (database === "mysql") {
-		setup += `This project uses MySQL${orm === "drizzle" ? " with Drizzle ORM" : " with Prisma"}.
+		setup += `This project uses MySQL${
+			orm === "drizzle" ? " with Drizzle ORM" : " with Prisma"
+		}.
 
 1. Make sure you have a MySQL database set up.
 2. Update your \`apps/server/.env\` file with your MySQL connection details.

apps/cli/src/helpers/env-setup.ts

@@ -55,15 +55,17 @@ export async function setupEnvironmentVariables(
 	const hasTanStackStart = options.frontend.includes("tanstack-start");
 	const hasNextJs = options.frontend.includes("next");
 	const hasNuxt = options.frontend.includes("nuxt");
+	const hasSvelte = options.frontend.includes("svelte");
 	const hasWebFrontend =
 		hasReactRouter ||
 		hasTanStackRouter ||
 		hasTanStackStart ||
 		hasNextJs ||
-		hasNuxt;
+		hasNuxt ||
+		hasSvelte;
 
 	let corsOrigin = "http://localhost:3001";
-	if (hasReactRouter) {
+	if (hasReactRouter || hasSvelte) {
 		corsOrigin = "http://localhost:5173";
 	} else if (hasTanStackRouter || hasTanStackStart || hasNextJs || hasNuxt) {
 		corsOrigin = "http://localhost:3001";
@@ -128,6 +130,8 @@ export async function setupEnvironmentVariables(
 			envVarName = "NEXT_PUBLIC_SERVER_URL";
 		} else if (hasNuxt) {
 			envVarName = "NUXT_PUBLIC_SERVER_URL";
+		} else if (hasSvelte) {
+			envVarName = "PUBLIC_SERVER_URL";
 		}
 
 		const clientVars: EnvVariable[] = [

apps/cli/src/helpers/examples-setup.ts

@@ -14,11 +14,14 @@ export async function setupExamples(config: ProjectConfig): Promise<void> {
 		const clientDirExists = await fs.pathExists(clientDir);
 
 		const hasNuxt = frontend.includes("nuxt");
+		const hasSvelte = frontend.includes("svelte");
 
 		if (clientDirExists) {
 			const dependencies: AvailableDependencies[] = ["ai"];
 			if (hasNuxt) {
 				dependencies.push("@ai-sdk/vue");
+			} else if (hasSvelte) {
+				dependencies.push("@ai-sdk/svelte");
 			}
 			await addPackageDependency({
 				dependencies,

apps/cli/src/helpers/post-installation.ts

@@ -39,7 +39,7 @@ export function displayPostInstallInstructions(
 	const pwaInstructions =
 		addons?.includes("pwa") &&
 		(frontend?.includes("react-router") ||
-			frontend?.includes("tanstack-router")) // Exclude Nuxt from PWA instructions
+			frontend?.includes("tanstack-router"))
 			? getPwaInstructions()
 			: "";
 	const starlightInstructions = addons?.includes("starlight")
@@ -51,7 +51,7 @@ export function displayPostInstallInstructions(
 			"react-router",
 			"next",
 			"tanstack-start",
-			"nuxt", // Include Nuxt here
+			"nuxt",
 		].includes(f),
 	);
 	const hasNative = frontend?.includes("native");
@@ -65,13 +65,13 @@ export function displayPostInstallInstructions(
 	const hasTanstackRouter = frontend?.includes("tanstack-router");
 	const hasTanstackStart = frontend?.includes("tanstack-start");
 	const hasReactRouter = frontend?.includes("react-router");
-	const hasNuxt = frontend?.includes("nuxt"); // Add Nuxt check
+	const hasNuxt = frontend?.includes("nuxt");
 	const hasWebFrontend =
-		hasTanstackRouter || hasReactRouter || hasTanstackStart || hasNuxt; // Include Nuxt
+		hasTanstackRouter || hasReactRouter || hasTanstackStart || hasNuxt;
 	const hasNativeFrontend = frontend?.includes("native");
 	const hasFrontend = hasWebFrontend || hasNativeFrontend;
 
-	const webPort = hasReactRouter ? "5173" : "3001"; // Nuxt uses 3001, same as others
+	const webPort = hasReactRouter ? "5173" : "3001";
 	const tazeCommand = getPackageExecutionCommand(packageManager, "taze -r");
 
 	consola.box(

apps/cli/src/helpers/tauri-setup.ts

@@ -41,14 +41,22 @@ export async function setupTauri(config: ProjectConfig): Promise<void> {
 			await fs.writeJson(clientPackageJsonPath, packageJson, { spaces: 2 });
 		}
 
+		const hasTanstackRouter = frontend.includes("tanstack-router");
 		const hasReactRouter = frontend.includes("react-router");
 		const hasNuxt = frontend.includes("nuxt");
+		const hasSvelte = frontend.includes("svelte");
 
 		const devUrl = hasReactRouter
 			? "http://localhost:5173"
-			: "http://localhost:3001";
+			: hasSvelte
+				? "http://localhost:5173"
+				: "http://localhost:3001";
 
-		const frontendDist = hasNuxt ? "../.output/public" : "../dist";
+		const frontendDist = hasNuxt
+			? "../.output/public"
+			: hasSvelte
+				? "../build"
+				: "../dist";
 
 		const tauriArgs = [
 			"init",

apps/cli/src/helpers/template-manager.ts

@@ -31,6 +31,9 @@ async function processAndCopyFiles(
 		if (path.basename(relativeSrcPath) === "_gitignore") {
 			relativeDestPath = path.join(path.dirname(relativeSrcPath), ".gitignore");
 		}
+		if (path.basename(relativeSrcPath) === "_npmrc") {
+			relativeDestPath = path.join(path.dirname(relativeSrcPath), ".npmrc");
+		}
 
 		const destPath = path.join(destDir, relativeDestPath);
 
@@ -64,9 +67,10 @@ export async function setupFrontendTemplates(
 		["tanstack-router", "react-router", "tanstack-start", "next"].includes(f),
 	);
 	const hasNuxtWeb = context.frontend.includes("nuxt");
+	const hasSvelteWeb = context.frontend.includes("svelte");
 	const hasNative = context.frontend.includes("native");
 
-	if (hasReactWeb || hasNuxtWeb) {
+	if (hasReactWeb || hasNuxtWeb || hasSvelteWeb) {
 		const webAppDir = path.join(projectDir, "apps/web");
 		await fs.ensureDir(webAppDir);
 
@@ -116,6 +120,25 @@ export async function setupFrontendTemplates(
 			if (await fs.pathExists(apiWebNuxtDir)) {
 				await processAndCopyFiles("**/*", apiWebNuxtDir, webAppDir, context);
 			}
+		} else if (hasSvelteWeb) {
+			const svelteBaseDir = path.join(PKG_ROOT, "templates/frontend/svelte");
+			if (await fs.pathExists(svelteBaseDir)) {
+				await processAndCopyFiles("**/*", svelteBaseDir, webAppDir, context);
+			}
+			if (context.api === "orpc") {
+				const apiWebSvelteDir = path.join(
+					PKG_ROOT,
+					`templates/api/${context.api}/web/svelte`,
+				);
+				if (await fs.pathExists(apiWebSvelteDir)) {
+					await processAndCopyFiles(
+						"**/*",
+						apiWebSvelteDir,
+						webAppDir,
+						context,
+					);
+				}
+			}
 		}
 	}
 
@@ -255,6 +278,7 @@ export async function setupAuthTemplate(
 		["tanstack-router", "react-router", "tanstack-start", "next"].includes(f),
 	);
 	const hasNuxtWeb = context.frontend.includes("nuxt");
+	const hasSvelteWeb = context.frontend.includes("svelte");
 	const hasNative = context.frontend.includes("native");
 
 	if (serverAppDirExists) {
@@ -310,7 +334,7 @@ export async function setupAuthTemplate(
 		}
 	}
 
-	if ((hasReactWeb || hasNuxtWeb) && webAppDirExists) {
+	if ((hasReactWeb || hasNuxtWeb || hasSvelteWeb) && webAppDirExists) {
 		if (hasReactWeb) {
 			const authWebBaseSrc = path.join(
 				PKG_ROOT,
@@ -343,6 +367,21 @@ export async function setupAuthTemplate(
 			if (await fs.pathExists(authWebNuxtSrc)) {
 				await processAndCopyFiles("**/*", authWebNuxtSrc, webAppDir, context);
 			}
+		} else if (hasSvelteWeb) {
+			if (context.api === "orpc") {
+				const authWebSvelteSrc = path.join(
+					PKG_ROOT,
+					"templates/auth/web/svelte",
+				);
+				if (await fs.pathExists(authWebSvelteSrc)) {
+					await processAndCopyFiles(
+						"**/*",
+						authWebSvelteSrc,
+						webAppDir,
+						context,
+					);
+				}
+			}
 		}
 	}
 
@@ -403,6 +442,7 @@ export async function setupExamplesTemplate(
 		["tanstack-router", "react-router", "tanstack-start", "next"].includes(f),
 	);
 	const hasNuxtWeb = context.frontend.includes("nuxt");
+	const hasSvelteWeb = context.frontend.includes("svelte");
 
 	for (const example of context.examples) {
 		if (example === "none") continue;
@@ -476,7 +516,6 @@ export async function setupExamplesTemplate(
 				}
 			}
 		} else if (hasNuxtWeb && webAppDirExists) {
-			// Only copy Nuxt examples if the API is oRPC (as tRPC is not supported)
 			if (context.api === "orpc") {
 				const exampleWebNuxtSrc = path.join(exampleBaseDir, "web/nuxt");
 				if (await fs.pathExists(exampleWebNuxtSrc)) {
@@ -488,14 +527,22 @@ export async function setupExamplesTemplate(
 						false,
 					);
 				} else {
-					consola.info(
-						pc.gray(
-							`Skipping Nuxt web template for example '${example}' (template not found).`,
-						),
-					);
 				}
 			}
-			// If API is tRPC, skip Nuxt examples silently as CLI validation prevents this combo.
+		} else if (hasSvelteWeb && webAppDirExists) {
+			if (context.api === "orpc") {
+				const exampleWebSvelteSrc = path.join(exampleBaseDir, "web/svelte");
+				if (await fs.pathExists(exampleWebSvelteSrc)) {
+					await processAndCopyFiles(
+						"**/*",
+						exampleWebSvelteSrc,
+						webAppDir,
+						context,
+						false,
+					);
+				} else {
+				}
+			}
 		}
 	}
 }

apps/cli/src/index.ts

@@ -77,6 +77,7 @@ async function main() {
 					"next",
 					"nuxt",
 					"native",
+					"svelte",
 					"none",
 				],
 			})
@@ -270,11 +271,12 @@ function processAndValidateFlags(
 					f === "react-router" ||
 					f === "tanstack-start" ||
 					f === "next" ||
-					f === "nuxt",
+					f === "nuxt" ||
+					f === "svelte",
 			);
 			if (webFrontends.length > 1) {
 				consola.fatal(
-					"Cannot select multiple web frameworks. Choose only one of: tanstack-router, tanstack-start, react-router, next, nuxt",
+					"Cannot select multiple web frameworks. Choose only one of: tanstack-router, tanstack-start, react-router, next, nuxt, svelte",
 				);
 				process.exit(1);
 			}
@@ -446,17 +448,21 @@ function processAndValidateFlags(
 		}
 	}
 
-	const includesNative = effectiveFrontend?.includes("native");
 	const includesNuxt = effectiveFrontend?.includes("nuxt");
+	const includesSvelte = effectiveFrontend?.includes("svelte");
 
-	if (includesNuxt && effectiveApi === "trpc") {
+	if ((includesNuxt || includesSvelte) && effectiveApi === "trpc") {
 		consola.fatal(
-			`tRPC API is not supported with 'nuxt' frontend. Please use --api orpc or remove 'nuxt' from --frontend.`,
+			`tRPC API is not supported with '${
+				includesNuxt ? "nuxt" : "svelte"
+			}' frontend. Please use --api orpc or remove '${
+				includesNuxt ? "nuxt" : "svelte"
+			}' from --frontend.`,
 		);
 		process.exit(1);
 	}
 	if (
-		includesNuxt &&
+		(includesNuxt || includesSvelte) &&
 		effectiveApi !== "orpc" &&
 		(!options.api || (options.yes && options.api !== "trpc"))
 	) {
@@ -474,7 +480,10 @@ function processAndValidateFlags(
 				f === "react-router" ||
 				(f === "nuxt" &&
 					config.addons?.includes("tauri") &&
-					!config.addons?.includes("pwa")), // Nuxt compatible with Tauri, not PWA
+					!config.addons?.includes("pwa")) ||
+				(f === "svelte" &&
+					config.addons?.includes("tauri") &&
+					!config.addons?.includes("pwa")),
 		);
 
 		if (hasWebSpecificAddons && !hasCompatibleWebFrontend) {
@@ -486,7 +495,7 @@ function processAndValidateFlags(
 				config.addons.includes("tauri")
 			) {
 				incompatibleAddon =
-					"PWA and Tauri addons require tanstack-router, react-router, or Nuxt (Tauri only).";
+					"PWA and Tauri addons require tanstack-router, react-router, or Nuxt/Svelte (Tauri only).";
 			}
 			consola.fatal(
 				`${incompatibleAddon} Cannot use these addons with your frontend selection.`,
@@ -517,12 +526,13 @@ function processAndValidateFlags(
 				"tanstack-start",
 				"next",
 				"nuxt",
+				"svelte",
 			].includes(f),
 		);
 
 		if (config.examples.length > 0 && !hasWebFrontendForExamples) {
 			consola.fatal(
-				"Examples require a web frontend (tanstack-router, react-router, tanstack-start, next, or nuxt).",
+				"Examples require a web frontend (tanstack-router, react-router, tanstack-start, next, nuxt, or svelte).",
 			);
 			process.exit(1);
 		}
@@ -538,5 +548,5 @@ main().catch((err) => {
 	} else {
 		console.error(err);
 	}
-	process.exit(1); // Ensure exit on error
+	process.exit(1);
 });

apps/cli/src/prompts/addons.ts

@@ -3,65 +3,75 @@ import pc from "picocolors";
 import { DEFAULT_CONFIG } from "../constants";
 import type { ProjectAddons, ProjectFrontend } from "../types";
 
+type AddonOption = {
+	value: ProjectAddons;
+	label: string;
+	hint: string;
+};
+
 export async function getAddonsChoice(
 	addons?: ProjectAddons[],
 	frontends?: ProjectFrontend[],
 ): Promise<ProjectAddons[]> {
 	if (addons !== undefined) return addons;
 
-	const hasCompatibleWebFrontend =
+	const hasCompatiblePwaFrontend =
 		frontends?.includes("react-router") ||
 		frontends?.includes("tanstack-router");
 
-	const addonOptions = [
+	const hasCompatibleTauriFrontend =
+		frontends?.includes("react-router") ||
+		frontends?.includes("tanstack-router") ||
+		frontends?.includes("nuxt") ||
+		frontends?.includes("svelte");
+
+	const allPossibleOptions: AddonOption[] = [
 		{
-			value: "turborepo" as const,
+			value: "turborepo",
 			label: "Turborepo (Recommended)",
 			hint: "Optimize builds for monorepos",
 		},
 		{
-			value: "starlight" as const,
+			value: "starlight",
 			label: "Starlight",
 			hint: "Add Astro Starlight documentation site",
 		},
 		{
-			value: "biome" as const,
+			value: "biome",
 			label: "Biome",
 			hint: "Add Biome for linting and formatting",
 		},
 		{
-			value: "husky" as const,
+			value: "husky",
 			label: "Husky",
 			hint: "Add Git hooks with Husky, lint-staged (requires Biome)",
 		},
-	];
-
-	const webAddonOptions = [
 		{
-			value: "pwa" as const,
+			value: "pwa",
 			label: "PWA (Progressive Web App)",
 			hint: "Make your app installable and work offline",
 		},
 		{
-			value: "tauri" as const,
+			value: "tauri",
 			label: "Tauri Desktop App",
 			hint: "Build native desktop apps from your web frontend",
 		},
 	];
 
-	const options = hasCompatibleWebFrontend
-		? [...addonOptions, ...webAddonOptions]
-		: addonOptions;
+	const options = allPossibleOptions.filter((option) => {
+		if (option.value === "pwa") return hasCompatiblePwaFrontend;
+		if (option.value === "tauri") return hasCompatibleTauriFrontend;
+		return true;
+	});
 
-	const initialValues = DEFAULT_CONFIG.addons.filter(
-		(addon) =>
-			hasCompatibleWebFrontend || (addon !== "pwa" && addon !== "tauri"),
+	const initialValues = DEFAULT_CONFIG.addons.filter((addonValue) =>
+		options.some((opt) => opt.value === addonValue),
 	);
 
-	const response = await multiselect<ProjectAddons>({
+	const response = await multiselect({
 		message: "Select addons",
-		options,
-		initialValues,
+		options: options,
+		initialValues: initialValues,
 		required: false,
 	});
 

apps/cli/src/prompts/api.ts

@@ -10,6 +10,7 @@ export async function getApiChoice(
 	if (Api) return Api;
 
 	const includesNuxt = frontend?.includes("nuxt");
+	const includesSvelte = frontend?.includes("svelte");
 
 	let apiOptions = [
 		{
@@ -24,12 +25,14 @@ export async function getApiChoice(
 		},
 	];
 
-	if (includesNuxt) {
+	if (includesNuxt || includesSvelte) {
 		apiOptions = [
 			{
 				value: "orpc" as const,
 				label: "oRPC",
-				hint: "End-to-end type-safe APIs (Required for Nuxt frontend)",
+				hint: `End-to-end type-safe APIs (Required for ${
+					includesNuxt ? "Nuxt" : "Svelte"
+				} frontend)`,
 			},
 		];
 	}
@@ -37,7 +40,7 @@ export async function getApiChoice(
 	const apiType = await select<ProjectApi>({
 		message: "Select API type",
 		options: apiOptions,
-		initialValue: includesNuxt ? "orpc" : DEFAULT_CONFIG.api,
+		initialValue: includesNuxt || includesSvelte ? "orpc" : DEFAULT_CONFIG.api,
 	});
 
 	if (isCancel(apiType)) {
@@ -45,7 +48,7 @@ export async function getApiChoice(
 		process.exit(0);
 	}
 
-	if (includesNuxt && apiType !== "orpc") {
+	if ((includesNuxt || includesSvelte) && apiType !== "orpc") {
 		return "orpc";
 	}
 

apps/cli/src/prompts/examples.ts

@@ -22,8 +22,9 @@ export async function getExamplesChoice(
 		frontends?.includes("react-router") ||
 		frontends?.includes("tanstack-router") ||
 		frontends?.includes("tanstack-start") ||
-		frontends?.includes("next") || // Added next
-		frontends?.includes("nuxt"); // Added nuxt
+		frontends?.includes("next") ||
+		frontends?.includes("nuxt") ||
+		frontends?.includes("svelte");
 
 	if (!hasWebFrontend) return [];
 
@@ -36,7 +37,6 @@ export async function getExamplesChoice(
 		},
 	];
 
-	// AI example is available for hono, express, next backends, and Nuxt (if backend is not elysia)
 	if (backend !== "elysia") {
 		options.push({
 			value: "ai" as const,

apps/cli/src/prompts/frontend-option.ts

@@ -14,7 +14,7 @@ export async function getFrontendChoice(
 			{
 				value: "web",
 				label: "Web",
-				hint: "React or Vue Web Application",
+				hint: "React, Vue or Svelte Web Application",
 			},
 			{
 				value: "native",
@@ -29,7 +29,8 @@ export async function getFrontendChoice(
 				f === "react-router" ||
 				f === "tanstack-start" ||
 				f === "next" ||
-				f === "nuxt",
+				f === "nuxt" ||
+				f === "svelte",
 		)
 			? ["web"]
 			: [],
@@ -66,6 +67,11 @@ export async function getFrontendChoice(
 					label: "Nuxt",
 					hint: "The Progressive Web Framework for Vue.js",
 				},
+				{
+					value: "svelte",
+					label: "Svelte",
+					hint: "web development for the rest of us",
+				},
 				{
 					value: "tanstack-start",
 					label: "TanStack Start (beta)",
@@ -78,7 +84,9 @@ export async function getFrontendChoice(
 						f === "tanstack-router" ||
 						f === "react-router" ||
 						f === "tanstack-start" ||
-						f === "next",
+						f === "next" ||
+						f === "nuxt" ||
+						f === "svelte",
 				) || "tanstack-router",
 		});
 

apps/cli/src/types.ts

@@ -24,6 +24,7 @@ export type ProjectFrontend =
 	| "next"
 	| "nuxt"
 	| "native"
+	| "svelte"
 	| "none";
 export type ProjectDBSetup =
 	| "turso"

apps/cli/templates/api/orpc/web/svelte/src/lib/orpc.ts.hbs

@@ -0,0 +1,31 @@
+import { PUBLIC_SERVER_URL } from "$env/static/public";
+import { createORPCClient } from "@orpc/client";
+import { RPCLink } from "@orpc/client/fetch";
+import type { RouterClient } from "@orpc/server";
+import { createORPCSvelteQueryUtils } from "@orpc/svelte-query";
+import { QueryCache, QueryClient } from "@tanstack/svelte-query";
+import type { appRouter } from "../../../server/src/routers/index";
+
+export const queryClient = new QueryClient({
+	queryCache: new QueryCache({
+		onError: (error) => {
+			console.error(`Error: ${error.message}`);
+		},
+	}),
+});
+
+export const link = new RPCLink({
+	url: `${PUBLIC_SERVER_URL}/rpc`,
+	{{#if auth}}
+	fetch(url, options) {
+		return fetch(url, {
+			...options,
+			credentials: "include",
+		});
+	},
+	{{/if}}
+});
+
+export const client: RouterClient<typeof appRouter> = createORPCClient(link);
+
+export const orpc = createORPCSvelteQueryUtils(client);

apps/cli/templates/auth/web/svelte/src/components/SignInForm.svelte

@@ -0,0 +1,108 @@
+<script lang="ts">
+	import { createForm } from '@tanstack/svelte-form';
+	import { z } from 'zod';
+	import { authClient } from '$lib/auth-client';
+	import { goto } from '$app/navigation';
+
+	let { switchToSignUp } = $props<{ switchToSignUp: () => void }>();
+
+	const validationSchema = z.object({
+		email: z.string().email('Invalid email address'),
+		password: z.string().min(1, 'Password is required'),
+	});
+
+	const form = createForm(() => ({
+		defaultValues: { email: '', password: '' },
+		onSubmit: async ({ value }) => {
+				await authClient.signIn.email(
+					{ email: value.email, password: value.password },
+					{
+						onSuccess: () => goto('/dashboard'),
+						onError: (error) => {
+							console.log(error.error.message || 'Sign in failed. Please try again.');
+						},
+					}
+				);
+
+		},
+		validators: {
+			onSubmit: validationSchema,
+		},
+	}));
+</script>
+
+<div class="mx-auto mt-10 w-full max-w-md p-6">
+	<h1 class="mb-6 text-center font-bold text-3xl">Welcome Back</h1>
+
+	<form
+		class="space-y-4"
+		onsubmit={(e) => {
+			e.preventDefault();
+			e.stopPropagation();
+			form.handleSubmit();
+		}}
+	>
+		<form.Field name="email">
+			{#snippet children(field)}
+				<div class="space-y-1">
+					<label for={field.name}>Email</label>
+					<input
+						id={field.name}
+						name={field.name}
+						type="email"
+						class="w-full border"
+						onblur={field.handleBlur}
+						value={field.state.value}
+        oninput={(e: Event) => {
+            const target = e.target as HTMLInputElement
+            field.handleChange(target.value)
+          }}					/>
+					{#if field.state.meta.isTouched}
+						{#each field.state.meta.errors as error}
+							<p class="text-sm text-red-500" role="alert">{error}</p>
+						{/each}
+					{/if}
+				</div>
+			{/snippet}
+		</form.Field>
+
+		<form.Field name="password">
+			{#snippet children(field)}
+				<div class="space-y-1">
+					<label for={field.name}>Password</label>
+					<input
+						id={field.name}
+						name={field.name}
+						type="password"
+						class="w-full border"
+						onblur={field.handleBlur}
+					 value={field.state.value}
+      oninput={(e: Event) => {
+            const target = e.target as HTMLInputElement
+            field.handleChange(target.value)
+          }}
+					/>
+					{#if field.state.meta.isTouched}
+						{#each field.state.meta.errors as error}
+							<p class="text-sm text-red-500" role="alert">{error}</p>
+						{/each}
+					{/if}
+				</div>
+			{/snippet}
+		</form.Field>
+
+		<form.Subscribe selector={(state) => ({ canSubmit: state.canSubmit, isSubmitting: state.isSubmitting })}>
+			{#snippet children(state)}
+				<button type="submit" class="w-full" disabled={!state.canSubmit || state.isSubmitting}>
+					{state.isSubmitting ? 'Submitting...' : 'Sign In'}
+				</button>
+			{/snippet}
+		</form.Subscribe>
+	</form>
+
+	<div class="mt-4 text-center">
+		<button type="button" class="text-indigo-600 hover:text-indigo-800" onclick={switchToSignUp}>
+			Need an account? Sign Up
+		</button>
+	</div>
+</div>

apps/cli/templates/auth/web/svelte/src/components/SignUpForm.svelte

@@ -0,0 +1,142 @@
+<script lang="ts">
+	import { createForm } from '@tanstack/svelte-form';
+	import { z } from 'zod';
+	import { authClient } from '$lib/auth-client';
+	import { goto } from '$app/navigation';
+
+	let { switchToSignIn } = $props<{ switchToSignIn: () => void }>();
+
+	const validationSchema = z.object({
+		name: z.string().min(2, 'Name must be at least 2 characters'),
+		email: z.string().email('Invalid email address'),
+		password: z.string().min(6, 'Password must be at least 6 characters'),
+	});
+
+
+	const form = createForm(() => ({
+		defaultValues: { name: '', email: '', password: '' },
+		onSubmit: async ({ value }) => {
+				await authClient.signUp.email(
+					{
+						email: value.email,
+						password: value.password,
+						name: value.name,
+					},
+					{
+						onSuccess: () => {
+							goto('/dashboard');
+						},
+						onError: (error) => {
+							console.log(error.error.message || 'Sign up failed. Please try again.');
+						},
+					}
+				);
+
+		},
+		validators: {
+			onSubmit: validationSchema,
+		},
+	}));
+</script>
+
+<div class="mx-auto mt-10 w-full max-w-md p-6">
+	<h1 class="mb-6 text-center font-bold text-3xl">Create Account</h1>
+
+	<form
+		id="form"
+		class="space-y-4"
+		onsubmit={(e) => {
+			e.preventDefault();
+			e.stopPropagation();
+			form.handleSubmit();
+		}}
+	>
+		<form.Field name="name">
+			{#snippet children(field)}
+				<div class="space-y-1">
+					<label for={field.name}>Name</label>
+					<input
+						id={field.name}
+						name={field.name}
+						class="w-full border"
+						onblur={field.handleBlur}
+					 value={field.state.value}
+      oninput={(e: Event) => {
+            const target = e.target as HTMLInputElement
+            field.handleChange(target.value)
+          }}
+					/>
+					{#if field.state.meta.isTouched}
+						{#each field.state.meta.errors as error}
+							<p class="text-sm text-red-500" role="alert">{error}</p>
+						{/each}
+					{/if}
+				</div>
+			{/snippet}
+		</form.Field>
+
+		<form.Field name="email">
+			{#snippet children(field)}
+				<div class="space-y-1">
+					<label for={field.name}>Email</label>
+					<input
+						id={field.name}
+						name={field.name}
+						type="email"
+						class="w-full border"
+						onblur={field.handleBlur}
+      value={field.state.value}
+      oninput={(e: Event) => {
+            const target = e.target as HTMLInputElement
+            field.handleChange(target.value)
+          }}
+					/>
+					{#if field.state.meta.isTouched}
+						{#each field.state.meta.errors as error}
+							<p class="text-sm text-red-500" role="alert">{error}</p>
+						{/each}
+					{/if}
+				</div>
+			{/snippet}
+		</form.Field>
+
+		<form.Field name="password">
+			{#snippet children(field)}
+				<div class="space-y-1">
+					<label for={field.name}>Password</label>
+					<input
+						id={field.name}
+						name={field.name}
+						type="password"
+						class="w-full border"
+						onblur={field.handleBlur}
+					 value={field.state.value}
+      oninput={(e: Event) => {
+            const target = e.target as HTMLInputElement
+            field.handleChange(target.value)
+          }}
+					/>
+					{#if field.state.meta.errors}
+						{#each field.state.meta.errors as error}
+							<p class="text-sm text-red-500" role="alert">{error}</p>
+						{/each}
+					{/if}
+				</div>
+			{/snippet}
+		</form.Field>
+
+		<form.Subscribe selector={(state) => ({ canSubmit: state.canSubmit, isSubmitting: state.isSubmitting })}>
+			{#snippet children(state)}
+				<button type="submit" class="w-full" disabled={!state.canSubmit || state.isSubmitting}>
+					{state.isSubmitting ? 'Submitting...' : 'Sign Up'}
+				</button>
+			{/snippet}
+		</form.Subscribe>
+	</form>
+
+	<div class="mt-4 text-center">
+		<button type="button" class="text-indigo-600 hover:text-indigo-800" onclick={switchToSignIn}>
+			Already have an account? Sign In
+		</button>
+	</div>
+</div>

apps/cli/templates/auth/web/svelte/src/components/UserMenu.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import { authClient } from '$lib/auth-client';
+	import { goto } from '$app/navigation';
+	import { queryClient } from '$lib/orpc';
+
+	const sessionQuery = authClient.useSession();
+
+	async function handleSignOut() {
+		await authClient.signOut({
+		fetchOptions: {
+			onSuccess: () => {
+				queryClient.invalidateQueries();
+				goto('/');
+			},
+			onError: (error) => {
+				console.error('Sign out failed:', error);
+			}
+		}
+		});
+	}
+
+	function goToLogin() {
+		goto('/login');
+	}
+
+</script>
+
+<div class="relative">
+	{#if $sessionQuery.isPending}
+		<div class="h-8 w-24 animate-pulse rounded bg-neutral-700"></div>
+	{:else if $sessionQuery.data?.user}
+		{@const user = $sessionQuery.data.user}
+		<div class="flex items-center gap-3">
+			<span class="text-sm text-neutral-300 hidden sm:inline" title={user.email}>
+				{user.name || user.email?.split('@')[0] || 'User'}
+			</span>
+			<button
+				onclick={handleSignOut}
+				class="rounded px-3 py-1 text-sm bg-red-600 hover:bg-red-700 text-white transition-colors"
+			>
+				Sign Out
+			</button>
+		</div>
+	{:else}
+		<div class="flex items-center gap-2">
+			<button
+				onclick={goToLogin}
+				class="rounded px-3 py-1 text-sm bg-indigo-600 hover:bg-indigo-700 text-white transition-colors"
+			>
+				Sign In
+			</button>
+		</div>
+	{/if}
+</div>

apps/cli/templates/auth/web/svelte/src/lib/auth-client.ts

@@ -0,0 +1,6 @@
+import { PUBLIC_SERVER_URL } from "$env/static/public";
+import { createAuthClient } from "better-auth/svelte";
+
+export const authClient = createAuthClient({
+	baseURL: PUBLIC_SERVER_URL,
+});

apps/cli/templates/auth/web/svelte/src/routes/dashboard/+page.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { goto } from '$app/navigation';
+	import { authClient } from '$lib/auth-client';
+	import { orpc } from '$lib/orpc';
+	import { createQuery } from '@tanstack/svelte-query';
+	import { get } from 'svelte/store';
+
+	const sessionQuery = authClient.useSession();
+
+	const privateDataQuery = createQuery(orpc.privateData.queryOptions());
+
+	onMount(() => {
+		const { data: session, isPending } = get(sessionQuery);
+		if (!session && !isPending) {
+			goto('/login');
+		}
+	});
+</script>
+
+{#if $sessionQuery.isPending}
+	<div>Loading...</div>
+{:else if !$sessionQuery.data}
+	<!-- Redirecting... -->
+{:else}
+	<div>
+		<h1>Dashboard</h1>
+		<p>Welcome {$sessionQuery.data.user.name}</p>
+		<p>privateData: {$privateDataQuery.data?.message}</p>
+	</div>
+{/if}

apps/cli/templates/auth/web/svelte/src/routes/login/+page.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import SignInForm from '../../components/SignInForm.svelte';
+	import SignUpForm from '../../components/SignUpForm.svelte';
+
+	let showSignIn = $state(true);
+</script>
+
+{#if showSignIn}
+	<SignInForm switchToSignUp={() => showSignIn = false} />
+{:else}
+	<SignUpForm switchToSignIn={() => showSignIn = true} />
+{/if}

apps/cli/templates/examples/ai/web/nuxt/app/pages/ai.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { ref, watch, nextTick } from 'vue'
 import { useChat } from '@ai-sdk/vue'
+import { nextTick, ref, watch } from 'vue'
 
 const config = useRuntimeConfig()
 const serverUrl = config.public.serverURL
@@ -16,7 +16,6 @@ watch(messages, async () => {
   messagesEndRef.value?.scrollIntoView({ behavior: 'smooth' })
 })
 
-// Helper: Concatenate all text parts for a message
 function getMessageText(message: any) {
   return message.parts
     .filter((part: any) => part.type === 'text')

apps/cli/templates/examples/ai/web/svelte/src/routes/ai/+page.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+	import { PUBLIC_SERVER_URL } from '$env/static/public';
+	import { Chat } from '@ai-sdk/svelte';
+
+	const chat = new Chat({
+		api: `${PUBLIC_SERVER_URL}/ai`,
+	});
+
+	let messagesEndElement: HTMLDivElement | null = null;
+
+	$effect(() => {
+		const messageCount = chat.messages.length;
+		if (messageCount > 0) {
+			setTimeout(() => {
+				messagesEndElement?.scrollIntoView({ behavior: 'smooth' });
+			}, 0);
+		}
+	});
+
+</script>
+
+<div class="mx-auto grid h-full w-full max-w-2xl grid-rows-[1fr_auto] overflow-hidden p-4">
+	<div class="mb-4 space-y-4 overflow-y-auto pb-4">
+		{#if chat.messages.length === 0}
+			<div class="mt-8 text-center text-neutral-500">Ask the AI anything to get started!</div>
+		{/if}
+
+		{#each chat.messages as message (message.id)}
+			<div
+				class="w-fit max-w-[85%] rounded-lg p-3 text-sm md:text-base"
+				class:ml-auto={message.role === 'user'}
+				class:bg-indigo-600={message.role === 'user'}
+				class:text-white={message.role === 'user'}
+				class:bg-neutral-700={message.role === 'assistant'}
+				class:text-neutral-100={message.role === 'assistant'}
+			>
+				<p
+					class="mb-1 text-xs font-semibold uppercase tracking-wide"
+					class:text-indigo-200={message.role === 'user'}
+					class:text-neutral-400={message.role === 'assistant'}
+				>
+					{message.role === 'user' ? 'You' : 'AI Assistant'}
+				</p>
+				<div class="whitespace-pre-wrap break-words">
+					{#each message.parts as part, partIndex (partIndex)}
+						{#if part.type === 'text'}
+							{part.text}
+						{:else if part.type === 'tool-invocation'}
+							<pre class="mt-2 rounded bg-neutral-800 p-2 text-xs text-neutral-300"
+								>{JSON.stringify(part.toolInvocation, null, 2)}</pre
+							>
+						{/if}
+					{/each}
+				</div>
+			</div>
+		{/each}
+		<div bind:this={messagesEndElement}></div>
+	</div>
+
+	<form
+		onsubmit={chat.handleSubmit}
+		class="flex w-full items-center space-x-2 border-t border-neutral-700 pt-4"
+	>
+		<input
+			name="prompt"
+			bind:value={chat.input}
+			placeholder="Type your message..."
+			class="flex-1 rounded border border-neutral-600 bg-neutral-800 px-3 py-2 text-neutral-100 placeholder-neutral-500 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 disabled:opacity-50"
+			autocomplete="off"
+			onkeydown={(e) => {
+				if (e.key === 'Enter' && !e.shiftKey) {
+					e.preventDefault();
+					chat.handleSubmit(e);
+				}
+			}}
+		/>
+		<button
+			type="submit"
+			disabled={!chat.input.trim()}
+			class="inline-flex h-10 w-10 items-center justify-center rounded bg-indigo-600 text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-neutral-900 disabled:cursor-not-allowed disabled:opacity-50"
+			aria-label="Send message"
+		>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					width="18"
+					height="18"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="2"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				>
+					<path d="m22 2-7 20-4-9-9-4Z" /><path d="M22 2 11 13" />
+				</svg>
+		</button>
+	</form>
+</div>

apps/cli/templates/examples/todo/web/svelte/src/routes/todos/+page.svelte

@@ -0,0 +1,150 @@
+<script lang="ts">
+	import { orpc } from '$lib/orpc';
+	import { createQuery, createMutation } from '@tanstack/svelte-query';
+
+	let newTodoText = $state('');
+
+	const todosQuery = createQuery(orpc.todo.getAll.queryOptions());
+
+	const addMutation = createMutation(
+		orpc.todo.create.mutationOptions({
+			onSuccess: () => {
+				$todosQuery.refetch();
+				newTodoText = '';
+			},
+			onError: (error) => {
+				console.error('Failed to create todo:', error?.message ?? error);
+			},
+		})
+	);
+
+	const toggleMutation = createMutation(
+		orpc.todo.toggle.mutationOptions({
+			onSuccess: () => {
+				$todosQuery.refetch();
+			},
+			onError: (error) => {
+				console.error('Failed to toggle todo:', error?.message ?? error);
+			},
+		})
+	);
+
+	const deleteMutation = createMutation(
+		orpc.todo.delete.mutationOptions({
+			onSuccess: () => {
+				$todosQuery.refetch();
+			},
+			onError: (error) => {
+				console.error('Failed to delete todo:', error?.message ?? error);
+			},
+		})
+	);
+
+	function handleAddTodo(event: SubmitEvent) {
+		event.preventDefault();
+		const text = newTodoText.trim();
+		if (text) {
+			$addMutation.mutate({ text });
+		}
+	}
+
+	function handleToggleTodo(id: number, completed: boolean) {
+		$toggleMutation.mutate({ id, completed: !completed });
+	}
+
+	function handleDeleteTodo(id: number) {
+		$deleteMutation.mutate({ id });
+	}
+
+	const isAdding = $derived($addMutation.isPending);
+	const canAdd = $derived(!isAdding && newTodoText.trim().length > 0);
+	const isLoadingTodos = $derived($todosQuery.isLoading);
+	const todos = $derived($todosQuery.data ?? []);
+	const hasTodos = $derived(todos.length > 0);
+
+</script>
+
+<div class="p-4">
+	<h1 class="text-xl mb-4">Todos</h1>
+
+	<form onsubmit={handleAddTodo} class="flex gap-2 mb-4">
+		<input
+			type="text"
+			bind:value={newTodoText}
+			placeholder="New task..."
+			disabled={isAdding}
+			class=" p-1 flex-grow"
+		/>
+		<button
+			type="submit"
+			disabled={!canAdd}
+			class="bg-blue-500 text-white px-3 py-1 rounded disabled:opacity-50"
+		>
+			{#if isAdding}Adding...{:else}Add{/if}
+		</button>
+	</form>
+
+	{#if isLoadingTodos}
+		<p>Loading...</p>
+	{:else if !hasTodos}
+		<p>No todos yet.</p>
+	{:else}
+		<ul class="space-y-1">
+			{#each todos as todo (todo.id)}
+				{@const isToggling = $toggleMutation.isPending && $toggleMutation.variables?.id === todo.id}
+				{@const isDeleting = $deleteMutation.isPending && $deleteMutation.variables?.id === todo.id}
+				{@const isDisabled = isToggling || isDeleting}
+				<li
+					class="flex items-center justify-between p-2 "
+					class:opacity-50={isDisabled}
+				>
+					<div class="flex items-center gap-2">
+						<input
+							type="checkbox"
+							id={`todo-${todo.id}`}
+							checked={todo.completed}
+							onchange={() => handleToggleTodo(todo.id, todo.completed)}
+							disabled={isDisabled}
+						/>
+						<label
+							for={`todo-${todo.id}`}
+							class:line-through={todo.completed}
+						>
+							{todo.text}
+						</label>
+					</div>
+					<button
+						type="button"
+						onclick={() => handleDeleteTodo(todo.id)}
+						disabled={isDisabled}
+						aria-label="Delete todo"
+						class="text-red-500 px-1 disabled:opacity-50"
+					>
+						{#if isDeleting}Deleting...{:else}X{/if}
+					</button>
+				</li>
+			{/each}
+		</ul>
+	{/if}
+
+	{#if $todosQuery.isError}
+		<p class="mt-4 text-red-500">
+			Error loading: {$todosQuery.error?.message ?? 'Unknown error'}
+		</p>
+	{/if}
+	{#if $addMutation.isError}
+		<p class="mt-4 text-red-500">
+			Error adding: {$addMutation.error?.message ?? 'Unknown error'}
+		</p>
+	{/if}
+	{#if $toggleMutation.isError}
+		<p class="mt-4 text-red-500">
+			Error updating: {$toggleMutation.error?.message ?? 'Unknown error'}
+		</p>
+	{/if}
+	{#if $deleteMutation.isError}
+		<p class="mt-4 text-red-500">
+			Error deleting: {$deleteMutation.error?.message ?? 'Unknown error'}
+		</p>
+	{/if}
+</div>

apps/cli/templates/frontend/svelte/_gitignore

@@ -0,0 +1,23 @@
+node_modules
+
+# Output
+.output
+.vercel
+.netlify
+.wrangler
+/.svelte-kit
+/build
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Env
+.env
+.env.*
+!.env.example
+!.env.test
+
+# Vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

apps/cli/templates/frontend/svelte/_npmrc

@@ -0,0 +1 @@
+engine-strict=true

apps/cli/templates/frontend/svelte/package.json

@@ -0,0 +1,31 @@
+{
+	"name": "web",
+	"private": true,
+	"version": "0.0.1",
+	"type": "module",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"prepare": "svelte-kit sync || echo ''",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-auto": "^6.0.0",
+		"@sveltejs/kit": "^2.20.7",
+		"@sveltejs/vite-plugin-svelte": "^5.0.3",
+		"@tailwindcss/vite": "^4.1.4",
+		"svelte": "^5.28.2",
+		"svelte-check": "^4.1.6",
+		"tailwindcss": "^4.1.4",
+		"typescript": "^5.8.3",
+		"@tanstack/svelte-query-devtools": "^5.74.6",
+		"vite": "^6.3.3"
+	},
+	"dependencies": {
+		"@tanstack/svelte-form": "^1.7.0",
+		"@tanstack/svelte-query": "^5.74.4",
+		"zod": "^3.24.3"
+	}
+}

apps/cli/templates/frontend/svelte/src/app.css

@@ -0,0 +1,5 @@
+@import 'tailwindcss';
+
+body {
+    @apply bg-neutral-950 text-neutral-100;
+}

apps/cli/templates/frontend/svelte/src/app.d.ts

@@ -0,0 +1,13 @@
+// See https://svelte.dev/docs/kit/types#app.d.ts
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface PageState {}
+		// interface Platform {}
+	}
+}
+
+export {};

apps/cli/templates/frontend/svelte/src/app.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>

apps/cli/templates/frontend/svelte/src/components/Header.svelte.hbs

@@ -0,0 +1,40 @@
+<script lang="ts">
+
+    {{#if auth}}
+	import UserMenu from './UserMenu.svelte';
+    {{/if}}
+    const links = [
+        { to: "/", label: "Home" },
+        {{#if auth}}
+        { to: "/dashboard", label: "Dashboard" },
+        {{/if}}
+        {{#if (includes examples "todo")}}
+        { to: "/todos", label: "Todos" },
+        {{/if}}
+        {{#if (includes examples "ai")}}
+        { to: "/ai", label: "AI Chat" },
+        {{/if}}
+    ];
+
+</script>
+
+<div>
+	<div class="flex flex-row items-center justify-between px-4 py-2 md:px-6">
+		<nav class="flex gap-4 text-lg">
+			{#each links as link (link.to)}
+				<a
+					href={link.to}
+					class=""
+				>
+					{link.label}
+				</a>
+			{/each}
+		</nav>
+		<div class="flex items-center gap-2">
+		    {{#if auth}}
+            <UserMenu />
+             {{/if}}
+		</div>
+	</div>
+	<hr class="border-neutral-800" />
+</div>

apps/cli/templates/frontend/svelte/src/lib/index.ts

@@ -0,0 +1 @@
+// place files you want to import through the `$lib` alias in this folder.

apps/cli/templates/frontend/svelte/src/routes/+layout.svelte.hbs

@@ -0,0 +1,19 @@
+<script lang="ts">
+    import { QueryClientProvider } from '@tanstack/svelte-query';
+    import { SvelteQueryDevtools } from '@tanstack/svelte-query-devtools'
+	import '../app.css';
+    import { queryClient } from '$lib/orpc';
+    import Header from '../components/Header.svelte';
+
+	let { children } = $props();
+</script>
+
+<QueryClientProvider client={queryClient}>
+    <div class="grid h-svh grid-rows-[auto_1fr]">
+		<Header />
+		<main class="overflow-y-auto">
+			{@render children()}
+		</main>
+    </div>
+    <SvelteQueryDevtools />
+</QueryClientProvider>

apps/cli/templates/frontend/svelte/src/routes/+page.svelte.hbs

@@ -0,0 +1,44 @@
+<script lang="ts">
+import { orpc } from "$lib/orpc";
+import { createQuery } from "@tanstack/svelte-query";
+
+const healthCheck = createQuery(orpc.healthCheck.queryOptions());
+
+
+const TITLE_TEXT = `
+   ██████╗ ███████╗████████╗████████╗███████╗██████╗
+   ██╔══██╗██╔════╝╚══██╔══╝╚══██╔══╝██╔════╝██╔══██╗
+   ██████╔╝█████╗     ██║      ██║   █████╗  ██████╔╝
+   ██╔══██╗██╔══╝     ██║      ██║   ██╔══╝  ██╔══██╗
+   ██████╔╝███████╗   ██║      ██║   ███████╗██║  ██║
+   ╚═════╝ ╚══════╝   ╚═╝      ╚═╝   ╚══════╝╚═╝  ╚═╝
+
+   ████████╗    ███████╗████████╗ █████╗  ██████╗██╗  ██╗
+   ╚══██╔══╝    ██╔════╝╚══██╔══╝██╔══██╗██╔════╝██║ ██╔╝
+      ██║       ███████╗   ██║   ███████║██║     █████╔╝
+      ██║       ╚════██║   ██║   ██╔══██║██║     ██╔═██╗
+      ██║       ███████║   ██║   ██║  ██║╚██████╗██║  ██╗
+      ╚═╝       ╚══════╝   ╚═╝   ╚═╝  ╚═╝ ╚═════╝╚═╝  ╚═╝
+   `;
+</script>
+
+<div class="container mx-auto max-w-3xl px-4 py-2">
+	<pre class="overflow-x-auto font-mono text-sm">{TITLE_TEXT}</pre>
+	<div class="grid gap-6">
+		<section class="rounded-lg border p-4">
+			<h2 class="mb-2 font-medium">API Status</h2>
+			<div class="flex items-center gap-2">
+				<div
+					class={`h-2 w-2 rounded-full ${$healthCheck.data ? "bg-green-500" : "bg-red-500"}`}
+				></div>
+				<span class="text-muted-foreground text-sm">
+					{$healthCheck.isLoading
+						? "Checking..."
+						: $healthCheck.data
+							? "Connected"
+							: "Disconnected"}
+				</span>
+			</div>
+		</section>
+	</div>
+</div>

apps/cli/templates/frontend/svelte/svelte.config.js

@@ -0,0 +1,18 @@
+import adapter from '@sveltejs/adapter-auto';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	// Consult https://svelte.dev/docs/kit/integrations
+	// for more information about preprocessors
+	preprocess: vitePreprocess(),
+
+	kit: {
+		// adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
+		// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
+		// See https://svelte.dev/docs/kit/adapters for more information about adapters.
+		adapter: adapter()
+	}
+};
+
+export default config;

apps/cli/templates/frontend/svelte/tsconfig.json

@@ -0,0 +1,19 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"moduleResolution": "bundler"
+	}
+	// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
+	// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
+	//
+	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
+	// from the referenced tsconfig.json - TypeScript does not merge them in
+}

apps/cli/templates/frontend/svelte/vite.config.ts

@@ -0,0 +1,7 @@
+import tailwindcss from '@tailwindcss/vite';
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+	plugins: [tailwindcss(), sveltekit()]
+});

apps/web/public/icon/svelte.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 256 308" width="256" height="308" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><path d="M239.682 40.707C211.113-.182 154.69-12.301 113.895 13.69L42.247 59.356a82.198 82.198 0 0 0-37.135 55.056 86.566 86.566 0 0 0 8.536 55.576 82.425 82.425 0 0 0-12.296 30.719 87.596 87.596 0 0 0 14.964 66.244c28.574 40.893 84.997 53.007 125.787 27.016l71.648-45.664a82.182 82.182 0 0 0 37.135-55.057 86.601 86.601 0 0 0-8.53-55.577 82.409 82.409 0 0 0 12.29-30.718 87.573 87.573 0 0 0-14.963-66.244" fill="#FF3E00"/><path d="M106.889 270.841c-23.102 6.007-47.497-3.036-61.103-22.648a52.685 52.685 0 0 1-9.003-39.85 49.978 49.978 0 0 1 1.713-6.693l1.35-4.115 3.671 2.697a92.447 92.447 0 0 0 28.036 14.007l2.663.808-.245 2.659a16.067 16.067 0 0 0 2.89 10.656 17.143 17.143 0 0 0 18.397 6.828 15.786 15.786 0 0 0 4.403-1.935l71.67-45.672a14.922 14.922 0 0 0 6.734-9.977 15.923 15.923 0 0 0-2.713-12.011 17.156 17.156 0 0 0-18.404-6.832 15.78 15.78 0 0 0-4.396 1.933l-27.35 17.434a52.298 52.298 0 0 1-14.553 6.391c-23.101 6.007-47.497-3.036-61.101-22.649a52.681 52.681 0 0 1-9.004-39.849 49.428 49.428 0 0 1 22.34-33.114l71.664-45.677a52.218 52.218 0 0 1 14.563-6.398c23.101-6.007 47.497 3.036 61.101 22.648a52.685 52.685 0 0 1 9.004 39.85 50.559 50.559 0 0 1-1.713 6.692l-1.35 4.116-3.67-2.693a92.373 92.373 0 0 0-28.037-14.013l-2.664-.809.246-2.658a16.099 16.099 0 0 0-2.89-10.656 17.143 17.143 0 0 0-18.398-6.828 15.786 15.786 0 0 0-4.402 1.935l-71.67 45.674a14.898 14.898 0 0 0-6.73 9.975 15.9 15.9 0 0 0 2.709 12.012 17.156 17.156 0 0 0 18.404 6.832 15.841 15.841 0 0 0 4.402-1.935l27.345-17.427a52.147 52.147 0 0 1 14.552-6.397c23.101-6.006 47.497 3.037 61.102 22.65a52.681 52.681 0 0 1 9.003 39.848 49.453 49.453 0 0 1-22.34 33.12l-71.664 45.673a52.218 52.218 0 0 1-14.563 6.398" fill="#FFF"/></svg>

apps/web/src/app/(home)/_components/StackArchitech.tsx

@@ -78,14 +78,23 @@ const CATEGORY_ORDER: Array<keyof typeof TECH_OPTIONS> = [
 
 const hasWebFrontend = (frontend: string[]) =>
 	frontend.some((f) =>
-		["tanstack-router", "react-router", "tanstack-start", "next"].includes(f),
+		[
+			"tanstack-router",
+			"react-router",
+			"tanstack-start",
+			"next",
+			"nuxt",
+			"svelte",
+		].includes(f),
 	);
 
 const hasPWACompatibleFrontend = (frontend: string[]) =>
 	frontend.some((f) => ["tanstack-router", "react-router"].includes(f));
 
 const hasTauriCompatibleFrontend = (frontend: string[]) =>
-	frontend.some((f) => ["tanstack-router", "react-router", "nuxt"].includes(f));
+	frontend.some((f) =>
+		["tanstack-router", "react-router", "nuxt", "svelte"].includes(f),
+	);
 
 const hasNativeFrontend = (frontend: string[]) => frontend.includes("native");
 
@@ -216,6 +225,7 @@ const StackArchitect = () => {
 			const isPWACompat = hasPWACompatibleFrontend(nextStack.frontend);
 			const isTauriCompat = hasTauriCompatibleFrontend(nextStack.frontend);
 			const isNuxt = nextStack.frontend.includes("nuxt");
+			const isSvelte = nextStack.frontend.includes("svelte");
 
 			if (nextStack.database === "none") {
 				if (nextStack.orm !== "none") {
@@ -270,7 +280,7 @@ const StackArchitect = () => {
 				changed = true;
 			}
 
-			if (isNuxt && nextStack.api === "trpc") {
+			if ((isNuxt || isSvelte) && nextStack.api === "trpc") {
 				nextStack.api = "orpc";
 				changed = true;
 			}
@@ -446,6 +456,7 @@ const StackArchitect = () => {
 		const isPWACompat = currentHasPWACompatibleFrontend;
 		const isTauriCompat = currentHasTauriCompatibleFrontend;
 		const isNuxt = stack.frontend.includes("nuxt");
+		const isSvelte = stack.frontend.includes("svelte");
 
 		if (!isPWACompat && stack.addons.includes("pwa")) {
 			notes.frontend.notes.push("PWA addon requires TanStack or React Router.");
@@ -466,9 +477,12 @@ const StackArchitect = () => {
 			notes.examples.hasIssue = true;
 		}
 
-		if (isNuxt && stack.api === "trpc") {
+		if ((isNuxt || isSvelte) && stack.api === "trpc") {
 			notes.api.notes.push(
 				"Nuxt requires oRPC. It will be selected automatically.",
+				`${
+					isNuxt ? "Nuxt" : "Svelte"
+				} requires oRPC. It will be selected automatically.`,
 			);
 			notes.api.hasIssue = true;
 			notes.frontend.hasIssue = true;
@@ -630,6 +644,7 @@ const StackArchitect = () => {
 						"tanstack-start",
 						"next",
 						"nuxt",
+						"svelte",
 					];
 
 					if (techId === "none") {
@@ -718,6 +733,9 @@ const StackArchitect = () => {
 				if (techId === "trpc" && stack.frontend.includes("nuxt")) {
 					return "tRPC is not supported with Nuxt. Use oRPC instead.";
 				}
+				if (techId === "trpc" && stack.frontend.includes("svelte")) {
+					return "tRPC is not supported with Svelte. Use oRPC instead.";
+				}
 			}
 
 			if (catKey === "orm") {

apps/web/src/lib/constant.ts

@@ -58,6 +58,14 @@ export const TECH_OPTIONS = {
 			color: "from-green-400 to-green-700",
 			default: false,
 		},
+		{
+			id: "svelte",
+			name: "Svelte",
+			description: "Cybernetically enhanced web apps",
+			icon: "/icon/svelte.svg",
+			color: "from-orange-500 to-orange-700",
+			default: false,
+		},
 		{
 			id: "native",
 			name: "React Native",