Jetstream

Jetstream is a polished, high-performance marketing website template for Astro. Browse through a live demo.

Note

This template is built with Astro 6 and the Astro Component Starter.

Features

Modern Architecture: Built with Astro for optimal performance and minimal JavaScript
Visual Editing: Visual editing with CloudCannon editable regions - edit directly on the pages
Component Library: Reusable, componentized architecture for better maintainability
Image Optimization: Astro's built-in image optimization for all images
Accessibility: Fully accessible navigation and components
Design Tokens: CSS variables for consistent theming
Blog System: Complete blog with pagination and category pages
SEO Optimized: Pre-configured for search engine optimization

Getting Started

Get a workflow going to see your site's output (with CloudCannon or Astro locally).

Local Development

Jetstream is built with Astro and modern CSS for a lean, performant development experience.

npm install
npm run dev

Your site is available at localhost:4321.

Editing Locally with CloudCannon

Run CloudCannon against your local files with the CloudCannon CLI dev server. This is the fastest way to iterate on cloudcannon.config.yml, inputs, and structures — you see the editing experience without committing and pushing first.

Install the CLI and log in (requires Node.js 24+):

npm install --global @cloudcannon/cli
cloudcannon login

Build the site, so the dev server has output to serve:
```
npm run build
```
Start CloudCannon locally, pointing it at the build output:
```
cloudcannon dev dist
```

The dev server runs on port 10101 by default and opens CloudCannon in your browser, pointed at the files in this repo. Content edits sync to disk as you make them; re-run npm run build after changing components or templates to refresh the preview.

Before you commit configuration changes, validate them:

cloudcannon validate

The dev server is a development tool only — editors never access it. See Build your editing experience locally for the full workflow.

AI Agent Skills

If you build with an AI coding agent (Claude Code, Cursor, Copilot, and others), install CloudCannon's agent skills. They teach your agent how CloudCannon configuration, editable regions, and snippets actually work, so it stops guessing.

npx skills add cloudcannon/agent-skills --all

To see what's on offer before installing anything, or to install a subset:

npx skills add cloudcannon/agent-skills --list
npx skills add cloudcannon/agent-skills --skill <names>

Other useful flags and commands:

Command	What it does
`--all`	Install every skill for every detected agent, without prompts
`-l`, `--list`	List the skills in the repository without installing
`-g`, `--global`	Install for your user account instead of just this project
`npx skills ls`	List the skills you have installed, project and global
`npx skills update`	Update installed skills to their latest versions
`npx skills remove`	Remove installed skills
`npx skills experimental_install`	Restore the exact skills recorded in `skills-lock.json`

Skills install to .agents/skills/, with agent-specific directories such as .claude/skills/ and agent/skills/ pointing at them. Those directories are gitignored, but skills-lock.json is committed — so a teammate can restore the same set and versions you used.

In Claude Code you can install them as a plugin instead:

/plugin marketplace add CloudCannon/agent-skills
/plugin install agent-skills@cloudcannon

This template also ships its own skills in .cursor/skills/, covering tasks specific to this component library. See AGENTS.md for which skill to reach for when.

Site Details

Tech Stack

Astro: Static site generation with component islands architecture
CSS: Modern CSS with custom properties and cascade layers
Lightning CSS: Fast CSS processing and optimization
TypeScript: Type-safe component development

Editing

Jetstream features advanced visual editing capabilities with CloudCannon's split configuration, allowing for intuitive content management and real-time preview.

Visual Editing

Live Preview: See changes instantly as you edit
Component-based: Edit reusable components directly in context
Split Configuration: Modern CloudCannon setup for enhanced editing experience

Content Management

Posts

Add, update or remove posts in the Posts collection
Automatic pagination and category organization
Rich content editing with live preview

Site Configuration

SEO: Centralized company information reused across the site
Navigation: Fully accessible, responsive navigation management
Footer: Configurable footer elements and links

Component Previews

Every component has a thumbnail shown in CloudCannon's component picker. These are not screenshots — each component defines a recipe in a *.preview.mjs file next to it, which is compiled to a deterministic SVG in public/component-previews/.

The SVGs are committed, so after editing a recipe you must rebuild them:

npm run previews:build

npm run check (and CI) verifies that every component has a preview and that no committed SVG is stale, so a recipe change without a rebuild fails the check. To verify without writing anything:

npm run previews:verify

Two authoring aids are available while designing a recipe. Neither is part of the build, and both write git-ignored output:

npm run previews:montage   # one labelled contact sheet of every preview, to compare them side by side
node scripts/previews/screenshot.mjs   # reference PNGs of the real rendered components

The screenshot script needs a browser and playwright-core, which is intentionally not a project dependency — install it with npm install --no-save playwright-core when you need it.

Prerequisites

Node.js >= 24.0.0

Updating Dependencies

When adding, removing, or updating packages (on macOS especially), use:

npm run deps:sync

This regenerates package-lock.json with resolutions for all target platforms (Linux, Windows, macOS) so CI doesn't break. Plain npm install on macOS silently strips Linux-only peer dependencies out of the lockfile, which causes npm ci to fail on GitHub Actions.

You can verify the lockfile is CI-ready at any time with:

npm run deps:check

Learn More

For more details on the component architecture and development workflow, view the Astro Component Starter README.

CloudCannon documentation — configuration, editing, and build reference
CloudCannon CLI reference — cloudcannon dev, validate, and more
CloudCannon agent skills — skills for working on CloudCannon sites with AI agents

License

MIT

Featured template