devjar

Render a project with DevJar

All four gallery demos use the DevJar component. Pass project files as strings, connect your editor to the files prop, and watch changes run inside an iframe. Use useDevJar to control your own iframe.

import { DevJar } from 'devjar'const files = {  'pages/index.tsx': `export default function Page() {    return <h1>Hello from devjar</h1>  }`,}function Preview() {  return (    <DevJar files={files} title="Live preview" />  )}

Embedded previews run in the browser. No special hosting headers required.

For a live code editor, pair Devjar with @sugar-high/react. Its Editor component provides syntax highlighting; update files from its onChange callback to refresh the preview. The gallery demos use this combination.

Personal website example: live playground to static export →

Advanced API: control your own iframe

Use DevJar for managed previews. The advanced useDevJar hook lets you own the iframe and decide when a project runs.

import { useDevJar } from 'devjar'function Preview({ files }) {  const { ref, load, error } = useDevJar({ tailwind: false })  return (    <>      <button onClick={() => void load(files)}>Run</button>      {error != null && <pre>{String(error)}</pre>}      <iframe ref={ref} title="Live preview" />    </>  )}

Routes from files

Files inside pages/ become routes, including nested pages and a custom 404.

An optional package.json pins dependency versions. Packages load from the CDN, so you don’t need to install them.

package.json          # optional: dependency versionspages/├── index.tsx          → /├── about.tsx          → /about└── docs/    └── start.tsx      → /docs/start

Self-contained production builds

Routes are prerendered to HTML. Dependencies are vendored, and imported assets and Tailwind CSS are emitted with content hashes.

Three commands

Develop locally, create the static output, then preview exactly what you will deploy.

npx devjar devnpx devjar buildnpx devjar start