Welcome to Stackbit! Let's get you up and running with a hands-on approach to learning Stackbit's core concepts. You'll be able to take what you learn here to unlock in-context visual editing for your site on your stack.

This tutorial is written for developers wanting to evaluate Stackbit for enterprise websites. If you are a content editor, we suggest creating a site to explore the editing experience.

Learning Format and Tutorial Goals

This tutorial presents a series of lessons, designed to teach you Stackbit's core concepts hands-on.

After choosing your stack and setting up the example project, each lesson will build on the previous, before wrapping the tutorial with advice on continuing development, in which we suggest you begin adding Stackbit into your site.

If you'd prefer to get an overview of the concepts before starting, we recommend reading How Stackbit Works.

Required Understanding

Being successful with Stackbit requires that you understand modern web development best practices, including the following:

  • Storing content separate from code, either in files (Markdown, JSON, YAML) or an API-based CMS (Contentful, Sanity, Notion).
  • Structuring front-end applications using component frameworks (React, Vue, Svelte).
  • Working with site frameworks (Next.js, Nuxt, SvelteKit), which provide routing capabilities atop one or more component frameworks.
  • Some experience with both Git and GitHub.

If you do not feel comfortable with these concepts, join the community or send us a message to ask advice on the best way to acquire prerequisite knowledge.

Bring Your Own Stack

Stackbit is stack-agnostic, which means you can integrate Stackbit with any content source or site framework of your choosing.

We'll be using Next.js with a limited number of content sources to keep this tutorial simple and focused. You'll choose your content source below before starting the tutorial. If you want to learn more about frameworks and sources not mentioned, please contact sales.

Getting Help and Providing Feedback

If you already have a contact at Stackbit, great! Send them a message if you get stuck, have questions, or want to provide feedback along the way.

Otherwise, you can join our Discord community and local the appropriate channel for your message.

Let's Begin!

Okay, that's enough housekeeping. Let's get started! Choose your preferred stack (or contact sales for additional options).

If you can't choose or don't know, use Next.js + Markdown. It's the easiest to set up and fastest way to get started.