Quick Start

TanStack Router can be quickly added to any existing Solid project or used to scaffold a new one.

Before installing TanStack router, please ensure your project meets the following requirements:

• solid-jsv1.x.x

TanStack Router is currently only compatible with Solid (with SolidDOM) and Solid. If you're interested in contributing to support other frameworks, such as Solid Native, Angular, or Vue, please reach out to us on Discord.

To install TanStack Router in your project, run the following command using your preferred package manager:

npm install @tanstack/solid-router
# or
pnpm add @tanstack/solid-router
#or
yarn add @tanstack/solid-router
# or
bun add @tanstack/solid-router
# or
deno add npm:@tanstack/solid-router

npm install @tanstack/solid-router
# or
pnpm add @tanstack/solid-router
#or
yarn add @tanstack/solid-router
# or
bun add @tanstack/solid-router
# or
deno add npm:@tanstack/solid-router

Once installed, you can verify the installation by checking your package.json file for the dependency.

{
  "dependencies": {
    "@tanstack/solid-router": "^x.x.x"
  }
}

{
  "dependencies": {
    "@tanstack/solid-router": "^x.x.x"
  }
}

To quickly scaffold a new project with TanStack Router, you can use the create-tsrouter-app command-line tool. This tool sets up a new Solid application with TanStack Router pre-configured, allowing you to get started quickly.

To create a new project, run the following command in your terminal:

npx create-tsrouter-app@latest --framework solid

npx create-tsrouter-app@latest --framework solid

The CLI will guide you through a short series of prompts to customize your setup, including options for:

• File-based or code-based route configuration
• TypeScript support
• Toolchain setup
• Git initialization

Once complete, a new Solid project will be generated with TanStack Router installed and ready to use. All dependencies are automatically installed, so you can jump straight into development:

cd your-project-name
npm run dev

cd your-project-name
npm run dev

TanStack Router supports both file-based and code-based route configurations, allowing you to choose the approach that best fits your workflow.

The file-based approach is the recommended option for most projects. It automatically creates routes based on your file structure, giving you the best mix of performance, simplicity, and developer experience.

To create a new project using file-based route generation, run the following command:

npx create-tsrouter-app@latest my-app --framework solid --template file-router

npx create-tsrouter-app@latest my-app --framework solid --template file-router

This command sets up a new directory called my-app with everything configured. Once setup completes, you can then start your development server and begin building your application:

cd my-app
npm run dev

cd my-app
npm run dev

If you prefer to define routes programmatically, you can use the code-based route configuration. This approach gives you full control over routing logic while maintaining the same project scaffolding workflow.

npx create-tsrouter-app@latest my-app --framework solid

npx create-tsrouter-app@latest my-app --framework solid

Similar to the file-based setup, this command creates a new directory called my-app with TanStack Router configured for code-based routing. After setup, navigate to your project directory and start the development server:

cd my-app
npm run dev

cd my-app
npm run dev

With either approach, you can now start building your Solid application with TanStack Router!