Introduction to Stackbit

Collaboration: Previewing & Sharing

Building Landing Pages

Publishing Changes

Save as Preset

Editor Guides

Overview

Begin the tutorial by setting up the Next.js example project that uses Contentful as the content source.

1. Stackbit Setup

Unlock basic page editing with just a few lines of configuration.

2. Basic Editing

Take the content editing experience to the next level by introducing highlights and inline editing.

3. Inline Editing

Boost content editing productivity by introducing component presets into your project.

4. Component Models

Follow a hands-on tutorial to learn the basics of Stackbit with a Next.js project using Contentful as the content source.

Next.js + Contentful

Begin the tutorial by setting up the Next.js example project that uses markdown files as the content source.

Learn the basics of content modeling while specifying a shape for your pages and components.

2. Content Modeling

4. Component Presets

Follow a hands-on tutorial to learn the basics of Stackbit with a Next.js project using files as the content source.

Next.js + Markdown

Next steps after completing a getting started tutorial.

Ongoing Development

Getting Started

How Stackbit fits into your modern web stack.

What is Stackbit?

Walk through the core concepts of how Stackbit works by following a developer's typical journey.

How Stackbit Works

Empowering non-technical editors to make structural changes to a website without the help of a developer.

Content-Driven Development

Help content editors work faster by providing a starting point for content.

Reusable Content

How Stackbit works with structured content, along with content modeling basics.

Structured Content

Stackbit store content back to the appropriate source, while also listening for changes from each source.

Two-Way Content Sync

Concepts

Manage user roles and permissions by inheriting from third-party services or setting custom rules.

Access Control

Learn how Automatic Content Reload works and how you can customize it.

Automatic Content Reload

Use the page editor panel to make changes to the current previewed page.

Basic Page Editing

Define content variations that editors can use to quickly create new pages and components.


Content Presets

Controlling the models that appear in the content tab for editors.

Content Editor

An introduction to using the Content Source Interface (CSI)

Custom Content Sources

Create a Stackbit cloud project from existing GitHub repositories.

Create from GitHub

Send form submissions to Stackbit's API and receive an email notification with the form content.

Form Submissions

Enable content editors to set site-wide styling options.

Global Styles

How content editors can make changes in context directly in the preview.

Inline Editing

Develop and test your site in your local development environment.

Local Development

Manage localized content by editing from the content source or extending with Stackbit.

Localization

Use or eject from Stackbit's out-of-the-box deployment strategy.

Managed Hosting

Customize Stackbit to work with your existing workflows.

Publishing

Features

data is an annotation method used to tell Stackbit where model fields are rendered on the page.

data-sb-field-path

data-sb-object-id is an annotation method used to _scope_ an HTML element to a particular data object

data-sb-object-id

React Annotation Utilities

Detailed reference on enabling highlights on HTML elements via annotations.

Annotations

Options available within a single content model definition in Stackbit.

Model Properties

Attributes for fields belonging to a model in Stackbit configuration.

Field Properties

Introduction to configuring your content models for use with Stackbit.

Content Modeling

Technical reference for working with one or more content sources.

Content Sources

Configuration properties that tell Stackbit which framework you're using.

Frameworks

Adding shortcut buttons to the sidebar, linking to on-site and external content

Adding Sidebar Buttons

Technical reference for configuring media asset providers.

Media

Properties that override the default behavior for component presets.

Presets

Specifying initial content to import into your content source when duplicating a repository.

Provisioning Content

Properties that handle how references are handled when creating new documents.

References

Properties that control how the sitemap is populated.

Sitemap

Primary Stackbit configuration file reference (stackbit.config.js) that enables you to customize the visual editing experience for your site.

Configuration

CSI module reference for methods that authorize or check authorization of the CMS user.

Authorization

CSI module reference for methods that provide opportunities to tap into lifecycle events in Stackbit.

Lifecycle Hooks

CSI module reference for methods that describe the content source.

Metadata

CSI module reference for methods that move content from draft to published state in the source.

CSI module reference for methods that read data and schema from the content source.

Read Operations

CSI module reference for safely checking that pending content can be saved in the content source.

Validation

CSI module reference for methods that write data back to the content source.

Write Operations

Reference for implementing instance methods within a CSI module class, grouped by type of operation.

Module Methods

A reference for using and extending TypeScript type definitions within a CSI module class.

Using Typescript

API reference for bringing a custom content via Stackbit's Content Source Interface.

Content Sources Interface

Create a new project from a starter or example using the create-stackbit-app command.

Create Stackbit App

Configuration API reference for page and component presets.

Presets API

Generate and validate stackbit.yaml configuration.

Stackbit CLI

Technical reference for client-side events that Stackbit emits to customize how your site reloads content.

Visual Editor Events

Identify and follow the appropriate method for creating your Stackbit project.

Add New Project

How to add Stackbit to an existing website.

Add Stackbit to Existing Site

Connect a Domain

High-level technical guidance on moving your code and content from Builder.io to a Stackbit-enabled site with a CMS.

Builder.io

High-level technical guidance on moving from Webflow to Stackbit, either all at once, or one page at a time.

Webflow

Migrate your existing website to a modern, Stackbit-enabled site.

Migration Guides

Extract and render all data attributes from a component's properties.

Retrieve Data Attributes

You don't have to ship to production with Stackbit-specific code.

Hide Annotations in Production

Configure a Stackbit project that has a limited view into a larger site.

Limited View Projects

Configure omnichannel capabilities using Stackbit projects.

Multiple Sites for One CMS

A strategy for working around bugs that appear in the branch that content editors use to visually edit their site.

Protecting Editing Environment

Transfer your site's code repository to your GitHub account.

Transfer Code to Your GitHub Account

How to create & use components & models in NPM packages.

Use Packages

Developer Guides

Use Images from Cloudinary

Connecting Accounts

Tutorial

Provisioning

Contentful

Custom

Sanity

Angular

Bring Your Own

Hydrogen

Next.js

Nuxt 3 (Early Preview)

SvelteKit

Web Frameworks

Netlify

Cloudflare Pages

Vercel

Hosting Providers

Integrations

Methods for adjusting code and content in Stackbit.

Invite others to view, edit, and publish changes to your site.

Make visually-stunning landing pages in minutes.

Deploy content changes to your live site.

Create reusable pages and components with the save as preset feature.

Troubleshooting steps when seeing connection errors to content sources.

Content Source Connection Errors

When your development server gets stuck, you have the option to restart.

Restarting Development Server

After initiating a transfer to your GitHub account, you did not receive an email.

Did Not Receive GitHub Repo Transfer Email

Can't see a preview of your site in the visual editor.

Site Preview is Not Loading

Explanation of issues with the SSL certificate for the default deployment.

SSL Certificate Not Working

Addressing the "There is no connection to the stackbit dev process" error.

Browser Connectivity Issues

For local files source, when Stackbit can not match a file to a model.

Does Not Match Any Model

A component added to your site but it isn't editable in the visual page editor.

Component Not Editable

A request to transfer your repo to your GitHub account has a limited lifespan.

GitHub Transfer Expired

What to do if the page doesn't refresh when editing content in Stackbit.

Page Doesn't Refresh

Find Stackbit Project ID

How to set the directory in which Stackbit runs when working locally or in a cloud project.

Setting Runnable Directory

What data is being collected and shared when using Stackbit CLI?