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
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
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.
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
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
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.
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.
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.
Enough said, let's see some demos and read some code.
A realistic example site with a plethora of components & presets.
Onboarding wizards, login with OAuth, DB access with API routes, daisyUI - all here.
Search Jamstack themes with Algolia + incremental static generation with Next.js.
Full theme for a developer's personal website, with a bold style.
A quick glossary of important concepts and terms related to modern websites and apps.