Documentation
Atom Crafter is a desktop app that edits the Astro project you already
have. It runs the project’s own dev server, renders it on a canvas, and
writes every change back as ordinary .astro source.
If you have never opened it before, start with Introduction. Otherwise pick a topic below.
Getting started
The interface
- The interfaceA tour of the window, its title bar, left rail, canvas and the two right-hand tabs.
- The canvasSelecting on the page, breakpoints, drilling into components, and preview mode.
- PagesCreating, moving, renaming and deleting the pages and folders behind every route.
- ComponentsThe palette of everything in src/components and src/layouts, and how to get one onto the page.
- AssetsBrowsing, uploading and organising the files under public/ and src/, and picking one for a prop.
Building pages
- Inserting elementsComponents, HTML tags, loops, conditions, text, code, style and script blocks, from the insert palette.
- Props and settingsTyped fields generated from each component's Props interface, plus tag, class, attributes and slots.
- Loops and conditionsRepeating markup over data and showing it conditionally, as nodes you can select.
- Binding to dataDropping real content into props, with the values shown beside the fields you can pick.
- Editing codeThe code fallback, the floating editor, and what happens to markup the visual model can't hold.
Styling
- The style panelA visual CSS editor that writes into your stylesheets, its sections, sources and the cascade.
- Classes and statesWhat a rule applies to, hover and focus, and reading the cascade honestly.
- BreakpointsWhich media query an edit lands in, and how the breakpoint cascade is shown.
- VariablesYour CSS custom properties as editable tables, with themes as columns and live accessibility checks.
Content
Shipping
- Git and GitHubCommitting, pushing, switching branches with uncommitted work, and publishing from the branch chip.
- How editing worksThe model behind the canvas, what is parsed, what is written back, and why your diffs stay small.
- TroubleshootingThe preview will not start, the page opens as code, a click selects the wrong thing, and what to do.