Back to site

Astro Component Starter

This is your starter template: 40+ Astro components, each built for visual editing in CloudCannon. Every component is your source code. Modify anything, delete what you don’t need, and build on what’s here.

The design is intentionally unbranded so it can become any brand. Components are built on web fundamentals (vanilla CSS, semantic HTML, minimal JS) and are fast and accessible out of the box.

These docs help you explore what ships with the starter, understand how the pieces connect, and start building your own components.

Learning path

New here? Follow these guides in order to go from first clone to building your own visually editable components:

  1. Project Tour: Understand the directory structure, how components are organized, and the three-file pattern that makes everything visually editable.

  2. Editing a Page: Make changes to a page in code, then see the same edit in CloudCannon’s visual editor.

  3. Customizing Your Brand: Update colors, fonts, and spacing across your entire site using design tokens. Learn how CSS Cascade Layers keep styles predictable.

  4. Building a Page Section: Create a new component from scratch: the Astro file, the CloudCannon config, everything. This is where the architecture clicks.

  5. Visually Edit Components: Wire up editable regions so content editors can click, type, and drag directly on the live preview.

Component Builder

Want to prototype a component without writing code first? The Component Builder lets you drag-and-drop building blocks into a sandbox, configure props, and export a complete component package with Astro code and CloudCannon config files included.

Browse components

All components are documented in the sidebar. Each page includes a description, live examples, and a full list of properties. Use them as reference when building pages or creating your own components.