docs: use the dynamic README header endpoint

[AlemTuzlak]

Adopts the dynamic README header endpoint added in TanStack/tanstack.com#1076,
which is merged and live.

Every README banner in this repo now points a <picture> at
https://tanstack.com/api/readme/ instead of a committed PNG. The endpoint
renders 1800x450 in light and dark, so a branding change lands in every README
at once and dark-mode readers get a dark banner.

What changed

• 8 README(s) updated.
• Light and dark served through <picture>, per GitHub's guidance. The trailing <img> stays the light variant, as the fallback for renderers that ignore <picture> (npm, most editors).
• Per-package READMEs pass ?framework= so each banner shows its own package name instead of the generic library name.
• Deletes the now-unused media/header_router.png, media/header_start.png.

The root README shows the Router and Start banners side by side in a two-column table, so those two omit width and stay fluid. packages/vue-router uses ?title=TanStack Vue Router because the endpoint does not list vue as a Router framework yet.

Verification

Every generated URL in this diff was requested against the live endpoint and
returned 200 image/png at 1800x450. git grep confirms no README still
references the old media/header_*.png path.

Heads up: deleting the committed PNG means npm pages for already-published
versions that embed the raw.githubusercontent.com/.../main/media/header_*.png
link will show a broken image, since that link is branch-pinned. New releases
pick up the endpoint URL.

Summary by CodeRabbit

• Documentation
  • Updated project documentation header images across supported packages.
  • Images now adapt to light and dark color schemes for improved readability.
  • Added responsive sizing and accessible alternative text where applicable.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: e03e36b3-f111-4da2-8081-9f31e6b9c3a1

📥 Commits

Reviewing files that changed from the base of the PR and between fb8511d and d0f0fad.

📒 Files selected for processing (4)

• packages/react-router-devtools/README.md
• packages/solid-router-devtools/README.md
• packages/vue-router-devtools/README.md
• packages/vue-router-ssr-query/README.md

---

📝 Walkthrough

Walkthrough

README header images now use responsive <picture> elements with dark- and light-theme sources. Fallback images retain accessible alt text, with fixed width metadata where specified.

Changes

Theme-aware README headers

