TanStack Start Boilerplates & Starters 2026

TL;DR

TanStack Start is the full-stack framework built by Tanner Linsley on top of TanStack Router. Released in 2025, it's still maturing but already competitive for SaaS projects that want type-safe routing, fine-grained SSR, and no vendor lock-in. The starter ecosystem is small compared to Next.js, but growing fast. If you love TanStack Query and TanStack Router, TanStack Start is the natural completion of that stack.

Key Takeaways

• TanStack Start = TanStack Router + SSR + Server Functions — the first framework to treat routing as a first-class type-safe concern
• File-based routing with full type safety — href="/users/$userId" is typed, params are typed, no string guessing
• Vinxi + Vite underneath — faster builds than webpack, standard Vite ecosystem
• Works with any database — no Prisma, no ORM included, bring your own stack
• Still v1.x — smaller ecosystem than Next.js, but production-ready for teams that adopt early
• Best for: Teams already using TanStack Router + TanStack Query who want to go full-stack

---

What Makes TanStack Start Different

Most React meta-frameworks (Next.js, Remix) were designed around a different set of routing primitives. TanStack Start is built from scratch on TanStack Router — which means:

1. Routes are typed end-to-end — no useParams<{ id: string }>() type assertions
2. Search params are first-class — validated, typed, serializable
3. Loaders are type-safe — useLoaderData() returns the correct type without inference hacks
4. Server functions are colocated — createServerFn() next to the component that calls it

// routes/users/$userId.tsx
import { createFileRoute } from "@tanstack/react-router";
import { createServerFn } from "@tanstack/react-start";

// Server function — runs on the server, fully typed
const getUser = createServerFn({ method: "GET" })
  .validator((data: string) => data)
  .handler(async ({ data: userId }) => {
    return db.user.findUnique({ where: { id: userId } });
  });

export const Route = createFileRoute("/users/$userId")({
  loader: ({ params }) => getUser({ data: params.userId }),
  component: UserPage,
});

function UserPage() {
  const user = Route.useLoaderData(); // typed — no cast needed
  const { userId } = Route.useParams(); // typed — no cast needed
  return <div>{user.name}</div>;
}

---

Current Starters Ecosystem

TanStack Start's ecosystem is still young. Here are the most notable starters:

Official Starters

# Basic TanStack Start project
npx create-tsrouter-app@latest my-app --framework=react --bundler=vite --add-ons=tsr

# With Clerk auth
npx create-tsrouter-app@latest my-app --add-ons=clerk

Official templates on GitHub:

• tanstack/router/examples/react/start-basic — minimal starter
• tanstack/router/examples/react/start-convex — Convex + TanStack Start
• tanstack/router/examples/react/start-clerk-basic — Clerk auth
• tanstack/router/examples/react/start-trpc-react-query — tRPC integration

Community SaaS Starters

create-tsrouter-app — Official CLI tool that scaffolds TanStack Start projects with optional add-ons (Clerk, Convex, Tailwind, shadcn).

tanstack-start-clerk-convex (community) — Full SaaS stack with Clerk auth + Convex backend + Stripe.

start-saas (community) — TanStack Start + Better Auth + Drizzle + Stripe. More traditional server stack.

Vinxi starter templates — Lower-level starters using the underlying Vinxi build tool.

---

Complete SaaS Stack with TanStack Start

A production TanStack Start SaaS stack in 2026:

Framework:   TanStack Start (TanStack Router + Server Functions)
Database:    PostgreSQL via Neon or Supabase
ORM:         Drizzle (most popular TanStack pairing)
Auth:        Clerk or Better Auth
Billing:     Stripe
Email:       Resend
UI:          shadcn/ui + Tailwind CSS
State:       TanStack Query (built-in async state)
Deployment:  Vercel, Netlify, or Cloudflare Workers

Key Patterns

Server functions replace API routes:

// app/routes/api/stripe.ts
import { createServerFn } from "@tanstack/react-start";
import Stripe from "stripe";

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!);

