add svelte

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"