Documentation

Render a project with DevJar

The live examples 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" />  )}

Requires React 19 or newer. Install with npm install devjar. 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 versionsicon.svg              # shared site iconopengraph-image.jpg    # shared social imagepages/├── 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.

Tailwind CSS

Add tailwindcss or @tailwindcss/browser to enable Tailwind. Use complete class names; builds emit CSS with no runtime compiler.

Tailwind support is limited to utility classes. Tailwind-specific directives in imported CSS, such as @theme, @apply, and @utility, are not supported. Use CSS variables, ordinary classes, and native media queries for custom styles. Import each stylesheet from JS/TS; nested CSS @import rules are not supported in development.

Three commands

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

npx devjar devnpx devjar buildnpx devjar start