Hide Annotations in Production

Quickstart

Learn the basics of Stackbit with Gatsby as the site framework and Contentful as the content source.

Gatsby + Contentful

Learn the basics of Stackbit with a basic HTML site using Contentful as the content source.

HTML + Contentful

Learn the basics of Stackbit with a basic HTML site using JSON files to store content.

HTML + JSON

Project Setup

Stackbit Config

Page Editing

Inline Editing

Additional Capabilities

Next.js + Contentful

Learn the basics of Stackbit with Next.js as the site framework and Markdown files as the content source.

Next.js + Markdown

Tutorials

Getting Started

Overview

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

Integrate analytics reporting into Stackbit's editing environment.

Analytics

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

Automatic Content Reload

Eject from a content source's default asset storage mechanism.

Asset Sources

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

Access Control

Environment and setup details for Stackbit cloud project containers.

Cloud Container

Create a Stackbit cloud project from existing GitHub repositories.

Create from GitHub

How Stackbit cloud projects interact with branches in your remote Git repository.

Git Branching

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

Managed Hosting

See and share changes in a cloud project before they go to production.

Previewing

Customize Stackbit to work with your existing workflows in a cloud project.

Publishing

Working in a collaborative visual editing environment.

Cloud Project

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


Content Presets

An introduction to using the Content Source Interface (CSI)

Custom Content Sources

Bring custom behavior and content transformations by hooking into Stackbit's document lifecycle methods.

Document Hooks

Handling forms and form submissions in Stackbit.

Forms

Enable content editors to set site-wide styling options.

Global Styles

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

Make personalized content editable in Stackbit.

Personalization

Populate the sitemap navigator and use it for navigating website pages.

Sitemap Navigator

Browser-embedded text editor that saves and automatically commits changes.

Code Editor

Traditional CMS form-based editing, with the ability to edit content within page and data models.

Content Editor

Controlling how form fields are displayed for content editors.

Field Controls

Tidying up form fields into tabbed groups.

Field Groups

Highlights around elements in the preview that enable direct, in-place editing.

Editing panel that changes based on the context of the current page in the preview.

Page Editor

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

Sidebar Buttons

Methods for adjusting code and content in Stackbit.

Visual Editing

Features

Detailed reference on enabling highlights on HTML elements via annotations.

Annotations

Configuration properties that after tasks run by the container in a cloud project.

Container

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 affect individual document objects.

Documents

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

Frameworks

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

Customize sidebar navigation in Stackbit's visual editor.

Sidebar

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

The init method is responsible for initializing the content source instance.

init

The getVersion method is responsible for returning the versions of both the content source module and the content source interface that it implements.

getVersion

The getContentSourceType method returns the unique type of the content source module.

getContentSourceType

The getProjectId method is responsible for returning a unique identifier for the content source instance among other instances of the same type.

getProjectId

The getProjectManageUrl method is responsible for returning the URL address of the web-based management application of the content source for the current project.

getProjectManageUrl

The getSchema method is responsible for returning models and locales in Stackbit format.

getSchema

The getDocuments method is responsible for returning documents in Stackbit format.

getDocuments

The getAssets method is responsible for returning assets in the Stackbit format.

getAssets

The startWatchingContentUpdates method is responsible for initiating the monitoring of content and schema changes within the content source.

startWatchingContentUpdates

The stopWatchingContentUpdates method is responsible for stopping the content source from monitoring any changes to the content and schema.

stopWatchingContentUpdates

The onWebhook method is responsible for handling content source webhooks and update the Stackbit cache.

onWebhook

The onFilesChange method is responsible for handling file changes and update the Stackbit cache.

onFilesChange

The hasAccess method is responsible for checking whether the current user has the necessary permissions to update the content in the underlying content source.

hasAccess

The createDocument method is responsible for creating a document in the underlying content source.

createDocument

The updateDocument method is responsible for updating a document in the underlying content source.

updateDocument

The deleteDocument is responsible for deleting a document from the underlying content source.

deleteDocument

The uploadAsset method is responsible for handling the upload of an asset to the underlying content source.

uploadAsset

The validateDocuments method is responsible for validating documents.

validateDocuments

The publishDocuments method is responsible for publishing documents in the underlying content source.

publishDocuments

The reset method is responsible for resetting the internal state of the content source instance.

reset

The destroy method is responsible for destroying the content source instance.

destroy

Interface Methods

Stackbit managed cache for documents, assets and schema originally provided by the content source modules.

Cache

CSI generic types for extending the cached data

Generics

The Typescript definition of the Stackbit Document type

Document

The Typescript definition of the Stackbit Asset type

Asset

Examples

An interface between a content source and Stackbit's visual editor allowing bi-directional content synchronization.

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

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.

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.