Browser
The browser pane shows a live preview of your frontend app running in real time.
Live Preview
Frontend apps (React, Vue, Svelte, Angular, HTML, JavaScript, TypeScript) run inside a sandboxed iframe. The preview updates automatically as you edit code.
Hot Reload
By default cdbx rebundles your code after 1 second of inactivity in the editor. The iframe resets and runs the new bundle within ~50ms. You can adjust the inactivity delay in the editor preferences panel.
Error Handling
Build Errors
If bundling fails (a syntax error, missing import, etc.) the preview pane shows a red Bundling Error overlay with the error message and a Retry button. The error is also shown in the AI Chat's Fix error button — click it to send the error directly to the AI.
Runtime Errors
If your code throws a JavaScript error at runtime (unhandled exception or unhandled promise rejection), cdbx catches it and:
- Shows a red Runtime Error overlay in the preview pane with the error message
- Surfaces a Fix error button in the AI Chat input — click it to send the error to the AI for automatic fixing
Runtime errors are relayed from the iframe to the parent page via postMessage and recorded in the log store, which is what triggers the Fix error button.
Infinite Loop Detection
For frontend templates that run user code via eval (React, Vue, Svelte, Preact, JavaScript, TypeScript), cdbx starts a 5-second watchdog timer when the code bundle is sent to the iframe. If the iframe doesn't signal that execution finished within 5 seconds, an Infinite Loop Detected overlay appears with a Reload Preview button. This stops a runaway loop from freezing the browser.
Console Output
You can control where console.log output goes using the Console Output setting in editor preferences:
- DevTools (default) — console output is captured by the embedded DevTools panel (Chii/Chobitsu)
- Browser — console output is routed to the native browser DevTools (F12), useful when you want full browser inspector access
DevTools Panel
cdbx includes an embedded Chrome DevTools panel powered by Chii (opens in a new tab) and Chobitsu (opens in a new tab). Open it via the DevTools tab in the right panel. It provides:
- Console with full log/warn/error output
- Elements inspector
- Source inspection
Sandbox Security
The preview iframe runs with sandbox="allow-scripts allow-forms allow-modals allow-popups". The allow-same-origin attribute is intentionally excluded, which means:
- User code cannot access the parent page's DOM, localStorage, or cookies
- Cross-origin isolation prevents malicious code from affecting the host application