<html lang="en">
<head></head>
<body>

<form id="mainForm" method="post" action="https://stackblitz.com/run" target="_self">
<input type="hidden" name="project[files][.gitignore]" value="node_modules
.DS_Store
dist
dist-ssr
*.local

/test-results/
/playwright-report/
/blob-report/
/playwright/.cache/
">
<input type="hidden" name="project[files][README.md]" value="# TanStack Router - View Transitions Example

An example demonstrating view transitions for smooth page transitions.

- [TanStack Router Docs](https://tanstack.com/router)

## Start a new project based on this example

To start a new project based on this example, run:

```sh
npx gitpick TanStack/router/tree/main/examples/react/view-transitions view-transitions
```

## Getting Started

Install dependencies:

```sh
pnpm install
```

Start the development server:

```sh
pnpm dev
```

## Build

Build for production:

```sh
pnpm build
```

## About This Example

This example demonstrates:

- View Transitions API integration
- Smooth page transitions
- Animated route changes
- Enhanced user experience
">
<input type="hidden" name="project[files][index.html]" value="&lt;!doctype html&gt;
&lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot; /&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; /&gt;
    &lt;title&gt;Vite App&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id=&quot;app&quot;&gt;&lt;/div&gt;
    &lt;script type=&quot;module&quot; src=&quot;/src/main.tsx&quot;&gt;&lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;
">
<input type="hidden" name="project[files][package.json]" value="{&quot;name&quot;:&quot;tanstack-router-react-example-view-transitions&quot;,&quot;private&quot;:true,&quot;type&quot;:&quot;module&quot;,&quot;scripts&quot;:{&quot;dev&quot;:&quot;vite --port 3000&quot;,&quot;build&quot;:&quot;vite build &amp;&amp; tsc --noEmit&quot;,&quot;preview&quot;:&quot;vite preview&quot;,&quot;start&quot;:&quot;vite&quot;},&quot;dependencies&quot;:{&quot;@tailwindcss/vite&quot;:&quot;^4.1.18&quot;,&quot;@tanstack/react-router&quot;:&quot;https://pkg.pr.new/TanStack/router/@tanstack/react-router@d7ab9056820e6849f34d639f3039559e1427038c&quot;,&quot;@tanstack/react-router-devtools&quot;:&quot;https://pkg.pr.new/TanStack/router/@tanstack/react-router-devtools@d7ab9056820e6849f34d639f3039559e1427038c&quot;,&quot;@tanstack/router-plugin&quot;:&quot;https://pkg.pr.new/TanStack/router/@tanstack/router-plugin@d7ab9056820e6849f34d639f3039559e1427038c&quot;,&quot;react&quot;:&quot;^19.0.0&quot;,&quot;react-dom&quot;:&quot;^19.0.0&quot;,&quot;redaxios&quot;:&quot;^0.5.1&quot;,&quot;tailwindcss&quot;:&quot;^4.1.18&quot;,&quot;zod&quot;:&quot;^3.24.2&quot;},&quot;devDependencies&quot;:{&quot;@types/react&quot;:&quot;^19.0.8&quot;,&quot;@types/react-dom&quot;:&quot;^19.0.3&quot;,&quot;@vitejs/plugin-react&quot;:&quot;^4.3.4&quot;,&quot;typescript&quot;:&quot;^5.7.2&quot;,&quot;vite&quot;:&quot;^7.3.1&quot;}}">
<input type="hidden" name="project[files][tsconfig.json]" value="{
  &quot;compilerOptions&quot;: {
    &quot;strict&quot;: true,
    &quot;esModuleInterop&quot;: true,
    &quot;jsx&quot;: &quot;react-jsx&quot;,
    &quot;lib&quot;: [&quot;DOM&quot;, &quot;DOM.Iterable&quot;, &quot;ES2022&quot;],
    &quot;skipLibCheck&quot;: true
  }
}
">
<input type="hidden" name="project[files][vite.config.js]" value="import { defineConfig } from &#39;vite&#39;
import react from &#39;@vitejs/plugin-react&#39;
import { tanstackRouter } from &#39;@tanstack/router-plugin/vite&#39;
import tailwindcss from &#39;@tailwindcss/vite&#39;

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    tailwindcss(),
    tanstackRouter({
      target: &#39;react&#39;,
      autoCodeSplitting: true,
    }),
    react(),
  ],
})
">
<input type="hidden" name="project[files][.vscode/settings.json]" value="{
  &quot;files.watcherExclude&quot;: {
    &quot;**/routeTree.gen.ts&quot;: true
  },
  &quot;search.exclude&quot;: {
    &quot;**/routeTree.gen.ts&quot;: true
  },
  &quot;files.readonlyInclude&quot;: {
    &quot;**/routeTree.gen.ts&quot;: true
  }
}
">
<input type="hidden" name="project[files][src/main.tsx]" value="import React from &#39;react&#39;
import ReactDOM from &#39;react-dom/client&#39;
import { RouterProvider, createRouter } from &#39;@tanstack/react-router&#39;
import { routeTree } from &#39;./routeTree.gen&#39;
import &#39;./styles.css&#39;

