Feature Request: The way to render one route with all ancestors in isolation

[timofei-iatsenko]

Problem

When testing or rendering TanStack Router pages in environments like Storybook or Vitest, we currently import the generated routeTree.gen.ts, create a router instance, and navigate to the desired page.

This works, but it creates a major drawback:
each story (or test) ends up depending on the entire application, because routeTree.gen.ts imports all routes and components in the app.

This causes issues with tools that rely on dependency tracing — for example, Chromatic’s Turbosnap (which re-renders only affected stories based on file changes).
Since every story depends on the full route tree, any small change anywhere in the app triggers a full rebuild and re-verification of all stories.

Why Other Approaches Don’t Work

We tried to isolate pages by constructing route subtrees manually — for example, importing only the page and its layout components.
However, this approach is fragile and hard to maintain, because it requires duplicating what the TanStack Router already does:

• You must manually recreate and keep in sync the folder structure and parent-child hierarchy.
• Any route structure change requires updating all affected test or story files.
• This makes testing setups brittle and error-prone.

Essentially, we need a way to render a route together with its ancestors, but without loading the entire app’s route tree.

What’s Needed

A way to programmatically or declaratively obtain a pruned version of the route tree, limited to a specific route and all its ancestors.

This would allow:

• Rendering and testing a single page in Storybook or Vitest while preserving layout hierarchy.
• Avoiding global dependencies on the entire routeTree.gen.ts.
• Reducing Chromatic/Turbosnap rebuild scope and improving CI efficiency.

Example

In Storybook, we’d like to do something like this:

// routes/dashboard/settings/route.stories.tsx
import { createRouter } from '@tanstack/react-router'
import { routeTree } from './route.ts?tree' // hypothetical API

const router = createRouter({ routeTree })

This would yield a route tree containing only /dashboard/settings and its ancestors.

Current Workaround

I implemented a custom Vite plugin that does exactly this:
tanstack-routetree-pruner

It intercepts imports of a route file and prunes the tree dynamically based on the requested route (?tree suffix).

While it works, it feels like a workaround — this functionality would be better provided natively by TanStack Router, since the router already has all the information needed to build partial trees.

Summary

In short:
Please consider adding an official way to load or generate a partial/pruned route tree (for a given route and its ancestors).

This would improve testing and Storybook integration, make dependency tracking more efficient, and reduce the need for brittle manual workarounds.