export const createCheckoutSession = createServerFn({ method: "POST" })
  .validator((data: { priceId: string; userId: string }) => data)
  .handler(async ({ data }) => {
    const session = await stripe.checkout.sessions.create({
      payment_method_types: ["card"],
      line_items: [{ price: data.priceId, quantity: 1 }],
      mode: "subscription",
      success_url: `${process.env.APP_URL}/dashboard?session_id={CHECKOUT_SESSION_ID}`,
      cancel_url: `${process.env.APP_URL}/pricing`,
      metadata: { userId: data.userId },
    });
    return { url: session.url };
  });

// React component
function PricingButton({ priceId }) {
  const { userId } = useUser(); // Clerk hook

  const handleClick = async () => {
    const { url } = await createCheckoutSession({ data: { priceId, userId } });
    window.location.href = url!;
  };

  return <button onClick={handleClick}>Subscribe</button>;
}

Drizzle schema + TanStack Query:

// db/schema.ts — Drizzle schema
import { pgTable, text, timestamp, boolean } from "drizzle-orm/pg-core";

export const users = pgTable("users", {
  id: text("id").primaryKey(),
  email: text("email").notNull().unique(),
  createdAt: timestamp("created_at").defaultNow(),
  subscriptionStatus: text("subscription_status").default("free"),
});

// routes/dashboard.tsx
export const Route = createFileRoute("/dashboard")({
  loader: async () => {
    const user = await getUserFromDb({ data: getCurrentUserId() });
    return { user };
  },
  component: Dashboard,
});

---

TanStack Start vs Next.js for SaaS

Feature	TanStack Start	Next.js
Routing type safety	✅ Full — params, search, loaders typed	⚠️ Limited — manual type assertions
Server components	⚠️ Server functions (different model)	✅ Full RSC support
Ecosystem	🟡 Growing but small	✅ Largest in the industry
Boilerplates	🟡 10-20 community starters	✅ 100+ premium starters
Vercel integration	✅ Works	✅ Native
Edge deployment	✅ Cloudflare Workers	✅ Edge Runtime
Stability	🟡 v1.x, still evolving	✅ v14+, battle-tested
Learning curve	Medium (if new to TanStack Router)	Low–Medium
Performance	✅ Vite-based, fast DX	✅ Fast (turbopack)

When TanStack Start Wins

TanStack Start outperforms Next.js in developer experience when:

1. Your app has complex search param state — filters, pagination, sort — TanStack Router handles this with zero boilerplate
2. You value type safety everywhere — the typed routing system eliminates a whole class of bugs
3. You want to avoid React Server Components complexity — server functions are simpler to reason about
4. You're already on TanStack Router — Start is the natural next step for SPA-to-SSR migration

When Next.js Still Wins

• You need the most boilerplate options — ShipFast, Makerkit, Supastarter, etc. are Next.js only
• You need React Server Components — TanStack Start has a different server model
• Team familiarity — most React developers know Next.js conventions
• Production maturity — Next.js has years of edge cases solved

---

The "Start" in TanStack Start

The name refers to "Start" as in server start, but it also represents where the framework is in its lifecycle. Unlike Next.js (14+ stable versions) or Remix (now React Router v7), TanStack Start is v1.x — actively being developed with APIs still evolving.

What this means for your SaaS:

• API stability is improving but breaking changes are possible between minor versions
• Documentation gaps exist, especially for advanced patterns
• Community resources (blog posts, Stack Overflow, YouTube) are still growing
• Production adoption is increasing but not yet mainstream

For a boilerplate choice, this means TanStack Start is an early adopter bet — excellent for teams that want the type-safety benefits and don't mind being on the frontier.

---

Recommended TanStack Start Starter

For a new SaaS project in 2026, the most production-ready free starting point is:

npx create-tsrouter-app@latest my-saas \
  --framework=react \
  --bundler=vite \
  --add-ons=clerk \
  --add-ons=shadcn

Then add manually:

• Drizzle ORM + Neon PostgreSQL
• Stripe billing via server functions
• Resend for email

Total cost at launch: $0/month (Neon free tier + Clerk free tier + Vercel free tier).

---

How to Evaluate TanStack Start Starters

TanStack Start's ecosystem is smaller than Next.js, so evaluating starters requires looking beyond stars and readme quality. Three signals that distinguish a production-ready TanStack Start starter from a demo:

