Devtools Panel
Every ramonyx dev session exposes a dev-only panel with routes, request/loader/render timings,
hydration status, and bundle sizes. It is never enabled in production builds.
ramonyx dev
# dev: http://localhost:5173 (Vite + HMR) → SSR http://127.0.0.1:3000
# devtools: http://localhost:5173/__ramonyx/devtoolsWhat it shows
| Section | Data source | Notes |
|---|---|---|
| Routes | Page manifest | Updated when route files change (same watcher as client entry regeneration) |
| Bundles & assets | dist/client/ramonyx.assets.json + file sizes |
Empty until the app has been built — the panel does not build for you |
| Recent requests | Collector middleware + AppHooks |
Last 50 requests; method, path, status, total, loader, render, cache, hydration |
Hydration is detected from the response HTML: payload when
<script id="ramonyx-payload"> is present, none for HTML without it (e.g. error pages).
How it works
- The dev server creates a collector backed by the app's
AppHooks(onLoaderEnd,onRenderEnd) and a middleware placed outermost in the chain. GET /__ramonyx/devtoolsserves the panel (a self-contained HTML page polling every 2s);GET /__ramonyx/datareturns{ routes, assets, requests }as JSON.- Both endpoints are served by the dev server, not proxied to the SSR app, and are absent from production.
Limitations (honest)
- Loader/render events do not carry a request id; the panel correlates them to the last open request with the same path. Good enough for low-concurrency development.
- Page routes only (API routes are not listed separately).
- Requests short-circuited by plugin middleware are still recorded (the collector is outermost), but
Vite asset requests and
/__ramonyx/*calls are not. - Not a production observability tool — use Observability for that.