Quick Start

This guide takes you from a new account to a published Astro site. You create a project, edit a page in Design mode, connect a data source, and publish.

Before You Start

You need:

• A PhantomStudio account with an active subscription. Projects can only be created with a subscription.
• A GitHub account. Each project is a GitHub repository in your account.
• Docker Desktop, if you want to use the recommended Local (Docker) environment. You can pick GitHub Codespaces instead and install nothing.
• A Vercel or Cloudflare account, when you are ready to put the site online.

Step 1: Sign Up and Connect GitHub

1. Go to phantomstudio.app and sign up with your email address and a password.
2. Verify your email with the link we send you, then sign in.
3. On the dashboard, click Connect GitHub Account and authorize the app. PhantomStudio uses this access to create repositories for your projects and manage Codespaces.

You're back on the dashboard once GitHub is connected.

Step 2: Create a Project

1. On the dashboard, click New Project.
2. Under Project, keep Start Fresh selected and enter a Repository Name (for example my-astro-site). Tick Private Repository if the repository should be private.
3. Under Template, pick one:
   • Starter: a clean layout to build on.
   • Minimal Starter: a blank canvas with almost no styling.
   • WooCommerce Store: product catalog, cart, checkout and customer accounts. See WooCommerce Setup before choosing it.
4. Choose a CSS approach: Tailwind CSS or CSS.
5. Under Development environment, pick where the Astro dev server runs:
   • Local (Docker) (recommended): on your own machine.
   • Cloud (Fly.io) or GitHub Codespaces, under Other environments. Fly.io needs a Fly.io API key in your account settings first.
6. Click the button at the bottom. Its label follows your choice: Create & Run Locally, Create & Launch on Fly.io or Create & Launch Codespace.

If you chose Local (Docker)

PhantomStudio creates the repository, then shows a Docker command.

1. Make sure Docker Desktop is running.
2. Copy the command and paste it into Terminal (Mac or Linux) or PowerShell (Windows). The first run downloads the image.
3. Click Open Editor. It connects once the container is up.

Map to a local folder is on by default, so the project files are also on your disk for VS Code or Claude Code. You only need the terminal once: after that, start and stop the container from Docker Desktop. See Docker Local Development for details.

If you chose Fly.io or Codespaces

PhantomStudio creates the repository and starts the environment, showing its progress as it goes. A Codespace takes a few minutes. The editor opens on its own when it's ready.

Step 3: Find Your Way Around

The editor opens in Design mode. The header has the Site ▾ and Help ▾ menus, the Design / Code switch, a save indicator and Publish ▾ at the top right.

The bar on the left opens the panels:

The preview in the middle is the real site, served by the Astro dev server. Switch to Code in the header for the file tree and the code editor.

See Design Mode for a full tour.

Step 4: Edit a Page

1. In the preview, double-click a heading and type new text. Click outside it to finish.
2. Click an element to select it. Its row is selected in the Builder too.
3. Open Style and change something, such as the font size or the background color.
4. Open Add, search for an element (for example "Button"), and drag it onto the page.

There is no Save button: edits save on their own, and the header shows Saved when they have.

To change colors and fonts for the whole site instead of one element, open Site ▾ › Site Style. See Site Style.

Step 5: Show Content From a Data Source

1. Open Data in the left bar and click the + button (Add data source).
2. Pick a source:
   • WordPress: enter your WordPress Site URL, click Fetch, then Save Settings. See Connecting WordPress.
   • Sanity: enter the project id and dataset.
   • Content collection: create a collection and add entries in the editor.
   • Data file: upload a JSON or CSV file.
3. Back in the list, open the source and click Add to (page name). PhantomStudio adds cards bound to each item's fields, repeated for every item.

In the Builder, these cards show as a Repeat for each… row. Right-click any element to add your own Repeat for each… or Show if…. See Data Sources.

For WordPress, install the PhantomWP Connect plugin on your site as well. See PhantomWP Connect Plugin.

Step 6: Publish

Publishing has two parts: connecting a host once, then publishing your changes.

Connect a host

1. Click the arrow on Publish ▾ (top right).
2. Under Live site, click Set up deployment to connect Vercel, or Use Cloudflare instead.
3. Follow the dialog. Vercel asks for an access token. See Deploying to Vercel or Deploying to Cloudflare Workers.

You can also connect Vercel and Cloudflare Workers from the Connections panel on the dashboard, under Deployments.

Publish your changes

1. Click Publish. The button shows how many changes are waiting.
2. The Publish changes dialog lists what's going live in plain words. Add a summary if you like.
3. Click Publish.

Your changes are saved to GitHub and the site updates. For a project's first deploy, use Publish ▾ › Deploy for the first time. When the deploy finishes, a card shows the live address with Open site and Copy link.

See Publishing for drafts, versions and undoing a publish.

Next Steps

• Design Mode: the Builder, the Add panel and the Style panel.
• Data Sources: WordPress, Sanity, collections and files.
• Rendering: Static, Dynamic and Dynamic, cached pages.
• Forms: where contact forms send their submissions.
• AI Agents (MCP): build the site from Claude Code, Codex or Cursor.
• The Dashboard: projects, environments and connections.

Troubleshooting

The editor doesn't connect to a Docker project

Check that Docker Desktop is running and the container is started in its Containers tab. The token in the Docker command expires after 2 hours; if it has, get a new command with the Docker commands button on the project's row in the dashboard.

A Codespace is stuck starting

On the dashboard, open the project's ⋯ menu, choose Remove Codespace, then create the environment again. If Codespaces keep giving you trouble, use Docker instead.

The preview is blank

The Astro dev server can take a few seconds to start after the environment does. Wait, then use the refresh button in the preview toolbar.

For more help, see Troubleshooting or the Support page.