What is Stackbit?

How Stackbit Works

Content-Driven Development

Reusable Content

Structured Content

Two-Way Content Sync

Concepts

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.

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

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

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

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

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

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)

Content Sources

Integrate workflow, automation and other other custom tasks into the visual editor.

Custom Actions

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

Provide content editors with the ability to adjust preview context without editing content.

Preview Controls

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

Sitemap Navigator

Representing site content within a controlled, hierarchical view in the content editor.

Tree View

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

Create custom controls for fields in the page and content editors.

Custom Fields

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

Labels that note the current state of a document in the content source.

Status Labels

Methods for adjusting code and content in Stackbit.

Visual Editing

Features

Detailed reference on enabling highlights on HTML elements via annotations.

Annotations

Configuration for custom tasks that can be triggered by content editors.

Actions

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.

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

Customize the preview experience for your site.

Previews

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 navigation features are populated.

Navigation

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

The getScheduledActions method is responsible for retrieving scheduled publish events from the content source

getScheduledActions

The createScheduledAction method creates a new scheduled event in the content source.

createScheduledAction

The cancelScheduledAction method cancels a previously-scheduled event in the content source.

cancelScheduledAction

The updateScheduledAction method changes the schedule for a previously-scheduled event.

updateScheduledAction

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

The Typescript definition of the Stackbit ScheduledAction type

ScheduledAction

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

Client-side configuration for bringing custom field controls to the Stackbit visual editor.

Control Hooks

Methods for hooking into the Stackbit visual editor through front-end JavaScript.