Welcome to Stackbit!

Get started by adding Stackbit to your project or following one of our stack-specific tutorials.

Prefer learning with a video?
Watch Introduction to Stackbit to get started.

What is Stackbit?

Stackbit is a visual experience platform for building and operating enterprise websites, designed for teams working with a decoupled architecture.

Key Features

  • Content Source Interface: An engine that makes content from any source editable with Stackbit.
  • No Production Dependencies: All required packages can be installed as development dependencies. You do not need to use Stackbit in production.
  • Visual Editing: Your site runs in a preview window inside Stackbit. Content changes are reflected immediately in the preview.
  • Two-Way Content Sync: Stackbit also listens for changes from content sources and updates the preview immediately.
  • Inline Editing: In addition to traditional form fields, Stackbit makes it possible for editors to change content by clicking directly on elements in the preview window.

Prerequisites

  • Content stored in a headless CMS or individual files, separate from code.
  • Structured content defined by a predictable shape or schema in the content source.
  • Read/write access to the content source(s) via an API.

Getting Started

Follow the steps below to get Stackbit working for your site.

If you don't have an existing site, you can follow a stack-specific tutorial, or use a starter project by running npx create-stackbit-app.

Run Site in Development

Your site should be running locally using its development server.

Set Up Stackbit Visual Editor

Install Stackbit locally on your machine:

  • 1
npm install -g @stackbit/cli

Start the visual editor from your web project's root directory. Use the --port option to specify your dev server's port (default: 3000).

  • 1
stackbit dev --port [PORT]

Stackbit's local visual editor runs on port 8090. If you open localhost:8090, you'll see your site running locally. This is Stackbit proxying to your local dev server, with a few bells and whistles to make visual editing possible.

Open localhost:8090/_stackbit in your browser to register your local environment and enable the visual editor.

Configure Content Source

To tell Stackbit how to work with your content, add a stackbit.config.ts file in the root of your project with the appropriate configuration.

This typically requires two development dependencies:

Here are a few example configuration files (stackbit.config.ts):

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
import { ContentfulContentSource } from '@stackbit/cms-contentful'
import { defineStackbitConfig } from '@stackbit/types'

export default defineStackbitConfig({
  stackbitVersion: '~0.6.0',
  contentSources: [
    new ContentfulContentSource({
      spaceId: process.env.CONTENTFUL_SPACE_ID!,
      environment: process.env.CONTENTFUL_ENVIRONMENT!,
      previewToken: process.env.CONTENTFUL_PREVIEW_TOKEN!,
      accessToken: process.env.CONTENTFUL_MANAGEMENT_TOKEN!,
    }),
  ],
})

Customize the Editing Experience

That's enough to get Stackbit working with your content, but there's much more to explore to customize your editing environment for your team.

This is typically what developers explore next:

As you progress, there are more advanced features to consider:

Learn How Stackbit Works

If you want a deeper understanding of how Stackbit works, dig into our concept guides:

Frequently-Asked Questions

These are the questions we get asked most often for folks who are just getting started with Stackbit.

What frameworks are supported?

Local development will support any framework that runs on a local port. Cloud projects are run within a Node-based environment by default, but can be customized.

Enabling automatic content reloading may require a little more code in some frameworks. See framework integration guides for specific cases.

What content sources are supported?

Content Source Interface (CSI) supports any structured content source with read and write abilities via an API.

Today, we have production-ready CSI modules for Contentful and Sanity. If you need a specific content source, you can build your own CSI module or contact us for support.

What code hosting platforms are supported?

The Stackbit App can support any code hosting service. Cloud projects default to GitHub as the code host.

If your code is hosted on-premise, the Stackbit App can support it by connecting to it with read-only permissions or via an isolated and secure container running on Stackbit’s cloud.

What hosting platforms are supported?

Stackbit is typically not involved in production. Therefore, you can deploy and host your code anywhere you'd like.

Stackbit can also be configured to automatically create a Netlify site when creating a new cloud projects.

What if a tool in my stack isn't supported?

In many cases, it may appear that your tool isn't supported, but there is often a clear path to support:

  • It may actually work even if we haven't explored it. We try to design and build as generically as possible.
  • There may be a workaround or you may have to write a bit of custom code to integrate the tool.
  • A tool may not work in a cloud project, but does in local development. This is typically a matter of us working with you to adjust the cloud environment.

Stackbit is focused on composability and expanding our integrations. We're typically open to adding any new integration. We prioritize new integrations based on customer demand.

If your tool isn't supported, get in touch. We may already be working on official support.


We hope you♥️working with Stackbit!