Code Editor

VoxelSite Studio includes a built-in code editor powered by Monaco (the same engine behind VS Code). You can view and edit all your website files without leaving the Studio interface.

Opening the Editor

Click Editor in the top navigation bar. The editor opens with a file explorer on the left and a code editing area on the right.

File Explorer

The sidebar shows all editable files organized into three sections:

Site Files

• Pages — top-level .php files (index.php, about.php, contact.php, etc.)
• Partials — shared includes under _partials/ (header.php, nav.php, footer.php, schema.php)
• Styles — CSS files under assets/css/ (style.css, tailwind.css)
• Scripts — JavaScript under assets/js/ (main.js, navigation.js, form-handler.js)
• Data — JSON configuration under assets/data/ (site.json, memory.json, design-intelligence.json)

SEO & AI

• robots.txt — crawler rules for search engines and AI agents
• llms.txt — plain-text site description for AI language models

These files live in your site's root directory and are regenerated on every publish. Edit them here to customize how search engines and AI agents discover your site. See SEO & AI Discovery for details.

System Prompts

Internal AI instruction files that control how VoxelSite generates and edits your site. See System Prompts below.

Click any file to open it in the editor. Folders can be expanded or collapsed by clicking them.

Multi-Tab Editing

Open multiple files at once — each opens in its own tab. Click a tab to switch between files. Close tabs with the × button. Your open tabs and expanded folders persist across page navigations within Studio.

Editing and Saving

Make changes directly in the editor. Unsaved changes are indicated with a • dot next to the filename in both the tab and the file tree.

• Save: Click the Save button in the footer, or press Ctrl+S / Cmd+S
• Undo/Redo: Use the Undo and Redo buttons in the footer or standard keyboard shortcuts

After saving, the preview automatically refreshes. CSS changes reload styles without a full page refresh.

Inline AI Editing

Highlight any block of code inside the editor and press Cmd+K (or Ctrl+K) to trigger the inline AI prompt. A modal will appear asking for your instruction. You can describe exactly what you want to change about the selected code (e.g., "Make this list responsive" or "Add a dark mode variant"). The AI will stream the rewritten code block directly back into the editor in real-time. The changes are inserted as an unsaved draft, allowing you to safely review the AI's work and either save (Cmd+S) to commit the changes, or undo (Cmd+Z) if you want to try a different prompt.

If you press Cmd+K without highlighting anything, the editor will automatically select the line your cursor is currently on.

Creating New Files

Click the New File button (file-plus icon) in the explorer header. Enter a filename including the path if needed:

• contact.php — creates a new page
• assets/css/custom.css — creates a CSS file in a subdirectory
• assets/js/utils.js — creates a JavaScript file

Supported extensions: .php, .css, .js, .json. Parent directories are created automatically if they don't exist.

Deleting Files

Hover over a user-created file in the explorer to reveal the trash icon. Click it and confirm the deletion in the dialog. The file is permanently removed and a revision snapshot is created automatically so you can recover it from Snapshots if needed.

Protected System Files

Core system files cannot be deleted. These files are essential for your site to function and do not show a delete icon:

You can still edit these files — you just can't delete them.

System Prompts

VoxelSite Studio leverages a highly structured set of internal markdown instructions to choreograph the AI. Advanced users can view and freely customize these system prompts directly within the Code Editor under the SYSTEM PROMPTS directory tree.

Core Prompts

• system.md: The absolute master prompt. This file dictates the core foundational logic (e.g., Tailwind utility constraints, directory structures). It is seamlessly injected into every single AI request made through the Studio.
• context-template.md: The structural blueprint. It maps out dynamic snapshot variables (like capturing the current header.php HTML, CSS properties, or memory JSON variables) to ensure the AI has complete situational awareness of the existing codebase.

Action Prompts (actions/)

The Studio's backend Action Registry maps user-facing UI tools (like "Create a website" or "Change the design") to highly specific "Action Prompts". These narrower prompts dynamically layer on top of the system.md file to drastically improve the AI's contextual performance for specialized tasks:

• create_site.md: Guides the generation of an entirely new website layout across multiple files.
• change_design.md: Forces the AI to ignore content limits and instead focus heavily on modifying CSS custom properties, global typography, and the layout aesthetic.
• optimize_aeo.md: Directs the AI to focus on AI Engine Optimization (AEO) tasks such as injecting semantic JSON-LD or altering meta tags.
• edit_page.md: Handles localized document modifications on a single file, and is dual-mapped to both modifying an existing section or adding an entirely new page wrapped in the core layout.
• inline_edit.md: Powers the inline Cmd+K code editor operations, forcing the AI to strictly locate and replace specifically highlighted DOM nodes or PHP blocks.

Customizations & Update Safety

VoxelSite regularly ships new updates to the _studio engine, including newly refined system prompts. To prevent your own custom prompt modifications from being silently overwritten during an update, VoxelSite uses a smart override fallback mechanism.

When you edit a system prompt using the Code Editor:

1. The Studio preserves the original default prompt untouched inside the core _studio/prompts/ directory.
2. It automatically saves your newly customized version into a completely separate, update-safe sandbox: _studio/custom_prompts/.
3. For all future operations, the backend engine intercepts traffic and reads your custom override instead of the default file.

Because _studio/custom_prompts/ is immune to standard ZIP extraction overhauls, your custom AI instructions will forever survive system updates.

If you ever wish to roll back your changes and reconnect to VoxelSite's official, up-to-date system instructions, simply hover over your customized prompt in the file tree and click the Reset to default icon. This safely trashes the override file and restores the default engine linkage.

Keyboard Shortcuts

Tips

• Use the editor for quick fixes. For full control, download your site and edit in your preferred IDE.
• The AI can also edit files. Describe changes in the Chat panel and the AI will modify the code for you.
• Data files are viewable. The assets/data/ JSON files let you inspect what the AI knows about your site — its memory, design decisions, and site configuration.

Related

• Chat — Describe changes in natural language and the AI modifies the code for you
• Visual Editor — Click-and-edit elements visually, including AI-powered section editing
• Download & Export — Download your site as PHP or static HTML
• SEO & AI Discovery — Edit robots.txt and llms.txt in the SEO & AI section
• Undo & Snapshots — Roll back any change