// Set up a Router instance
const router = createRouter({
  routeTree,
  defaultPreload: &#39;intent&#39;,
  defaultStaleTime: 5000,
  scrollRestoration: true,
  /* 
  Using defaultViewTransition would prevent the need to
  manually add `viewTransition: true` to every navigation.

  If defaultViewTransition.types is a function, it will be called with the
  location change info and should return an array of view transition types.
  This is useful if you want to have different view transitions depending on
  the navigation&#39;s specifics.

  An example use case is sliding in a direction based on the index of the
  previous and next routes when navigating via browser history back and forth.
  */
  // defaultViewTransition: true
  // OR
  // defaultViewTransition: {
  //   types: ({ fromLocation, toLocation }) =&gt; {
  //     let direction = &#39;none&#39;

  //     if (fromLocation) {
  //       const fromIndex = fromLocation.state.__TSR_index
  //       const toIndex = toLocation.state.__TSR_index

  //       direction = fromIndex &gt; toIndex ? &#39;right&#39; : &#39;left&#39;
  //     }

  //     return [`slide-${direction}`]
  //   },
  // },
})

// Register things for typesafety
declare module &#39;@tanstack/react-router&#39; {
  interface Register {
    router: typeof router
  }
}

const rootElement = document.getElementById(&#39;app&#39;)!

if (!rootElement.innerHTML) {
  const root = ReactDOM.createRoot(rootElement)
  root.render(&lt;RouterProvider router={router} /&gt;)
}
">
<input type="hidden" name="project[files][src/posts.tsx]" value="import { notFound } from &#39;@tanstack/react-router&#39;
import axios from &#39;redaxios&#39;

export type PostType = {
  id: string
  title: string
  body: string
}

export const fetchPost = async (postId: string) =&gt; {
  console.info(`Fetching post with id ${postId}...`)
  await new Promise((r) =&gt; setTimeout(r, 0))
  const post = await axios
    .get&lt;PostType&gt;(`https://jsonplaceholder.typicode.com/posts/${postId}`)
    .then((r) =&gt; r.data)
    .catch((err) =&gt; {
      if (err.status === 404) {
        throw notFound()
      }
      throw err
    })

  return post
}

export const fetchPosts = async () =&gt; {
  console.info(&#39;Fetching posts...&#39;)
  await new Promise((r) =&gt; setTimeout(r, 0))
  return axios
    .get&lt;Array&lt;PostType&gt;&gt;(&#39;https://jsonplaceholder.typicode.com/posts&#39;)
    .then((r) =&gt; r.data.slice(0, 10))
}
">
<input type="hidden" name="project[files][src/routeTree.gen.ts]" value="/* eslint-disable */

// @ts-nocheck

// noinspection JSUnusedGlobalSymbols

// This file was automatically generated by TanStack Router.
// You should NOT make any changes in this file as it will be overwritten.
// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.

import { Route as rootRouteImport } from &#39;./routes/__root&#39;
import { Route as HowItWorksRouteImport } from &#39;./routes/how-it-works&#39;
import { Route as ExploreRouteImport } from &#39;./routes/explore&#39;
import { Route as PostsRouteRouteImport } from &#39;./routes/posts.route&#39;
import { Route as IndexRouteImport } from &#39;./routes/index&#39;
import { Route as PostsIndexRouteImport } from &#39;./routes/posts.index&#39;
import { Route as PostsPostIdRouteImport } from &#39;./routes/posts.$postId&#39;

const HowItWorksRoute = HowItWorksRouteImport.update({
  id: &#39;/how-it-works&#39;,
  path: &#39;/how-it-works&#39;,
  getParentRoute: () =&gt; rootRouteImport,
} as any)
const ExploreRoute = ExploreRouteImport.update({
  id: &#39;/explore&#39;,
  path: &#39;/explore&#39;,
  getParentRoute: () =&gt; rootRouteImport,
} as any)
const PostsRouteRoute = PostsRouteRouteImport.update({
  id: &#39;/posts&#39;,
  path: &#39;/posts&#39;,
  getParentRoute: () =&gt; rootRouteImport,
} as any)
const IndexRoute = IndexRouteImport.update({
  id: &#39;/&#39;,
  path: &#39;/&#39;,
  getParentRoute: () =&gt; rootRouteImport,
} as any)
const PostsIndexRoute = PostsIndexRouteImport.update({
  id: &#39;/&#39;,
  path: &#39;/&#39;,
  getParentRoute: () =&gt; PostsRouteRoute,
} as any)
const PostsPostIdRoute = PostsPostIdRouteImport.update({
  id: &#39;/$postId&#39;,
  path: &#39;/$postId&#39;,
  getParentRoute: () =&gt; PostsRouteRoute,
} as any)

export interface FileRoutesByFullPath {
  &#39;/&#39;: typeof IndexRoute
  &#39;/posts&#39;: typeof PostsRouteRouteWithChildren
  &#39;/explore&#39;: typeof ExploreRoute
  &#39;/how-it-works&#39;: typeof HowItWorksRoute
  &#39;/posts/$postId&#39;: typeof PostsPostIdRoute
  &#39;/posts/&#39;: typeof PostsIndexRoute
}
export interface FileRoutesByTo {
  &#39;/&#39;: typeof IndexRoute
  &#39;/explore&#39;: typeof ExploreRoute
  &#39;/how-it-works&#39;: typeof HowItWorksRoute
  &#39;/posts/$postId&#39;: typeof PostsPostIdRoute
  &#39;/posts&#39;: typeof PostsIndexRoute
}
export interface FileRoutesById {
  __root__: typeof rootRouteImport
  &#39;/&#39;: typeof IndexRoute
  &#39;/posts&#39;: typeof PostsRouteRouteWithChildren
  &#39;/explore&#39;: typeof ExploreRoute
  &#39;/how-it-works&#39;: typeof HowItWorksRoute
  &#39;/posts/$postId&#39;: typeof PostsPostIdRoute
  &#39;/posts/&#39;: typeof PostsIndexRoute
}
export interface FileRouteTypes {
  fileRoutesByFullPath: FileRoutesByFullPath
  fullPaths:
    | &#39;/&#39;
    | &#39;/posts&#39;
    | &#39;/explore&#39;
    | &#39;/how-it-works&#39;
    | &#39;/posts/$postId&#39;
    | &#39;/posts/&#39;
  fileRoutesByTo: FileRoutesByTo
  to: &#39;/&#39; | &#39;/explore&#39; | &#39;/how-it-works&#39; | &#39;/posts/$postId&#39; | &#39;/posts&#39;
  id:
    | &#39;__root__&#39;
    | &#39;/&#39;
    | &#39;/posts&#39;
    | &#39;/explore&#39;
    | &#39;/how-it-works&#39;
    | &#39;/posts/$postId&#39;
    | &#39;/posts/&#39;
  fileRoutesById: FileRoutesById
}
export interface RootRouteChildren {
  IndexRoute: typeof IndexRoute
  PostsRouteRoute: typeof PostsRouteRouteWithChildren
  ExploreRoute: typeof ExploreRoute
  HowItWorksRoute: typeof HowItWorksRoute
}

declare module &#39;@tanstack/react-router&#39; {
  interface FileRoutesByPath {
    &#39;/how-it-works&#39;: {
      id: &#39;/how-it-works&#39;
      path: &#39;/how-it-works&#39;
      fullPath: &#39;/how-it-works&#39;
      preLoaderRoute: typeof HowItWorksRouteImport
      parentRoute: typeof rootRouteImport
    }
    &#39;/explore&#39;: {
      id: &#39;/explore&#39;
      path: &#39;/explore&#39;
      fullPath: &#39;/explore&#39;
      preLoaderRoute: typeof ExploreRouteImport
      parentRoute: typeof rootRouteImport
    }
    &#39;/posts&#39;: {
      id: &#39;/posts&#39;
      path: &#39;/posts&#39;
      fullPath: &#39;/posts&#39;
      preLoaderRoute: typeof PostsRouteRouteImport
      parentRoute: typeof rootRouteImport
    }
    &#39;/&#39;: {
      id: &#39;/&#39;
      path: &#39;/&#39;
      fullPath: &#39;/&#39;
      preLoaderRoute: typeof IndexRouteImport
      parentRoute: typeof rootRouteImport
    }
    &#39;/posts/&#39;: {
      id: &#39;/posts/&#39;
      path: &#39;/&#39;
      fullPath: &#39;/posts/&#39;
      preLoaderRoute: typeof PostsIndexRouteImport
      parentRoute: typeof PostsRouteRoute
    }
    &#39;/posts/$postId&#39;: {
      id: &#39;/posts/$postId&#39;
      path: &#39;/$postId&#39;
      fullPath: &#39;/posts/$postId&#39;
      preLoaderRoute: typeof PostsPostIdRouteImport
      parentRoute: typeof PostsRouteRoute
    }
  }
}

