Starters

Starters are pre-configured project templates that come with Contentrain already integrated into a specific framework. Instead of setting up a project from scratch, you can use a starter to get a fully working site with sample content, proper folder structure, and Contentrain configuration ready to go.

What Are Starters?

A Contentrain starter is a ready-made project template that includes:

• A frontend framework configured and working out of the box
• Contentrain SDK and configuration pre-installed
• Sample content models and entries to demonstrate the workflow
• A connected Git repository structure following Contentrain conventions

Starters let you skip the initial setup and jump straight into building your content and customizing your site.

Available Starters

Contentrain provides official starter templates for the most popular static site and frontend frameworks.

Next.js Starter

A full-featured Next.js application with Contentrain integration. Includes server-side rendering support, dynamic routing for content pages, and optimized build configuration for static generation.

• Framework: Next.js (React)
• Rendering: SSR / SSG
• Best for: Dynamic websites, marketing sites, blogs

Nuxt.js Starter

A Nuxt.js application pre-configured with Contentrain modules. Comes with auto-imported composables for fetching content and built-in support for Nuxt's file-based routing.

• Framework: Nuxt.js (Vue)
• Rendering: SSR / SSG
• Best for: Vue-based projects, corporate sites, documentation

Gatsby Starter

A Gatsby site with Contentrain as the data source. Leverages Gatsby's GraphQL data layer to query Contentrain content at build time, with image optimization and page generation configured.

• Framework: Gatsby (React)
• Rendering: SSG
• Best for: Performance-focused static sites, blogs, portfolios

Astro Starter

An Astro project with Contentrain content collections. Takes advantage of Astro's island architecture for minimal JavaScript delivery while pulling content directly from your Contentrain-managed Git repository.

• Framework: Astro
• Rendering: SSG / Hybrid
• Best for: Content-heavy sites, documentation, landing pages

Using a Starter

Getting started with a template takes just a few steps:

1. Create a new project in the Contentrain dashboard.
2. Select a starter template from the available options during project creation. You can browse templates by framework or use case.
3. Connect your Git provider (GitHub, GitLab, or Bitbucket) to set up the repository.
4. Clone the repository to your local machine:

   git clone <your-repo-url>
   cd <your-project>
   npm install

5. Start the development server for your chosen framework:

   npm run dev

6. Open the Contentrain dashboard to manage your content. Changes you make in the dashboard are committed to your Git repository automatically.

For a more detailed walkthrough, see the Quick Start Guide and Working with Projects.

Template Marketplace

Beyond the official starters, Contentrain offers a Template Marketplace where you can browse community-contributed templates. These templates cover a wider range of use cases and design styles:

• Landing pages with pre-built sections and components
• Blog templates with category and tag support
• Portfolio sites with gallery layouts
• Documentation sites with sidebar navigation and search

You can access the marketplace from the Contentrain dashboard when creating a new project or browse it directly from the Contentrain website.

What's Included in a Starter

Every starter template follows a consistent structure so you know what to expect:

my-project/
├── contentrain/              # Contentrain configuration and content
│   ├── models/               # Model definitions (JSON schemas)
│   │   └── posts.json        # Example model with field definitions
│   ├── posts/                # Content entries for the posts model
│   │   └── en.json           # Localized content (English)
│   └── assets.json           # Registered media assets
├── public/                   # Static assets (images, fonts)
├── src/                      # Framework-specific source code
│   ├── components/           # Reusable UI components
│   ├── pages/                # Page templates and routes
│   └── styles/               # CSS or styling files
├── package.json              # Dependencies including Contentrain SDK
└── contentrain.config.json   # Contentrain project configuration

Key files and directories:

• contentrain/ -- Contains all Contentrain-managed content. This directory is synced with your Git repository and managed through the dashboard.
• contentrain/models/ -- Defines the structure of your content types, including field names, types, and validation rules.
• contentrain/<model-name>/ -- Stores the actual content entries as JSON files, organized by locale.
• contentrain.config.json -- Project-level configuration that connects your local project to the Contentrain dashboard.
• Sample content -- Each starter includes example models and entries so you can see how content flows from the dashboard to your frontend.

Starters are designed as starting points. Once you have the project running, you can modify models, add new content types, change the design, and extend the functionality however you need.