Welcome to Stackbit!

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.

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:

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).

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:

• @stackbit/types: For TypeScript support and easier configuration option discoverability.
• @stackbit/cms-[...]: For configuring a specific content source. See supported content source integrations, or send us a message if you don't see your preferred source listed.

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

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:

• Enable the sitemap navigator and basic page editing
• Create content presets for more productive content editing
• Extend a field type with content modeling
• Unlock inline editing to make changes directly in the preview

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

• Localization
• When your ready to onboard your business users, create a cloud project to enable collaboration and publishing
• Control access to content, including managing custom roles

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!