Top Related Projects
The React Framework
Set up a modern web app by running one command.
Next generation frontend tooling. It's fast!
web development, streamlined
Build Better Websites. Create modern, resilient user experiences with web fundamentals.
The Intuitive Vue Framework.
Quick Overview
Create T3 App is an opinionated CLI tool for bootstrapping full-stack, typesafe Next.js applications. It provides a curated set of technologies, including Next.js, TypeScript, Tailwind CSS, tRPC, and Prisma, to create a robust and scalable web application foundation.
Pros
- Rapid setup of a full-stack, typesafe Next.js application
- Integrates best-in-class technologies and practices out of the box
- Highly customizable, allowing developers to choose which features to include
- Strong community support and regular updates
Cons
- Opinionated tech stack may not suit all project requirements
- Learning curve for developers unfamiliar with the included technologies
- Potential overhead for smaller projects that don't require all features
Getting Started
To create a new T3 App project, run the following command in your terminal:
npx create-t3-app@latest
Follow the interactive prompts to customize your project. Once the installation is complete, navigate to your project directory and start the development server:
cd my-t3-app
npm run dev
Your T3 App is now running at http://localhost:3000. You can begin editing the files in the src directory to customize your application.
Competitor Comparisons
The React Framework
Pros of Next.js
- More mature and widely adopted framework with extensive documentation
- Offers both static site generation (SSG) and server-side rendering (SSR) out of the box
- Larger ecosystem with more plugins and integrations available
Cons of Next.js
- Steeper learning curve for beginners due to its extensive feature set
- Less opinionated, requiring more configuration decisions from developers
- Can be overkill for smaller projects or simple applications
Code Comparison
Next.js basic page structure:
import Head from 'next/head'
export default function Home() {
return (
<div>
<Head>
<title>My Next.js App</title>
</Head>
<main>
<h1>Welcome to Next.js!</h1>
</main>
</div>
)
}
create-t3-app basic page structure:
import { type NextPage } from "next";
import Head from "next/head";
const Home: NextPage = () => {
return (
<>
<Head>
<title>My T3 App</title>
</Head>
<main>
<h1>Welcome to T3 App!</h1>
</main>
</>
);
};
export default Home;
Both examples show similar structure, but create-t3-app includes TypeScript by default and uses a more modern React syntax with arrow functions and implicit returns.
Set up a modern web app by running one command.
Pros of Create React App
- Widely adopted and well-maintained by Facebook
- Extensive documentation and community support
- Simpler setup for beginners with fewer choices to make
Cons of Create React App
- Less flexibility and customization options out-of-the-box
- Larger bundle sizes due to inclusion of unnecessary features
- Slower build times for larger projects
Code Comparison
Create React App:
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
Create T3 App:
import { type AppType } from "next/app";
import { type Session } from "next-auth";
import { SessionProvider } from "next-auth/react";
const MyApp: AppType<{ session: Session | null }> = ({
Component,
pageProps: { session, ...pageProps },
}) => {
return (
<SessionProvider session={session}>
<Component {...pageProps} />
</SessionProvider>
);
};
export default MyApp;
The code comparison shows that Create T3 App uses Next.js and includes built-in support for TypeScript and NextAuth, while Create React App provides a simpler React setup. Create T3 App offers more advanced features out-of-the-box, catering to full-stack applications with integrated authentication.
Next generation frontend tooling. It's fast!
Pros of Vite
- Faster build times and hot module replacement
- More flexible and can be used with various frameworks
- Lighter weight and less opinionated
Cons of Vite
- Requires more configuration for complex setups
- Less integrated ecosystem compared to Create T3 App
- May need additional plugins for certain features
Code Comparison
Create T3 App (typical setup):
import { createTRPCRouter } from "~/server/api/trpc";
import { exampleRouter } from "~/server/api/routers/example";
export const appRouter = createTRPCRouter({
example: exampleRouter,
});
Vite (basic configuration):
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
})
Summary
Create T3 App provides a more opinionated and integrated setup for TypeScript, React, and Next.js projects with built-in tools like tRPC and Prisma. Vite, on the other hand, offers a faster and more flexible build tool that can be used with various frameworks and languages. Create T3 App is better suited for developers who want a pre-configured, full-stack TypeScript setup, while Vite is ideal for those who prefer more control over their project structure and tooling choices.
web development, streamlined
Pros of SvelteKit
- Lightweight and fast due to Svelte's compilation approach
- Built-in routing system with file-based routing
- Server-side rendering (SSR) out of the box
Cons of SvelteKit
- Smaller ecosystem compared to React-based solutions
- Less TypeScript support and tooling integration
- Steeper learning curve for developers familiar with React
Code Comparison
SvelteKit component:
<script>
export let name;
</script>
<h1>Hello {name}!</h1>
create-t3-app component (React):
interface Props {
name: string;
}
export default function Greeting({ name }: Props) {
return <h1>Hello {name}!</h1>;
}
SvelteKit and create-t3-app are both powerful tools for building web applications, but they cater to different preferences and use cases. SvelteKit offers a more lightweight and performant solution with its unique compilation approach, while create-t3-app provides a robust TypeScript-first stack with React and Next.js at its core. The choice between the two depends on factors such as team expertise, project requirements, and desired ecosystem support.
Build Better Websites. Create modern, resilient user experiences with web fundamentals.
Pros of Remix
- Built-in server-side rendering and data loading, providing better performance and SEO out of the box
- More flexible routing system with nested routes and layouts
- Stronger focus on web standards and progressive enhancement
Cons of Remix
- Steeper learning curve, especially for developers new to server-side rendering concepts
- Less opinionated about state management and data fetching on the client-side
- Smaller ecosystem compared to the T3 stack, which leverages popular tools like Next.js and Prisma
Code Comparison
Remix route example:
export default function Index() {
return <h1>Welcome to Remix</h1>;
}
export function loader() {
return json({ message: "Hello from the server" });
}
Create T3 App page example:
import { type NextPage } from "next";
const Home: NextPage = () => {
return <h1>Welcome to Create T3 App</h1>;
};
export default Home;
The Remix example showcases its built-in server-side data loading with the loader function, while the Create T3 App example demonstrates a simpler client-side rendered page using Next.js conventions. Remix's approach allows for more seamless server-client data flow, while Create T3 App provides a familiar React-centric development experience with additional type safety through TypeScript.
The Intuitive Vue Framework.
Pros of Nuxt
- More mature and established framework with a larger ecosystem
- Built-in server-side rendering (SSR) and static site generation (SSG)
- Vue.js-based, offering a gentler learning curve for Vue developers
Cons of Nuxt
- Less TypeScript-focused compared to Create T3 App
- May include more features than needed for smaller projects
- Potentially slower development iterations due to its larger codebase
Code Comparison
Create T3 App:
import { createTRPCRouter, publicProcedure } from "~/server/api/trpc";
export const exampleRouter = createTRPCRouter({
hello: publicProcedure.query(() => {
return { greeting: "Hello from tRPC!" };
}),
});
Nuxt:
export default defineEventHandler((event) => {
return {
greeting: "Hello from Nuxt Server API!"
}
})
The Create T3 App example showcases its tRPC integration for type-safe API routes, while the Nuxt example demonstrates its simpler server-side API handling. Create T3 App provides stronger TypeScript support out of the box, whereas Nuxt offers a more straightforward approach that may be easier for beginners to grasp.
Convert 
designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
create-t3-app
Interactive CLI to start a full-stack, typesafe Next.js app.
Get started with the T3 Stack by running npm create t3-app@latest
Watch Theo's overview on Youtube here
Table of contents
The T3 Stack
The "T3 Stack" is a web development stack made by Theo focused on simplicity, modularity, and full-stack typesafety. It consists of:
So... what is create-t3-app? A template?
Kind of? create-t3-app is a CLI built by seasoned T3 Stack devs to streamline the setup of a modular T3 Stack app. This means each piece is optional, and the "template" is generated based on your specific needs.
After countless projects and many years on this tech, we have lots of opinions and insights. Weâve done our best to encode them into this CLI.
This is NOT an all-inclusive template. We expect you to bring your own libraries that solve the needs of YOUR application. While we donât want to prescribe solutions to more specific problems like state management and deployment, we do have some recommendations listed here.
T3 Axioms
We'll be frank - this is an opinionated project. We share a handful of core beliefs around building and we treat them as the basis for our decisions.
1. Solve Problems
It's easy to fall into the trap of "adding everything" - we explicitly don't want to do that. Everything added to create-t3-app should solve a specific problem that exists within the core technologies included. This means we won't add things like state libraries (zustand, redux) but we will add things like NextAuth.js and integrate Prisma and tRPC for you.
2. Bleed Responsibly
We love our bleeding edge tech. The amount of speed and, honestly, fun that comes out of new shit is really cool. We think it's important to bleed responsibly, using riskier tech in the less risky parts. This means we wouldn't âï¸ bet on risky new database tech (SQL is great!). But we happily â bet on tRPC since it's just functions that are trivial to move off.
3. Typesafety Isn't Optional
The stated goal of create-t3-app is to provide the quickest way to start a new full-stack, typesafe web application. We take typesafety seriously in these parts as it improves our productivity and helps us ship fewer bugs. Any decision that compromises the typesafe nature of create-t3-app is a decision that should be made in a different project.
Getting Started
To scaffold an app using create-t3-app, run any of the following four commands and answer the command prompt questions:
npm
npm create t3-app@latest
yarn
yarn create t3-app
pnpm
pnpm create t3-app@latest
bun
bun create t3-app@latest
For more advanced usage, check out the CLI docs.
Community
For help, discussion about best practices, or any other conversation that would benefit create-t3-app:
Contributors
We ð contributors! Feel free to contribute to this project but please read the Contributing Guidelines before opening an issue or PR so you understand the branching strategy and local development environment. We also welcome you to join our Discord community for either support or contributing guidance.
Made with contrib.rocks
Top Related Projects
The React Framework
Set up a modern web app by running one command.
Next generation frontend tooling. It's fast!
web development, streamlined
Build Better Websites. Create modern, resilient user experiences with web fundamentals.
The Intuitive Vue Framework.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot