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

• 1 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).

• Deletes the now-unused media/header_devtools.png.

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 the README header image with responsive light and dark theme support.
  • Improved accessibility and display consistency with descriptive text and fixed sizing.

[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: 739b699b-4828-4ce8-bf75-01729ee58cf9

📥 Commits

Reviewing files that changed from the base of the PR and between 0600635 and a310198.

⛔ Files ignored due to path filters (1)

• media/header_devtools.png is excluded by !**/*.png

📒 Files selected for processing (1)

• README.md

---

📝 Walkthrough

Walkthrough

The README header now uses a responsive <picture> element with dark- and light-theme image sources, accessible alternative text, and a fixed width of 900 pixels.

Changes

README visuals

Layer / File(s)	Summary
Responsive header image README.md	The static header image now uses theme-specific sources in a responsive <picture> element. The image includes accessible text and a fixed width of 900 pixels.

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

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly describes the main change: replacing the README header with a dynamic endpoint.
Description check	✅ Passed	The description clearly documents the changes, verification, deletion, and release impact, although it does not use the template headings or checklist.
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 a310198

Command	Status	Duration	Result
nx run-many --target=test:e2e --parallel=1 --pr...	✅ Succeeded	1m 2s	View ↗
nx run-many --targets=build --exclude=examples/...	✅ Succeeded	2s	View ↗
nx affected --targets=test:eslint,test:sherif,t...	✅ Succeeded	6s	View ↗

---

☁️ Nx Cloud last updated this comment at 2026-08-03 09:23:39 UTC

[pkg-pr-new]

More templates

• @tanstack/devtools-example-angular-a11y-devtools
• @tanstack/devtools-example-angular-basic
• @tanstack/devtools-example-angular-panel
• ssr
• @tanstack/devtools-example-angular-with-devtools
• @tanstack/react-devtools-a11y-example
• @tanstack/devtools-example-react-basic
• start-repro
• @tanstack/devtools-custom-devtools
• tanstack-start-example-counter
• @tanstack/devtools-example-react-https
• start
• start-cloudflare
• start-nitro
• @tanstack/devtools-example-react-time-travel
• @tanstack/solid-devtools-a11y-example
• @tanstack/devtools-example-solid-basic
• @tanstack/devtools-example-devtools-ui
• @tanstack/devtools-example-solid-start
• @tanstack/query-example-vue-basic
• @tanstack/devtools-example-preact-basic
• @tanstack/devtools-custom-devtools-preact

@tanstack/angular-devtools

npm i https://pkg.pr.new/@tanstack/angular-devtools@490

@tanstack/devtools

npm i https://pkg.pr.new/@tanstack/devtools@490

@tanstack/devtools-a11y

npm i https://pkg.pr.new/@tanstack/devtools-a11y@490

@tanstack/devtools-bundler-core

npm i https://pkg.pr.new/@tanstack/devtools-bundler-core@490

@tanstack/devtools-client

npm i https://pkg.pr.new/@tanstack/devtools-client@490

@tanstack/devtools-rspack

npm i https://pkg.pr.new/@tanstack/devtools-rspack@490

@tanstack/devtools-ui

npm i https://pkg.pr.new/@tanstack/devtools-ui@490

@tanstack/devtools-utils

npm i https://pkg.pr.new/@tanstack/devtools-utils@490

@tanstack/devtools-vite

npm i https://pkg.pr.new/@tanstack/devtools-vite@490

@tanstack/devtools-event-bus

npm i https://pkg.pr.new/@tanstack/devtools-event-bus@490

@tanstack/devtools-event-client

npm i https://pkg.pr.new/@tanstack/devtools-event-client@490

@tanstack/preact-devtools

npm i https://pkg.pr.new/@tanstack/preact-devtools@490

@tanstack/react-devtools

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

@tanstack/solid-devtools

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

@tanstack/svelte-devtools

npm i https://pkg.pr.new/@tanstack/svelte-devtools@490

@tanstack/vue-devtools

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

commit: a310198