open-frame dev
Run the dev server with hot reload, inspector, and assets panel.
open-frame dev
# or, via the generated script
npm run devBoots a Vite-powered dev server on http://localhost:5173 (or the next free
port). Hot module reload is wired up for both the runtime and your frame
files — saving an index.tsx updates the canvas without losing frame state.
What you get
- Frame browser — list of every deck under
frames/. - Canvas — the active page, scaled to fit the viewport.
- Inspector — click any element to edit it visually, drop a
@frame-comment, or both. - Assets panel — drag, rename, replace, plus svgl logo search.
- Present mode — fullscreen playback with presenter view.
Flags
| Flag | Default | Description |
|---|---|---|
-p, --port <port> | from config | Override the listening port. |
--host [host] | localhost only | Expose the dev server on the network. Optional host pin. |
--open | off | Open the browser on start. |
--no-skills-check | off | Skip the built-in skills drift check. |
The skills check also obeys the OPEN_FRAME_SKIP_SKILLS_CHECK=1
environment variable — useful in CI or container builds where stdin
isn't a TTY.
Configuration
Override the port (and a few other knobs) in open-frame.config.ts:
import type { OpenFrameConfig } from '@open-frame/core';
const config: OpenFrameConfig = {
port: 5174,
framesDir: 'frames',
};
export default config;