create-100x-mobile 0.4.4 → 0.4.5

package/dist/cli.js

@@ -16,11 +16,13 @@ Options:
   --yes                   Run without prompts (defaults name to "my-app")
   --no-install            Skip dependency installation
   --skip-git              Skip git init/commit
+  --backend <provider>    Backend: "convex" or "instantdb"
   --sdk <value>           Use "latest", "previous", or a specific version (e.g. 54.0.33)
   --clerk-pk <key>        Pre-fill Clerk publishable key
   --clerk-domain <domain> Pre-fill Clerk issuer domain
+  --instant-app-id <id>   Pre-fill InstantDB app id
 
-Scaffolds a full-stack mobile app with Expo + Convex + Clerk.
+Scaffolds a mobile app with Expo + Convex/Clerk or Expo + InstantDB.
 `);
 }
 async function main() {

package/dist/commands/new/args.js

@@ -22,8 +22,10 @@ function parseNewCommandArgs(args) {
         installDependencies: true,
         initializeGit: true,
         sdk: null,
+        backend: null,
         clerkPublishableKey: null,
         clerkDomain: null,
+        instantAppId: null,
     };
     let projectName = null;
     for (let i = 0; i < args.length; i++) {
@@ -55,6 +57,16 @@ function parseNewCommandArgs(args) {
             i = nextIndex;
             continue;
         }
+        if (arg === "--backend" || arg.startsWith("--backend=")) {
+            const { value, nextIndex } = getInlineOrNextValue(arg, args, i);
+            const normalized = value.toLowerCase();
+            if (normalized !== "convex" && normalized !== "instantdb") {
+                throw new Error(`Invalid --backend value "${value}". Use "convex" or "instantdb".`);
+            }
+            options.backend = normalized;
+            i = nextIndex;
+            continue;
+        }
         if (arg === "--clerk-pk" || arg.startsWith("--clerk-pk=")) {
             const { value, nextIndex } = getInlineOrNextValue(arg, args, i);
             options.clerkPublishableKey = value;
@@ -67,6 +79,12 @@ function parseNewCommandArgs(args) {
             i = nextIndex;
             continue;
         }
+        if (arg === "--instant-app-id" || arg.startsWith("--instant-app-id=")) {
+            const { value, nextIndex } = getInlineOrNextValue(arg, args, i);
+            options.instantAppId = value;
+            i = nextIndex;
+            continue;
+        }
         throw new Error(`Unknown flag: ${arg}`);
     }
     if (!projectName && !options.interactive) {

package/dist/commands/new/scaffold.js

@@ -7,16 +7,16 @@ const node_path_1 = require("node:path");
 const fs_1 = require("../../lib/fs");
 // 1x1 transparent PNG placeholder.
 const TRANSPARENT_PNG_BASE64 = "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAwMCAO7+P5kAAAAASUVORK5CYII=";
-async function createProjectDirectories(projectDir) {
-    const dirs = [
-        "app/(auth)",
+async function createProjectDirectories(projectDir, backend) {
+    const commonDirs = [
         "app/(tabs)",
-        "app/providers",
-        "components",
-        "convex",
         "hooks",
         "assets/images",
     ];
+    const backendDirs = backend === "convex"
+        ? ["app/(auth)", "app/providers", "components", "convex"]
+        : ["lib"];
+    const dirs = [...commonDirs, ...backendDirs];
     for (const dir of dirs) {
         await (0, fs_1.ensureDir)((0, node_path_1.join)(projectDir, dir));
     }

package/dist/commands/new/steps.js

@@ -5,11 +5,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.normalizeClerkDomain = normalizeClerkDomain;
 exports.toErrorMessage = toErrorMessage;
+exports.resolveBackendChoice = resolveBackendChoice;
 exports.resolveExpoVersion = resolveExpoVersion;
 exports.installDependencies = installDependencies;
 exports.resolveExpoDependencies = resolveExpoDependencies;
 exports.promptClerkSetup = promptClerkSetup;
+exports.promptInstantSetup = promptInstantSetup;
 exports.writeAuthEnvironment = writeAuthEnvironment;
+exports.writeInstantEnvironment = writeInstantEnvironment;
 exports.initializeConvex = initializeConvex;
 exports.ensureExpoPublicConvexUrl = ensureExpoPublicConvexUrl;
 exports.setConvexClerkEnv = setConvexClerkEnv;
@@ -58,6 +61,34 @@ function normalizeSdkArg(sdk) {
     }
     throw new Error(`Invalid --sdk value "${value}". Use "latest", "previous", or a version like "54.0.33".`);
 }
+async function resolveBackendChoice(options) {
+    if (options.backend) {
+        return options.backend;
+    }
+    if (!options.interactive) {
+        return "convex";
+    }
+    const choice = await (0, prompts_1.select)({
+        message: "Which backend do you want?",
+        options: [
+            {
+                value: "convex",
+                label: "Convex + Clerk",
+                hint: "Auth + realtime backend",
+            },
+            {
+                value: "instantdb",
+                label: "InstantDB",
+                hint: "Client-first realtime backend",
+            },
+        ],
+        initialValue: "convex",
+    });
+    if ((0, prompts_1.isCancel)(choice)) {
+        return "convex";
+    }
+    return choice;
+}
 async function resolveExpoVersion(options) {
     if (options.sdk) {
         const normalized = normalizeSdkArg(options.sdk);
@@ -144,24 +175,21 @@ async function installDependencies(projectDir) {
         }
     }
 }
-async function resolveExpoDependencies(projectDir) {
-    const expoPackages = [
+async function resolveExpoDependencies(projectDir, backend) {
+    const commonExpoPackages = [
         "react",
         "react-dom",
         "react-native",
         "expo-router",
         "@expo/vector-icons",
-        "expo-auth-session",
         "expo-blur",
         "expo-constants",
         "expo-font",
         "expo-haptics",
         "expo-linking",
-        "expo-secure-store",
         "expo-splash-screen",
         "expo-status-bar",
         "expo-system-ui",
-        "expo-web-browser",
         "react-native-gesture-handler",
         "react-native-reanimated",
         "react-native-safe-area-context",
@@ -169,6 +197,10 @@ async function resolveExpoDependencies(projectDir) {
         "react-native-svg",
         "react-native-web",
     ];
+    const backendExpoPackages = backend === "convex"
+        ? ["expo-auth-session", "expo-secure-store", "expo-web-browser"]
+        : ["@react-native-async-storage/async-storage", "@react-native-community/netinfo"];
+    const expoPackages = [...commonExpoPackages, ...backendExpoPackages];
     try {
         await (0, run_1.run)("npx", ["expo", "install", ...expoPackages], { cwd: projectDir });
         return true;
@@ -240,6 +272,24 @@ async function promptClerkSetup(options) {
     }
     return { publishableKey, domain, jwtCreated };
 }
+async function promptInstantSetup(options) {
+    let appId = options.instantAppId?.trim() ?? "";
+    if (!appId && options.interactive) {
+        prompts_1.log.info("");
+        prompts_1.log.info(picocolors_1.default.bold("InstantDB Setup"));
+        prompts_1.log.info(picocolors_1.default.dim("Create an app id with: npx instant-cli init-without-files --title my-app"));
+        prompts_1.log.info(picocolors_1.default.dim("Press Enter to skip and configure later."));
+        const appIdInput = await (0, prompts_1.text)({
+            message: "InstantDB App ID",
+            placeholder: "your-instant-app-id",
+            defaultValue: "",
+        });
+        if (!(0, prompts_1.isCancel)(appIdInput) && appIdInput) {
+            appId = appIdInput.trim();
+        }
+    }
+    return { appId };
+}
 async function writeAuthEnvironment(projectDir, clerk) {
     const envLocalPath = (0, node_path_1.join)(projectDir, ".env.local");
     let envContents = "";
@@ -265,6 +315,23 @@ async function writeAuthEnvironment(projectDir, clerk) {
         await (0, fs_1.writeTextFile)((0, node_path_1.join)(projectDir, "convex/auth.config.ts"), `export default {\n  providers: [\n    {\n      domain: ${serializedDomain},\n      applicationID: "convex",\n    },\n  ],\n};\n`);
     }
 }
+async function writeInstantEnvironment(projectDir, instant) {
+    if (!instant.appId) {
+        return;
+    }
+    const envLocalPath = (0, node_path_1.join)(projectDir, ".env.local");
+    let envContents = "";
+    try {
+        envContents = await (0, fs_1.readTextFile)(envLocalPath);
+    }
+    catch (error) {
+        if (isErrnoException(error) && error.code !== "ENOENT") {
+            prompts_1.log.warn(`Could not read .env.local: ${toErrorMessage(error)}`);
+        }
+    }
+    envContents = (0, dotenv_1.upsertDotenvVar)(envContents, "EXPO_PUBLIC_INSTANT_APP_ID", instant.appId);
+    await (0, fs_1.writeTextFile)(envLocalPath, envContents);
+}
 async function initializeConvex(projectDir) {
     try {
         await (0, run_1.run)("bunx", ["convex", "dev", "--once"], { cwd: projectDir });
@@ -343,18 +410,23 @@ async function initializeGit(projectDir) {
         return false;
     }
 }
-async function runHealthChecks(projectDir, clerkPublishableKey) {
+async function runHealthChecks(projectDir, backend, clerkPublishableKey) {
     const envLocalPath = (0, node_path_1.join)(projectDir, ".env.local");
     const checks = [];
     const envExists = await (0, fs_1.pathExists)(envLocalPath);
     checks.push({ label: ".env.local exists", ok: envExists });
     if (!envExists) {
-        checks.push({ label: "EXPO_PUBLIC_CONVEX_URL is set", ok: false });
-        if (clerkPublishableKey) {
-            checks.push({
-                label: "EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY is set",
-                ok: false,
-            });
+        if (backend === "instantdb") {
+            checks.push({ label: "EXPO_PUBLIC_INSTANT_APP_ID is set", ok: false });
+        }
+        else {
+            checks.push({ label: "EXPO_PUBLIC_CONVEX_URL is set", ok: false });
+            if (clerkPublishableKey) {
+                checks.push({
+                    label: "EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY is set",
+                    ok: false,
+                });
+            }
         }
         return checks;
     }
@@ -365,15 +437,23 @@ async function runHealthChecks(projectDir, clerkPublishableKey) {
     catch (error) {
         prompts_1.log.warn(`Could not read .env.local during health checks: ${toErrorMessage(error)}`);
     }
-    checks.push({
-        label: "EXPO_PUBLIC_CONVEX_URL is set",
-        ok: envContent.includes("EXPO_PUBLIC_CONVEX_URL"),
-    });
-    if (clerkPublishableKey) {
+    if (backend === "instantdb") {
         checks.push({
-            label: "EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY is set",
-            ok: envContent.includes("EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY"),
+            label: "EXPO_PUBLIC_INSTANT_APP_ID is set",
+            ok: envContent.includes("EXPO_PUBLIC_INSTANT_APP_ID"),
         });
     }
+    else {
+        checks.push({
+            label: "EXPO_PUBLIC_CONVEX_URL is set",
+            ok: envContent.includes("EXPO_PUBLIC_CONVEX_URL"),
+        });
+        if (clerkPublishableKey) {
+            checks.push({
+                label: "EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY is set",
+                ok: envContent.includes("EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY"),
+            });
+        }
+    }
     return checks;
 }

package/dist/commands/new.js

@@ -36,6 +36,12 @@ const settingsScreen_1 = require("../templates/app/settingsScreen");
 const signIn_1 = require("../templates/app/signIn");
 const tabsLayout_1 = require("../templates/app/tabsLayout");
 const todosScreen_1 = require("../templates/app/todosScreen");
+// Instant templates
+const instantLib_1 = require("../templates/instant/instantLib");
+const rootLayout_2 = require("../templates/instant/rootLayout");
+const settingsScreen_2 = require("../templates/instant/settingsScreen");
+const tabsLayout_2 = require("../templates/instant/tabsLayout");
+const todosScreen_2 = require("../templates/instant/todosScreen");
 // Component templates
 const addTodoForm_1 = require("../templates/components/addTodoForm");
 const emptyState_1 = require("../templates/components/emptyState");
@@ -43,18 +49,42 @@ const filterTabs_1 = require("../templates/components/filterTabs");
 const todoItem_1 = require("../templates/components/todoItem");
 // Hook templates
 const useFrameworkReady_1 = require("../templates/hooks/useFrameworkReady");
-function buildTemplateFiles(projectName, expoVersion) {
+function buildTemplateFiles(projectName, expoVersion, backend) {
+    if (backend === "instantdb") {
+        const files = [
+            // Config
+            ["package.json", (0, packageJson_1.packageJsonTemplate)(projectName, expoVersion, backend)],
+            ["app.json", (0, appJson_1.appJsonTemplate)(projectName)],
+            ["tsconfig.json", (0, tsconfig_1.tsconfigTemplate)()],
+            [".gitignore", (0, gitignore_1.gitignoreTemplate)()],
+            [".env.example", (0, envExample_1.envExampleTemplate)(backend)],
+            ["expo-env.d.ts", (0, tsconfig_1.expoEnvDtsTemplate)()],
+            [".prettierrc", (0, prettierrc_1.prettierrcTemplate)()],
+            ["eas.json", (0, easJson_1.easJsonTemplate)()],
+            ["README.md", (0, readme_1.readmeTemplate)(projectName, backend)],
+            // Instant app
+            ["app/_layout.tsx", (0, rootLayout_2.instantRootLayoutTemplate)()],
+            ["app/+not-found.tsx", (0, notFound_1.notFoundTemplate)()],
+            ["app/(tabs)/_layout.tsx", (0, tabsLayout_2.instantTabsLayoutTemplate)()],
+            ["app/(tabs)/index.tsx", (0, todosScreen_2.instantTodosScreenTemplate)()],
+            ["app/(tabs)/settings.tsx", (0, settingsScreen_2.instantSettingsScreenTemplate)()],
+            ["lib/instant.ts", (0, instantLib_1.instantLibTemplate)()],
+            // Hooks
+            ["hooks/useFrameworkReady.ts", (0, useFrameworkReady_1.useFrameworkReadyTemplate)()],
+        ];
+        return files.map(([path, content]) => ({ path, content }));
+    }
     const files = [
         // Config
-        ["package.json", (0, packageJson_1.packageJsonTemplate)(projectName, expoVersion)],
+        ["package.json", (0, packageJson_1.packageJsonTemplate)(projectName, expoVersion, backend)],
         ["app.json", (0, appJson_1.appJsonTemplate)(projectName)],
         ["tsconfig.json", (0, tsconfig_1.tsconfigTemplate)()],
         [".gitignore", (0, gitignore_1.gitignoreTemplate)()],
-        [".env.example", (0, envExample_1.envExampleTemplate)()],
+        [".env.example", (0, envExample_1.envExampleTemplate)(backend)],
         ["expo-env.d.ts", (0, tsconfig_1.expoEnvDtsTemplate)()],
         [".prettierrc", (0, prettierrc_1.prettierrcTemplate)()],
         ["eas.json", (0, easJson_1.easJsonTemplate)()],
-        ["README.md", (0, readme_1.readmeTemplate)(projectName)],
+        ["README.md", (0, readme_1.readmeTemplate)(projectName, backend)],
         // Convex
         ["convex/schema.ts", (0, schema_1.schemaTemplate)()],
         ["convex/todos.ts", (0, todos_1.todosTemplate)()],
@@ -128,14 +158,20 @@ async function cmdNew(rawArgs) {
         }
         await (0, fs_1.removeDir)(projectDir);
     }
-    if (options.clerkDomain) {
+    const backend = await (0, steps_1.resolveBackendChoice)(options);
+    if (backend === "convex" && options.clerkDomain) {
         options.clerkDomain = (0, steps_1.normalizeClerkDomain)(options.clerkDomain);
     }
     const expoVersion = await (0, steps_1.resolveExpoVersion)(options);
-    const clerk = await (0, steps_1.promptClerkSetup)(options);
-    const totalSteps = 2 + // project generation + convex init
+    const clerk = backend === "convex"
+        ? await (0, steps_1.promptClerkSetup)(options)
+        : { publishableKey: "", domain: "", jwtCreated: false };
+    const instant = backend === "instantdb"
+        ? await (0, steps_1.promptInstantSetup)(options)
+        : { appId: "" };
+    const totalSteps = 1 + // project generation
         (options.installDependencies ? 2 : 0) +
-        (clerk.domain ? 1 : 0) +
+        (backend === "convex" ? 2 + (clerk.domain ? 1 : 0) : 1) +
         (options.initializeGit ? 1 : 0) +
         1; // health check
     let currentStep = 0;
@@ -143,11 +179,26 @@ async function cmdNew(rawArgs) {
     const structureSpinner = (0, prompts_1.spinner)();
     currentStep++;
     structureSpinner.start(`Creating project structure ${stepLabel()}`);
-    await (0, scaffold_1.createProjectDirectories)(projectDir);
-    await (0, scaffold_1.writeScaffoldFiles)(projectDir, buildTemplateFiles(projectName, expoVersion));
+    await (0, scaffold_1.createProjectDirectories)(projectDir, backend);
+    await (0, scaffold_1.writeScaffoldFiles)(projectDir, buildTemplateFiles(projectName, expoVersion, backend));
     await (0, scaffold_1.writeDefaultAssetFiles)(projectDir);
-    await (0, steps_1.writeAuthEnvironment)(projectDir, clerk);
     structureSpinner.stop("Project files created.");
+    currentStep++;
+    if (backend === "convex") {
+        prompts_1.log.step(`Configuring Convex + Clerk ${stepLabel()}`);
+        await (0, steps_1.writeAuthEnvironment)(projectDir, clerk);
+        prompts_1.log.success("Convex and Clerk environment configured.");
+    }
+    else {
+        prompts_1.log.step(`Configuring InstantDB ${stepLabel()}`);
+        await (0, steps_1.writeInstantEnvironment)(projectDir, instant);
+        if (instant.appId) {
+            prompts_1.log.success("InstantDB environment configured.");
+        }
+        else {
+            prompts_1.log.info(picocolors_1.default.dim("Set EXPO_PUBLIC_INSTANT_APP_ID in .env.local to connect InstantDB."));
+        }
+    }
     if (options.installDependencies) {
         currentStep++;
         prompts_1.log.step(`Installing dependencies ${stepLabel()}`);
@@ -160,7 +211,7 @@ async function cmdNew(rawArgs) {
         }
         currentStep++;
         prompts_1.log.step(`Installing Expo dependencies ${stepLabel()}`);
-        const resolved = await (0, steps_1.resolveExpoDependencies)(projectDir);
+        const resolved = await (0, steps_1.resolveExpoDependencies)(projectDir, backend);
         if (resolved) {
             prompts_1.log.success("Expo dependencies resolved.");
         }
@@ -168,31 +219,33 @@ async function cmdNew(rawArgs) {
     else {
         prompts_1.log.info(picocolors_1.default.dim("Skipping dependency installation (--no-install)."));
     }
-    currentStep++;
-    prompts_1.log.step(`Setting up Convex ${stepLabel()}`);
-    const convexInitialized = await (0, steps_1.initializeConvex)(projectDir);
-    if (convexInitialized) {
-        prompts_1.log.success("Convex initialized.");
-    }
-    else {
-        prompts_1.log.info(picocolors_1.default.dim(`Run manually: cd ${projectName} && bunx convex dev --once`));
-    }
-    const convexUrlReady = await (0, steps_1.ensureExpoPublicConvexUrl)(projectDir);
-    if (convexUrlReady) {
-        prompts_1.log.success("Convex URL configured for Expo.");
-    }
-    else {
-        prompts_1.log.info(picocolors_1.default.dim("Add EXPO_PUBLIC_CONVEX_URL to .env.local with your Convex deployment URL."));
-    }
-    if (clerk.domain) {
+    if (backend === "convex") {
         currentStep++;
-        prompts_1.log.step(`Setting Convex environment variable ${stepLabel()}`);
-        const setEnvOk = await (0, steps_1.setConvexClerkEnv)(projectDir, clerk.domain);
-        if (setEnvOk) {
-            prompts_1.log.success("Convex environment variable set.");
+        prompts_1.log.step(`Setting up Convex ${stepLabel()}`);
+        const convexInitialized = await (0, steps_1.initializeConvex)(projectDir);
+        if (convexInitialized) {
+            prompts_1.log.success("Convex initialized.");
         }
         else {
-            prompts_1.log.info(picocolors_1.default.dim(`Run manually: bunx convex env set CLERK_JWT_ISSUER_DOMAIN ${clerk.domain}`));
+            prompts_1.log.info(picocolors_1.default.dim(`Run manually: cd ${projectName} && bunx convex dev --once`));
+        }
+        const convexUrlReady = await (0, steps_1.ensureExpoPublicConvexUrl)(projectDir);
+        if (convexUrlReady) {
+            prompts_1.log.success("Convex URL configured for Expo.");
+        }
+        else {
+            prompts_1.log.info(picocolors_1.default.dim("Add EXPO_PUBLIC_CONVEX_URL to .env.local with your Convex deployment URL."));
+        }
+        if (clerk.domain) {
+            currentStep++;
+            prompts_1.log.step(`Setting Convex environment variable ${stepLabel()}`);
+            const setEnvOk = await (0, steps_1.setConvexClerkEnv)(projectDir, clerk.domain);
+            if (setEnvOk) {
+                prompts_1.log.success("Convex environment variable set.");
+            }
+            else {
+                prompts_1.log.info(picocolors_1.default.dim(`Run manually: bunx convex env set CLERK_JWT_ISSUER_DOMAIN ${clerk.domain}`));
+            }
         }
     }
     if (options.initializeGit) {
@@ -208,7 +261,7 @@ async function cmdNew(rawArgs) {
     }
     currentStep++;
     prompts_1.log.step(`Running health check ${stepLabel()}`);
-    const healthChecks = await (0, steps_1.runHealthChecks)(projectDir, clerk.publishableKey);
+    const healthChecks = await (0, steps_1.runHealthChecks)(projectDir, backend, clerk.publishableKey);
     for (const check of healthChecks) {
         if (check.ok) {
             prompts_1.log.info(`  ${picocolors_1.default.green("✓")} ${check.label}`);
@@ -218,7 +271,26 @@ async function cmdNew(rawArgs) {
         }
     }
     prompts_1.log.info("");
-    if (clerk.publishableKey && clerk.domain) {
+    if (backend === "instantdb") {
+        prompts_1.log.success(picocolors_1.default.bold(picocolors_1.default.green("Project scaffolded with InstantDB!")));
+        prompts_1.log.info("");
+        prompts_1.log.info("  Next steps:");
+        prompts_1.log.info(`  ${picocolors_1.default.cyan("cd")} ${projectName}`);
+        if (options.installDependencies) {
+            prompts_1.log.info(`  ${picocolors_1.default.cyan("bunx expo start")}`);
+        }
+        else {
+            prompts_1.log.info(`  ${picocolors_1.default.cyan("bun install")} ${picocolors_1.default.dim("# or npm install")}`);
+            prompts_1.log.info(`  ${picocolors_1.default.cyan("bunx expo start")}`);
+        }
+        if (!instant.appId) {
+            prompts_1.log.info("");
+            prompts_1.log.info(picocolors_1.default.dim("  Add EXPO_PUBLIC_INSTANT_APP_ID to .env.local first."));
+            prompts_1.log.info(picocolors_1.default.dim("  Create one with: npx instant-cli init-without-files --title " +
+                projectName));
+        }
+    }
+    else if (clerk.publishableKey && clerk.domain) {
         prompts_1.log.success(picocolors_1.default.bold(picocolors_1.default.green("Your app is ready!")));
         prompts_1.log.info("");
         prompts_1.log.info("  Next steps:");

package/dist/templates/config/envExample.js

@@ -1,7 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.envExampleTemplate = envExampleTemplate;
-function envExampleTemplate() {
+function envExampleTemplate(backend) {
+    if (backend === "instantdb") {
+        return `# InstantDB
+EXPO_PUBLIC_INSTANT_APP_ID=
+`;
+    }
     return `# Convex
 EXPO_PUBLIC_CONVEX_URL=
 

