add solid

apps/cli/src/constants.ts

@@ -84,6 +84,7 @@ export const dependencyVersionMap = {
 	"@orpc/server": "^1.1.1",
 	"@orpc/client": "^1.1.1",
 	"@orpc/react-query": "^1.1.1",
+	"@orpc/solid-query": "^1.1.1",
 	"@orpc/vue-query": "^1.1.1",
 	"@orpc/svelte-query": "^1.1.1",
 
@@ -98,6 +99,9 @@ export const dependencyVersionMap = {
 	"@tanstack/svelte-query": "^5.74.4",
 	"@tanstack/react-query-devtools": "^5.69.0",
 	"@tanstack/react-query": "^5.69.0",
+
+	"@tanstack/solid-query": "^5.75.0",
+	"@tanstack/solid-query-devtools": "^5.75.0",
 } as const;
 
 export type AvailableDependencies = keyof typeof dependencyVersionMap;

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

@@ -14,6 +14,7 @@ export async function setupAddons(config: ProjectConfig) {
 		frontend.includes("react-router") || frontend.includes("tanstack-router");
 	const hasNuxtFrontend = frontend.includes("nuxt");
 	const hasSvelteFrontend = frontend.includes("svelte");
+	const hasSolidFrontend = frontend.includes("solid");
 
 	if (addons.includes("turborepo")) {
 		await addPackageDependency({
@@ -22,12 +23,15 @@ export async function setupAddons(config: ProjectConfig) {
 		});
 	}
 
-	if (addons.includes("pwa") && hasReactWebFrontend) {
+	if (addons.includes("pwa") && (hasReactWebFrontend || hasSolidFrontend)) {
 		await setupPwa(projectDir, frontend);
 	}
 	if (
 		addons.includes("tauri") &&
-		(hasReactWebFrontend || hasNuxtFrontend || hasSvelteFrontend)
+		(hasReactWebFrontend ||
+			hasNuxtFrontend ||
+			hasSvelteFrontend ||
+			hasSolidFrontend)
 	) {
 		await setupTauri(config);
 	}
@@ -48,7 +52,9 @@ function getWebAppDir(
 ): string {
 	if (
 		frontends.some((f) =>
-			["react-router", "tanstack-router", "nuxt", "svelte"].includes(f),
+			["react-router", "tanstack-router", "nuxt", "svelte", "solid"].includes(
+				f,
+			),
 		)
 	) {
 		return path.join(projectDir, "apps/web");
@@ -102,7 +108,7 @@ async function setupHusky(projectDir: string) {
 
 async function setupPwa(projectDir: string, frontends: ProjectFrontend[]) {
 	const isCompatibleFrontend = frontends.some((f) =>
-		["react-router", "tanstack-router"].includes(f),
+		["react-router", "tanstack-router", "solid"].includes(f),
 	);
 	if (!isCompatibleFrontend) return;
 

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

@@ -18,6 +18,7 @@ export async function setupApi(config: ProjectConfig): Promise<void> {
 	);
 	const hasNuxtWeb = frontend.includes("nuxt");
 	const hasSvelteWeb = frontend.includes("svelte");
+	const hasSolidWeb = frontend.includes("solid");
 
 	if (!isConvex && api !== "none") {
 		const serverDir = path.join(projectDir, "apps/server");
@@ -85,6 +86,18 @@ export async function setupApi(config: ProjectConfig): Promise<void> {
 						projectDir: webDir,
 					});
 				}
+			} else if (hasSolidWeb) {
+				if (api === "orpc") {
+					await addPackageDependency({
+						dependencies: [
+							"@orpc/solid-query",
+							"@orpc/client",
+							"@orpc/server",
+							"@tanstack/solid-query",
+						],
+						projectDir: webDir,
+					});
+				}
 			}
 		}
 
@@ -114,6 +127,7 @@ export async function setupApi(config: ProjectConfig): Promise<void> {
 		"next",
 		"native",
 	];
+	const needsSolidQuery = frontend.includes("solid");
 	const needsReactQuery = frontend.some((f) => reactBasedFrontends.includes(f));
 
 	if (needsReactQuery && !isConvex) {
@@ -155,6 +169,26 @@ export async function setupApi(config: ProjectConfig): Promise<void> {
 		}
 	}
 
+	if (needsSolidQuery && !isConvex) {
+		const solidQueryDeps: AvailableDependencies[] = ["@tanstack/solid-query"];
+		const solidQueryDevDeps: AvailableDependencies[] = [
+			"@tanstack/solid-query-devtools",
+		];
+
+		if (webDirExists) {
+			const webPkgJsonPath = path.join(webDir, "package.json");
+			if (await fs.pathExists(webPkgJsonPath)) {
+				try {
+					await addPackageDependency({
+						dependencies: solidQueryDeps,
+						devDependencies: solidQueryDevDeps,
+						projectDir: webDir,
+					});
+				} catch (error) {}
+			}
+		}
+	}
+
 	if (isConvex) {
 		if (webDirExists) {
 			const webPkgJsonPath = path.join(webDir, "package.json");

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

@@ -40,6 +40,7 @@ function generateReadmeContent(options: ProjectConfig): string {
 	const hasNext = frontend.includes("next");
 	const hasTanstackStart = frontend.includes("tanstack-start");
 	const hasSvelte = frontend.includes("svelte");
+	const hasSolid = frontend.includes("solid");
 	const hasNuxt = frontend.includes("nuxt");
 
 	const packageManagerRunCmd =
@@ -65,7 +66,9 @@ This project was created with [Better-T-Stack](https://github.com/AmanVarshney01
 							? "SvelteKit"
 							: hasNuxt
 								? "Nuxt"
-								: ""
+								: hasSolid
+									? "SolidJS"
+									: ""
 	}, ${backend[0].toUpperCase() + backend.slice(1)}, tRPC, and more.
 
 ## Features
@@ -94,7 +97,8 @@ ${
 	hasNext ||
 	hasTanstackStart ||
 	hasSvelte ||
-	hasNuxt
+	hasNuxt ||
+	hasSolid
 		? `Open [http://localhost:${webPort}](http://localhost:${webPort}) in your browser to see the web application.`
 		: ""
 }
@@ -118,7 +122,8 @@ ${
 	hasNext ||
 	hasTanstackStart ||
 	hasSvelte ||
-	hasNuxt
+	hasNuxt ||
+	hasSolid
 		? `│   ├── web/         # Frontend application (${
 				hasTanstackRouter
 					? "React + TanStack Router"
@@ -132,7 +137,9 @@ ${
 									? "SvelteKit"
 									: hasNuxt
 										? "Nuxt"
-										: ""
+										: hasSolid
+											? "SolidJS"
+											: ""
 			})\n`
 		: ""
 }${
@@ -178,6 +185,7 @@ function generateFeaturesList(
 	const hasTanstackStart = frontend.includes("tanstack-start");
 	const hasSvelte = frontend.includes("svelte");
 	const hasNuxt = frontend.includes("nuxt");
+	const hasSolid = frontend.includes("solid");
 
 	const addonsList = [
 		"- **TypeScript** - For type safety and improved developer experience",
@@ -199,6 +207,8 @@ function generateFeaturesList(
 		addonsList.push("- **SvelteKit** - Web framework for building Svelte apps");
 	} else if (hasNuxt) {
 		addonsList.push("- **Nuxt** - The Intuitive Vue Framework");
+	} else if (hasSolid) {
+		addonsList.push("- **SolidJS** - Simple and performant reactivity");
 	}
 
 	if (hasNative) {

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

@@ -74,12 +74,14 @@ export async function setupEnvironmentVariables(
 	const hasNextJs = frontend.includes("next");
 	const hasNuxt = frontend.includes("nuxt");
 	const hasSvelte = frontend.includes("svelte");
+	const hasSolid = frontend.includes("solid");
 	const hasWebFrontend =
 		hasReactRouter ||
 		hasTanStackRouter ||
 		hasTanStackStart ||
 		hasNextJs ||
 		hasNuxt ||
+		hasSolid ||
 		hasSvelte;
 
 	if (hasWebFrontend) {

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

@@ -63,6 +63,7 @@ export function displayPostInstallInstructions(
 			"tanstack-start",
 			"nuxt",
 			"svelte",
+			"solid",
 		].includes(f),
 	);
 	const hasNative = frontend?.includes("native");
@@ -75,7 +76,7 @@ export function displayPostInstallInstructions(
 		!isConvex && database !== "none" && orm === "none" ? getNoOrmWarning() : "";
 
 	const hasReactRouter = frontend?.includes("react-router");
-	const hasSvelte = frontend?.includes("svelte");
+	const hasSvelte = frontend?.includes("svelte"); // Keep separate for port logic
 	const webPort = hasReactRouter || hasSvelte ? "5173" : "3001";
 
 	const tazeCommand = getPackageExecutionCommand(packageManager, "taze -r");

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

@@ -45,10 +45,10 @@ export async function setupTauri(config: ProjectConfig): Promise<void> {
 		const hasReactRouter = frontend.includes("react-router");
 		const hasNuxt = frontend.includes("nuxt");
 		const hasSvelte = frontend.includes("svelte");
+		const hasSolid = frontend.includes("solid");
 
-		const devUrl = hasReactRouter
-			? "http://localhost:5173"
-			: hasSvelte
+		const devUrl =
+			hasReactRouter || hasSvelte
 				? "http://localhost:5173"
 				: "http://localhost:3001";
 

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

@@ -1,7 +1,6 @@
 import path from "node:path";
 import fs from "fs-extra";
 import { globby } from "globby";
-import pc from "picocolors";
 import { PKG_ROOT } from "../constants";
 import type { ProjectConfig } from "../types";
 import { processTemplate } from "../utils/template-processor";
@@ -70,10 +69,11 @@ export async function setupFrontendTemplates(
 	);
 	const hasNuxtWeb = context.frontend.includes("nuxt");
 	const hasSvelteWeb = context.frontend.includes("svelte");
+	const hasSolidWeb = context.frontend.includes("solid");
 	const hasNative = context.frontend.includes("native");
 	const isConvex = context.backend === "convex";
 
-	if (hasReactWeb || hasNuxtWeb || hasSvelteWeb) {
+	if (hasReactWeb || hasNuxtWeb || hasSvelteWeb || hasSolidWeb) {
 		const webAppDir = path.join(projectDir, "apps/web");
 		await fs.ensureDir(webAppDir);
 
@@ -105,6 +105,7 @@ export async function setupFrontendTemplates(
 					);
 				} else {
 				}
+
 				if (!isConvex && context.api !== "none") {
 					const apiWebBaseDir = path.join(
 						PKG_ROOT,
@@ -127,7 +128,8 @@ export async function setupFrontendTemplates(
 				await processAndCopyFiles("**/*", nuxtBaseDir, webAppDir, context);
 			} else {
 			}
-			if (!isConvex && context.api !== "none") {
+
+			if (!isConvex && context.api === "orpc") {
 				const apiWebNuxtDir = path.join(
 					PKG_ROOT,
 					`templates/api/${context.api}/web/nuxt`,
@@ -143,6 +145,7 @@ export async function setupFrontendTemplates(
 				await processAndCopyFiles("**/*", svelteBaseDir, webAppDir, context);
 			} else {
 			}
+
 			if (!isConvex && context.api === "orpc") {
 				const apiWebSvelteDir = path.join(
 					PKG_ROOT,
@@ -158,6 +161,23 @@ export async function setupFrontendTemplates(
 				} else {
 				}
 			}
+		} else if (hasSolidWeb) {
+			const solidBaseDir = path.join(PKG_ROOT, "templates/frontend/solid");
+			if (await fs.pathExists(solidBaseDir)) {
+				await processAndCopyFiles("**/*", solidBaseDir, webAppDir, context);
+			} else {
+			}
+
+			if (!isConvex && context.api === "orpc") {
+				const apiWebSolidDir = path.join(
+					PKG_ROOT,
+					`templates/api/${context.api}/web/solid`,
+				);
+				if (await fs.pathExists(apiWebSolidDir)) {
+					await processAndCopyFiles("**/*", apiWebSolidDir, webAppDir, context);
+				} else {
+				}
+			}
 		}
 	}
 
@@ -323,6 +343,7 @@ export async function setupAuthTemplate(
 	);
 	const hasNuxtWeb = context.frontend.includes("nuxt");
 	const hasSvelteWeb = context.frontend.includes("svelte");
+	const hasSolidWeb = context.frontend.includes("solid");
 	const hasNative = context.frontend.includes("native");
 
 	if (serverAppDirExists) {
@@ -380,7 +401,10 @@ export async function setupAuthTemplate(
 		}
 	}
 
-	if ((hasReactWeb || hasNuxtWeb || hasSvelteWeb) && webAppDirExists) {
+	if (
+		(hasReactWeb || hasNuxtWeb || hasSvelteWeb || hasSolidWeb) &&
+		webAppDirExists
+	) {
 		if (hasReactWeb) {
 			const authWebBaseSrc = path.join(
 				PKG_ROOT,
@@ -390,6 +414,7 @@ export async function setupAuthTemplate(
 				await processAndCopyFiles("**/*", authWebBaseSrc, webAppDir, context);
 			} else {
 			}
+
 			const reactFramework = context.frontend.find((f) =>
 				["tanstack-router", "react-router", "tanstack-start", "next"].includes(
 					f,
@@ -432,6 +457,19 @@ export async function setupAuthTemplate(
 				} else {
 				}
 			}
+		} else if (hasSolidWeb) {
+			if (context.api === "orpc") {
+				const authWebSolidSrc = path.join(PKG_ROOT, "templates/auth/web/solid");
+				if (await fs.pathExists(authWebSolidSrc)) {
+					await processAndCopyFiles(
+						"**/*",
+						authWebSolidSrc,
+						webAppDir,
+						context,
+					);
+				} else {
+				}
+			}
 		}
 	}
 
@@ -459,6 +497,7 @@ export async function setupAddonsTemplate(
 		if (addon === "pwa") {
 			addonSrcDir = path.join(PKG_ROOT, "templates/addons/pwa/apps/web");
 			addonDestDir = path.join(projectDir, "apps/web");
+
 			if (!(await fs.pathExists(addonDestDir))) {
 				continue;
 			}
@@ -475,6 +514,14 @@ export async function setupExamplesTemplate(
 	projectDir: string,
 	context: ProjectConfig,
 ): Promise<void> {
+	if (
+		!context.examples ||
+		context.examples.length === 0 ||
+		context.examples[0] === "none"
+	) {
+		return;
+	}
+
 	const serverAppDir = path.join(projectDir, "apps/server");
 	const webAppDir = path.join(projectDir, "apps/web");
 
@@ -486,84 +533,85 @@ export async function setupExamplesTemplate(
 	);
 	const hasNuxtWeb = context.frontend.includes("nuxt");
 	const hasSvelteWeb = context.frontend.includes("svelte");
+	const hasSolidWeb = context.frontend.includes("solid");
 
 	for (const example of context.examples) {
-		if (
-			!context.examples ||
-			context.examples.length === 0 ||
-			context.examples[0] === "none"
-		)
-			continue;
-
 		if (example === "none") continue;
 
 		const exampleBaseDir = path.join(PKG_ROOT, `templates/examples/${example}`);
 
-		if (example === "ai" && context.backend === "next" && serverAppDirExists) {
-			const aiNextServerSrc = path.join(exampleBaseDir, "server/next");
-
-			if (await fs.pathExists(aiNextServerSrc)) {
-				await processAndCopyFiles(
-					"**/*",
-					aiNextServerSrc,
-					serverAppDir,
-					context,
-					false,
-				);
-			}
-		}
-
-		if (serverAppDirExists) {
+		if (serverAppDirExists && context.backend !== "convex") {
 			const exampleServerSrc = path.join(exampleBaseDir, "server");
-			if (await fs.pathExists(exampleServerSrc)) {
-				if (context.backend !== "convex") {
-					if (context.orm !== "none" && context.database !== "none") {
-						const exampleOrmBaseSrc = path.join(
-							exampleServerSrc,
-							context.orm,
-							"base",
-						);
-						if (await fs.pathExists(exampleOrmBaseSrc)) {
-							await processAndCopyFiles(
-								"**/*",
-								exampleOrmBaseSrc,
-								serverAppDir,
-								context,
-								false,
-							);
-						}
 
-						const exampleDbSchemaSrc = path.join(
-							exampleServerSrc,
-							context.orm,
-							context.database,
-						);
-						if (await fs.pathExists(exampleDbSchemaSrc)) {
-							await processAndCopyFiles(
-								"**/*",
-								exampleDbSchemaSrc,
-								serverAppDir,
-								context,
-								false,
-							);
-						}
-					}
-					const generalServerFiles = await globby(["*.ts", "*.hbs"], {
-						cwd: exampleServerSrc,
-						onlyFiles: true,
-						deep: 1,
-						ignore: [`${context.orm}/**`],
-					});
-					for (const file of generalServerFiles) {
-						const srcPath = path.join(exampleServerSrc, file);
-						const destPath = path.join(serverAppDir, file.replace(".hbs", ""));
-						if (srcPath.endsWith(".hbs")) {
-							await processTemplate(srcPath, destPath, context);
-						} else {
+			if (example === "ai" && context.backend === "next") {
+				const aiNextServerSrc = path.join(exampleServerSrc, "next");
+				if (await fs.pathExists(aiNextServerSrc)) {
+					await processAndCopyFiles(
+						"**/*",
+						aiNextServerSrc,
+						serverAppDir,
+						context,
+						false,
+					);
+				}
+			}
+
+			if (context.orm !== "none" && context.database !== "none") {
+				const exampleOrmBaseSrc = path.join(
+					exampleServerSrc,
+					context.orm,
+					"base",
+				);
+				if (await fs.pathExists(exampleOrmBaseSrc)) {
+					await processAndCopyFiles(
+						"**/*",
+						exampleOrmBaseSrc,
+						serverAppDir,
+						context,
+						false,
+					);
+				}
+
+				const exampleDbSchemaSrc = path.join(
+					exampleServerSrc,
+					context.orm,
+					context.database,
+				);
+				if (await fs.pathExists(exampleDbSchemaSrc)) {
+					await processAndCopyFiles(
+						"**/*",
+						exampleDbSchemaSrc,
+						serverAppDir,
+						context,
+						false,
+					);
+				}
+			}
+
+			const ignorePatterns = [`${context.orm}/**`];
+			if (example === "ai" && context.backend === "next") {
+				ignorePatterns.push("next/**");
+			}
+
+			const generalServerFiles = await globby(["**/*.ts", "**/*.hbs"], {
+				cwd: exampleServerSrc,
+				onlyFiles: true,
+				deep: 1,
+				ignore: ignorePatterns,
+			});
+
+			for (const file of generalServerFiles) {
+				const srcPath = path.join(exampleServerSrc, file);
+				const destPath = path.join(serverAppDir, file.replace(".hbs", ""));
+				try {
+					if (srcPath.endsWith(".hbs")) {
+						await processTemplate(srcPath, destPath, context);
+					} else {
+						if (!(await fs.pathExists(destPath))) {
 							await fs.copy(srcPath, destPath, { overwrite: false });
 						}
 					}
-				}
+				} catch (error) {}
 			}
 		}
 
@@ -620,6 +668,18 @@ export async function setupExamplesTemplate(
 					);
 				} else {
 				}
+			} else if (hasSolidWeb) {
+				const exampleWebSolidSrc = path.join(exampleBaseDir, "web/solid");
+				if (await fs.pathExists(exampleWebSolidSrc)) {
+					await processAndCopyFiles(
+						"**/*",
+						exampleWebSolidSrc,
+						webAppDir,
+						context,
+						false,
+					);
+				} else {
+				}
 			}
 		}
 	}

apps/cli/src/index.ts

@@ -78,6 +78,7 @@ async function main() {
 					"nuxt",
 					"native",
 					"svelte",
+					"solid",
 					"none",
 				],
 			})
@@ -326,11 +327,12 @@ function processAndValidateFlags(
 					f === "tanstack-start" ||
 					f === "next" ||
 					f === "nuxt" ||
-					f === "svelte",
+					f === "svelte" ||
+					f === "solid",
 			);
 			if (webFrontends.length > 1) {
 				consola.fatal(
-					"Cannot select multiple web frameworks. Choose only one of: tanstack-router, tanstack-start, react-router, next, nuxt, svelte",
+					"Cannot select multiple web frameworks. Choose only one of: tanstack-router, tanstack-start, react-router, next, nuxt, svelte, solid",
 				);
 				process.exit(1);
 			}
@@ -395,6 +397,20 @@ function processAndValidateFlags(
 			process.exit(1);
 		}
 
+		if (providedFlags.has("frontend") && options.frontend) {
+			const incompatibleFrontends = options.frontend.filter(
+				(f) => f === "nuxt" || f === "solid",
+			);
+			if (incompatibleFrontends.length > 0) {
+				consola.fatal(
+					`The following frontends are not compatible with '--backend convex': ${incompatibleFrontends.join(
+						", ",
+					)}. Please choose a different frontend or backend.`,
+				);
+				process.exit(1);
+			}
+		}
+
 		config.auth = false;
 		config.database = "none";
 		config.orm = "none";
@@ -529,19 +545,24 @@ function processAndValidateFlags(
 
 		const includesNuxt = effectiveFrontend?.includes("nuxt");
 		const includesSvelte = effectiveFrontend?.includes("svelte");
+		const includesSolid = effectiveFrontend?.includes("solid");
 
-		if ((includesNuxt || includesSvelte) && effectiveApi === "trpc") {
+		if (
+			(includesNuxt || includesSvelte || includesSolid) &&
+			effectiveApi === "trpc"
+		) {
 			consola.fatal(
 				`tRPC API is not supported with '${
-					includesNuxt ? "nuxt" : "svelte"
+					includesNuxt ? "nuxt" : includesSvelte ? "svelte" : "solid"
 				}' frontend. Please use --api orpc or remove '${
-					includesNuxt ? "nuxt" : "svelte"
+					includesNuxt ? "nuxt" : includesSvelte ? "svelte" : "solid"
 				}' from --frontend.`,
 			);
 			process.exit(1);
 		}
+
 		if (
-			(includesNuxt || includesSvelte) &&
+			(includesNuxt || includesSvelte || includesSolid) &&
 			effectiveApi !== "orpc" &&
 			(!options.api || (options.yes && options.api !== "trpc"))
 		) {
@@ -559,6 +580,7 @@ function processAndValidateFlags(
 				(f) =>
 					f === "tanstack-router" ||
 					f === "react-router" ||
+					f === "solid" ||
 					(f === "nuxt" &&
 						config.addons?.includes("tauri") &&
 						!config.addons?.includes("pwa")) ||
@@ -576,7 +598,7 @@ function processAndValidateFlags(
 					config.addons.includes("tauri")
 				) {
 					incompatibleAddon =
-						"PWA and Tauri addons require tanstack-router, react-router, or Nuxt/Svelte (Tauri only).";
+						"PWA requires tanstack-router/react-router/solid. Tauri requires tanstack-router/react-router/Nuxt/Svelte/Solid.";
 				}
 				consola.fatal(
 					`${incompatibleAddon} Cannot use these addons with your frontend selection.`,
@@ -632,18 +654,12 @@ function processAndValidateFlags(
 				process.exit(1);
 			}
 
-			const hasWebFrontendForExamples = effectiveFrontend?.some((f) =>
-				[
-					"tanstack-router",
-					"react-router",
-					"tanstack-start",
-					"next",
-					"nuxt",
-					"svelte",
-				].includes(f),
-			);
-			const noFrontendSelected =
-				!effectiveFrontend || effectiveFrontend.length === 0;
+			if (config.examples.includes("ai") && includesSolid) {
+				consola.fatal(
+					"The 'ai' example is not compatible with the Solid frontend.",
+				);
+				process.exit(1);
+			}
 		}
 	}
 

apps/cli/src/prompts/addons.ts

@@ -17,13 +17,15 @@ export async function getAddonsChoice(
 
 	const hasCompatiblePwaFrontend =
 		frontends?.includes("react-router") ||
-		frontends?.includes("tanstack-router");
+		frontends?.includes("tanstack-router") ||
+		frontends?.includes("solid");
 
 	const hasCompatibleTauriFrontend =
 		frontends?.includes("react-router") ||
 		frontends?.includes("tanstack-router") ||
 		frontends?.includes("nuxt") ||
-		frontends?.includes("svelte");
+		frontends?.includes("svelte") ||
+		frontends?.includes("solid");
 
 	const allPossibleOptions: AddonOption[] = [
 		{

apps/cli/src/prompts/api.ts

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

apps/cli/src/prompts/backend-framework.ts

@@ -1,43 +1,62 @@
 import { cancel, isCancel, select } from "@clack/prompts";
 import pc from "picocolors";
 import { DEFAULT_CONFIG } from "../constants";
-import type { ProjectBackend } from "../types";
+import type { ProjectBackend, ProjectFrontend } from "../types";
 
 export async function getBackendFrameworkChoice(
 	backendFramework?: ProjectBackend,
+	frontends?: ProjectFrontend[],
 ): Promise<ProjectBackend> {
 	if (backendFramework !== undefined) return backendFramework;
 
+	const hasIncompatibleFrontend = frontends?.some(
+		(f) => f === "nuxt" || f === "solid",
+	);
+
+	const backendOptions: Array<{
+		value: ProjectBackend;
+		label: string;
+		hint: string;
+	}> = [
+		{
+			value: "hono" as const,
+			label: "Hono",
+			hint: "Lightweight, ultrafast web framework",
+		},
+		{
+			value: "next" as const,
+			label: "Next.js",
+			hint: "Full-stack framework with API routes",
+		},
+		{
+			value: "express" as const,
+			label: "Express",
+			hint: "Fast, unopinionated, minimalist web framework for Node.js",
+		},
+		{
+			value: "elysia" as const,
+			label: "Elysia",
+			hint: "Ergonomic web framework for building backend servers",
+		},
+	];
+
+	if (!hasIncompatibleFrontend) {
+		backendOptions.push({
+			value: "convex" as const,
+			label: "Convex",
+			hint: "Reactive backend-as-a-service platform",
+		});
+	}
+
+	let initialValue = DEFAULT_CONFIG.backend;
+	if (hasIncompatibleFrontend && initialValue === "convex") {
+		initialValue = "hono";
+	}
+
 	const response = await select<ProjectBackend>({
 		message: "Select backend framework",
-		options: [
-			{
-				value: "hono",
-				label: "Hono",
-				hint: "Lightweight, ultrafast web framework",
-			},
-			{
-				value: "next",
-				label: "Next.js",
-				hint: "Full-stack framework with API routes",
-			},
-			{
-				value: "express",
-				label: "Express",
-				hint: "Fast, unopinionated, minimalist web framework for Node.js",
-			},
-			{
-				value: "elysia",
-				label: "Elysia",
-				hint: "Ergonomic web framework for building backend servers",
-			},
-			{
-				value: "convex",
-				label: "Convex",
-				hint: "Reactive backend-as-a-service platform",
-			},
-		],
-		initialValue: DEFAULT_CONFIG.backend,
+		options: backendOptions,
+		initialValue,
 	});
 
 	if (isCancel(response)) {

apps/cli/src/prompts/config-prompts.ts

@@ -53,8 +53,10 @@ export async function gatherConfig(
 			projectName: async () => {
 				return getProjectName(flags.projectName);
 			},
-			frontend: () => getFrontendChoice(flags.frontend),
-			backend: () => getBackendFrameworkChoice(flags.backend),
+			frontend: ({ results }) =>
+				getFrontendChoice(flags.frontend, flags.backend),
+			backend: ({ results }) =>
+				getBackendFrameworkChoice(flags.backend, results.frontend),
 			runtime: ({ results }) =>
 				getRuntimeChoice(flags.runtime, results.backend),
 			database: ({ results }) =>

apps/cli/src/prompts/examples.ts

@@ -37,6 +37,7 @@ export async function getExamplesChoice(
 				"next",
 				"nuxt",
 				"svelte",
+				"solid",
 			].includes(f),
 		) ?? false;
 	const noFrontendSelected = !frontends || frontends.length === 0;
@@ -52,7 +53,7 @@ export async function getExamplesChoice(
 		},
 	];
 
-	if (backend !== "elysia") {
+	if (backend !== "elysia" && !frontends?.includes("solid")) {
 		options.push({
 			value: "ai" as const,
 			label: "AI Chat",

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

@@ -1,10 +1,11 @@
 import { cancel, isCancel, multiselect, select } from "@clack/prompts";
 import pc from "picocolors";
 import { DEFAULT_CONFIG } from "../constants";
-import type { ProjectFrontend } from "../types";
+import type { ProjectBackend, ProjectFrontend } from "../types";
 
 export async function getFrontendChoice(
 	frontendOptions?: ProjectFrontend[],
+	backend?: ProjectBackend,
 ): Promise<ProjectFrontend[]> {
 	if (frontendOptions !== undefined) return frontendOptions;
 
@@ -23,17 +24,7 @@ export async function getFrontendChoice(
 			},
 		],
 		required: false,
-		initialValues: DEFAULT_CONFIG.frontend.some(
-			(f) =>
-				f === "tanstack-router" ||
-				f === "react-router" ||
-				f === "tanstack-start" ||
-				f === "next" ||
-				f === "nuxt" ||
-				f === "svelte",
-		)
-			? ["web"]
-			: [],
+		initialValues: ["web"],
 	});
 
 	if (isCancel(frontendTypes)) {
@@ -44,50 +35,55 @@ export async function getFrontendChoice(
 	const result: ProjectFrontend[] = [];
 
 	if (frontendTypes.includes("web")) {
+		const allWebOptions = [
+			{
+				value: "tanstack-router" as const,
+				label: "TanStack Router",
+				hint: "Modern and scalable routing for React Applications",
+			},
+			{
+				value: "react-router" as const,
+				label: "React Router",
+				hint: "A user‑obsessed, standards‑focused, multi‑strategy router",
+			},
+			{
+				value: "next" as const,
+				label: "Next.js",
+				hint: "The React Framework for the Web",
+			},
+			{
+				value: "nuxt" as const,
+				label: "Nuxt",
+				hint: "The Progressive Web Framework for Vue.js",
+			},
+			{
+				value: "svelte" as const,
+				label: "Svelte",
+				hint: "web development for the rest of us",
+			},
+			{
+				value: "solid" as const,
+				label: "Solid",
+				hint: "Simple and performant reactivity for building user interfaces",
+			},
+			{
+				value: "tanstack-start" as const,
+				label: "TanStack Start (beta)",
+				hint: "SSR, Server Functions, API Routes and more with TanStack Router",
+			},
+		];
+
+		const webOptions = allWebOptions.filter((option) => {
+			if (backend === "convex") {
+				return option.value !== "nuxt" && option.value !== "solid";
+			}
+			return true;
+		});
+
 		const webFramework = await select<ProjectFrontend>({
 			message: "Choose frontend framework",
-			options: [
-				{
-					value: "tanstack-router",
-					label: "TanStack Router",
-					hint: "Modern and scalable routing for React Applications",
-				},
-				{
-					value: "react-router",
-					label: "React Router",
-					hint: "A user‑obsessed, standards‑focused, multi‑strategy router",
-				},
-				{
-					value: "next",
-					label: "Next.js",
-					hint: "The React Framework for the Web",
-				},
-				{
-					value: "nuxt",
-					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)",
-					hint: "SSR, Server Functions, API Routes and more with TanStack Router",
-				},
-			],
-			initialValue:
-				DEFAULT_CONFIG.frontend.find(
-					(f) =>
-						f === "tanstack-router" ||
-						f === "react-router" ||
-						f === "tanstack-start" ||
-						f === "next" ||
-						f === "nuxt" ||
-						f === "svelte",
-				) || "tanstack-router",
+			options: webOptions,
+			initialValue: DEFAULT_CONFIG.frontend[0],
 		});
 
 		if (isCancel(webFramework)) {

apps/cli/src/types.ts

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