Demo Mode

Demo Mode turns VoxelSite Studio into a read-only showcase. Everything is visible — the AI chat history, the visual editor, the code editor, settings, assets, forms — but nothing can be changed. No files are written, no settings are saved, no AI prompts are sent.

This is useful when you want someone to explore the Studio without any risk of them accidentally (or intentionally) modifying the site.

Use cases

Showing a client their site backend. You've built a site for a client using VoxelSite. Before handing over full access, you want them to see the Studio, understand what's there, and review the pages — without accidentally triggering an AI edit or publishing a half-finished change.

Live demo on your website. You embed a link to a VoxelSite installation on your portfolio or agency site so prospects can explore the tool. Demo Mode ensures the installation stays intact no matter how many people click through it.

Team review. You want a colleague or stakeholder to review the generated site and its file structure before you continue iterating. They can browse freely without disrupting your work.

Enabling Demo Mode

Create an empty file named .demo in your VoxelSite project root (the same directory as index.php and _studio/):

touch /path/to/your-site/.demo

That's it. Demo Mode is active immediately — no restart, no configuration change.

To disable it, delete the file:

rm /path/to/your-site/.demo

The .demo file is automatically excluded from Git via .gitignore.

What changes in Demo Mode

Login page

The login page transforms into a welcoming demo entry point:

• Title changes to "Welcome to the Demo" with an inviting subtitle
• A warm "Demo Mode" banner explains the read-only nature
• Email and password fields are pre-filled with the demo credentials
• The submit button reads "Enter Demo" instead of "Open Studio"
• The "Forgot password?" link is hidden (not relevant in a demo)

Inside the Studio

• A persistent "DEMO" badge appears in the top bar, so the user always knows they're in read-only mode
• Every write action is blocked with a brief, friendly toast message explaining that the action isn't available in the demo

What's blocked

All state-changing actions are prevented:

What's allowed

All read operations work normally:

• Browsing pages in the preview
• Navigating through the visual editor (without saving)
• Opening files in the code editor (read-only mode is set automatically)
• Viewing AI chat history and past conversations
• Browsing uploaded assets
• Viewing form submissions
• Exploring snapshots and revision history
• Viewing settings (API keys are encrypted — never exposed)
• Switching between light and dark themes
• Toggling the mobile/desktop preview

Backend enforcement

Demo Mode is enforced at the API level, not just the UI. Even if someone bypasses the frontend guards (e.g., by sending API requests directly), the server rejects all POST, PUT, and DELETE requests with a 403 response and a demo_mode error code.

The only exceptions are POST /auth/login and POST /auth/logout — users need to be able to log in and out of the demo.

This means Demo Mode is safe to expose publicly. The backend guarantees that no data can be modified, regardless of how the request is made.

Setting up demo credentials

Demo Mode pre-fills the login form with credentials. To set these up:

1. Create a user account in VoxelSite Studio (the normal installation process does this)
2. Use whatever email and password you want for the demo
3. Enable Demo Mode by creating the .demo file

The pre-filled credentials on the login page are the actual credentials for the account. If you're exposing the demo publicly, consider using a dedicated demo account.

Tips

• Generate a site first. Before enabling Demo Mode, create a complete website so visitors have something to explore. An empty Studio with no pages isn't much of a demo.
• Build some chat history. The AI chat is one of VoxelSite's most interesting features. Generate a site, ask a few refinement questions, undo something — so the demo has a realistic conversation history.
• Upload some assets. Add a few images to the Assets tab so visitors can see the asset manager in action.
• Create a snapshot. Having a snapshot or two in the timeline shows the versioning system.