Server function error handling. Server functions that throw unhandled errors produce confusing client-side failures. A well-built starter wraps server functions in consistent error handling, returns typed error responses, and surfaces them in the UI in a way the user understands. Look for a createServerFn wrapper with error serialization rather than raw try/catch in individual functions.

Auth integration with server functions. The authentication check in a TanStack Start app happens in the server function, not in a middleware. A starter that doesn't show a clear pattern for requiring auth in server functions (and redirecting unauthenticated users) will leave you figuring out the pattern yourself. Look for a requireAuth() utility that can be called at the top of any protected server function.

Search params handling. TanStack Router's typed search params are one of its strongest features. A starter that uses location.search or new URLSearchParams directly is ignoring the type safety that TanStack Router provides. The correct pattern: define search params schema with Zod in the route configuration and read them through Route.useSearch() in components.

Making the Final Decision: TanStack Start vs Next.js

The binary choice framing — TanStack Start or Next.js — oversimplifies the decision. For most developers choosing a boilerplate in 2026, the practical question is:

Are you building something new, or migrating an existing project? For new projects, TanStack Start is a viable choice with clear type safety advantages. For existing Next.js projects, there's no compelling reason to migrate — TanStack Router's features don't justify a full rewrite of working code.

How complex is your search and filter state? Applications with complex URL-driven state (multi-faceted search, advanced filters, pagination that needs to be bookmarkable) benefit most from TanStack Router's typed search params. Simple dashboards with minimal URL state get less value from the added complexity.

How much community support do you need? TanStack Start's community is a fraction of Next.js's. If you expect to hit non-obvious problems (and you will), having millions of Stack Overflow answers and YouTube tutorials available is genuinely valuable. TanStack Start has good official documentation but far fewer third-party resources. Experienced developers who can debug framework internals can tolerate this gap. Junior developers joining a team should be aware of it.

What's your team's TanStack Router history? Teams already using TanStack Router in SPAs find TanStack Start's model immediately familiar. Teams coming from Next.js file-based routing face a real learning curve with TanStack Router's code-based route definitions.

What TanStack Start Projects Have in Common

Looking across the community starters and official examples, production TanStack Start apps share several characteristics:

Drizzle ORM is the near-universal database choice — Prisma's Node.js-only restrictions conflict with Vinxi's edge deployment targets, and Drizzle's SQL-like API fits the explicit TypeScript style of TanStack Start projects. Server functions return typed objects or throw typed errors — never untyped responses. TanStack Query (via queryOptions) is the standard for data fetching that needs client-side caching. The auth layer (Clerk or Better Auth) is integrated at the router level, not the component level.

For the broader SaaS boilerplate landscape and how TanStack Start fits into the framework choices available, see best SaaS boilerplates 2026 and the Next.js boilerplate comparison. For type-safe full-stack TypeScript alternatives, the T3 Stack review covers the tRPC approach that inspired TanStack Start's server function model. For the broader context of choosing between type-safe TypeScript stacks and understanding what buy vs build means for framework-level choices, see the buy vs build SaaS analysis.

TanStack Start Auth Patterns

Auth integration in TanStack Start differs from Next.js middleware patterns in a meaningful way. In Next.js, middleware.ts intercepts requests before they reach pages and can redirect unauthenticated users. TanStack Start uses server functions and route loaders for the same purpose — but the pattern is explicit rather than implicit.

Clerk integration:

// app/routes/_authenticated.tsx — layout route that requires auth
import { createFileRoute, redirect } from "@tanstack/react-router";
import { getAuth } from "@clerk/tanstack-start/server";

export const Route = createFileRoute("/_authenticated")({
  beforeLoad: async ({ context }) => {
    const { userId } = await getAuth(context);
    if (!userId) throw redirect({ to: "/sign-in" });
    return { userId };
  },
  component: AuthenticatedLayout,
});

All routes nested under /_authenticated inherit the auth check automatically through TanStack Router's layout route system. This is conceptually similar to Next.js route groups with layout.tsx auth checks, but the types flow through correctly — Route.useRouteContext() in child routes returns { userId: string } without additional type assertions.

