Your First Site
Create a project
Section titled “Create a project”Click New project, give it a name, and pick a starter. Plyed scaffolds a complete Astro site and opens it in the editor.
- Plain is a clean Astro + Tailwind site for most projects.
- Motion starts with smooth scrolling and page transitions.
- Shopify starts with a storefront, product pages, and cart. It works with Shopify’s demo catalogue until you add your own public Storefront credentials in Environment (left rail).
Not sure which one fits? Read Choosing a Starter.
The editor at a glance
Section titled “The editor at a glance”- Canvas — a live preview of your site. Click any element to select it.
- Right sidebar — Style, Inspector, and Code tabs for the selected element: layout and design controls, text/attributes plus actions like Wrap, Duplicate, Delete, and Ask AI, and a code view that follows your selection. See Editing on the Canvas.
- Left rail — flyout panels for Add (elements, your components, and the component library), Pages, Assets (files and typefaces), Theme (global colors and typography), Stylesheet (a live preview of those tokens), CMS, and AI Chat — plus History, Audit, Docs (styleguides and plans for the AI — see Editing with AI), and Environment at the bottom. Click an icon to open its panel.
- Left sidebar — Elements (navigator tree) and Source (project file tree) tabs beside the canvas.
- Top bar — a Canvas / Chat / Code view switcher (⌘1/⌘2/⌘3), the Git and Publish buttons, dev server controls, and your Account.
Everything you do on the canvas is written straight into the project’s source
files — there’s no separate “design file”. The History panel tracks your
edits, and ⌘Z works as expected.
For selection, responsive previews, code follow-along, drag and drop, and copying sections between pages or projects, see Editing on the Canvas.
Start and stop the preview
Section titled “Start and stop the preview”The preview runs your site’s dev server. Use Start dev / Stop dev in the top bar if you ever need to restart it — for example after changing environment variables.
Where projects live
Section titled “Where projects live”Projects are normal folders on your Mac (real Astro code). You can open them in any code editor, and you can back them up to GitHub.