Run frontend apps,
inside the browser.

Quick start

One script tag. Pass a filesystem object. Call run().

<div id="vre"></div>
<script src="file-system.js"></script>

<script type="module">
import { VRE } from "https://preview.codevre.dev/v1/vre.esm.js";

const vre = VRE.mount({
  ownerId: 'YOUR_OWNER_ID',
  container: "#vre",
  fileSystem: window.fileSystem,
  entryPath: "/index.html",
  devtoolsOpen: true,
});
vre.run();
</script>

getContext(opts?)

Returns a complete serialisable snapshot — status, files, DOM, errors, logs, network.

// Everything your agent needs, one call
const ctx = await vre.getContext();

// Structured result ready for an LLM prompt:
{
  status: { running, ready, entryPath },
  files: [{ path, mimetype, size }],
  errors: [{ level, message, origin }],
  consoleLogs: [{ level, message, timestamp }],
  networkLog: [{ url, method, status, duration }],
  dom: { type, tag, children, ... }
}

eval(code, opts?)

Evaluate JavaScript inside the preview iframe.

const title = await vre.eval('document.title');

const len = await vre.eval(
  'document.querySelectorAll(".item").length'
);

// evalAsync wraps in an async IIFE
const data = await vre.evalAsync(`
  return await fetch('/api/data').then(r => r.json())
`);

writeFiles(files, opts?)

Write multiple files at once with a single reload.

vre.writeFiles([
  { path: '/index.html', content: html },
  { path: '/style.css', content: css },
  { path: '/app.js', content: js },
]);

// Change the entry point on reload
vre.writeFiles(files, { entryPath: '/dashboard.html' });

snapshotFilesystem()

Save and restore filesystem state safely.

const token = vre.snapshotFilesystem();

// Agent writes and runs code
vre.writeFiles([{ path: '/app.js', content: agentCode }]);

// Roll back if needed
vre.restoreSnapshot(token);

runScript(steps)

Run declarative actions with results + errors.

const { results, errors } = await vre.runScript([
  { action: 'waitForElement', args: ['#app'] },
  { action: 'click', args: ['#submit'] },
  { action: 'waitForConsole', args: ['Done'] },
  { action: 'capture', args: [] },
]);

queryDOM(selector)

Query DOM snapshot using CSS selectors.

await vre.getDOM({ fresh: true });

const buttons = vre.queryDOM('button');
const cards = vre.queryDOM('.card');

// Inspect deeper
const el = await vre.getElement(buttons[0].path);
const box = await vre.getBoxModel(buttons[0].path);
// → { margin, border, padding, content }

capture(opts?)

Capture screenshots of the preview.

// Full viewport
const png = await vre.capture();

// Target element
const card = await vre.capture({ selector: '#card' });
const hero = await vre.captureElement('.hero');