How it works
This is a small body copy, needed for more dense components or for when the text needs less focus This is a small body copy, needed for more dense components or for when the text needs less focus.
Bullet point
Bullet point
Bullet point
Developers
Add Visual Editing to
Your Modern Website
- No refactoring, no extra API calls
- Keep building your way: your tools, your stack, your local machine
- Stackbit spins up an isolated container that runs your site's development server as a live preview that content editors can visually edit online
Title
👋 Hi there, try editing me
// Component.js
<h1 data-sb-field-path=".title">{title}</h1>
// Content.json
{
title: 👋 Hi there, try editing me
}
// Schema.yaml
- type: string
name: title
label: Title
Git CMS
Headless CMS
Structured Content You Fully Own
Stackbit allows your content editors to visually edit structured content, while you focus on coding the components that render that content.
The content can be anything from strings rendered as text by your components to logical values dictating what components to use and how to render them, and can be driven by various sources:
A headless CMS: Models are loaded from the CMS, fine-grained permissions & validations and more
Flat files in Git: Models are simply YAML files, content is Markdown or JSON - all in the same repo
Custom sources: we also support any data from your database, an Airtable, e-commerce catalogs, etc
Visual Editing With Minimal Annotations
Add HTML data attributes to your pages to tell the visual editor where objects and fields are found on the page. It's as simple as:
<h1 data-sb-field-path=".title">{title}</h1>No proprietary components or libraries needed
No need to register or wrap components as other site builders and CMS do
Annotations appear only in the editor so your production code stays clean
Controling both annotations and content models, you can decide which components can be affected by editors
This is the badge
Featured Items
The section subtitle
Get started
This is a small body copy, needed for more dense components or for when the text needs less focus This is a small body copy, needed for more dense components or for when the text needs less focus.
Bullet point
Bullet point
Bullet point
Join the community
This is a small body copy, needed for more dense components or for when the text needs less focus This is a small body copy, needed for more dense components or for when the text needs less focus.
Bullet point
Bullet point
Bullet point
Everything you need
Development and Editorial Workflows
Bring Your Stack
Any Node-based stack works, SSG, SSR, or client-side rendering. Most of our examples are built with Next.js, React & Tailwind,
Use your favorite component library and CSS framework
Develop locally with your favorite IDE
When your code is ready, merge and push the code to the preview branch. Our cloud-based visual editor picks up code changes automatically.
We Run Your Code
Stackbit runs your code to render your site's editable preview:
Launches an isolated container on our cloud servers
Clones your site's git repository
Installs your site's dependencies
Runs your site's development server
Loads that server in an
<iframe>in our UI
Own Your Content
Stackbit doesn't store your content.
Stackbit reads and writes content to and from your CMS or files in git directly
Changing content in Stackbit updates it instantly in the CMS or in git
Any content changes made in the CMS or in git updates Stackbit's preview instantly via webhooks or server listeners
When editors Publish. We publish to the CMS, and your CI/CD picks up the changes and deploys
Learn
What's different about Stackbit?
You write code like you're used to
Your code with Stackbit looks almost the same as without.
Contrast this to the competition - which requires that you use their own components and APIs in your code.
Your production site doesn't call us.
Whether your website is static or dynamic- you production site does not need to call any Stackbit API.
Meaning, no added points of failure or latency to your live site. No pageview-based billing.
Structured content, not blobs.
Some tools support headless CMS by storing an opaque blobs of data.
We use the content model of the CMS, so permissions, validations and workflows work as they should.
Try it
Show me
Enough said, let's see some demos and read some code.
The full-fledged starter
A realistic example site with a plethora of components & presets.
The dynamic example app
Onboarding wizards, login with OAuth, DB access with API routes, daisyUI - all here.
The search experience
Search Jamstack themes with Algolia + incremental static generation with Next.js.
The developer's personal site
Full theme for a developer's personal website, with a bold style.
Questions from the field