Layer / File(s)	Summary
Root README header updates README.md	The Router and Start header images now use theme-specific remote sources and accessible fallback images.
Package README header updates packages/*/README.md	Package README headers now use responsive dark- and light-theme sources with accessible fallback metadata. Devtools READMEs now include centered theme-aware banners.

Estimated code review effort: 1 (Trivial) | ~5 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the main change: updating README headers to use the dynamic endpoint.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch readme-header-endpoint

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[nx-cloud]

View your CI Pipeline Execution ↗ for commit d0f0fad

Command	Status	Duration	Result
nx affected --targets=test:eslint,test:unit,tes...	✅ Succeeded	9m 3s	View ↗
nx run-many --target=build --exclude=examples/*...	✅ Succeeded	31s	View ↗

---

☁️ Nx Cloud last updated this comment at 2026-08-03 10:02:48 UTC

[github-actions]

🚀 Changeset Version Preview

No changeset entries found. Merging this PR will not cause a version bump for any packages.

[pkg-pr-new]

More templates

• tanstack-router-solid-example-authenticated-routes
• tanstack-router-solid-example-authenticated-routes-firebase
• tanstack-router-solid-example-basic
• tanstack-router-solid-example-basic-default-search-params
• tanstack-router-solid-example-basic-devtools-panel
• tanstack-router-solid-example-basic-file-based
• tanstack-router-solid-example-basic-non-nested-devtools
• tanstack-router-solid-example-basic-solid-query
• tanstack-router-solid-example-basic-solid-query-file-based
• tanstack-router-solid-example-basic-ssr-file-based
• tanstack-router-solid-example-basic-ssr-streaming-file-based
• tanstack-router-solid-example-basic-virtual-file-based
• tanstack-router-solid-example-basic-virtual-inside-file-based
• tanstack-router-solid-example-deferred-data
• tanstack-router-solid-i18n-paraglide
• tanstack-router-solid-example-kitchen-sink
• tanstack-router-solid-example-kitchen-sink-file-based
• tanstack-router-solid-example-kitchen-sink-solid-query
• tanstack-router-solid-example-kitchen-sink-solid-query-file-based
• tanstack-router-solid-example-large-file-based
• tanstack-router-solid-example-location-masking
• tanstack-router-solid-example-navigation-blocking
• tanstack-router-solid-example-quickstart
• tanstack-router-solid-example-quickstart-esbuild-file-based
• tanstack-router-solid-example-quickstart-file-based
• tanstack-router-solid-example-quickstart-rspack-file-based
• tanstack-router-solid-example-quickstart-webpack-file-based
• @tanstack/router-solid-mono-simple
• router-solid-mono-simple-lazy
• router-solid-monorepo-solid-query
• tanstack-router-solid-example-scroll-restoration
• tanstack-solid-router-search-validator-adapters
• tanstack-solid-start-example-basic
• tanstack-solid-start-example-basic-auth
• tanstack-solid-start-example-basic-authjs
• tanstack-solid-start-example-basic-cloudflare
• tanstack-solid-start-example-basic-netlify
• tanstack-solid-start-example-basic-nitro
• tanstack-start-example-basic-solid-query
• tanstack-solid-start-example-basic-static
• tanstack-solid-start-bun-hosting
• tanstack-solid-start-example-convex-better-auth
• tanstack-solid-start-example-counter
• tanstack-solid-start-i18n-paraglide
• tanstack-solid-start-example-large
• tanstack-solid-start-streaming-data-from-server-functions
• tanstack-solid-start-example-supabase-basic
• tanstack-solid-start-tailwind-v4
• tanstack-router-solid-example-view-transitions
• tanstack-router-solid-example-with-framer-motion
• tanstack-router-solid-example-with-trpc
• tanstack-router-vue-example-basic-jsx
• tanstack-router-vue-example-basic-file-based-jsx
• tanstack-router-vue-example-basic-file-based-sfc
• tanstack-router-react-example-authenticated-routes
• tanstack-router-react-example-authenticated-routes-firebase
• tanstack-router-react-example-basic
• tanstack-router-react-example-basic-default-search-params
• tanstack-router-react-example-basic-devtools-panel
• tanstack-router-react-example-basic-file-based
• tanstack-router-react-example-basic-non-nested-devtools
• tanstack-router-react-example-react-query
• tanstack-router-react-example-basic-react-query-file-based
• tanstack-router-react-example-basic-ssr-file-based
• tanstack-router-react-example-basic-ssr-streaming-file-based
• tanstack-router-react-example-basic-virtual-file-based
• tanstack-router-react-example-basic-virtual-inside-file-based
• tanstack-router-react-example-deferred-data
• tanstack-router-i18n-paraglide
• tanstack-router-react-example-kitchen-sink
• tanstack-router-react-example-kitchen-sink-file-based
• tanstack-router-react-example-kitchen-sink-react-query
• tanstack-router-react-example-kitchen-sink-react-query-file-based
• tanstack-router-react-example-large-file-based
• tanstack-router-react-example-location-masking
• tanstack-router-react-example-navigation-blocking
• tanstack-router-react-example-quickstart
• tanstack-router-react-example-quickstart-esbuild-file-based
• tanstack-router-react-example-quickstart-file-based
• tanstack-router-react-example-quickstart-rspack-file-based
• tanstack-router-react-example-quickstart-webpack-file-based
• router-monorepo-react-query
• router-mono-simple
• router-mono-simple-lazy
• tanstack-router-react-example-scroll-restoration
• tanstack-search-validator-adapters
• tanstack-start-example-bare
• tanstack-start-example-basic
• tanstack-start-example-basic-auth
• tanstack-router-react-example-basic-authjs
• tanstack-start-example-basic-cloudflare
• tanstack-start-example-basic-react-query
• tanstack-start-example-basic-rsbuild
• tanstack-start-example-basic-static
• tanstack-start-bun-hosting
• tanstack-start-example-clerk-basic
• tanstack-start-example-convex-trellaux
• tanstack-start-example-counter
• tanstack-start-i18n-paraglide
• tanstack-start-example-large
• tanstack-start-example-material-ui
• tanstack-start-example-rscs
• tanstack-start-streaming-data-from-server-functions
• tanstack-start-example-supabase-basic
• tanstack-start-tailwind-v4
• tanstack-start-example-trellaux
• tanstack-start-example-workos
• tanstack-router-react-example-view-transitions
• tanstack-router-react-example-with-framer-motion
• tanstack-router-react-example-with-trpc
• tanstack-router-react-example-with-trpc-react-query

@tanstack/arktype-adapter

npm i https://pkg.pr.new/@tanstack/arktype-adapter@7940

@tanstack/eslint-plugin-router

npm i https://pkg.pr.new/@tanstack/eslint-plugin-router@7940

@tanstack/eslint-plugin-start

npm i https://pkg.pr.new/@tanstack/eslint-plugin-start@7940

@tanstack/history

npm i https://pkg.pr.new/@tanstack/history@7940

@tanstack/nitro-v2-vite-plugin

npm i https://pkg.pr.new/@tanstack/nitro-v2-vite-plugin@7940

@tanstack/react-router

npm i https://pkg.pr.new/@tanstack/react-router@7940

@tanstack/react-router-devtools

npm i https://pkg.pr.new/@tanstack/react-router-devtools@7940

@tanstack/react-router-ssr-query

npm i https://pkg.pr.new/@tanstack/react-router-ssr-query@7940

@tanstack/react-start

npm i https://pkg.pr.new/@tanstack/react-start@7940

@tanstack/react-start-client

npm i https://pkg.pr.new/@tanstack/react-start-client@7940

@tanstack/react-start-rsc

npm i https://pkg.pr.new/@tanstack/react-start-rsc@7940

@tanstack/react-start-server

npm i https://pkg.pr.new/@tanstack/react-start-server@7940

@tanstack/router-cli

npm i https://pkg.pr.new/@tanstack/router-cli@7940

@tanstack/router-core

npm i https://pkg.pr.new/@tanstack/router-core@7940

@tanstack/router-devtools

npm i https://pkg.pr.new/@tanstack/router-devtools@7940

@tanstack/router-devtools-core

npm i https://pkg.pr.new/@tanstack/router-devtools-core@7940

@tanstack/router-generator

npm i https://pkg.pr.new/@tanstack/router-generator@7940

@tanstack/router-plugin

npm i https://pkg.pr.new/@tanstack/router-plugin@7940

@tanstack/router-ssr-query-core

npm i https://pkg.pr.new/@tanstack/router-ssr-query-core@7940

@tanstack/router-utils

npm i https://pkg.pr.new/@tanstack/router-utils@7940

@tanstack/router-vite-plugin

npm i https://pkg.pr.new/@tanstack/router-vite-plugin@7940

@tanstack/solid-router

npm i https://pkg.pr.new/@tanstack/solid-router@7940

@tanstack/solid-router-devtools

npm i https://pkg.pr.new/@tanstack/solid-router-devtools@7940

@tanstack/solid-router-ssr-query

npm i https://pkg.pr.new/@tanstack/solid-router-ssr-query@7940

@tanstack/solid-start

npm i https://pkg.pr.new/@tanstack/solid-start@7940

@tanstack/solid-start-client

npm i https://pkg.pr.new/@tanstack/solid-start-client@7940

@tanstack/solid-start-server

npm i https://pkg.pr.new/@tanstack/solid-start-server@7940

@tanstack/start-client-core

npm i https://pkg.pr.new/@tanstack/start-client-core@7940

@tanstack/start-fn-stubs

npm i https://pkg.pr.new/@tanstack/start-fn-stubs@7940

@tanstack/start-plugin-core

npm i https://pkg.pr.new/@tanstack/start-plugin-core@7940

@tanstack/start-server-core

npm i https://pkg.pr.new/@tanstack/start-server-core@7940

@tanstack/start-static-server-functions

npm i https://pkg.pr.new/@tanstack/start-static-server-functions@7940

@tanstack/start-storage-context

npm i https://pkg.pr.new/@tanstack/start-storage-context@7940

@tanstack/valibot-adapter

npm i https://pkg.pr.new/@tanstack/valibot-adapter@7940

@tanstack/virtual-file-routes

npm i https://pkg.pr.new/@tanstack/virtual-file-routes@7940

@tanstack/vue-router

npm i https://pkg.pr.new/@tanstack/vue-router@7940

@tanstack/vue-router-devtools

npm i https://pkg.pr.new/@tanstack/vue-router-devtools@7940

@tanstack/vue-router-ssr-query

npm i https://pkg.pr.new/@tanstack/vue-router-ssr-query@7940

@tanstack/vue-start

npm i https://pkg.pr.new/@tanstack/vue-start@7940

@tanstack/vue-start-client

npm i https://pkg.pr.new/@tanstack/vue-start-client@7940

@tanstack/vue-start-server

npm i https://pkg.pr.new/@tanstack/vue-start-server@7940

@tanstack/zod-adapter

npm i https://pkg.pr.new/@tanstack/zod-adapter@7940

commit: d0f0fad

[github-actions]

Bundle Size Benchmarks

This pull request does not affect bundle size in any measured scenario.

[nx-cloud]

Important

At least one additional CI pipeline execution has run since the conclusion below was written and it may no longer be applicable.

Nx Cloud has identified a possible root cause for your failed CI:

We classified this failure as an environment state issue rather than a code change. The PR only modifies README files, and the e2e test failed solely because port 33611 was already occupied by another process in the CI environment — entirely unrelated to the documentation updates. Re-running the pipeline once the port is freed should resolve this.

No code changes were suggested for this issue.

Trigger a rerun:

View detailed reasoning on Nx Cloud ↗

_{🎓 Learn more about Self-Healing CI on nx.dev}

[codspeed-hq]

Merging this PR will regress 3 benchmarks

⚠️ Different runtime environments detected

Some benchmarks with significant performance changes were compared across different runtime environments,
which may affect the accuracy of the results.

Open the report in CodSpeed to investigate

⚡ 6 improved benchmarks
❌ 3 regressed benchmarks
✅ 171 untouched benchmarks

Warning

Please fix the performance issues or acknowledge them on CodSpeed.

Performance Changes

	Mode	Benchmark	BASE	HEAD	Efficiency
❌	Memory	mem server peak-large-page (react)	943.8 KB	2,220.7 KB	-57.5%
❌	Memory	mem server serialization-payload (react)	3.4 MB	5.3 MB	-35.56%
❌	Simulation	ssr control-flow unmatched 404 (react)	58.4 ms	60.3 ms	-3.15%
⚡	Memory	mem server error-paths redirect (vue)	767.3 KB	295.9 KB	×2.6
⚡	Memory	mem server error-paths not-found (solid)	790.6 KB	422.6 KB	+87.09%
⚡	Memory	mem server peak-large-page (solid)	826.3 KB	773.4 KB	+6.84%
⚡	Simulation	client-loaders navigation loop (react)	55.5 ms	52.7 ms	+5.31%
⚡	Memory	mem server error-paths not-found (react)	280.7 KB	266.8 KB	+5.2%
⚡	Memory	mem server server-fn-churn (react)	281.8 KB	271.4 KB	+3.81%

Tip

Investigate this regression by commenting @codspeedbot fix this regression on this PR, or directly use the CodSpeed MCP with your agent.

---

_{Comparing readme-header-endpoint (d0f0fad) with main (03699c4)¹}

Footnotes

1. No successful run was found on main (2cb221c) during the generation of this report, so 03699c4 was used instead as the comparison base. There might be some changes unrelated to this pull request in this report. ↩