interface PostsRouteRouteChildren {
  PostsPostIdRoute: typeof PostsPostIdRoute
  PostsIndexRoute: typeof PostsIndexRoute
}

const PostsRouteRouteChildren: PostsRouteRouteChildren = {
  PostsPostIdRoute: PostsPostIdRoute,
  PostsIndexRoute: PostsIndexRoute,
}

const PostsRouteRouteWithChildren = PostsRouteRoute._addFileChildren(
  PostsRouteRouteChildren,
)

const rootRouteChildren: RootRouteChildren = {
  IndexRoute: IndexRoute,
  PostsRouteRoute: PostsRouteRouteWithChildren,
  ExploreRoute: ExploreRoute,
  HowItWorksRoute: HowItWorksRoute,
}
export const routeTree = rootRouteImport
  ._addFileChildren(rootRouteChildren)
  ._addFileTypes&lt;FileRouteTypes&gt;()
">
<input type="hidden" name="project[files][src/styles.css]" value="@import &#39;tailwindcss&#39; source(&#39;../&#39;);

@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentcolor);
  }
}

html {
  color-scheme: light dark;
}
* {
  @apply border-gray-200 dark:border-gray-800;
}
body {
  @apply bg-gray-50 text-gray-950 dark:bg-gray-900 dark:text-gray-200;
}

