Live Preview

What you see is exactly what ships

Every edit, whether made by the AI agent or by you, renders instantly in an isolated sandbox. No waiting for builds. No refreshing tabs. Just immediate, accurate feedback, every time.

Get Started Free
docsio.co/project/editor
AI Agent
Connected
Make the primary color blue and add a getting started section
Read custom.css
Updated styles
Created getting-started.md
Updated navigation
Done. Primary color is now blue across light and dark mode. Added a Getting Started page with installation steps. The preview is updated.
Ask the agent to make changes...
Live Preview
Live
AcmeDocs
Getting Started

Key Capabilities

How live preview works

Isolated sandbox environment

Each project runs in its own isolated sandbox. Changes made by the AI agent or your manual edits are reflected immediately without affecting anything else.

Instant hot-reload on every save

The preview pane updates the moment a file changes. There is no build step, no refresh needed. The rendered result is always in sync with the latest version.

Navigate between pages in preview

The preview is a fully interactive documentation site. Click links, open the sidebar, and navigate to any page exactly as your readers will experience it.

Mobile-responsive preview toggle

Switch between desktop and mobile viewports with one click. Verify that your layout, typography, and navigation all look right on smaller screens before you publish.

FAQ

Live preview: common questions

How does live preview work in Docsio?

Every Docsio project runs in its own isolated Vercel Sandbox with a real Docusaurus dev server. The moment a file changes, whether the AI agent writes it or you edit it manually, the preview pane hot-reloads to show the new result. There is no build step you wait on and no refresh button to press.

Is the live preview the same as my published site?

Yes, the preview renders with the exact theme, components, and configuration that your published site will use. What you see in the preview pane is what your readers will see after you press Publish, so there are no surprises between editing and shipping.

Can I navigate between pages inside the live preview?

The preview is a fully interactive documentation site, not a screenshot. You can click sidebar links, open category pages, scroll long articles, and use search if it is enabled. This lets you check navigation flow and link structure before any visitor sees the site.

Does the preview support mobile and tablet layouts?

There is a viewport toggle that switches the preview between desktop and mobile widths in one click. You can verify that your typography, sidebar, hero section, and code blocks look right on smaller screens without needing to open developer tools or test on a separate device.

How fast does the preview update after an edit?

Updates are typically reflected within a second of the file being saved. Docusaurus hot-reloads modified pages and CSS without a full page refresh, so the scroll position and any open sidebar sections are preserved. The preview status indicator in the corner shows Live when the sandbox is healthy.

Why does the preview sometimes show a loading state during onboarding?

During the initial AI generation, the agent is writing many files at once and Docusaurus is recompiling rapidly. Showing a loading animation prevents you from seeing half-finished pages flash by. Once onboarding completes, the sandbox restarts and the live preview becomes available for the rest of your editing session.

No more guessing how it looks

See every change instantly in an isolated preview before it goes live. What you see is exactly what your readers get.

Get Started Free

Free foreverNo credit cardInstant setup