Quick start

Open a project, make your first edit on the canvas, and see it land in the file.

Open a project

The start screen has two ways in:

  • Open Existing Project… — pick any folder that already contains an Astro project. Recent projects appear as cards underneath, each with a preview of its home page.
  • New Project… — pick an empty folder and answer the same questions npm create astro@latest asks. Atom Crafter runs the real CLI, so you get a normal Astro project with nothing proprietary added to it.

Once a project opens, Atom Crafter starts that project’s own dev server. The dot beside the URL in the title bar turns green when the server is up, and the canvas fills in.

Make an edit

  1. Click something on the canvas. It is selected, and the Navigator on the left jumps to it in the tree.
  2. Press S for the Style panel or D for Settings.
  3. Change a value. The preview patches in place: no full reload, no lost scroll position.

Edits are saved to disk automatically, shortly after you stop typing. There is no separate save button and no “publish to preview” step: the file on disk is what the canvas is showing.

Add something

Press ⌘E (macOS) or Ctrl+E (Windows) to open the insert palette, type a few letters, and press Enter. Components from src/components, HTML tags, and structural pieces like loops and conditions share the same list.

You can also drag a component out of the Components panel and drop it into the Navigator where you want it.

Commit it

The chip at the right of the title bar shows the current branch and whether the working tree is dirty. Open it to write a commit message, commit, push, switch branches, or publish the project to a new GitHub repository.

Where to go next