When you create a new project in Stackbit, here's what you get.
First, a new Git repository gets created in GitHub, with a copy of the theme you selected.
To simplify the process, this repository is created in our account by default, but you're encouraged to transfer it to your own account using Project Settings in the visual editor. Once you connect your GitHub account, any new repository will be created in your account.
The repository has two branches:
previewis the branch our UI shows you. All edits made in the UI are automatically committed and pushed into this branch.
mainbranch is what the live website is built from. Stackbit provides default hosting automatically in all plans, so by the time the site is created and you get into the studio the website is already being deployed live. But let's not get ahead of ourselves just yet: we'll go over this later in Publishing & Deployment.
When a new project is created, both branches point to the same initial commit.
So, what's actually inside that repository?
Websites created with Stackbit are based on Next.js.
Next is as cutting edge a framework as they come: it offers both Static Site Generation (SSG) and Server Side Rendering (SSR), and automatically applies a whole set of performance optimizations to your website. Since it's based on React, you can also add any dynamic client-side logic with a familiar syntax. Here's a bit more on why we chose it.
We've also pre-configured Next.js to use Tailwind CSS (and here are some reasons why). The components we provide with our themes are based on Tailwind as well, but you're free to bring your own CSS framework and components.
Everything in Stackbit is based on content: the site configuration and global styles, the data that's powering all pages and their visual layout - basically everything.
The content model defines the structure of data that's passed to visual components for rendering, and instructs our visual editor on how to tailor the editing experience for each component and field.
All our themes are based on the same content model, but each comes with its own content. It is that content which dictates which pages come with the theme, their content, and the theme's unique look and feel.
Content is stored as files in the same Git repository as your code, so no external database of any sort is needed. Your project is already set up to load content from the Git repository via Sourcebit. Sourcebit comes with a plugin architecture for connecting to other data sources, or you can fully bring your own data layer.
To learn more about our themes and how they tie content models, content items and project configuration together, see How Themes Work.
All our themes come with a set of components. You can use them as-is, extend and tweak them in any way - or fully replace them with your own library (whether based on Tailwind or not).
Each component is a functional React component that receives content (i.e. an instance of a specific content model) and renders it, adding special HTML data attributes called annotations which let the visual editor know which content item is being rendered, and what element is rendering each field. We'll got a bit deeper into that in a bit. To learn more on components, see here.
Next up: now that we have a code repository, how does the project run inside our visual editor?