Built with Devframe

Real-world devtools and hosts 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.

Builtin Plugins

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

Plugin	UI framework	What it does
Data Inspector	Vue	Query live server-side objects with jora.
Devframe Inspector	Vue	Browse RPC, shared state, and agent surface.
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 apps 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.
hub-vite	Vanilla TS (Vite)	~120-line Vite host wiring `@devframes/hub`; hand-built viewer.
hub-next	React (Next.js)	Same protocol, Next.js route.

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

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

Build Your Own Hub UI

A hub viewer implements two contracts — the node-side ui slot and the client-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.