Skip to main content

Live Preview

Every Docsio project runs a real Docusaurus development server in a cloud sandbox. When the AI agent edits a file, the change appears in the preview immediately -- no manual refresh required.

How It Works​

When you open a project in the editor, Docsio provisions a Vercel Sandbox -- a lightweight cloud environment that runs your documentation site. The process:

  1. Boot -- a sandbox is created from a pre-built snapshot containing the Docusaurus template and all dependencies
  2. Hydrate -- your project's configuration, branding, documents, and custom files are written into the sandbox
  3. Start -- the Docusaurus development server starts on port 3000
  4. Ready -- the preview URL is loaded into the editor's preview panel

The status bar at the bottom of the editor shows the current sandbox state: Starting..., Ready, Error, or Reconnecting....

What You See​

The preview panel displays a fully functional Docusaurus site with:

  • Complete sidebar navigation reflecting your document structure
  • Working links between pages
  • Your brand colors, logo, and fonts applied
  • Client-side search (CMD+K / Ctrl+K)
  • Light and dark mode toggle
  • Responsive layout

The preview navigates to the page you are currently viewing in the editor. When you switch pages in the document list, the preview follows.

Instant Updates​

When the AI agent writes a file, the Docusaurus development server detects the change through its built-in hot module replacement. In practice, this means:

  • Content changes (editing a Markdown page) -- reflected within 1-2 seconds
  • CSS changes (updating custom.css) -- reflected almost instantly
  • Configuration changes (editing docusaurus.config.ts) -- the dev server restarts, which takes a few seconds

You do not need to manually refresh the preview iframe. Changes propagate automatically.

Sandbox Lifecycle​

The sandbox has a 30-minute timeout. If the sandbox becomes inactive (for example, you close the browser tab), it will eventually shut down. When you return to the editor:

  1. Docsio checks if your previous sandbox is still running
  2. If it is, the existing sandbox is reused immediately
  3. If it has expired, a new sandbox is booted and your project is re-hydrated

The sandbox ID is persisted in the database, so it survives serverless cold starts on the Docsio backend. You do not lose any work -- all edits made by the AI agent are saved to the database as they happen.

Reconnecting state

If the preview panel shows "Reconnecting...", the sandbox is being recovered. This typically takes 10-20 seconds as a new sandbox boots and your files are restored.

Preview Controls​

The preview panel toolbar includes:

  • Refresh -- reloads the preview iframe without restarting the sandbox
  • Open in new tab -- opens the preview URL in a separate browser tab for full-screen viewing