Editor Overview
A tour of the PhantomStudio editor: Design mode and Code mode, the header, the Publish and Site menus, the activity bar and the panels.
Editor Overview
The PhantomStudio editor runs in your browser and works on your project's workspace (a GitHub Codespace or a local Docker container). Every edit you make, visually or in code, is a change to your Astro project's files.
Used PhantomWP before? Your editor opens in Code mode, the layout you know, and a short card shows where things moved. Press ⌘K (Ctrl+K) and type an old name, such as "Theme Studio" or "Commit", to find its new place.
Design mode and Code mode
The switch at the top right of the header picks how the editor looks:
- Design shows the Builder, the preview and the Style panel. The file tree, code editor and terminal stay out of the way. Use it to build and edit pages visually. See Design Mode and the Builder.
- Code is the full IDE: file tree, code editor and terminal, plus the preview and the Builder when you want them.
New users start in Design mode. Switching modes only changes which panels are visible: when you go back to Code mode, your Code layout is exactly as you left it.
The header
From left to right:
| Item | What it does |
|---|---|
| Site ▾ | Everything about the site: design, content and settings (see below) |
| Help ▾ | Connect AI Agent, Learn Astro Basics, Send Feedback, Open Dashboard. In Code mode it also has Developer (Infrastructure, Astro Check, Error Logs, API Explorer, Move between projects, Browse skills, Import Claude Design, Open GitHub Repo, Open Codespace, Open in VS Code). In Design mode it has Infrastructure |
| Search commands | The command palette (⌘K / Ctrl+K) |
| Project name | Switch to another project. In Code mode the current file's path shows next to it |
| Design / Code | The mode switch |
| Saved | Edits save on their own a moment after you stop typing. The indicator shows Saving…, Unsaved or Saved; click it to save right away. ⌘S (Ctrl+S) also saves at once |
| Status dot | The connection to your workspace and its services. It only shows words when something is wrong |
| Publish ▾ | Publish your changes, and everything about the live site and your changes |
Publish ▾
The Publish button saves your changes to GitHub and updates the live site. Its count shows how many changes aren't published yet; hover it to see them in plain words. On a draft branch the button reads Save draft: it saves your work on that branch and leaves the live site alone.
The arrow next to it opens the menu:
- Live site: the deployment status with an Open link, then Deploy now, Domains, Deploy history, Environment variables (Vercel) and Deploy hook. Before a site is deployed, it offers Set up deployment instead.
- Go-live check: checks the site the way visitors, search engines and link previews see it (titles, descriptions, share images, broken links and more).
- Changes: View changes, Commit & push (Code mode only), History, Undo last publish, Versions (save the project as it is now and go back to it later), Drafts & branches and Get the latest from GitHub.
See Publishing for the full flow, and Deploy Hooks for redeploying from a CMS.
Site ▾
Site is a menu with three columns and a search box that finds any item:
| Column | Items |
|---|---|
| Design | Site Style, Font Manager, Icon Manager, Menu Builder, Section Library |
| Content | Data, Media Manager, WordPress, Open wp-admin |
| Settings | SEO Settings, Forms settings, PWA Settings, Site Map |
Site Style sets the look of the whole site (colors, fonts, spacing tokens); the Style panel changes the selected element. See Site Style. WordPress holds the WordPress connection settings, and Open wp-admin shows once a site is connected.
The activity bar
The narrow bar on the left opens and closes panels. Each mode has its own items, and ⌥1, ⌥2… (Alt+1, Alt+2…) toggle them in order:
| Shortcut | Design mode | Code mode |
|---|---|---|
| ⌥1 | Add | File Tree |
| ⌥2 | Builder | Code Editor |
| ⌥3 | Data | Preview |
| ⌥4 | AI Chat | Builder |
| ⌥5 | Style | AI Chat |
| ⌥6 | Terminal | Terminal |
| ⌥7 | Snippets | Style |
| ⌥8 | Data |
Code mode also has Snippets, without a shortcut.
The panels
| Panel | What it's for |
|---|---|
| Builder | The page's layers: select, rename, move, wrap and delete elements, and edit their content in a card under the row. See Design Mode and the Builder and The Builder Tree |
| Add | Elements, components and List from data, next to the Builder. Drag onto the tree or the preview, or click to add |
| Data | Where your content comes from: connected CMSs, content collections, data files and APIs. See Data Sources |
| Style | Styles of the selected element, per screen size and state |
| Preview | Your site, running. Click elements to select them |
| AI Chat | The AI Assistant. ⌘I (Ctrl+I) toggles it. It docks on the right or at the bottom |
| Terminal | A terminal in your workspace, in both modes. Use it to run Claude Code or other agents next to the Builder |
| Snippets | Reusable bits of code in src/lib/snippets.ts: edit them, start from an example, and use them on a page |
| File Tree (Code mode) | Your project's files and folders. See Working with Files |
| Code Editor (Code mode) | The Monaco editor, with tabs, syntax highlighting, autocomplete and inline errors. Markdown files have a Visual option for editing without markdown syntax |
Drag the border between two panels to resize them. Sizes are remembered.
The preview toolbar
Above the preview:
- Back, Forward and Refresh preview. Refresh reloads the page and fetches fresh data from WordPress and APIs.
- Desktop, Tablet (768px) and Mobile (375px) sizes.
- X-ray: outlines everything on the page that shows data, colored by where it comes from.
- View options: zoom, Outline all components, and Cache external data (faster refreshes while you edit; the refresh button fetches fresh data).
- The page address, and a button to open the preview in a new window.
- On template pages (such as
src/pages/events/[slug].astro), a pager to preview each entry.
In Code mode with the Builder closed, an Inspect button turns element selection on and off.
Finding things quickly
| Shortcut | What it opens |
|---|---|
| ⌘K / Ctrl+K | The command palette: every command, panel and setting. With an element selected, its actions come first |
| ⌘P / Ctrl+P | Quick open: find a file by name |
| ⌘I / Ctrl+I | AI Chat |
? | The toolbar guide, with a Keyboard section for the editor, the Builder and the preview |
Next steps
- Design Mode and the Builder: build and edit pages visually
- Data Sources: show content from WordPress, Sanity, collections and files
- Page Rendering: Static, Dynamic and Dynamic, cached pages
- Publishing: put your changes on the live site
- AI Assistant: let the AI build and fix things for you