docs(examples): standardize the READMEs for the React examples #6014
Conversation
WalkthroughStandardizes and expands README.md files across many React example directories: replaces generic headers and npm/yarn snippets with branded titles, adds "Start a new project" bootstrap commands, pnpm-based "Getting Started"/"Build" sections, enriches "About This Example" content, and adds several new example READMEs and expanded i18n/monorepo docs. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~15 minutes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
enBonnet
changed the title
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 8
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (4)
examples/react/router-monorepo-simple/README.md (1)
71-75: Fix TypeScript capitalization.Line 73 uses "Typescript" which should be "TypeScript" (with capital S) to match the correct product name and File 1's consistency.
-### Typescript IDE feedback +### TypeScript IDE feedbackexamples/react/start-counter/README.md (1)
46-84: Remove out-of-scope content about TanStack docs editing.The "Editing and previewing the docs of TanStack projects locally" section (lines 46–84) is not specific to this example and contradicts the PR objective to create self-contained onboarding narratives. This documentation about editing TanStack framework docs should not be in individual example READMEs.
Remove lines 46–84 entirely to keep the README focused on the start-counter example:
-## Editing and previewing the docs of TanStack projects locally - -The documentations for all TanStack projects except for `React Charts` are hosted on [https://tanstack.com](https://tanstack.com), powered by this TanStack Router app. -In production, the markdown doc pages are fetched from the GitHub repos of the projects, but in development they are read from the local file system. -Follow these steps if you want to edit the doc pages of a project (in these steps we'll assume it's [`TanStack/form`](https://github.com/tanstack/form)) and preview them locally : -1. Create a new directory called `tanstack`. -```sh -mkdir tanstack -``` -2. Enter the directory and clone this repo and the repo of the project there. -```sh -cd tanstack -git clone git@github.com:TanStack/tanstack.com.git -git clone git@github.com:TanStack/form.git -``` -> [!NOTE] -> Your `tanstack` directory should look like this: -> -> ``` -> tanstack/ -> | -> +-- form/ -> | -> +-- tanstack.com/ -> ``` -> [!WARNING] -> Make sure the name of the directory in your local file system matches the name of the project's repo. For example, `tanstack/form` must be cloned into `form` (this is the default) instead of `some-other-name`, because that way, the doc pages won't be found. - -3. Enter the `tanstack/tanstack.com` directory, install the dependencies and run the app in dev mode: -```sh -cd tanstack.com -pnpm i -# The app will run on https://localhost:3000 by default -pnpm dev -``` -4. Now you can visit http://localhost:3000/form/latest/docs/overview in the browser and see the changes you make in `tanstack/form/docs`. -> [!NOTE] -> The updated pages need to be manually reloaded in the browser. -> [!WARNING] -> You will need to update the `docs/config.json` file (in the project's repo) if you add a new doc page!examples/react/start-i18n-paraglide/README.md (1)
77-89: Fix grammatical issues and improve sentence flow.Line 89 has "add change" which is grammatically incorrect. Additionally, lines 77–89 have multiple consecutive sentences starting with "In", which reduces readability.
Apply this diff to correct the phrasing and improve flow:
If you want to handle how the URL looks when the user changes the locale, you can rewrite the URL in the router. ```diff import { createRouter } from "@tanstack/react-router"; import { routeTree } from "./routeTree.gen"; +import { deLocalizeUrl, localizeUrl } from "./paraglide/runtime.js"; const router = createRouter({ routeTree, + rewrite: { + input: ({ url }) => deLocalizeUrl(url), + output: ({ url }) => localizeUrl(url), + }, });-In
server.tsintercept the request with the paraglideMiddleware.
+Intercept the request inserver.tswith the paraglideMiddleware:import { paraglideMiddleware } from './paraglide/server.js' @@ -86,7 +86,7 @@ export default { }-In
__root.tsxadd change the html lang attribute to the current locale.
+Update the htmllangattribute in__root.tsxto reflect the current locale:import { getLocale } from '../paraglide/runtime.js'examples/react/start-basic-auth/README.md (1)
7-42: Multiple section naming inconsistencies with unified template.This file has three deviations from the standardized structure:
- Line 7: "Start a new project" → should be "Start a new project based on this example"
- Line 15: "Development" → should be "Getting Started"
- Line 34: "Authentication Features" → should be "About This Example"
For consistency across all 56 examples, apply these naming corrections:
-## Start a new project +## Start a new project based on this example-## Development +## Getting Started-## Authentication Features +## About This Example
🧹 Nitpick comments (10)
examples/react/start-large/README.md (1)
36-36: Consider simplifying the wording for clarity.The phrase "a large number of routes" can be more concise. Consider: "This example contains many routes to demonstrate..." or "...numerous routes to demonstrate..." for better readability.
examples/react/start-material-ui/README.md (1)
35-41: Expand the Material UI Integration section with actionable guidance.The current Material UI Integration section is minimal—it lists features but provides no actual implementation details, configuration examples, or instructions for developers starting with this example. Consider adding:
- How to configure the MUI theme
- Example code snippets for SSR setup
- Guidance on using MUI components in TanStack Start routes
- Any relevant environment or build configuration notes
This would align the example's documentation with the PR objective to retain and merge example-specific instructions for complex examples.
examples/react/start-bare/README.md (1)
1-5: Consider adding TanStack Start documentation link alongside Router docs.The README title references "TanStack Start" but only links to TanStack Router documentation. Given that this is a Start example, consider adding a link to the TanStack Start documentation for users seeking information about the framework itself.
# TanStack Start - Bare Example A minimal TanStack Start example demonstrating the bare essentials. - - [TanStack Router Docs](https://tanstack.com/router) + - [TanStack Start Docs](https://tanstack.com/start) + - [TanStack Router Docs](https://tanstack.com/router)examples/react/start-basic-rsc/README.md (1)
76-81: Minor consistency: Use fullpnpm installcommand.Line 78 uses
pnpm i(shorthand) while the Development section consistently usespnpm install(line 26). For consistency and clarity across the README, consider using the full command here as well.3. Enter the `tanstack/tanstack.com` directory, install the dependencies and run the app in dev mode: ```sh cd tanstack.com -pnpm i +pnpm install # The app will run on https://localhost:3000 by default pnpm dev</blockquote></details> <details> <summary>examples/react/quickstart-webpack-file-based/README.md (1)</summary><blockquote> `38-45`: **Consider expanding the "About This Example" section for clarity.** The feature list is minimal. For a Webpack-focused quickstart, consider adding a brief note about how this example differs from other routing examples (e.g., bundler choice, configuration approach) to help users decide if it's the right starting point. Example enhancement: ```diff ## About This Example This example demonstrates: - Webpack bundler integration - File-based routing - Traditional bundler setup - Webpack configuration for TanStack Router + +**When to use this example:** Choose this if you prefer Webpack over Vite or other modern bundlers, or if your project already uses Webpack and you want to integrate TanStack Router's file-based routing.examples/react/i18n-paraglide/README.md (1)
188-200: Simplify phrasing for clarity.The phrase "you will need to" can be tightened to reduce wordiness and improve readability.
Apply this diff to streamline the text:
-## Prerender routes +## Prerender Routes -You can use use the `localizeHref` function to map the routes to localized versions and import into the pages option in the TanStack Start plugin. For this to work you will need to compile paraglide before the build with the CLI. +You can use the `localizeHref` function to map routes to localized versions and pass them to the pages option in the TanStack Start plugin. Compile Paraglide before the build using the CLI: ```ts import { localizeHref } from './paraglide/runtime'Also note there's a duplicate word "use use" on line 190.
examples/react/start-i18n-paraglide/README.md (1)
193-205: Simplify phrasing and fix duplicate word.The phrase "you will need to" can be tightened, and there's a duplicate "use use" on line 195.
Apply this diff to streamline the text:
## Prerender routes -You can use use the `localizeHref` function to map the routes to localized versions and import into the pages option in the TanStack Start plugin. For this to work you will need to compile paraglide before the build with the CLI. +You can use the `localizeHref` function to map routes to localized versions and pass them to the pages option in the TanStack Start plugin. Compile Paraglide before the build using the CLI: ```ts import { localizeHref } from './paraglide/runtime'examples/react/start-basic-static/README.md (1)
46-85: Consider simplifying the legacy TanStack documentation editing section.Lines 46–85 cover an out-of-scope local development workflow for editing TanStack project docs. While it's valuable context, it may dilute focus on this example's core purpose (static site generation). This is optional, but a brief note or collapsible section might improve clarity.
examples/react/start-clerk-basic/README.md (1)
22-29: Section naming differs from unified template: "Development" vs "Getting Started".This file uses "Development" (line 22) while most other standardized READMEs in the PR use "Getting Started" for the initial setup section. For consistency across all 56 examples, consider renaming this section to "Getting Started" to match the unified template, unless the distinction is intentional.
examples/react/start-basic/README.md (1)
19-28: Optional: Consider using "Getting Started" for consistency with unified template.This file retains "Development" (line 19) instead of the standardized "Getting Started" section used in other examples. While this may be intentional to preserve existing content structure, consider renaming to "Getting Started" for consistency across all 56 examples per the PR's unified template.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (56)
examples/react/authenticated-routes-firebase/README.md(2 hunks)examples/react/authenticated-routes/README.md(1 hunks)examples/react/basic-default-search-params/README.md(1 hunks)examples/react/basic-devtools-panel/README.md(1 hunks)examples/react/basic-file-based/README.md(1 hunks)examples/react/basic-non-nested-devtools/README.md(1 hunks)examples/react/basic-react-query-file-based/README.md(1 hunks)examples/react/basic-react-query/README.md(1 hunks)examples/react/basic-ssr-file-based/README.md(1 hunks)examples/react/basic-ssr-streaming-file-based/README.md(1 hunks)examples/react/basic-virtual-file-based/README.md(1 hunks)examples/react/basic-virtual-inside-file-based/README.md(1 hunks)examples/react/basic/README.md(1 hunks)examples/react/deferred-data/README.md(1 hunks)examples/react/i18n-paraglide/README.md(4 hunks)examples/react/kitchen-sink-file-based/README.md(1 hunks)examples/react/kitchen-sink-react-query-file-based/README.md(1 hunks)examples/react/kitchen-sink-react-query/README.md(1 hunks)examples/react/kitchen-sink/README.md(1 hunks)examples/react/large-file-based/README.md(1 hunks)examples/react/location-masking/README.md(1 hunks)examples/react/navigation-blocking/README.md(1 hunks)examples/react/quickstart-esbuild-file-based/README.md(1 hunks)examples/react/quickstart-file-based/README.md(1 hunks)examples/react/quickstart-rspack-file-based/README.md(1 hunks)examples/react/quickstart-webpack-file-based/README.md(1 hunks)examples/react/quickstart/README.md(1 hunks)examples/react/router-monorepo-react-query/README.md(2 hunks)examples/react/router-monorepo-simple-lazy/README.md(2 hunks)examples/react/router-monorepo-simple/README.md(2 hunks)examples/react/scroll-restoration/README.md(1 hunks)examples/react/search-validator-adapters/README.md(1 hunks)examples/react/start-bare/README.md(1 hunks)examples/react/start-basic-auth/README.md(2 hunks)examples/react/start-basic-authjs/README.md(1 hunks)examples/react/start-basic-cloudflare/README.md(2 hunks)examples/react/start-basic-react-query/README.md(2 hunks)examples/react/start-basic-rsc/README.md(2 hunks)examples/react/start-basic-static/README.md(2 hunks)examples/react/start-basic/README.md(2 hunks)examples/react/start-bun/README.md(2 hunks)examples/react/start-clerk-basic/README.md(2 hunks)examples/react/start-convex-trellaux/README.md(1 hunks)examples/react/start-counter/README.md(2 hunks)examples/react/start-i18n-paraglide/README.md(4 hunks)examples/react/start-large/README.md(1 hunks)examples/react/start-material-ui/README.md(1 hunks)examples/react/start-streaming-data-from-server-functions/README.md(1 hunks)examples/react/start-supabase-basic/README.md(1 hunks)examples/react/start-tailwind-v4/README.md(2 hunks)examples/react/start-trellaux/README.md(1 hunks)examples/react/start-workos/README.md(2 hunks)examples/react/view-transitions/README.md(1 hunks)examples/react/with-framer-motion/README.md(1 hunks)examples/react/with-trpc-react-query/README.md(1 hunks)examples/react/with-trpc/README.md(1 hunks)
🧰 Additional context used
🧠 Learnings (10)
📓 Common learnings
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-25T00:18:21.282Z
Learning: Test changes in relevant example apps by running cd examples/[framework]/[example] && pnpm dev
📚 Learning: 2025-11-25T00:18:21.282Z
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-25T00:18:21.282Z
Learning: Applies to **/src/routes/**/*.{ts,tsx} : Use file-based routing in src/routes/ directories or code-based routing with route definitions
Applied to files:
examples/react/large-file-based/README.mdexamples/react/basic-file-based/README.mdexamples/react/quickstart-file-based/README.mdexamples/react/basic-virtual-file-based/README.mdexamples/react/basic-ssr-streaming-file-based/README.mdexamples/react/quickstart-rspack-file-based/README.mdexamples/react/start-i18n-paraglide/README.mdexamples/react/router-monorepo-simple-lazy/README.mdexamples/react/basic-ssr-file-based/README.mdexamples/react/router-monorepo-simple/README.mdexamples/react/quickstart-esbuild-file-based/README.mdexamples/react/kitchen-sink-react-query-file-based/README.mdexamples/react/i18n-paraglide/README.mdexamples/react/start-basic-cloudflare/README.mdexamples/react/basic-react-query-file-based/README.mdexamples/react/router-monorepo-react-query/README.mdexamples/react/kitchen-sink-file-based/README.mdexamples/react/basic-virtual-inside-file-based/README.md
📚 Learning: 2025-10-08T08:11:47.088Z
Learnt from: nlynzaad
Repo: TanStack/router PR: 5402
File: packages/router-generator/tests/generator/no-formatted-route-tree/routeTree.nonnested.snapshot.ts:19-21
Timestamp: 2025-10-08T08:11:47.088Z
Learning: Test snapshot files in the router-generator tests directory (e.g., files matching the pattern `packages/router-generator/tests/generator/**/routeTree*.snapshot.ts` or `routeTree*.snapshot.js`) should not be modified or have issues flagged, as they are fixtures used to verify the generator's output and are intentionally preserved as-is.
Applied to files:
examples/react/large-file-based/README.mdexamples/react/basic-file-based/README.mdexamples/react/kitchen-sink-file-based/README.md
📚 Learning: 2025-11-25T00:18:21.282Z
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-25T00:18:21.282Z
Learning: Applies to packages/solid-router/**/*.{ts,tsx} : Solid Router components and primitives should use the tanstack/solid-router package
Applied to files:
examples/react/large-file-based/README.mdexamples/react/view-transitions/README.mdexamples/react/basic-file-based/README.mdexamples/react/with-trpc/README.mdexamples/react/quickstart-webpack-file-based/README.mdexamples/react/quickstart/README.mdexamples/react/authenticated-routes/README.mdexamples/react/quickstart-file-based/README.mdexamples/react/basic-non-nested-devtools/README.mdexamples/react/basic-react-query/README.mdexamples/react/basic-virtual-file-based/README.mdexamples/react/start-bare/README.mdexamples/react/with-framer-motion/README.mdexamples/react/basic-ssr-streaming-file-based/README.mdexamples/react/basic-devtools-panel/README.mdexamples/react/quickstart-rspack-file-based/README.mdexamples/react/start-large/README.mdexamples/react/router-monorepo-simple-lazy/README.mdexamples/react/basic-ssr-file-based/README.mdexamples/react/kitchen-sink/README.mdexamples/react/router-monorepo-simple/README.mdexamples/react/navigation-blocking/README.mdexamples/react/quickstart-esbuild-file-based/README.mdexamples/react/kitchen-sink-react-query-file-based/README.mdexamples/react/i18n-paraglide/README.mdexamples/react/basic-default-search-params/README.mdexamples/react/basic/README.mdexamples/react/kitchen-sink-react-query/README.mdexamples/react/start-basic-rsc/README.mdexamples/react/basic-react-query-file-based/README.mdexamples/react/router-monorepo-react-query/README.mdexamples/react/start-workos/README.mdexamples/react/kitchen-sink-file-based/README.mdexamples/react/with-trpc-react-query/README.mdexamples/react/search-validator-adapters/README.mdexamples/react/basic-virtual-inside-file-based/README.md
📚 Learning: 2025-10-01T18:31:35.420Z
Learnt from: schiller-manuel
Repo: TanStack/router PR: 5330
File: e2e/react-start/custom-basepath/src/routeTree.gen.ts:58-61
Timestamp: 2025-10-01T18:31:35.420Z
Learning: Do not review files named `routeTree.gen.ts` in TanStack Router repositories, as these are autogenerated files that should not be manually modified.
Applied to files:
examples/react/large-file-based/README.mdexamples/react/basic-file-based/README.md
📚 Learning: 2025-11-25T00:18:21.282Z
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-25T00:18:21.282Z
Learning: Applies to packages/react-router/**/*.{ts,tsx} : React Router components and hooks should use the tanstack/react-router package
Applied to files:
examples/react/large-file-based/README.mdexamples/react/view-transitions/README.mdexamples/react/basic-file-based/README.mdexamples/react/with-trpc/README.mdexamples/react/quickstart-webpack-file-based/README.mdexamples/react/quickstart/README.mdexamples/react/authenticated-routes/README.mdexamples/react/quickstart-file-based/README.mdexamples/react/basic-non-nested-devtools/README.mdexamples/react/basic-react-query/README.mdexamples/react/basic-virtual-file-based/README.mdexamples/react/start-bare/README.mdexamples/react/with-framer-motion/README.mdexamples/react/basic-ssr-streaming-file-based/README.mdexamples/react/location-masking/README.mdexamples/react/basic-devtools-panel/README.mdexamples/react/start-material-ui/README.mdexamples/react/quickstart-rspack-file-based/README.mdexamples/react/start-large/README.mdexamples/react/router-monorepo-simple-lazy/README.mdexamples/react/basic-ssr-file-based/README.mdexamples/react/kitchen-sink/README.mdexamples/react/router-monorepo-simple/README.mdexamples/react/navigation-blocking/README.mdexamples/react/quickstart-esbuild-file-based/README.mdexamples/react/kitchen-sink-react-query-file-based/README.mdexamples/react/start-basic-react-query/README.mdexamples/react/i18n-paraglide/README.mdexamples/react/basic-default-search-params/README.mdexamples/react/basic/README.mdexamples/react/kitchen-sink-react-query/README.mdexamples/react/start-basic-rsc/README.mdexamples/react/basic-react-query-file-based/README.mdexamples/react/router-monorepo-react-query/README.mdexamples/react/scroll-restoration/README.mdexamples/react/start-workos/README.mdexamples/react/kitchen-sink-file-based/README.mdexamples/react/with-trpc-react-query/README.mdexamples/react/search-validator-adapters/README.mdexamples/react/deferred-data/README.mdexamples/react/basic-virtual-inside-file-based/README.mdexamples/react/start-basic-static/README.mdexamples/react/start-basic/README.md
📚 Learning: 2025-11-25T00:18:21.282Z
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-25T00:18:21.282Z
Learning: Test changes in relevant example apps by running cd examples/[framework]/[example] && pnpm dev
Applied to files:
examples/react/large-file-based/README.mdexamples/react/view-transitions/README.mdexamples/react/basic-file-based/README.mdexamples/react/quickstart-webpack-file-based/README.mdexamples/react/quickstart/README.mdexamples/react/authenticated-routes/README.mdexamples/react/quickstart-file-based/README.mdexamples/react/basic-non-nested-devtools/README.mdexamples/react/basic-virtual-file-based/README.mdexamples/react/with-framer-motion/README.mdexamples/react/basic-ssr-streaming-file-based/README.mdexamples/react/basic-devtools-panel/README.mdexamples/react/quickstart-rspack-file-based/README.mdexamples/react/start-bun/README.mdexamples/react/router-monorepo-simple-lazy/README.mdexamples/react/start-counter/README.mdexamples/react/basic-ssr-file-based/README.mdexamples/react/kitchen-sink/README.mdexamples/react/router-monorepo-simple/README.mdexamples/react/navigation-blocking/README.mdexamples/react/start-basic-auth/README.mdexamples/react/quickstart-esbuild-file-based/README.mdexamples/react/kitchen-sink-react-query-file-based/README.mdexamples/react/basic-default-search-params/README.mdexamples/react/basic/README.mdexamples/react/kitchen-sink-react-query/README.mdexamples/react/start-basic-rsc/README.mdexamples/react/basic-react-query-file-based/README.mdexamples/react/router-monorepo-react-query/README.mdexamples/react/start-workos/README.mdexamples/react/start-tailwind-v4/README.mdexamples/react/kitchen-sink-file-based/README.mdexamples/react/search-validator-adapters/README.mdexamples/react/start-clerk-basic/README.mdexamples/react/basic-virtual-inside-file-based/README.mdexamples/react/start-basic-static/README.mdexamples/react/start-basic/README.md
📚 Learning: 2025-10-14T18:59:33.990Z
Learnt from: FatahChan
Repo: TanStack/router PR: 5475
File: e2e/react-start/basic-prerendering/src/routes/redirect/$target/via-beforeLoad.tsx:8-0
Timestamp: 2025-10-14T18:59:33.990Z
Learning: In TanStack Router e2e test files, when a route parameter is validated at the route level (e.g., using zod in validateSearch or param validation), switch statements on that parameter do not require a default case, as the validation ensures only expected values will reach the switch.
Applied to files:
examples/react/large-file-based/README.mdexamples/react/start-large/README.mdexamples/react/basic-default-search-params/README.mdexamples/react/search-validator-adapters/README.md
📚 Learning: 2025-11-25T00:18:21.282Z
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-25T00:18:21.282Z
Learning: Always run pnpm test:eslint, pnpm test:types, and pnpm test:unit before committing
Applied to files:
examples/react/start-bun/README.md
📚 Learning: 2025-11-02T16:16:24.898Z
Learnt from: nlynzaad
Repo: TanStack/router PR: 5732
File: packages/start-client-core/src/client/hydrateStart.ts:6-9
Timestamp: 2025-11-02T16:16:24.898Z
Learning: In packages/start-client-core/src/client/hydrateStart.ts, the `import/no-duplicates` ESLint disable is necessary for imports from `#tanstack-router-entry` and `#tanstack-start-entry` because both aliases resolve to the same placeholder file (`fake-start-entry.js`) in package.json during static analysis, even though they resolve to different files at runtime.
Applied to files:
examples/react/router-monorepo-simple-lazy/README.mdexamples/react/router-monorepo-simple/README.mdexamples/react/router-monorepo-react-query/README.md
🪛 LanguageTool
examples/react/start-trellaux/README.md
[grammar] ~38-~38: Use a hyphen to join words.
Context: ...-like application demonstrating: - Drag and drop functionality - Complex state m...
(QB_NEW_EN_HYPHEN)
[grammar] ~38-~38: Use a hyphen to join words.
Context: ...e application demonstrating: - Drag and drop functionality - Complex state manag...
(QB_NEW_EN_HYPHEN)
examples/react/start-convex-trellaux/README.md
[grammar] ~19-~19: Use a hyphen to join words.
Context: ...ellaux ``` ## Convex Convex is an open source Reactive backend made by [convex....
(QB_NEW_EN_HYPHEN)
examples/react/start-large/README.md
[style] ~36-~36: To reduce wordiness, try specifying a number or using “many” or “numerous” instead.
Context: ...out This Example This example contains a large number of routes to demonstrate TanStack Router's...
(LARGE_NUMBER_OF)
examples/react/start-i18n-paraglide/README.md
[style] ~195-~195: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing.
Context: ...Start plugin. For this to work you will need to compile paraglide before the build with...
(REP_NEED_TO_VB)
examples/react/i18n-paraglide/README.md
[style] ~79-~79: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ... => handler.fetch(request)) }, } ``` In __root.tsx add change the html lang a...
(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
[style] ~190-~190: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing.
Context: ...Start plugin. For this to work you will need to compile paraglide before the build with...
(REP_NEED_TO_VB)
🪛 markdownlint-cli2 (0.18.1)
examples/react/i18n-paraglide/README.md
3-3: Link text should be descriptive
(MD059, descriptive-link-text)
|
View your CI Pipeline Execution ↗ for commit e35ea17
☁️ Nx Cloud last updated this comment at |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
examples/react/start-basic-rsc/README.md (1)
47-94: Documentation editing section is comprehensive but tangential.Lines 47–94 provide detailed guidance on editing TanStack documentation locally, which is contextually appropriate for a docs-site example. However, the section is quite lengthy (~50 lines) and heavily focuses on contributing to the broader tanstack.com ecosystem rather than getting started with the
start-basic-rscexample itself.Consider whether this belongs in the core README or might be better suited to a
CONTRIBUTING.mdor separate documentation file. This will improve readability for users primarily interested in running or building upon the example.examples/react/start-tailwind-v4/README.md (1)
16-20: Deployment section is minimal relative to PR objectives.The Deployment section only briefly mentions Netlify without expanded instructions. According to the PR objectives, "enhanced deployment sections for Netlify, Vercel, and Cloudflare where applicable" should be provided. Consider whether this example warrants more detailed Netlify deployment guidance.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
examples/react/start-basic-rsc/README.md(4 hunks)examples/react/start-basic-static/README.md(4 hunks)examples/react/start-clerk-basic/README.md(4 hunks)examples/react/start-counter/README.md(4 hunks)examples/react/start-tailwind-v4/README.md(4 hunks)examples/react/with-trpc-react-query/README.md(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- examples/react/start-counter/README.md
🧰 Additional context used
🧠 Learnings (5)
📓 Common learnings
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-25T00:18:21.282Z
Learning: Test changes in relevant example apps by running cd examples/[framework]/[example] && pnpm dev
📚 Learning: 2025-11-25T00:18:21.282Z
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-25T00:18:21.282Z
Learning: Applies to packages/react-router/**/*.{ts,tsx} : React Router components and hooks should use the tanstack/react-router package
Applied to files:
examples/react/start-basic-static/README.mdexamples/react/with-trpc-react-query/README.mdexamples/react/start-basic-rsc/README.md
📚 Learning: 2025-11-25T00:18:21.282Z
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-25T00:18:21.282Z
Learning: Test changes in relevant example apps by running cd examples/[framework]/[example] && pnpm dev
Applied to files:
examples/react/start-basic-static/README.mdexamples/react/start-tailwind-v4/README.mdexamples/react/with-trpc-react-query/README.mdexamples/react/start-basic-rsc/README.mdexamples/react/start-clerk-basic/README.md
📚 Learning: 2025-11-25T00:18:21.282Z
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-25T00:18:21.282Z
Learning: Update corresponding documentation in docs/ directory when adding features
Applied to files:
examples/react/start-basic-static/README.mdexamples/react/start-tailwind-v4/README.mdexamples/react/start-basic-rsc/README.mdexamples/react/start-clerk-basic/README.md
📚 Learning: 2025-11-25T00:18:21.282Z
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-25T00:18:21.282Z
Learning: Applies to packages/solid-router/**/*.{ts,tsx} : Solid Router components and primitives should use the tanstack/solid-router package
Applied to files:
examples/react/with-trpc-react-query/README.mdexamples/react/start-basic-rsc/README.md
🪛 markdownlint-cli2 (0.18.1)
examples/react/start-tailwind-v4/README.md
91-91: Bare URL used
(MD034, no-bare-urls)
🔇 Additional comments (16)
examples/react/start-basic-static/README.md (4)
7-13: Verify gitpick command syntax and path accuracy.The standardized "Start a new project" section is well-integrated. However, I need to confirm the gitpick command uses the correct syntax and references the right example path.
Please verify that:
- The gitpick command format is correct (specifically the
/tree/main/segment in the repository path)- The example path
examples/react/start-basic-staticaccurately maps to this example- The second parameter
start-basic-staticcorrectly specifies the output directory nameYou can validate by checking similar gitpick commands across other updated READMEs in this PR or referencing the gitpick documentation.
21-36: Development and Build sections follow template correctly.Both sections use pnpm consistently and match the standardized template from the PR objectives. Clear, concise, and actionable.
38-44: About This Example section captures the distinctive aspects of this example.The section clearly highlights SSG and prerendering as the key features that differentiate this example. Aligns well with the example's focus.
46-92: Example-specific docs editing guidance is appropriately retained.This section preserves the TanStack-specific documentation workflow that was in the original README. Retaining it aligns with the PR objective to "preserve and merge example-specific instructions for complex examples." Markdown formatting for blockquotes and warning/note blocks is correct.
examples/react/start-clerk-basic/README.md (4)
1-6: Title and intro are clear and well-linked.
8-14: Verify gitpick command syntax and path resolution.The gitpick command has been added per PR objectives. Please confirm that this invocation syntax is correct for the gitpick CLI and that it reliably clones the example to the correct location.
31-46: Build and About sections properly standardized.The new Build and About This Example sections follow the unified template structure and are appropriately tailored to this Clerk authentication example. pnpm commands are consistent with the standardization goals.
48-95: Clarify scope of the docs editing section.The "Editing and previewing the docs of TanStack projects locally" section is extensive and focuses on TanStack documentation workflows (using tanstack/form as an example) rather than the Clerk authentication specifics of this example. While the formatting updates are correct, please confirm this section is intentionally included in all example READMEs as part of the standardization effort, or if it should be scoped to documentation-focused examples only.
examples/react/start-basic-rsc/README.md (2)
21-36: Development and Build sections are clear and pnpm-consistent.The standardized pnpm commands (
pnpm install,pnpm dev,pnpm build) align with the PR's package manager standardization objective. Instructions are concise and appropriate for both new and experienced developers.
1-13: README structure aligns with standardization template.The title, "Start a new project" section, and gitpick command follow the PR standardization objectives. The command syntax (
npx gitpick TanStack/router/tree/main/examples/react/start-basic-rsc start-basic-rsc) enables quick project setup.examples/react/start-tailwind-v4/README.md (5)
8-14: Correctly implements gitpick bootstrap command.The new "Start a new project" section follows the standardized pattern with the correct example path in the gitpick command.
22-37: Standardization to pnpm and Build section are consistent with PR objectives.Development and Build sections align with the unified template and pnpm standardization across React examples.
31-37: Build section appropriately added.The new Build section clearly documents the production build step, which was previously missing from this README.
39-45: About This Example section expanded with meaningful details.The expanded "About" section now explicitly highlights Tailwind CSS v4 integration, which is the key focus of this example.
90-94: Verify static analysis warning for bare URLs.The static analysis tool flagged line 91 as containing a bare URL (MD034, no-bare-urls). The visible content at line 91 (
> [!NOTE]) contains no bare URL, but line 90 (unchanged) containshttp://localhost:3000/form/latest/docs/overview. This appears to be either a false positive or a line-numbering discrepancy in the tool. Please verify that no new bare URLs were introduced in this change that would violate the no-bare-urls rule, or suppress this as a false positive if confirmed.examples/react/with-trpc-react-query/README.md (1)
1-47: README follows standardized template with consistent package manager instructions.The documentation clearly structures setup instructions, getting started steps, and feature descriptions. All package manager commands consistently use pnpm. External resource links to TanStack Router, tRPC, and TanStack Query documentation should be manually verified to ensure they remain current and accessible.
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
SeanCassiere
changed the title
There was a problem hiding this comment.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
examples/react/router-monorepo-simple-lazy/README.md (1)
68-78: Fix pronoun-antecedent agreement in line 70.The sentence uses the singular noun "library" but the plural possessive pronoun "their". Revise to maintain grammatical consistency:
-Each feature exports a `createLazyRoute` function that returns a lazy route. This lazy route is then used in the router map to bind the lazy route to the actual route. This allows the library to define their component, pending, error and not found components directly. +Each feature exports a `createLazyRoute` function that returns a lazy route. This lazy route is then used in the router map to bind the lazy route to the actual route. This allows each library to define its component, pending, error, and not found components directly.
♻️ Duplicate comments (3)
examples/react/start-i18n-paraglide/README.md (2)
89-89: Fix grammatical phrasing on line 89.The phrase "add change the html lang attribute" is grammatically incorrect.
Apply this diff:
-In `__root.tsx` add change the html lang attribute to the current locale. +Update the html `lang` attribute in `__root.tsx` to reflect the current locale:(This issue was previously flagged in the related i18n-paraglide README and remains unfixed here.)
191-191: Fix typo: "plguin" should be "plugin".Apply this diff:
-And import into the Paraglide Vite plguin. +And import into the Paraglide Vite plugin.(This typo was previously flagged in review and remains unfixed.)
examples/react/i18n-paraglide/README.md (1)
80-80: Fix grammatical phrasing on line 80.The phrase "add change the html lang attribute" is grammatically incorrect and confusing.
Apply this diff to correct the phrasing:
-In `__root.tsx` add change the html lang attribute to the current locale. +Update the html `lang` attribute in `__root.tsx` to reflect the current locale:(This issue was previously flagged and remains unfixed.)
🧹 Nitpick comments (1)
examples/react/start-i18n-paraglide/README.md (1)
195-195: Reduce repeated phrasing for better readability.Line 195 repeats "you will need to" phrasing from the previous line, which reduces writing variety and flow.
Consider restructuring to vary the phrasing:
-You can use use the `localizeHref` function to map the routes to localized versions and import into the pages option in the TanStack Start plugin. For this to work you will need to compile paraglide before the build with the CLI. +You can use the `localizeHref` function to map routes to localized versions and import them into the pages option in the TanStack Start plugin. Before building, compile paraglide with the CLI.This removes the duplicate phrasing, fixes the double "use use", and maintains the same meaning more concisely.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
examples/react/i18n-paraglide/README.md(4 hunks)examples/react/router-monorepo-simple-lazy/README.md(2 hunks)examples/react/start-i18n-paraglide/README.md(4 hunks)examples/react/start-trellaux/README.md(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- examples/react/start-trellaux/README.md
🧰 Additional context used
🧠 Learnings (6)
📓 Common learnings
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-25T00:18:21.282Z
Learning: Test changes in relevant example apps by running cd examples/[framework]/[example] && pnpm dev
📚 Learning: 2025-11-25T00:18:21.282Z
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-25T00:18:21.282Z
Learning: Applies to packages/react-router/**/*.{ts,tsx} : React Router components and hooks should use the tanstack/react-router package
Applied to files:
examples/react/router-monorepo-simple-lazy/README.mdexamples/react/i18n-paraglide/README.md
📚 Learning: 2025-11-25T00:18:21.282Z
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-25T00:18:21.282Z
Learning: Applies to packages/solid-router/**/*.{ts,tsx} : Solid Router components and primitives should use the tanstack/solid-router package
Applied to files:
examples/react/router-monorepo-simple-lazy/README.mdexamples/react/i18n-paraglide/README.md
📚 Learning: 2025-11-25T00:18:21.282Z
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-25T00:18:21.282Z
Learning: Test changes in relevant example apps by running cd examples/[framework]/[example] && pnpm dev
Applied to files:
examples/react/router-monorepo-simple-lazy/README.md
📚 Learning: 2025-11-02T16:16:24.898Z
Learnt from: nlynzaad
Repo: TanStack/router PR: 5732
File: packages/start-client-core/src/client/hydrateStart.ts:6-9
Timestamp: 2025-11-02T16:16:24.898Z
Learning: In packages/start-client-core/src/client/hydrateStart.ts, the `import/no-duplicates` ESLint disable is necessary for imports from `#tanstack-router-entry` and `#tanstack-start-entry` because both aliases resolve to the same placeholder file (`fake-start-entry.js`) in package.json during static analysis, even though they resolve to different files at runtime.
Applied to files:
examples/react/router-monorepo-simple-lazy/README.md
📚 Learning: 2025-11-25T00:18:21.282Z
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-25T00:18:21.282Z
Learning: Applies to **/src/routes/**/*.{ts,tsx} : Use file-based routing in src/routes/ directories or code-based routing with route definitions
Applied to files:
examples/react/router-monorepo-simple-lazy/README.mdexamples/react/start-i18n-paraglide/README.mdexamples/react/i18n-paraglide/README.md
🪛 LanguageTool
examples/react/start-i18n-paraglide/README.md
[style] ~195-~195: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing.
Context: ...Start plugin. For this to work you will need to compile paraglide before the build with...
(REP_NEED_TO_VB)
examples/react/i18n-paraglide/README.md
[style] ~79-~79: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ... => handler.fetch(request)) }, } ``` In __root.tsx add change the html lang a...
(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
[style] ~190-~190: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing.
Context: ...Start plugin. For this to work you will need to compile paraglide before the build with...
(REP_NEED_TO_VB)
🔇 Additional comments (3)
examples/react/router-monorepo-simple-lazy/README.md (3)
7-13: Gitpick command is correctly configured.The "Start a new project" section includes the correct gitpick bootstrap command that references the proper example path.
35-55: Standardized package manager instructions and build workflow.The "Getting Started" and "Build" sections correctly standardize to pnpm, aligning with PR objectives and enabling consistent development experience across all React examples.
1-66: README structure follows standardized template and retains monorepo-specific context.The unified template (intro, "Start a new project", "Getting Started", "Build", "About This Example") is well-applied. The "Monorepo Setup" section elegantly preserves complex example guidance by explaining the circular-dependency solution and type-safety approach, which differentiates this monorepo example from simpler ones.
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (4)
examples/react/start-basic-rsc/README.md (1)
45-92: Remove the "Editing and previewing the docs" section—it's out of scope for example READMEs.The "Editing and previewing the docs of TanStack projects locally" section (lines 45–92) documents the TanStack website's development workflow, not the example itself. A past review comment flagged this for removal, and it contradicts the PR's objective to standardize example READMEs around onboarding and deployment. This content belongs in a separate contributing guide, not in per-example READMEs.
Remove lines 45–92 entirely:
-## Editing and previewing the docs of TanStack projects locally - -The documentations for all TanStack projects except for `React Charts` are hosted on [https://tanstack.com](https://tanstack.com), powered by this TanStack Router app. -In production, the markdown doc pages are fetched from the GitHub repos of the projects, but in development they are read from the local file system. -Follow these steps if you want to edit the doc pages of a project (in these steps we'll assume it's [`TanStack/form`](https://github.com/tanstack/form)) and preview them locally : - -1. Create a new directory called `tanstack`. - -```sh -mkdir tanstack -``` - -2. Enter the directory and clone this repo and the repo of the project there. - -```sh -cd tanstack -git clone git@github.com:TanStack/tanstack.com.git -git clone git@github.com:TanStack/form.git -``` - -> [!NOTE] -> Your `tanstack` directory should look like this: -> -> ``` -> tanstack/ -> | -> +-- form/ -> | -> +-- tanstack.com/ -> ``` - -> [!WARNING] -> Make sure the name of the directory in your local file system matches the name of the project's repo. For example, `tanstack/form` must be cloned into `form` (this is the default) instead of `some-other-name`, because that way, the doc pages won't be found. - -3. Enter the `tanstack/tanstack.com` directory, install the dependencies and run the app in dev mode: - -```sh -cd tanstack.com -pnpm i -# The app will run on https://localhost:3000 by default -pnpm dev -``` - -4. Now you can visit http://localhost:3000/form/latest/docs/overview in the browser and see the changes you make in `tanstack/form/docs`. -> [!NOTE] -> The updated pages need to be manually reloaded in the browser. -> [!WARNING] -> You will need to update the `docs/config.json` file (in the project's repo) if you add a new doc page!examples/react/start-basic-static/README.md (1)
46-92: Remove the out-of-scope "Editing and previewing the docs" section.The "Editing and previewing the docs of TanStack projects locally" section (lines 46–92) describes a workflow for contributing to TanStack's own documentation repositories, not for running or understanding this example. This content is out of scope for an example README and should be removed entirely.
Example READMEs should focus on: running the example locally, understanding what it demonstrates, and deployment instructions — not on contributing to TanStack docs.
Remove lines 46–92 entirely, ending the README after the "About This Example" section.
examples/react/start-basic-auth/README.md (1)
43-93: Remove the out-of-scope "Editing and previewing the docs" section (previously flagged).As noted in the prior review (SeanCassiere's comment on line 43), the "Editing and previewing the docs of TanStack projects locally" section (lines 43–93) is copied from the tanstack.com README and describes a workflow for contributing to TanStack's documentation repositories — not for running or understanding this example. This content should be removed.
Example READMEs should document: running the example, understanding its features, and deployment — not contributing to TanStack docs.
Remove lines 43–93 entirely, ending the README after the "Authentication Features" section.
examples/react/start-i18n-paraglide/README.md (1)
77-77: Fix grammar error and improve sentence consistency.Line 89 has a grammatical error ("add change" should be either "add" or "change"). Additionally, line 77 uses a different sentence structure than the parallel i18n-paraglide example (line 68), which was improved for readability.
Apply this diff to fix both issues:
-In `server.ts` intercept the request with the paraglideMiddleware. +Intercept the request in `server.ts` with the paraglideMiddleware: ```ts import { paraglideMiddleware } from './paraglide/server.js' @@ -77,7 +77,7 @@ export default { }-In
__root.tsxadd change the html lang attribute to the current locale.
+Update the htmllangattribute in__root.tsxto reflect the current locale:Also applies to: 89-89 </blockquote></details> </blockquote></details>♻️ Duplicate comments (1)
examples/react/i18n-paraglide/README.md (1)
80-80: Fix grammatical error in HTML lang attribute instruction.Line 80 has a grammatical error ("add change" should be either "add" or "change").
Apply this diff to fix the issue:
-In `__root.tsx` add change the html lang attribute to the current locale. +Update the html `lang` attribute in `__root.tsx` to reflect the current locale:📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (20)
examples/react/i18n-paraglide/README.md(4 hunks)examples/react/start-bare/README.md(1 hunks)examples/react/start-basic-auth/README.md(2 hunks)examples/react/start-basic-authjs/README.md(1 hunks)examples/react/start-basic-cloudflare/README.md(2 hunks)examples/react/start-basic-react-query/README.md(2 hunks)examples/react/start-basic-rsc/README.md(4 hunks)examples/react/start-basic-static/README.md(4 hunks)examples/react/start-basic/README.md(2 hunks)examples/react/start-bun/README.md(2 hunks)examples/react/start-clerk-basic/README.md(4 hunks)examples/react/start-convex-trellaux/README.md(1 hunks)examples/react/start-counter/README.md(4 hunks)examples/react/start-i18n-paraglide/README.md(4 hunks)examples/react/start-large/README.md(1 hunks)examples/react/start-material-ui/README.md(1 hunks)examples/react/start-streaming-data-from-server-functions/README.md(1 hunks)examples/react/start-supabase-basic/README.md(1 hunks)examples/react/start-tailwind-v4/README.md(4 hunks)examples/react/start-trellaux/README.md(1 hunks)✅ Files skipped from review due to trivial changes (1)
- examples/react/start-large/README.md
🚧 Files skipped from review as they are similar to previous changes (8)
- examples/react/start-material-ui/README.md
- examples/react/start-bare/README.md
- examples/react/start-convex-trellaux/README.md
- examples/react/start-basic-authjs/README.md
- examples/react/start-basic/README.md
- examples/react/start-trellaux/README.md
- examples/react/start-counter/README.md
- examples/react/start-streaming-data-from-server-functions/README.md
🧰 Additional context used
🧠 Learnings (6)
📚 Learning: 2025-11-25T00:18:21.282Z
Learnt from: CR Repo: TanStack/router PR: 0 File: AGENTS.md:0-0 Timestamp: 2025-11-25T00:18:21.282Z Learning: Applies to packages/react-router/**/*.{ts,tsx} : React Router components and hooks should use the tanstack/react-router packageApplied to files:
examples/react/start-basic-static/README.mdexamples/react/i18n-paraglide/README.mdexamples/react/start-basic-rsc/README.mdexamples/react/start-basic-react-query/README.mdexamples/react/start-tailwind-v4/README.md📚 Learning: 2025-11-25T00:18:21.282Z
Learnt from: CR Repo: TanStack/router PR: 0 File: AGENTS.md:0-0 Timestamp: 2025-11-25T00:18:21.282Z Learning: Test changes in relevant example apps by running cd examples/[framework]/[example] && pnpm devApplied to files:
examples/react/start-basic-static/README.mdexamples/react/start-clerk-basic/README.mdexamples/react/start-basic-rsc/README.mdexamples/react/start-basic-react-query/README.mdexamples/react/start-tailwind-v4/README.mdexamples/react/start-basic-auth/README.mdexamples/react/start-bun/README.md📚 Learning: 2025-11-25T00:18:21.282Z
Learnt from: CR Repo: TanStack/router PR: 0 File: AGENTS.md:0-0 Timestamp: 2025-11-25T00:18:21.282Z Learning: Update corresponding documentation in docs/ directory when adding featuresApplied to files:
examples/react/start-basic-static/README.mdexamples/react/start-clerk-basic/README.mdexamples/react/start-basic-rsc/README.mdexamples/react/start-tailwind-v4/README.md📚 Learning: 2025-11-25T00:18:21.282Z
Learnt from: CR Repo: TanStack/router PR: 0 File: AGENTS.md:0-0 Timestamp: 2025-11-25T00:18:21.282Z Learning: Applies to packages/solid-router/**/*.{ts,tsx} : Solid Router components and primitives should use the tanstack/solid-router packageApplied to files:
examples/react/i18n-paraglide/README.mdexamples/react/start-basic-rsc/README.md📚 Learning: 2025-11-25T00:18:21.282Z
Learnt from: CR Repo: TanStack/router PR: 0 File: AGENTS.md:0-0 Timestamp: 2025-11-25T00:18:21.282Z Learning: Applies to **/src/routes/**/*.{ts,tsx} : Use file-based routing in src/routes/ directories or code-based routing with route definitionsApplied to files:
examples/react/start-basic-cloudflare/README.mdexamples/react/start-i18n-paraglide/README.md📚 Learning: 2025-11-25T00:18:21.282Z
Learnt from: CR Repo: TanStack/router PR: 0 File: AGENTS.md:0-0 Timestamp: 2025-11-25T00:18:21.282Z Learning: Always run pnpm test:eslint, pnpm test:types, and pnpm test:unit before committingApplied to files:
examples/react/start-bun/README.md🪛 LanguageTool
examples/react/i18n-paraglide/README.md
[grammar] ~184-~184: Use a hyphen to join words.
Context: ...to the Paraglide Vite plugin. ## Server side rendering For server side renderin...(QB_NEW_EN_HYPHEN)
[grammar] ~186-~186: Use a hyphen to join words.
Context: ...n. ## Server side rendering For server side rendering, check out the [TanStack ...(QB_NEW_EN_HYPHEN)
[style] ~190-~190: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing.
Context: ...Start plugin. For this to work you will need to compile paraglide before the build with...(REP_NEED_TO_VB)
examples/react/start-i18n-paraglide/README.md
[style] ~195-~195: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing.
Context: ...Start plugin. For this to work you will need to compile paraglide before the build with...(REP_NEED_TO_VB)
🔇 Additional comments (18)
examples/react/start-basic-rsc/README.md (1)
1-43: Standardization looks good; sections properly structured.The header, "Start a new project", "Getting Started", "Build", and "About This Example" sections align well with the PR's standardization template and pnpm migration. The gitpick command format is correct, and feature descriptions are relevant to this RSC example.
examples/react/start-basic-react-query/README.md (3)
1-14: Excellent structure and clear onboarding flow.The README now provides a cohesive user journey: clear title identifying the example, immediate bootstrap command via gitpick, and a concise description of the integration focus. The standardization aligns well with the PR's unified template approach.
Please verify that the gitpick command path on line 13 is correct. I want to confirm the example path
examples/react/start-basic-react-queryis accurately referenced and that the output directory namestart-basic-react-querymatches the expected convention.
16-33: Package manager and build instructions are consistent and clear.The use of pnpm throughout (Getting Started and Build sections) aligns with the PR's standardization objective, and the commands are straightforward for developers to follow.
35-41: Example-specific section is well-named and informative.The "TanStack Query Integration" section provides clear context about what this example demonstrates, which is more descriptive than a generic "About This Example" heading. This specificity helps users quickly understand the example's purpose.
examples/react/start-tailwind-v4/README.md (1)
1-94: Standardization applied correctly with all required sections.The README successfully implements the PR objectives: unified template structure (Getting Started, Build, About This Example), standardized pnpm commands, new gitpick bootstrap section, and improved markdown formatting for alert blocks. Complex documentation about local TanStack docs editing was appropriately preserved with cleaner GitHub-flavored alert syntax. All sections are well-organized and follow consistent formatting patterns across the standardized examples.
examples/react/start-basic-cloudflare/README.md (3)
1-67: Well-structured README that aligns with PR standardization goals.The README effectively applies the standardized template across sections (Getting Started, Build, Preview) while adding Cloudflare-specific deployment and configuration details. The pnpm-based workflow is consistent, the "Start a new project" section with gitpick command is clear, and the documentation links are relevant.
59-59: Verify the referenced example file exists.The section references
src/routes/index.tsxas containing an example of accessing bindings. Ensure this file exists in the example directory and demonstrates the pattern described.
56-56: The Cloudflare Workers import syntax is correct.The import statement
import { env } from 'cloudflare:workers'is the current recommended approach according to official Cloudflare documentation (March 2025). This syntax properly accesses environment variables and bindings in Cloudflare Workers.examples/react/start-supabase-basic/README.md (3)
1-57: Well-structured README with clear setup and pnpm standardization.The README follows the unified template with clear sections for "Start a new project", setup (with environment variables), "Getting Started", and "Build". Supabase-specific configuration steps are actionable, and pnpm is consistently used throughout, aligning with the PR's standardization goals.
16-30: Verify environment variable naming consistency between README and source code.The environment variables
VITE_SUPABASE_URLandVITE_SUPABASE_ANON_KEYdocumented in the README should be confirmed to match the actual variable names referenced in the example's configuration files (.env.example) and source code that imports them.
8-14: No issues identified. The gitpick command on line 13 follows the correct syntax for gitpick (owner/repo/tree/branch/path), and the example path is properly formatted and consistent with the repository structure.examples/react/start-clerk-basic/README.md (5)
22-37: Excellent standardization of package manager instructions.The "Getting Started" and "Build" sections have been successfully standardized to use
pnpmconsistently, aligning with the PR objective to standardize package manager instructions across all examples.
39-46: About This Example section is well-tailored to this Clerk example.The new "About This Example" section clearly outlines the key features specific to the Clerk authentication integration (auth integration, protected routes, user management, and authentication UI components), providing users with a clear understanding of what the example demonstrates.
8-14: Verify the gitpick command syntax and path are correct.The "Start a new project" section introduces the
npx gitpickcommand to bootstrap new projects from this example. Ensure the command path (TanStack/router/tree/main/examples/react/start-clerk-basic) is correctly formatted and that the example name matches the directory structure.
1-6: The Clerk documentation link at https://clerk.com/docs is valid and currently accessible with recent updates. No action needed.
92-95: The markdown admonition syntax using[!NOTE]and[!WARNING]is officially supported by GitHub and will render correctly as colored alert boxes with icons. No issues with the syntax formatting.examples/react/start-bun/README.md (2)
5-6: ✓ Documentation links and gitpick command look good.The external resource links and bootstrap command follow the standardized template correctly.
Also applies to: 8-14
164-187:⚠️ Package manager conflict: pnpm instructions contradict Bun-specific example.For a Bun-focused example, the newly added pnpm sections (lines 164–187) directly conflict with the earlier Bun-specific instructions (lines 24–52). Users will be confused about which package manager to use.
Per the PR objectives, Bun is listed as a complex example where "existing unique instructions were preserved and merged." These pnpm sections appear to replace rather than complement the Bun workflow.
Recommended fix:
Either:
Option A (Preferred): Replace the pnpm commands with equivalent Bun commands to maintain example coherence:
- pnpm install + bun install - pnpm dev + bun run dev - pnpm build + bun run build - pnpm start + bun run startOption B: Remove lines 164–187 entirely since the Bun-specific sections (24–52) already cover installation, development, and production workflows comprehensively.
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (1)
examples/react/start-basic-auth/README.md (1)
15-41: Getting Started, Build, and feature sections follow standardized pattern effectively.The structure (pnpm install → pnpm dev → pnpm build → feature list) matches the PR's unified template and provides clear, actionable guidance. The Authentication Features section adequately summarizes what users will learn.
If the basic-auth example includes authentication setup steps beyond
pnpm install(e.g., configuring a provider, setting up a local auth server, or seeding a database), consider whether those details belong in a separate "Setup" subsection or expanded "Getting Started" guidance.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (9)
examples/react/i18n-paraglide/README.md(4 hunks)examples/react/start-basic-auth/README.md(2 hunks)examples/react/start-basic-rsc/README.md(1 hunks)examples/react/start-basic-static/README.md(1 hunks)examples/react/start-basic/README.md(1 hunks)examples/react/start-clerk-basic/README.md(1 hunks)examples/react/start-counter/README.md(1 hunks)examples/react/start-i18n-paraglide/README.md(5 hunks)examples/react/start-tailwind-v4/README.md(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- examples/react/start-basic-static/README.md
🧰 Additional context used
🧠 Learnings (5)
📓 Common learnings
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-25T00:18:21.282Z
Learning: Test changes in relevant example apps by running cd examples/[framework]/[example] && pnpm dev
📚 Learning: 2025-11-25T00:18:21.282Z
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-25T00:18:21.282Z
Learning: Applies to packages/react-router/**/*.{ts,tsx} : React Router components and hooks should use the tanstack/react-router package
Applied to files:
examples/react/start-i18n-paraglide/README.mdexamples/react/i18n-paraglide/README.mdexamples/react/start-tailwind-v4/README.mdexamples/react/start-basic-rsc/README.mdexamples/react/start-basic/README.md
📚 Learning: 2025-11-25T00:18:21.282Z
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-25T00:18:21.282Z
Learning: Applies to **/src/routes/**/*.{ts,tsx} : Use file-based routing in src/routes/ directories or code-based routing with route definitions
Applied to files:
examples/react/start-i18n-paraglide/README.md
📚 Learning: 2025-11-25T00:18:21.282Z
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-25T00:18:21.282Z
Learning: Applies to packages/solid-router/**/*.{ts,tsx} : Solid Router components and primitives should use the tanstack/solid-router package
Applied to files:
examples/react/i18n-paraglide/README.mdexamples/react/start-basic-rsc/README.md
📚 Learning: 2025-11-25T00:18:21.282Z
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-25T00:18:21.282Z
Learning: Test changes in relevant example apps by running cd examples/[framework]/[example] && pnpm dev
Applied to files:
examples/react/start-basic-auth/README.mdexamples/react/start-basic/README.md
🪛 LanguageTool
examples/react/start-i18n-paraglide/README.md
[style] ~195-~195: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing.
Context: ...Start plugin. For this to work you will need to compile paraglide before the build with...
(REP_NEED_TO_VB)
examples/react/i18n-paraglide/README.md
[grammar] ~184-~184: Use a hyphen to join words.
Context: ...to the Paraglide Vite plugin. ## Server side rendering For server side renderin...
(QB_NEW_EN_HYPHEN)
[grammar] ~186-~186: Use a hyphen to join words.
Context: ...n. ## Server side rendering For server side rendering, check out the [TanStack ...
(QB_NEW_EN_HYPHEN)
[style] ~190-~190: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing.
Context: ...Start plugin. For this to work you will need to compile paraglide before the build with...
(REP_NEED_TO_VB)
🔇 Additional comments (11)
examples/react/start-tailwind-v4/README.md (1)
1-44: Excellent standardization! README follows the unified template with all key sections in place.The file successfully implements the PR objectives:
- Standardized structure with "Getting Started", "Build", "Deployment", and "About This Example" sections
- Correct gitpick bootstrap command pointing to the right example path
- Consistent pnpm-based workflow throughout
- Tailwind CSS v4 specific content preserved and well-organized in the "About This Example" section
- Relevant documentation links (both TanStack Router and Tailwind CSS Docs)
examples/react/start-basic-auth/README.md (1)
1-13: Title, description, and gitpick command look good; verify project bootstrap completeness.The standardization aligns well with PR objectives—the title is now example-specific (resolving the past concern about TanStack.com generic content), and the "Start a new project" section with gitpick correctly targets this example.
However, the PR verification states that "unique setup steps (environment variables, specific build commands) were retained." Please confirm whether the
start-basic-authexample requires environment variables (e.g., authentication provider credentials, session keys, etc.) that should be documented in the README to help users successfully run the example.examples/react/start-clerk-basic/README.md (1)
1-46: Standardization looks solid; verify Clerk setup documentation completeness.The README follows the standardized structure across the PR nicely (bootstrap, Getting Started, Build, About). The gitpick command and pnpm workflow are consistent with the standardization goals. However, I notice the "About This Example" section doesn't mention Clerk-specific prerequisites or environment setup (API keys, configuration).
Per the PR objectives, "unique setup steps (environment variables, specific build commands) were retained." If this example requires Clerk API configuration, consider adding a note about required environment variables or linking to Clerk setup documentation.
Run the following script to verify whether Clerk environment setup instructions should be documented here:
#!/bin/bash # Description: Check if there are any Clerk-specific setup instructions elsewhere in the codebase # or in version control history for this example. # Search for Clerk-related config/env files in the example directory fd --type f --extension env --extension md . examples/react/start-clerk-basic # Check for any mentions of Clerk API keys or configuration in non-README files rg -n "CLERK|API_KEY" examples/react/start-clerk-basic --type-list | head -20examples/react/start-basic-rsc/README.md (2)
21-43: Standardization complete and well-executed.The Getting Started, Build, and About This Example sections properly implement the standardization objectives:
- Consistent pnpm-based workflow matching project conventions
- Clear, minimal command instructions aligned with learnings
- Example-specific content (RSC with TanStack Start) properly retained
7-13: Verify gitpick command syntax and functionality.The gitpick bootstrap command references the correct example path. Please verify:
- The command runs successfully and clones the example correctly
- The output directory name (
start-basic-rsc) matches the intended targetYou can verify this locally with:
#!/bin/bash # Verify gitpick command structure and path validity # Check that the example directory exists at the specified path fd -t d "start-basic-rsc" examples/react/ --max-depth 1examples/react/start-basic/README.md (3)
1-9: Strong alignment with standardization goals.The revised title, description, and retained documentation links effectively position this example. The structure is clear and welcoming.
19-36: Clean Getting Started and Build sections.The pnpm-based instructions are concise, correct, and aligned with the PR's standardization objective. The development and build workflows are clear and immediately actionable.
11-17: No changes needed. The gitpick command syntax is correct as written. The/tree/main/path format is the documented way gitpick handles folder paths within repositories, not a GitHub web convention. The commandnpx gitpick TanStack/router/tree/main/examples/react/start-basic start-basicfollows the correct CLI syntax.Likely an incorrect or invalid review comment.
examples/react/start-counter/README.md (1)
1-44: No changes needed; the gitpick command syntax is correct.The README follows the standardized template well with clear sections: title, "Start a new project" bootstrap command, Getting Started and Build sections using pnpm, Deployment, and About This Example context. The gitpick command on line 12 correctly uses the GitHub URL path style (
owner/repo/tree/main/path) which is the documented format for gitpick when specifying both branch and repository path. The syntax is valid and will work as intended.examples/react/start-i18n-paraglide/README.md (1)
182-182: Clarify the instruction about importing translated pathnames.The instruction "And import into the Paraglide Vite plugin" is incomplete. It's unclear what should be imported where. Based on context, this likely refers to passing
translatedPathnamesto theurlPatternsin the vite plugin configuration, but the instruction needs clarification.Can you clarify whether this should reference updating the vite plugin configuration with the
translatedPathnamesarray? If so, an example showing the updated plugin config would be helpful.examples/react/i18n-paraglide/README.md (1)
182-182: Clarify the instruction about importing translated pathnames.The instruction "And import into the Paraglide Vite plugin" is incomplete. It's unclear what should be imported where. Based on context, this likely refers to passing
translatedPathnamesto theurlPatternsin the vite plugin configuration, but the instruction needs clarification.Can you clarify whether this should reference updating the vite plugin configuration with the
translatedPathnamesarray? If so, an example showing the updated plugin config would be helpful.
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
examples/react/i18n-paraglide/README.md (1)
36-40: Inconsistent indentation in paraglideVitePlugin configuration.The indentation in the vite plugin configuration appears misaligned. Line 36 starts with fewer spaces than lines 37-39, creating visual inconsistency.
Apply this diff to align the indentation:
- paraglideVitePlugin({ - project: "./project.inlang", - outdir: "./app/paraglide", - }), + paraglideVitePlugin({ + project: "./project.inlang", + outdir: "./app/paraglide", + }),examples/react/start-i18n-paraglide/README.md (1)
36-50: Inconsistent indentation in paraglideVitePlugin configuration.The indentation in the vite plugin configuration is misaligned. Line 36 uses fewer spaces than the config properties on lines 37–50, creating visual inconsistency. Additionally, the nested urlPatterns array (lines 42–49) has further indentation issues.
Apply this diff to align the indentation consistently:
- paraglideVitePlugin({ - project: "./project.inlang", - outdir: "./app/paraglide", + paraglideVitePlugin({ + project: "./project.inlang", + outdir: "./app/paraglide", - outputStructure: "message-modules", - cookieName: "PARAGLIDE_LOCALE", - strategy: ["url", "cookie", "preferredLanguage", "baseLocale"], - urlPatterns: [ - { - pattern: "/:path(.*)?", - localized: [ - ["en", "/en/:path(.*)?"], - ], - }, - ], - }), + outputStructure: "message-modules", + cookieName: "PARAGLIDE_LOCALE", + strategy: ["url", "cookie", "preferredLanguage", "baseLocale"], + urlPatterns: [ + { + pattern: "/:path(.*)?", + localized: [ + ["en", "/en/:path(.*)?"], + ], + }, + ], + }),
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
examples/react/i18n-paraglide/README.md(4 hunks)examples/react/start-basic-rsc/README.md(1 hunks)examples/react/start-counter/README.md(1 hunks)examples/react/start-i18n-paraglide/README.md(5 hunks)
🧰 Additional context used
🧠 Learnings (4)
📓 Common learnings
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-25T00:18:21.282Z
Learning: Test changes in relevant example apps by running cd examples/[framework]/[example] && pnpm dev
📚 Learning: 2025-11-25T00:18:21.282Z
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-25T00:18:21.282Z
Learning: Applies to packages/react-router/**/*.{ts,tsx} : React Router components and hooks should use the tanstack/react-router package
Applied to files:
examples/react/start-basic-rsc/README.mdexamples/react/i18n-paraglide/README.mdexamples/react/start-i18n-paraglide/README.md
📚 Learning: 2025-11-25T00:18:21.282Z
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-25T00:18:21.282Z
Learning: Applies to packages/solid-router/**/*.{ts,tsx} : Solid Router components and primitives should use the tanstack/solid-router package
Applied to files:
examples/react/start-basic-rsc/README.mdexamples/react/i18n-paraglide/README.md
📚 Learning: 2025-11-25T00:18:21.282Z
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-25T00:18:21.282Z
Learning: Applies to **/src/routes/**/*.{ts,tsx} : Use file-based routing in src/routes/ directories or code-based routing with route definitions
Applied to files:
examples/react/start-i18n-paraglide/README.md
🪛 LanguageTool
examples/react/i18n-paraglide/README.md
[style] ~190-~190: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing.
Context: ...Start plugin. For this to work you will need to compile paraglide before the build with...
(REP_NEED_TO_VB)
examples/react/start-i18n-paraglide/README.md
[style] ~195-~195: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing.
Context: ...Start plugin. For this to work you will need to compile paraglide before the build with...
(REP_NEED_TO_VB)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Preview
- GitHub Check: Test
🔇 Additional comments (3)
examples/react/start-basic-rsc/README.md (1)
1-43: Standardization looks good overall; one past review comment needs clarification.The README changes align well with the PR's objectives: standardized template structure with "Getting Started," "Build," and "About This Example" sections; pnpm standardization; and the gitpick bootstrap command. The Netlify deployment note is consistent with the PR's deployment enhancements.
However, there is a past review comment stating "Can be removed since its from the TanStack.com README" (attached to null line numbers, referent unclear). Please clarify which content, if any, should be removed or revised based on that comment.
examples/react/start-counter/README.md (1)
1-43: Ensure gitpick command path is correct and consistent with other standardized examples.The README follows the unified template structure with "Getting Started", "Build", and "About This Example" sections. Package manager is standardized to pnpm throughout. The gitpick command (line 12) should be verified for path correctness and consistency with other React examples in this PR.
examples/react/start-i18n-paraglide/README.md (1)
1-214: Verify configuration differences between i18n-paraglide and start-i18n-paraglide examples.This README includes a more comprehensive Paraglide Vite plugin configuration (lines 39–50) than the sibling
i18n-paraglideexample, with additional options likeoutputStructure,cookieName,strategy, andurlPatterns. Ensure that:
- These configuration differences are intentional and documented (e.g., server-side rendering vs. client-side routing requirements).
- The
i18n-paraglideexample isn't missing important configuration that should also be present.- Documentation or inline comments clarify why start-i18n-paraglide requires these additional options.
Consider whether the missing
urlPatternsconfiguration in thei18n-paraglideexample is an oversight or intentionally omitted for client-side routing. If intentional, a brief comment in thei18n-paraglideREADME explaining why the config differs would improve clarity.
|
@enBonnet big thanks for pushing this through! Its one of those things that gets puts off in-favor of more critical items 😅 |
|
Thanks @SeanCassiere I'll take a look at the other examples later |
…ack#6014) Co-authored-by: Sean Cassiere <33615041+SeanCassiere@users.noreply.github.com>
2 participants
Standardize React Example READMEs
🎯 Objective
Standardize the README.md files across all React examples to provide a consistent developer experience, ensure missing documentation is added, and make it easier for users to start new projects using
gitpick.📝 Changes
1. Standardization
gitpickIntegration: Added a "Start a new project based on this example" section to every README with the specificnpx gitpickcommand for that example.pnpm.2. New Documentation
start-barestart-basic-authjsstart-largestart-material-uistart-streaming-data-from-server-functionsstart-supabase-basicstart-basic-cloudflare3. Content Preservation & Enhancement
authenticated-routes-firebasei18n-paraglide,start-i18n-paragliderouter-monorepo-*examples (preserved architecture diagrams and explanations)start-bun(preserved server features and optimization details)start-clerk-basic,start-workos,start-basic-authstart-convex-trellaux,start-supabase-basic✅ Verification
gitpickcommands point to the correct example paths.Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.