Getting Started
Dashboard
Search documentation
Search documentation pages and settings
Search documentation pages and settings
Inside /lab/{projectUuid}, the workspace is everything beside chat: preview, code, database, terminal, and visual inspect tools.
The view toolbar switches:
| Tab | Purpose |
|---|---|
| Preview | Live app iframe + address bar + viewport |
| Code | File tree + CodeMirror editor |
| Database | Supabase schema, SQL, rows (when connected) |
Krikkit compiles the project in the browser with an DeepThought browser runtime runtime (virtual filesystem, npm resolution, Vite/Next shims). Users iterate without Docker. The page is served under cross-origin isolation so SharedArrayBuffer / WASM work.
/preview-dev)For heavier apps, Krikkit can start a server Vite process per project and proxy it at:
/preview-dev/{projectUuid}/
| Control | API |
|---|---|
| Start | POST …/dev-preview/start |
| Stop | POST …/dev-preview/stop |
| Status | GET …/dev-preview/status |
| Logs | GET …/dev-preview/logs |
Requirements: Node 20.19+, npm 10+, proc_open enabled.
Config: KRIKKIT_DEV_PREVIEW_*, port range default 15000–15999 (config/krikkit.php → dev_preview).
builder-reload-preview)Cycle desktop → tablet → phone from the responsive toolbar. Non-desktop modes wrap the iframe in device framing.
Signed sandbox tokens: POST …/runtime/sessions, token refresh, and remote fallback when configured (BUILDER_REMOTE_RUNTIME_*, DeepThought keys).
Screenshot upload: POST …/design-edit/screenshot
Prompt chips (examples): /modern, /contrast, /spacious, /simplify, /readable, /shadows, /pop, /hierarchy
Design edits package the selected element path, CSS delta, and screenshot for the agent session.
| Section | Properties |
|---|---|
| Typography | font family, size, weight, style, line height, letter spacing, align, transform, decoration |
| Color | text color |
| Background | backgroundColor |
| Layout | display (block/flex/grid/…), margin, padding (per side) |
| Border | color, style, width |
| Shadow | presets XS→2XL or custom X/Y/blur/spread/color/inset → |
Pending styles preview live; Apply sends them into the AI edit pipeline.
| Feature | Detail |
|---|---|
| Tree | Hierarchical file browser |
| Search | Indexed path/content search |
| Editor | CodeMirror (light/dark themes); Cmd/Ctrl+S save |
| Tabs | Multi-file; unsaved close confirm; AI write conflict reload |
| Images | Inline preview for image assets |
| Bridge | Chat “open file” cards jump to the editor |
API: list/read/write files, file index, snapshot, sync, artifact upload.
Limits: KRIKKIT_WORKSPACE_MAX_FILE_SIZE, KRIKKIT_WORKSPACE_MAX_TOTAL_BYTES, KRIKKIT_ALLOW_MANIFEST_EDITS (blocks package.json / lockfile edits by default).
Bottom Terminal panel:
npm install, npm run build, …) via POST …/workspace/terminal/executeKRIKKIT_WORKSPACE_TERMINAL_TIMEOUT (default 180s)BUILDER_TERMINAL_AUDIENCE=owner|technicalWhen Supabase is connected (see Integrations):
…/buildsPOST …/workspace/thumbnail (KRIKKIT_THUMBNAILS_*)KRIKKIT_ALLOW_MANIFEST_EDITS=trueboxShadow| Appearance | opacity, border radius (including per-corner) |