Introduction
What PhantomStudio is: a visual Astro site builder that reads content from WordPress, Sanity, collections and data files, and deploys to Vercel or Cloudflare Workers.
Introduction
PhantomStudio is a site builder for Astro. You design pages visually, bind them to your content, and publish a fast Astro site that lives in your own GitHub repository. WordPress is the main data source, so your editors keep the wp-admin they know, but Sanity, content collections and JSON or CSV files work too.
PhantomStudio was formerly called PhantomWP. It is the same account and the same projects; only the name and the editor changed. The app is at phantomstudio.app.
Who It Is For
PhantomStudio is built for WordPress developers and agencies who already know a page builder and want an Astro frontend without giving up WordPress as the CMS. You work with the same ideas a builder gives you (a layers tree, a style panel, loops, conditions, dynamic data), and every change is written as normal Astro code you can read, edit and keep.
How It Works
Data sources (WordPress, Sanity, collections, files)
|
PhantomStudio editor (Design mode or Code mode)
|
GitHub repository (your Astro project)
|
Vercel or Cloudflare Workers (your live site)
- Create a project. PhantomStudio creates a GitHub repository from a template and starts a development environment for it.
- Build the site. Edit pages in the browser. The editor talks to the Astro dev server running in your development environment, so the preview is the real site.
- Connect your content. Add WordPress, Sanity, a collection or a data file as a data source, and show it on pages.
- Publish. Your changes go to GitHub, and the connected host builds and serves the site.
The Editor
The editor has two modes. Switch between them with Design and Code in the header.
| Mode | What you see | Use it for |
|---|---|---|
| Design | The Builder (a layers tree of the page), the preview, and the Style panel | Building and editing pages visually |
| Code | The file tree, the code editor and the terminal, plus the preview and the Builder | Working directly in the Astro code |
New users start in Design mode. Both modes edit the same files, so you can switch at any time.
Edits save on their own a moment after you stop. A small Saved / Saving… indicator in the header shows where things stand, and ⌘S (Ctrl+S) still saves at once. Saving only changes your development copy: the live site changes when you publish.
See Design Mode for the Builder and the Style panel, and the IDE Overview for Code mode.
What You Can Do
Build pages visually
- Add elements and components from the Add panel, and arrange them in the Builder tree.
- Double-click text in the preview to change it.
- Style the selected element in the Style panel, separately for Desktop, Tablet and Mobile.
- Set colors, fonts and spacing for the whole site in Site ▾ › Site Style. See Site Style.
- Insert pre-built sections from Site ▾ › Section Library. See Component Library.
Work with data
The Data tab in the left bar lists every data source in the project and where each one is used. From there you can add a source and put its items on a page as cards that are already bound to the item's fields.
- WordPress: posts, pages, custom post types and ACF fields, read through the REST API.
- Sanity: published documents from a dataset.
- WooCommerce: products and product categories, with a store template for cart, checkout and accounts.
- Content collections: entries stored as files in
src/content/, edited in a form in the editor. - Data files: JSON or CSV files in
src/data/.
In the Builder, right-click an element and use Repeat for each… to repeat it for every item in a list, or Show if… to show it only when a condition is true. See Data Sources.
Choose how each page renders
Each page is Static (built when you publish), Dynamic (built on every visit) or Dynamic, cached (built on demand and reused for a while). Static pages are plain HTML on a CDN. See Rendering.
Work with AI
- AI Chat in the left bar edits the project for you, next to the Builder.
- Connect Claude Code, Codex, Cursor or Claude Desktop from the dashboard, and the agent can create projects, run them and build the site. See AI Agents (MCP) and AI Assistant.
Publish
Publish ▾ in the top right of the editor saves your changes to GitHub and updates the live site. Its menu holds the live site's status, deploys, domains and deploy history, and your changes: what changed, history, versions you can go back to, and drafts. Sites deploy to Vercel or Cloudflare Workers. See Publishing.
Development Environments
Every project runs in a development environment that hosts the Astro dev server, the terminal and git. You pick one when you create the project.
| Environment | What it is |
|---|---|
| Local (Docker) | Recommended. A container on your own machine. Works offline and needs Docker Desktop. See Docker Local Development. |
| Cloud (Fly.io) | A container in your own Fly.io account. Needs a Fly.io API key in your account settings. |
| GitHub Codespaces | A cloud environment managed by GitHub. Nothing to install. See Understanding Codespaces. |
All three use the same editor.
If You Used PhantomWP Before
If you already had an editor layout saved, you start in Code mode, which is the layout you know. A short card shows where things moved. The main changes:
| Before | Now |
|---|---|
| Commit, Deploy, Publish | Publish ▾, top right |
| Save | Saves on its own (⌘S still works) |
| Theme Studio | Site ▾ › Site Style |
| Restore points | Publish ▾ › Versions |
| Browse collections, WordPress content | Data, in the left bar |
| WordPress site settings | Site ▾ › WordPress |
| File tree, code editor, terminal | Code mode |
| Infrastructure, logs, snapshots | Help ▾ › Developer (in Code mode) |
| Live / Live, cached pages | Dynamic / Dynamic, cached |
Can't find something? Press ⌘K (Ctrl+K) and search for it by its old name.
The WordPress plugin is still called PhantomWP Connect, and file and setting names such as .phantomwp/ and WP_ACCESS_SECRET are unchanged.
Next Steps
- Quick Start: create your first project and publish it.
- The Dashboard: manage projects, environments and connections.
- Connecting WordPress: use your WordPress site as a data source.