Better Auth integration:

Better Auth's server-side session check is called from within the server function handler:

import { createServerFn } from "@tanstack/react-start";
import { auth } from "@/lib/auth";

export const getProtectedData = createServerFn({ method: "GET" })
  .handler(async ({ context }) => {
    const session = await auth.api.getSession({
      headers: context.request.headers,
    });
    if (!session) throw new Error("Unauthorized");
    return db.user.findUnique({ where: { id: session.user.id } });
  });

Both patterns work. Clerk's beforeLoad integration is cleaner for route-level protection. Better Auth's server function pattern is simpler when protection is per-function rather than per-route.

Deployment Options for TanStack Start

TanStack Start (built on Vinxi) supports multiple deployment targets:

Vercel is the simplest option for teams familiar with it. Vinxi generates Vercel-compatible output automatically. Server functions deploy as Vercel serverless functions. No configuration required beyond vercel.json presets.

Cloudflare Workers is the compelling alternative. TanStack Start's server functions compile to the Workers runtime, enabling globally distributed edge execution. This requires using a database client compatible with the Workers runtime — Neon's HTTP driver or D1 (Cloudflare's SQLite). If global latency matters for your SaaS (support users on multiple continents), Cloudflare Workers deployment with TanStack Start is a meaningful architectural advantage over Next.js deployed to a single Vercel region.

Node.js server is available for self-hosted deployments. Vinxi generates a standard Node.js HTTP server that can run on Railway, Render, or a VPS.

Migrating From Next.js to TanStack Start

Teams that built early versions of their SaaS on Next.js and want to migrate to TanStack Start face a meaningful refactoring effort. The migration is not a file-by-file port — the routing model is fundamentally different.

Next.js API routes (app/api/route.ts) become TanStack Start server functions (createServerFn). The signature changes, the error handling convention changes, and the typing model changes. Each API route requires deliberate rewriting rather than mechanical conversion.

Next.js page data fetching (async function Page() { const data = await fetch(...) }) becomes TanStack Start loader functions (Route.loader). The data access pattern shifts from implicit co-location with the component to explicit route-level configuration. Components that called fetch() directly need to be restructured to use Route.useLoaderData().

The practical recommendation: don't migrate incrementally. TanStack Start's type safety comes from the whole system being TanStack-typed — partial migrations where some pages use Next.js patterns and others use TanStack patterns lose the type safety benefits while doubling the complexity. Either commit to a full migration (typically 2-4 weeks for a medium SaaS) or stay on Next.js until a greenfield rewrite is justified.

For teams evaluating TanStack Start as a Next.js replacement for a new project rather than a migration, the evaluation criteria are cleaner. The typed routing system, edge deployment support, and TanStack Query integration are real advantages. The boilerplate ecosystem gap is the real cost — you'll be writing more setup code than ShipFast or Supastarter would provide. For the full landscape of what boilerplates exist for both frameworks, see the best Next.js boilerplates guide alongside this TanStack Start overview.

The right TanStack Start candidate is a team that already uses TanStack Router in a SPA today and wants to add SSR without adopting Next.js's opinions. For teams starting fresh without prior TanStack Router investment, the ecosystem gap — fewer community resources, fewer boilerplates, less Stack Overflow coverage — is a meaningful productivity tax in the first 4-8 weeks. Once past the setup phase, the type safety dividends pay back that investment. The decision is essentially: how much do you value type-safe routing and full TanStack ecosystem integration versus a faster initial setup and larger community for debugging questions? For most first-time SaaS founders, Next.js's larger community wins. For experienced teams building their third or fourth SaaS product who already know where the common pitfalls are, TanStack Start's type safety advantages are worth the smaller community.

Methodology

• Reviewed TanStack Start docs, changelog, and GitHub discussions as of March 2026
• Tested create-tsrouter-app scaffolding across Next.js, React, and Vinxi modes
• Analyzed community starters on GitHub (stars, commit activity, issue tracker)
• Compared server function patterns vs Next.js Route Handlers and Remix actions
• Reviewed TanStack Router v1 stability notes and upgrade guides

---

Find all TanStack Start and React full-stack boilerplates on StarterPick.