Confusion between Tanstack Start VS Tanstack Router

[creotip]

It's quite confusing how to start to use both.

Tanstack Router

Tanstack Router includes CLI app generator:
pnpm create @tanstack/router

It's an equivalent of create-react-app (RIP)
https://tanstack.com/router/latest/docs/framework/react/quick-start

For some reason to create a tanstack router app, we should call tsrouter-app , a weird and confusing name, which is completely different from the actual packages that installed.

For example if using the following CLI command:

 pnpm create tsrouter-app@latest my-app --template file-router --tailwind --add-ons shadcn,netlify,form,store,tanstack-query

Creates the following:

- 📁 public/
  - favicon.ico
  - logo192.png
  - logo512.png
  - manifest.json
  - robots.txt
- 📁 src/
  - components/
  - integrations/
  - lib/
  - routes/
  - main.tsx
  - routeTree.gen.ts
  - styles.css
- .gitignore
- components.json
- index.html
- package.json
- pnpm-lock.yaml
- README.md
- tsconfig.json
- vite.config.js

The main app is in src directory

package.json:

{
  "name": "my-app",
  "private": true,
  "type": "module",
  "scripts": {
    "start": "vite --port 3000",
    "build": "vite build && tsc",
    "serve": "vite preview",
    "test": "vitest run"
  },
  "dependencies": {
    "@radix-ui/react-label": "^2.1.2",
    "@radix-ui/react-select": "^2.1.6",
    "@radix-ui/react-separator": "^1.1.2",
    "@radix-ui/react-slot": "^1.1.2",
    "@radix-ui/react-switch": "^1.1.3",
    "@radix-ui/react-tabs": "^1.1.3",
    "@tailwindcss/vite": "^4.0.6",
    "@tanstack/react-form": "^1.0.0",
    "@tanstack/react-query": "^5.66.5",
    "@tanstack/react-query-devtools": "^5.66.5",
    "@tanstack/react-router": "^1.112.0",
    "@tanstack/react-start": "0.0.1-beta.107",
    "@tanstack/react-store": "^0.7.0",
    "@tanstack/router-devtools": "^1.112.0",
    "@tanstack/router-plugin": "^1.112.0",
    "@tanstack/store": "^0.7.0",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "lucide-react": "^0.476.0",
    "next-themes": "^0.4.4",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "recharts": "^2.15.1",
    "sonner": "^2.0.1",
    "tailwind-merge": "^3.0.2",
    "tailwindcss": "^4.0.6",
    "tailwindcss-animate": "^1.0.7",
    "zod": "^3.24.2"
  },
  "devDependencies": {
    "@testing-library/dom": "^10.4.0",
    "@testing-library/react": "^16.2.0",
    "@types/react": "^19.0.8",
    "@types/react-dom": "^19.0.3",
    "@vitejs/plugin-react": "^4.3.4",
    "jsdom": "^26.0.0",
    "typescript": "^5.7.2",
    "vite": "^6.1.0",
    "vitest": "^3.0.5",
    "web-vitals": "^4.2.4"
  }
}

Tanstack Start

Tanstack Start - which is the equivalent of next.js, doesn't have CLI app generator like tanstack router (tsrouter-app).

To start basic project we can fork from available examples, like this one:
https://tanstack.com/start/latest/docs/framework/react/examples/start-basic

• The file/dirs structure is different from the tanstack router.
• Tanstack is running with vinxi (fullstack framework based on vite, nitro and rollup)