Sendit

Sendit is a polished, marketing website template for Astro. Browse through a live demo.

Features

• Modern Architecture: Built with Astro and React for optimal performance
• Tailwind CSS: Custom styling with utility-first CSS framework
• Component Library: Reusable, componentized architecture for better maintainability
• Visual Editing: Visual editing with CloudCannon editable regions - edit directly on the pages
• Interactive Components: Custom React hooks for interactivity
• Image Optimization: Astro's built-in image optimization for all images
• Accessibility: Fully accessible navigation and components
• Dynamic Theming: Real-time theme color updates
• Blog System: Complete blog with pagination and category pages
• SEO Optimized: Pre-configured for search engine optimization

Prerequisites

• Node.js 24+ (Astro 7 requires >= 22.12.0; the CloudCannon CLI requires 24).

Getting Started

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

Local Development

Sendit is built with Astro, React, and Tailwind CSS for a modern, 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.

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

   npm install --global @cloudcannon/cli
   cloudcannon login
   

2. Build the site, so the dev server has output to serve:

   npm run build
   

3. 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:

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

Site Details

Tech Stack

• Astro: Static site generation with component islands
• React: Interactive components with custom hooks
• Tailwind CSS: Utility-first CSS framework
• TypeScript: Type-safe development experience

Editing

Sendit 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
• Interactive Elements: Visual editing works seamlessly with React components
• 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

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

Theme Customization

• Dynamic Colors: Update theme colors in real-time through CloudCannon
• Tailwind Integration: Colors automatically propagate through the design system

Interactive Components

• Custom React hooks handle all interactive functionality
• Lightweight with minimal external dependencies
• Accessible by default with proper ARIA attributes
• Optimized for performance with Astro's component islands

Learn More

• 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

Sendit is a polished, marketing website template for Hugo. Browse through a live demo.

Features

• Pre-built pages
• Pre-styled components
• Blog with pagination and category pages
• Configurable navigation and footer
• Multiple hero options
• Optimised for editing in CloudCannon

Setup

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

Develop

Sendit is built with Hugo 0.166.0 (extended) — the version pinned in .cloudcannon/initial-site-settings.json. Use the same version locally; the template relies on recent additions such as hugo.Data and css.Sass, so older releases won't build it.

Prerequisites

• Hugo install. brew install hugo
• Go install. brew install go

Quickstart

1. In the terminal at the root dir, run: npm run start

• By default the site will be at : http://localhost:1313/

Components

Components live in layouts/partials/<group>/<name>.html and are rendered by the page builder in layouts/_default/{list,single}.html. Each one has a matching entry under _structures.content_blocks in cloudcannon.config.yaml, keyed by _name — so a block with _name: home/hero renders layouts/partials/home/hero.html.

Components are made editable in CloudCannon's Visual Editor with editable regions, wired up by the github.com/CloudCannon/editable-regions Hugo module.

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.yaml, inputs, and structures — you see the editing experience without committing and pushing first.

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

   npm install --global @cloudcannon/cli
   cloudcannon login
   

2. Build the site, so the dev server has output to serve:

   npm run build
   

3. Start CloudCannon locally, pointing it at the build output:

   cloudcannon dev public
   

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 the 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.

Editing

Sendit is set up for adding, updating and removing pages, page builder components, blog posts, navigation and footer details in CloudCannon.

Pages and components are edited on the page itself in the Visual Editor. Blog posts open in either the Content Editor or the Visual Editor.

Site-wide details

Reused around the site so there is one place to edit each of them. All five are in the Data section:

• Nav — logo, menu items and their dropdowns, and the header button.
• Footer — logo, copyright line, social links, and the link columns.
• Meta — site title, site URL, description, favicons and the social share defaults used by every page that does not override them. The site URL is the base for canonical links and social share URLs, so update it when the site moves to its own domain.
• Blog tags — the list of categories a post can be assigned.
• Theme — the primary, secondary and link colours. These are also edited from the palette button that appears in the Visual Editor.

Sendit is a polished, marketing website template for Eleventy. Browse through a live demo.

Features

• Pre-built pages
• Pre-styled components
• Blog with pagination and category pages
• Configurable navigation and footer
• Multiple hero options
• Configurable theme colors
• Optimised for editing in CloudCannon

Setup

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

Prerequisites

Quickstart

2. Run npm i to install the modules.
3. Run npm run start to run the project. this will create a _site folder, where all the developed file will remain.

By default the site will be at http://localhost:8080

Editing

Sendit is set up for adding, updating and removing pages, components, posts, navigation and footer elements in CloudCannon.

Nav/footer details

• Reused around the site to save multiple editing locations.
• Set in the Navigation section with respective names

SEO details and favicon

• Favicon and site SEO details are set in the Data / Site section
• SEO details can also be set in pages for page specific details

Theme colors

• Theme colors can be set in Theme Palette / Theme
• The main colors are set and variants of them are computed
• The colors will update on the next build

Sendit is a polished, marketing website template for NextJS. Browse through a live demo.

