Try the Astro Component Starter: https://cloudcannon.com/templates/astro-component-starter/?utm_campaign=astrocontent&utm_source=CIP

*This video is sponsored by CloudCannon, but views are my own.

Give your clients a powerful editing experience without sacrificing developer control. In this video, I walk through CloudCannon's brand new Astro Component Starter — a complete setup that lets agencies and freelancers build fast, editable sites while keeping full ownership of the code.

What's Covered
- What the Astro Component Starter is — and why it's built for agencies managing non-technical clients
- Developer experience — installation, project structure, component anatomy (3-file system: Astro, inputs, structure)
- Page design — how pages use markdown front matter and a `page_sections` array to compose components
- Theming — customizing global design tokens, fonts, spacing, animations, and more
- Connecting to CloudCannon — pushing to GitHub and syncing your repo for a live editing environment
- The client editing experience — visual editor, inline edits, Git-backed saves, and two-way sync
- Building custom components — using the built-in component builder in the docs to scaffold new components with controlled inputs
- Scoping what clients can edit — exposing only the fields you want, keeping your design system intact

---------------------------------------

⏲️ Timestamps ⏲️
0:00 Intro
0:29 What the Component Starter Does
1:47 Installation
2:24 Project Structure & Components
2:53 Page Design
3:20 Theming & Design Tokens
4:19 Connecting to CloudCannon
5:22 Client Editing Experience
7:08 Two-Way Git Sync
8:06 Adding New Sections
10:07 Building Custom Components
11:00 Controlling What Clients Can Edit
13:31 Deploying Custom Components
14:39 Wrap Up

---------------------------------------

🌐 Connect With Me 🌐 
- Astro course: https://learnastro.dev
- Website: https://codinginpublic.dev
- Blog: https://chrispennington.blog

🤝 Follow Me 🤝
- Twitter: https://twitter.com/cpenned
- BlueSky: https://bsky.app/profile/codinginpublic.dev

💸 Support Me 💸
- Patreon: https://www.patreon.com/coding_in_public
- Buy Me a Coffee: https://www.buymeacoffee.com/chrispennington

Coding in Public

A walkthrough of the new Astro Component Starter built with Cloud Cannon, aimed at agencies and freelancers managing non-technical clients. The starter provides a Git-based Astro project with zero JavaScript by default for performance, paired with Cloud Cannon's visual CMS editing experience. Developers retain full control over components, theming via design tokens, and which fields clients can edit. The tutorial covers installation, project structure, theming, connecting to Cloud Cannon, the two-way Git sync workflow, and building custom components using an in-docs component builder that generates the required Astro, inputs, and structure files.

NEW Astro Component Starter