Built with Devframe

Real-world devtools and hub UI providers built on devframe, from Vite DevTools to ESLint Config Inspector.

Real-world DevTools

Vite DevTools bundles many devframes into one UI. Mount your own via the vite adapter.
ESLint Config Inspector inspects flat configs.
node-modules-inspector visualizes your node_modules dependency graph.

Built-in Devframes

The built-in devframes are real tools built on Devframe, each in a different UI framework:

Devframe	UI framework	What it does
Data Inspector	Vue	Query live server-side objects with jora.
Devframe Inspector	Vue	Browse RPC, shared state, and the agent-consumable API.
Open Graph Viewer	Vue	Inspect Open Graph / Twitter metadata and card previews.
Accessibility Inspector	Solid	Run axe-core; list WCAG violations.
Git	React (Next.js)	Repository dashboard: status, graph, branches, diffs.
Terminals	Svelte	Stream output and run interactive PTY shells.
Code Server	Vue	Run VS Code in the browser.
Assets	Vue	Browse, preview, upload, rename, and delete files.

Playable Examples

Runnable examples in the repository, each a single node-side definition behind a different UI. Run one with:

pnpm install
pnpm --filter <example-name> dev

Example	UI	Shows
files-inspector	Preact	Lists cwd files over RPC.
json-render	Vue	Server-authored view via `@devframes/json-render-ui`; live state + action bridge.
streaming-chat	Preact	Streams tokens; history in shared state.
next-runtime-snapshot	React (Next.js)	App Router SPA surfacing the Node runtime.
custom-hub-vite	Vanilla TS (Vite)	~120-line Vite host wiring `@devframes/hub`; hand-built hub UI provider.
custom-hub-next	React (Next.js)	Same protocol, Next.js route.

The minimal family mounts initHub({ ui: createUi() }) with @devframes/hub-ui:

Example	Host framework	Shows
hub-vite	Vite	Dev middleware.
hub-next	Next.js	App Router route.
hub-nitro	Nitro	Catch-all route.
hub-hono	Hono	Node and Bun.
hub-fastify	Fastify	`nodeMiddleware`.
hub-sveltekit	SvelteKit	Catch-all endpoint.
hub-deno	Deno	`Deno.serve` + upgrade socket.
hub-rsbuild	Rsbuild	Dev middleware.

Build Your Own Hub UI

A hub UI provider implements two contracts, the node-side ui slot and the browser-side context. @devframes/hub-ui is the reference.

Adapters

The lowest-level path is the standard handler, initDevframe(def, { base }): a Web Standard (request: Request) => Promise<Response> for any catch-all route. Every path below builds on it.