Features

• Pre-built pages
• Pre-styled components
• Blog with pagination and category pages
• Configurable navigation and footer
• Multiple hero options
• Configurable theme colors
• Optimised for editing in CloudCannon

Setup

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

Develop

Sendit is built with Next.js (version 13.0.4).

$ npm install
$ npm run dev

Editing

Sendit is set up for adding, updating and removing pages, components, posts, portfolio items, company details and footer elements in CloudCannon.

Posts

• Add, update or remove a post in the Posts collection.
• The Staff Author field links to members in the Staff collection.
• Change the defaults when new posts are created in content/posts/_defaults.md.

Company details

• Reused around the site to save multiple editing locations.
• Set in the Data / Company section.

Nav/footer details

• Reused around the site to save multiple editing locations.
• Set in the Data section with respective names

Theme colors

• Theme colors can be set in Data / Theme
• The main colors are set and variants of them are computed
• The colors will update on the next build

Sendit is a polished, marketing website template for SvelteKit. Browse through a live demo.

Features

• Pre-built pages
• Pre-styled components
• Blog with pagination and category pages
• Configurable navigation and footer
• Multiple hero options
• Optimised for editing in CloudCannon

Prerequisites

Requires:

• node: ^16.24.0
• npm: ^8.3.1

Setup

Run npm install to install the required packages.

Developing

If you are working locally, you can run the following command to start a development server:

npm run dev

By default the site will be at http://localhost:5173/.

Building

If you are working locally, you can run the following command to build a production version of this site:

npm run build

The above command is run when building this site in CloudCannon (unless configured otherwise).

You can preview the production build with npm run preview. This will serve the site at http://localhost:4173/.

Editing

Sendit is set up for adding, updating and removing pages, components, posts, navigation and footer elements in CloudCannon.

Nav/footer details

• Reused around the site to save multiple editing locations.
• Set in the Data section with respective names

SEO details and favicon

• Favicon and site SEO details are set in the Data / Site section
• SEO details can also be set in pages for page specific details

Sendit is a polished, marketing website template for Gatsby. Browse through a live demo.

Features

• Pre-built pages
• Pre-styled components
• Blog with pagination and category pages
• Configurable navigation and footer
• Multiple hero options
• Optimised for editing in CloudCannon

Setup

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

Develop

Sendit is built with Gatsby (version 5.2.0).

$ npm install
$ npm start

Editing

Sendit is set up for adding, updating and removing pages, components, posts, portfolio items, company details and footer elements in CloudCannon.

Posts

• Add, update or remove a post in the Posts collection.

Company details

• Reused around the site to save multiple editing locations.
• Set in the Data / Company section.

Nav/footer details

• Reused around the site to save multiple editing locations.
• Set in the Data section with respective names

Theme colors

• Theme colors can be set in Data / Theme
• The main colors are set and variants of them are computed
• The script to compute the colors is called fetch-theme-color.js
• There is a script definition in package.json called prebuild:fetch-theme-color; this prebuild runs automatically on CloudCannon but will need to be manually run for local development
• The colors will update on the next build

Sendit is a polished marketing website template for Nuxt. Browse through a live demo.

Features

• Pre-built pages
• Pre-styled components
• Blog with pagination and category pages
• Configurable navigation and footer
• Multiple hero options
• Configurable theme colors
• Optimised for editing in CloudCannon

Specifications

Sendit is built with Nuxt 3.

Components are built with Vue.js using the Composition API, and are structured using Bookshop.

This project uses the Nuxt Content module for handling Markdown content, with Document-driven mode for routing and for fetching page data.

Setup

Clone this repository to your machine. The relevant build scripts can be found in the package.json:

# install dependencies
$ npm install

# serve with hot reload at localhost:3000
$ npm run dev

# build static site
$ npm run generate

# launch server with a preview of the built site
$ npm run preview

You can also add this site to CloudCannon by clicking the Deploy to CloudCannon button at the top of this page.

Editing

Sendit is set up for adding, updating and removing pages, components, posts, company details and navigation elements in CloudCannon.

Components

• Pages are built using Vue components.
• Components are structured using the Bookshop system.

Pages

• Set up for live editing in CloudCannon's Visual Editor.
• Changing the component data will re-render the page, letting you preview your changes without needing to rebuild.

Posts

• Add, update and/or remove posts in the Blog collection.
• Edit posts' Markdown content in the WYSIWYG Content Editor.

Nav/footer details

• Reused around the site to save multiple editing locations.
• Set in the Data section with respective names.

Theme colors

• Theme colors can be set in Data / Theme.
• The main colors are set and variants of them are computed.
• The colors will update on the next build.

SSG

• This site is build using the Nuxt Content module to generate a static site. SSR features are disabled.
• The project structure uses Nuxt Content's Document-driven mode. Read their docs here: https://content.nuxtjs.org/guide/writing/document-driven
• Page data is fetched with the useContent() composable.
• Page components are organized in an array named content_blocks within the page's front matter.