package/dist/templates/config/packageJson.js

@@ -1,7 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.packageJsonTemplate = packageJsonTemplate;
-function packageJsonTemplate(appName, expoVersion = "latest") {
+function packageJsonTemplate(appName, expoVersion = "latest", backend = "convex") {
+    const backendDependencies = backend === "instantdb"
+        ? {
+            "@instantdb/react-native": "^0.20.0",
+            "@react-native-async-storage/async-storage": "^2.2.0",
+            "@react-native-community/netinfo": "^11.4.1",
+            "react-native-get-random-values": "^1.11.0",
+        }
+        : {
+            "@clerk/clerk-expo": "^2.14.24",
+            convex: "^1.26.1",
+        };
     const pkg = {
         name: appName,
         main: "expo-router/entry",
@@ -14,12 +25,11 @@ function packageJsonTemplate(appName, expoVersion = "latest") {
             format: "prettier --write .",
         },
         dependencies: {
-            "@clerk/clerk-expo": "^2.14.24",
             "@react-navigation/bottom-tabs": "^7.3.10",
             "@react-navigation/native": "^7.1.6",
-            convex: "^1.26.1",
             expo: expoVersion,
             "lucide-react-native": "^0.542.0",
+            ...backendDependencies,
         },
         devDependencies: {
             "@babel/core": "^7.25.2",

package/dist/templates/config/readme.js

@@ -1,7 +1,51 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.readmeTemplate = readmeTemplate;
-function readmeTemplate(projectName) {
+function readmeTemplate(projectName, backend) {
+    if (backend === "instantdb") {
+        return `# ${projectName}
+
+A mobile app built with **Expo** and **InstantDB**.
+
+## Tech Stack
+
+- **[Expo](https://expo.dev)** — React Native framework
+- **[InstantDB](https://instantdb.com)** — Real-time backend and sync
+- **[Expo Router](https://docs.expo.dev/router/introduction/)** — File-based navigation
+
+## Getting Started
+
+\`\`\`bash
+# Install dependencies
+bun install
+
+# Add your Instant app id
+cp .env.example .env.local
+
+# Start Expo
+bunx expo start
+\`\`\`
+
+Set \`EXPO_PUBLIC_INSTANT_APP_ID\` in \`.env.local\`. You can create an Instant app id via:
+
+\`\`\`bash
+npx instant-cli init-without-files --title ${projectName}
+\`\`\`
+
+## Scripts
+
+| Command | Description |
+|---------|-------------|
+| \`bun run dev\` | Start Expo dev server |
+| \`bun run lint\` | Run ESLint |
+| \`bun run format\` | Format code with Prettier |
+
+## Learn More
+
+- [Expo Docs](https://docs.expo.dev)
+- [InstantDB Docs](https://instantdb.com/docs)
+`;
+    }
     return `# ${projectName}
 
 A full-stack mobile app built with **Expo**, **Convex**, and **Clerk**.

package/dist/templates/instant/instantLib.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.instantLibTemplate = instantLibTemplate;
+function instantLibTemplate() {
+    return `import "react-native-get-random-values";
+import { init, i, id, type InstaQLEntity } from "@instantdb/react-native";
+
+const appId = process.env.EXPO_PUBLIC_INSTANT_APP_ID;
+
+export const schema = i.schema({
+  entities: {
+    todos: i.entity({
+      text: i.string(),
+      completed: i.boolean(),
+      createdAt: i.number().indexed(),
+    }),
+  },
+});
+
+export type InstantTodo = InstaQLEntity<typeof schema, "todos">;
+export const createId = id;
+
+export const isInstantConfigured = Boolean(appId);
+export const instantDb = isInstantConfigured
+  ? init({ appId: appId as string, schema })
+  : null;
+`;
+}

package/dist/templates/instant/rootLayout.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.instantRootLayoutTemplate = instantRootLayoutTemplate;
+function instantRootLayoutTemplate() {
+    return `import { Stack } from "expo-router";
+import { StatusBar } from "expo-status-bar";
+import { useFrameworkReady } from "@/hooks/useFrameworkReady";
+
+export default function RootLayout() {
+  useFrameworkReady();
+
+  return (
+    <>
+      <Stack screenOptions={{ headerShown: false }}>
+        <Stack.Screen name="(tabs)" />
+        <Stack.Screen name="+not-found" />
+      </Stack>
+      <StatusBar style="auto" />
+    </>
+  );
+}
+`;
+}

package/dist/templates/instant/settingsScreen.js

@@ -0,0 +1,83 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.instantSettingsScreenTemplate = instantSettingsScreenTemplate;
+function instantSettingsScreenTemplate() {
+    return `import React from "react";
+import { View, Text, StyleSheet, StatusBar } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+
+export default function SettingsScreen() {
+  const instantAppId = process.env.EXPO_PUBLIC_INSTANT_APP_ID;
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <StatusBar barStyle="dark-content" backgroundColor="#FFFFFF" />
+      <View style={styles.header}>
+        <Text style={styles.title}>Settings</Text>
+      </View>
+
+      <View style={styles.content}>
+        <View style={styles.card}>
+          <Text style={styles.sectionTitle}>Backend</Text>
+          <Text style={styles.sectionText}>InstantDB</Text>
+        </View>
+
+        <View style={styles.card}>
+          <Text style={styles.sectionTitle}>Instant App ID</Text>
+          <Text style={styles.sectionText}>
+            {instantAppId || "Not configured (set EXPO_PUBLIC_INSTANT_APP_ID)"}
+          </Text>
+        </View>
+
+        <View style={styles.card}>
+          <Text style={styles.sectionTitle}>About</Text>
+          <Text style={styles.sectionText}>Version 1.0.0</Text>
+          <Text style={styles.sectionText}>Built with Expo + InstantDB</Text>
+        </View>
+      </View>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#FFFFFF",
+  },
+  header: {
+    paddingHorizontal: 16,
+    paddingTop: 24,
+    paddingBottom: 16,
+  },
+  title: {
+    fontSize: 28,
+    fontWeight: "700",
+    color: "#1F2937",
+  },
+  content: {
+    paddingHorizontal: 16,
+    paddingBottom: 24,
+    gap: 12,
+  },
+  card: {
+    backgroundColor: "#F8F9FA",
+    borderRadius: 14,
+    padding: 16,
+  },
+  sectionTitle: {
+    fontSize: 14,
+    fontWeight: "600",
+    color: "#374151",
+    marginBottom: 8,
+    textTransform: "uppercase",
+    letterSpacing: 0.4,
+  },
+  sectionText: {
+    fontSize: 15,
+    color: "#1F2937",
+    marginBottom: 4,
+    lineHeight: 22,
+  },
+});
+`;
+}

package/dist/templates/instant/tabsLayout.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.instantTabsLayoutTemplate = instantTabsLayoutTemplate;
+function instantTabsLayoutTemplate() {
+    return `import { Tabs } from "expo-router";
+import { SquareCheck as CheckSquare, Settings } from "lucide-react-native";
+import { Platform } from "react-native";
+
+export default function TabLayout() {
+  return (
+    <Tabs
+      screenOptions={{
+        headerShown: false,
+        tabBarStyle: {
+          backgroundColor: "#FFFFFF",
+          borderTopWidth: 0,
+          elevation: 0,
+          shadowOpacity: 0,
+          height: Platform.OS === "ios" ? 88 : 72,
+          paddingBottom: Platform.OS === "ios" ? 32 : 12,
+          paddingTop: 12,
+        },
+        tabBarActiveTintColor: "#1F2937",
+        tabBarInactiveTintColor: "#9CA3AF",
+        tabBarLabelStyle: {
+          fontSize: 13,
+          fontWeight: "500",
+          marginTop: 4,
+        },
+      }}
+    >
+      <Tabs.Screen
+        name="index"
+        options={{
+          title: "Todos",
+          tabBarIcon: ({ size, color }) => (
+            <CheckSquare size={size} color={color} strokeWidth={2} />
+          ),
+        }}
+      />
+      <Tabs.Screen
+        name="settings"
+        options={{
+          title: "Settings",
+          tabBarIcon: ({ size, color }) => (
+            <Settings size={size} color={color} strokeWidth={2} />
+          ),
+        }}
+      />
+    </Tabs>
+  );
+}
+`;
+}

package/dist/templates/instant/todosScreen.js

@@ -0,0 +1,408 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.instantTodosScreenTemplate = instantTodosScreenTemplate;
+function instantTodosScreenTemplate() {
+    return `import React, { useMemo, useState } from "react";
+import {
+  Alert,
+  FlatList,
+  KeyboardAvoidingView,
+  Platform,
+  Pressable,
+  StatusBar,
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+} from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { Check, Plus, Trash2 } from "lucide-react-native";
+import { createId, instantDb, type InstantTodo } from "@/lib/instant";
+
+type FilterType = "all" | "active" | "completed";
+
+function SetupRequired() {
+  return (
+    <View style={styles.setupContainer}>
+      <Text style={styles.setupTitle}>InstantDB Setup Required</Text>
+      <Text style={styles.setupText}>
+        Add EXPO_PUBLIC_INSTANT_APP_ID to your .env.local file.
+      </Text>
+      <Text style={styles.setupHint}>
+        You can create an app id with:\\n
+        npx instant-cli init-without-files --title my-app
+      </Text>
+    </View>
+  );
+}
+
+function InstantTodosScreen() {
+  const db = instantDb!;
+  const [text, setText] = useState("");
+  const [filter, setFilter] = useState<FilterType>("all");
+
+  const { isLoading, error, data } = db.useQuery({
+    todos: {
+      $: {
+        order: { createdAt: "desc" },
+      },
+    },
+  });
+
+  const todos = data?.todos ?? [];
+
+  const filteredTodos = useMemo(() => {
+    switch (filter) {
+      case "active":
+        return todos.filter((todo) => !todo.completed);
+      case "completed":
+        return todos.filter((todo) => todo.completed);
+      default:
+        return todos;
+    }
+  }, [filter, todos]);
+
+  const activeTodosCount = todos.filter((todo) => !todo.completed).length;
+  const completedTodosCount = todos.filter((todo) => todo.completed).length;
+
+  const addTodo = async () => {
+    const trimmed = text.trim();
+    if (!trimmed) return;
+
+    try {
+      await db.transact(
+        db.tx.todos[createId()].create({
+          text: trimmed,
+          completed: false,
+          createdAt: Date.now(),
+        })
+      );
+      setText("");
+    } catch (txnError) {
+      console.error("Failed to add todo:", txnError);
+      Alert.alert("Error", "Could not add todo.");
+    }
+  };
+
+  const toggleTodo = async (todo: InstantTodo) => {
+    try {
+      await db.transact(
+        db.tx.todos[todo.id].update({ completed: !todo.completed })
+      );
+    } catch (txnError) {
+      console.error("Failed to toggle todo:", txnError);
+      Alert.alert("Error", "Could not update todo.");
+    }
+  };
+
+  const removeTodo = async (todo: InstantTodo) => {
+    try {
+      await db.transact(db.tx.todos[todo.id].delete());
+    } catch (txnError) {
+      console.error("Failed to delete todo:", txnError);
+      Alert.alert("Error", "Could not delete todo.");
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <View style={styles.loadingContainer}>
+        <Text style={styles.loadingText}>Loading todos...</Text>
+      </View>
+    );
+  }
+
+  if (error) {
+    return (
+      <View style={styles.loadingContainer}>
+        <Text style={styles.errorText}>Error: {error.message}</Text>
+      </View>
+    );
+  }
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <StatusBar barStyle="dark-content" backgroundColor="#FFFFFF" />
+      <KeyboardAvoidingView
+        style={styles.keyboardAvoidingView}
+        behavior={Platform.OS === "ios" ? "padding" : "height"}
+      >
+        <View style={styles.header}>
+          <Text style={styles.title}>My Tasks</Text>
+          <Text style={styles.subtitle}>
+            {activeTodosCount} active, {completedTodosCount} completed
+          </Text>
+        </View>
+
+        <View style={styles.addRow}>
+          <TextInput
+            style={styles.input}
+            placeholder="Add a new task..."
+            placeholderTextColor="#9CA3AF"
+            value={text}
+            onChangeText={setText}
+            onSubmitEditing={addTodo}
+            returnKeyType="done"
+          />
+          <Pressable
+            style={[styles.addButton, !text.trim() && styles.addButtonDisabled]}
+            onPress={addTodo}
+            disabled={!text.trim()}
+          >
+            <Plus size={18} color={text.trim() ? "#FFFFFF" : "#9CA3AF"} />
+          </Pressable>
+        </View>
+
+        <View style={styles.filters}>
+          {(["all", "active", "completed"] as const).map((key) => (
+            <Pressable
+              key={key}
+              style={[styles.filterPill, filter === key && styles.filterPillActive]}
+              onPress={() => setFilter(key)}
+            >
+              <Text
+                style={[
+                  styles.filterText,
+                  filter === key && styles.filterTextActive,
+                ]}
+              >
+                {key === "completed" ? "done" : key}
+              </Text>
+            </Pressable>
+          ))}
+        </View>
+
+        <FlatList
+          data={filteredTodos}
+          keyExtractor={(item) => item.id}
+          contentContainerStyle={styles.listContent}
+          ListEmptyComponent={
+            <View style={styles.emptyState}>
+              <Text style={styles.emptyTitle}>No tasks yet</Text>
+              <Text style={styles.emptySubtitle}>
+                Add your first task above to get started.
+              </Text>
+            </View>
+          }
+          renderItem={({ item }) => (
+            <View style={styles.todoRow}>
+              <Pressable
+                style={[
+                  styles.checkbox,
+                  item.completed && styles.checkboxCompleted,
+                ]}
+                onPress={() => toggleTodo(item)}
+              >
+                {item.completed ? (
+                  <Check size={14} color="#FFFFFF" strokeWidth={3} />
+                ) : null}
+              </Pressable>
+              <Text
+                style={[
+                  styles.todoText,
+                  item.completed && styles.todoTextCompleted,
+                ]}
+              >
+                {item.text}
+              </Text>
+              <Pressable style={styles.deleteButton} onPress={() => removeTodo(item)}>
+                <Trash2 size={18} color="#9CA3AF" />
+              </Pressable>
+            </View>
+          )}
+        />
+      </KeyboardAvoidingView>
+    </SafeAreaView>
+  );
+}
+
+export default function TodosScreen() {
+  if (!instantDb) {
+    return (
+      <SafeAreaView style={styles.container}>
+        <SetupRequired />
+      </SafeAreaView>
+    );
+  }
+  return <InstantTodosScreen />;
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#FFFFFF",
+  },
+  keyboardAvoidingView: {
+    flex: 1,
+  },
+  header: {
+    paddingHorizontal: 16,
+    paddingTop: 24,
+    paddingBottom: 16,
+  },
+  title: {
+    fontSize: 28,
+    fontWeight: "700",
+    color: "#1F2937",
+    marginBottom: 4,
+  },
+  subtitle: {
+    fontSize: 14,
+    color: "#6B7280",
+    fontWeight: "500",
+  },
+  addRow: {
+    paddingHorizontal: 16,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+  },
+  input: {
+    flex: 1,
+    height: 52,
+    borderWidth: 1,
+    borderColor: "#E5E7EB",
+    borderRadius: 12,
+    paddingHorizontal: 14,
+    fontSize: 16,
+    color: "#1F2937",
+  },
+  addButton: {
+    width: 44,
+    height: 44,
+    borderRadius: 12,
+    backgroundColor: "#1F2937",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  addButtonDisabled: {
+    backgroundColor: "#E5E7EB",
+  },
+  filters: {
+    flexDirection: "row",
+    paddingHorizontal: 16,
+    paddingTop: 14,
+    paddingBottom: 10,
+    gap: 8,
+  },
+  filterPill: {
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderRadius: 999,
+    backgroundColor: "#F3F4F6",
+  },
+  filterPillActive: {
+    backgroundColor: "#111827",
+  },
+  filterText: {
+    color: "#6B7280",
+    fontWeight: "600",
+    textTransform: "capitalize",
+  },
+  filterTextActive: {
+    color: "#FFFFFF",
+  },
+  listContent: {
+    paddingHorizontal: 16,
+    paddingBottom: 96,
+    flexGrow: 1,
+  },
+  todoRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    minHeight: 56,
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: "#E5E7EB",
+    marginBottom: 8,
+    paddingHorizontal: 8,
+    backgroundColor: "#FFFFFF",
+  },
+  checkbox: {
+    width: 24,
+    height: 24,
+    borderRadius: 6,
+    borderWidth: 2,
+    borderColor: "#D1D5DB",
+    alignItems: "center",
+    justifyContent: "center",
+    marginRight: 10,
+  },
+  checkboxCompleted: {
+    backgroundColor: "#10B981",
+    borderColor: "#10B981",
+  },
+  todoText: {
+    flex: 1,
+    color: "#1F2937",
+    fontSize: 16,
+  },
+  todoTextCompleted: {
+    color: "#9CA3AF",
+    textDecorationLine: "line-through",
+  },
+  deleteButton: {
+    width: 40,
+    height: 40,
+    borderRadius: 10,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  setupContainer: {
+    flex: 1,
+    justifyContent: "center",
+    paddingHorizontal: 24,
+  },
+  setupTitle: {
+    fontSize: 24,
+    fontWeight: "700",
+    color: "#111827",
+    marginBottom: 12,
+    textAlign: "center",
+  },
+  setupText: {
+    fontSize: 15,
+    color: "#4B5563",
+    textAlign: "center",
+    lineHeight: 22,
+  },
+  setupHint: {
+    marginTop: 16,
+    fontSize: 13,
+    color: "#6B7280",
+    textAlign: "center",
+    lineHeight: 20,
+  },
+  loadingContainer: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    paddingHorizontal: 24,
+  },
+  loadingText: {
+    color: "#4B5563",
+    fontSize: 16,
+  },
+  errorText: {
+    color: "#DC2626",
+    fontSize: 15,
+    textAlign: "center",
+  },
+  emptyState: {
+    marginTop: 48,
+    alignItems: "center",
+  },
+  emptyTitle: {
+    fontSize: 18,
+    fontWeight: "600",
+    color: "#1F2937",
+  },
+  emptySubtitle: {
+    marginTop: 8,
+    color: "#6B7280",
+    fontSize: 14,
+    textAlign: "center",
+  },
+});
+`;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-100x-mobile",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "description": "Scaffold a full-stack mobile app with Expo + Convex + Clerk in seconds",
   "main": "dist/cli.js",
   "bin": {