/* Slide Left Transition */
html:active-view-transition-type(slide-left) {
  &amp;::view-transition-old(main-content) {
    animation: 300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-out-left;
  }
  &amp;::view-transition-new(main-content) {
    animation: 300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-in-left;
  }
}

@keyframes slide-out-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes slide-in-left {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

/* Slide Right Transition */
html:active-view-transition-type(slide-right) {
  &amp;::view-transition-old(main-content) {
    animation: 300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-out-right;
  }
  &amp;::view-transition-new(main-content) {
    animation: 300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-in-right;
  }
}

@keyframes slide-out-right {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}

@keyframes slide-in-right {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

/* Warp/Rotate Transition */
html:active-view-transition-type(warp) {
  &amp;::view-transition-old(post) {
    animation: 400ms ease-out both warp-out;
  }

  &amp;::view-transition-new(post) {
    animation: 400ms ease-out both warp-in;
  }
}

@keyframes warp-out {
  from {
    opacity: 1;
    filter: blur(0) brightness(1);
    transform: scale(1) rotate(0deg);
  }
  to {
    opacity: 0;
    filter: blur(15px) brightness(1.8);
    transform: scale(1.1) rotate(90deg);
  }
}

@keyframes warp-in {
  from {
    opacity: 0;
    filter: blur(15px) brightness(1.8);
    transform: scale(0.9) rotate(-45deg);
  }
  to {
    opacity: 1;
    filter: blur(0) brightness(1);
    transform: scale(1) rotate(0deg);
  }
}
">
<input type="hidden" name="project[files][src/routes/__root.tsx]" value="import * as React from &#39;react&#39;
import { Link, Outlet, createRootRoute } from &#39;@tanstack/react-router&#39;
import { TanStackRouterDevtools } from &#39;@tanstack/react-router-devtools&#39;

export const Route = createRootRoute({
  component: RootComponent,
  notFoundComponent: () =&gt; {
    return (
      &lt;div&gt;
        &lt;p&gt;This is the notFoundComponent configured on root route&lt;/p&gt;
        &lt;Link to=&quot;/&quot;&gt;Start Over&lt;/Link&gt;
      &lt;/div&gt;
    )
  },
})

function RootComponent() {
  return (
    &lt;&gt;
      &lt;div className=&quot;p-2 flex gap-2 text-lg border-b&quot;&gt;
        &lt;Link
          to=&quot;/&quot;
          activeProps={{
            className: &#39;font-bold&#39;,
          }}
          activeOptions={{ exact: true }}
          viewTransition
        &gt;
          Home
        &lt;/Link&gt;{&#39; &#39;}
        &lt;Link
          to=&quot;/posts&quot;
          activeProps={{
            className: &#39;font-bold&#39;,
          }}
          viewTransition
        &gt;
          Posts
        &lt;/Link&gt;{&#39; &#39;}
      &lt;/div&gt;
      &lt;hr /&gt;
      &lt;Outlet /&gt;
      {/* Start rendering router matches */}
      &lt;TanStackRouterDevtools position=&quot;bottom-right&quot; /&gt;
    &lt;/&gt;
  )
}
">
<input type="hidden" name="project[files][src/routes/explore.tsx]" value="import { createFileRoute } from &#39;@tanstack/react-router&#39;
import { Link } from &#39;@tanstack/react-router&#39;

export const Route = createFileRoute(&#39;/explore&#39;)({
  component: RouteComponent,
})

function RouteComponent() {
  return (
    &lt;div className=&quot;p-2 [view-transition-name:main-content]&quot;&gt;
      &lt;h3&gt;
        Explore the CSS to see how to use active-view-transition-type to create
        new viewTransitions to use with Tanstack Router.
      &lt;/h3&gt;
      &lt;h4 className={&#39;text-sm mt-2 italic&#39;}&gt;
        Disclaimer: View Transition Types may not be supported in all browsers
        and will fall back to the default browser transition if not available.
      &lt;/h4&gt;
      &lt;div className=&quot;flex justify-center gap-10 mt-4&quot;&gt;
        &lt;Link
          to={&#39;/how-it-works&#39;}
          // see styles.css for &#39;slide-right&#39; transition
          viewTransition={{ types: [&#39;slide-right&#39;] }}
          className=&quot;font-bold&quot;
        &gt;
          &amp;lt;- Previous Page
        &lt;/Link&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  )
}
">
<input type="hidden" name="project[files][src/routes/how-it-works.tsx]" value="import { createFileRoute } from &#39;@tanstack/react-router&#39;
import { Link } from &#39;@tanstack/react-router&#39;

export const Route = createFileRoute(&#39;/how-it-works&#39;)({
  component: RouteComponent,
})

function RouteComponent() {
  return (
    &lt;div className=&quot;p-2 [view-transition-name:main-content]&quot;&gt;
      &lt;h3&gt;This example demonstrates a variety of custom page transitions.&lt;/h3&gt;
      &lt;div className=&quot;flex justify-center gap-10 mt-4&quot;&gt;
        &lt;Link
          to={&#39;/&#39;}
          // see styles.css for &#39;slide-right&#39; transition
          viewTransition={{ types: [&#39;slide-right&#39;] }}
          className=&quot;font-bold&quot;
        &gt;
          &amp;lt;- Previous Page
        &lt;/Link&gt;
        &lt;Link
          to={&#39;/explore&#39;}
          // see styles.css for &#39;slide-left&#39; transition
          viewTransition={{ types: [&#39;slide-left&#39;] }}
          className=&quot;font-bold&quot;
        &gt;
          Next Page -&amp;gt;
        &lt;/Link&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  )
}
">
<input type="hidden" name="project[files][src/routes/index.tsx]" value="import { createFileRoute } from &#39;@tanstack/react-router&#39;
import * as React from &#39;react&#39;
import { Link } from &#39;@tanstack/react-router&#39;

export const Route = createFileRoute(&#39;/&#39;)({
  component: Home,
})

function Home() {
  return (
    &lt;div className=&quot;p-2 [view-transition-name:main-content]&quot;&gt;
      &lt;h3&gt;Welcome To The View Transitions Example!&lt;/h3&gt;
      &lt;div className=&quot;flex justify-center mt-4&quot;&gt;
        &lt;Link
          to={&#39;/how-it-works&#39;}
          // see styles.css for &#39;slide-left&#39; transition
          viewTransition={{ types: [&#39;slide-left&#39;] }}
          className=&quot;font-bold&quot;
        &gt;
          Next Page -&amp;gt;
        &lt;/Link&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  )
}
">
<input type="hidden" name="project[files][src/routes/posts.$postId.tsx]" value="import { createFileRoute } from &#39;@tanstack/react-router&#39;
import * as React from &#39;react&#39;
import { ErrorComponent } from &#39;@tanstack/react-router&#39;
import { fetchPost } from &#39;../posts&#39;
import type { ErrorComponentProps } from &#39;@tanstack/react-router&#39;

export const Route = createFileRoute(&#39;/posts/$postId&#39;)({
  loader: async ({ params: { postId } }) =&gt; fetchPost(postId),
  errorComponent: PostErrorComponent,
  notFoundComponent: () =&gt; {
    return &lt;p&gt;Post not found&lt;/p&gt;
  },
  component: PostComponent,
})

export function PostErrorComponent({ error }: ErrorComponentProps) {
  return &lt;ErrorComponent error={error} /&gt;
}

function PostComponent() {
  const post = Route.useLoaderData()

  return (
    &lt;div className=&quot;space-y-2&quot;&gt;
      &lt;h4 className=&quot;text-xl font-bold underline&quot;&gt;{post.title}&lt;/h4&gt;
      &lt;div className=&quot;text-sm&quot;&gt;{post.body}&lt;/div&gt;
    &lt;/div&gt;
  )
}
">
<input type="hidden" name="project[files][src/routes/posts.index.tsx]" value="import { createFileRoute } from &#39;@tanstack/react-router&#39;
import * as React from &#39;react&#39;

export const Route = createFileRoute(&#39;/posts/&#39;)({
  component: PostsIndexComponent,
})

function PostsIndexComponent() {
  return &lt;div&gt;Select a post.&lt;/div&gt;
}
">
<input type="hidden" name="project[files][src/routes/posts.route.tsx]" value="import { createFileRoute } from &#39;@tanstack/react-router&#39;
import * as React from &#39;react&#39;
import { Link, Outlet } from &#39;@tanstack/react-router&#39;
import { fetchPosts } from &#39;../posts&#39;

export const Route = createFileRoute(&#39;/posts&#39;)({
  loader: fetchPosts,
  component: PostsLayoutComponent,
})

function PostsLayoutComponent() {
  const posts = Route.useLoaderData()

  return (
    &lt;div className=&quot;p-2 flex gap-2  [view-transition-name:main-content]&quot;&gt;
      &lt;ul className=&quot;list-disc pl-4&quot;&gt;
        {[...posts, { id: &#39;i-do-not-exist&#39;, title: &#39;Non-existent Post&#39; }].map(
          (post) =&gt; {
            return (
              &lt;li key={post.id} className=&quot;whitespace-nowrap&quot;&gt;
                &lt;Link
                  to=&quot;/posts/$postId&quot;
                  params={{
                    postId: post.id,
                  }}
                  className=&quot;block py-1 text-blue-600 hover:opacity-75&quot;
                  activeProps={{ className: &#39;font-bold underline&#39; }}
                  // see styles.css for &#39;warp&#39; transition
                  viewTransition={{ types: [&#39;warp&#39;] }}
                &gt;
                  &lt;div&gt;{post.title.substring(0, 20)}&lt;/div&gt;
                &lt;/Link&gt;
              &lt;/li&gt;
            )
          },
        )}
      &lt;/ul&gt;
      &lt;hr /&gt;
      &lt;div className=&quot;[view-transition-name:post]&quot;&gt;
        &lt;Outlet /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  )
}
">
<input type="hidden" name="project[description]" value="generated by https://pkg.pr.new">
<input type="hidden" name="project[template]" value="node">
<input type="hidden" name="project[title]" value="tanstack-router-react-example-view-transitions">
</form>
<script>document.getElementById("mainForm").submit();</script>

</body></html>