Skip to content
Share your own guide
September 27, 2022

[Architecture] Stackbit + Sanity: architecture overview

By Andrew Kumar

In this guide, we'll cover 4 significant capabilities Stackbit brings to the ecosystem with Sanity (and other headless sources like Cloudinary and Ninetailed).

First is a live preview, the ability to see how your website or app looks in a development environment from your codebase.

Second is edit in context, the ability to quickly make changes to your Sanity content on the live-preview, or "on-the-glass," enabling speed for content operators to create, approve, and iterate incredibly fast.

Third is local development, enabling incredible flexibility for developers to write code and preview in the Stackbit container, make content changes, and collaborate effectively with other developers, content ops, marketing, and a broader web team. Preview, write, iterate, together, better.

Fourth is a flexible deployment process on publishing events, powered by Stackbit using Sanity or GitHub webhooks.

Here is an architecture and flow diagram describing the processes, flow, and architecture of how Stackbit works with Sanity for visual experience composition.

Stackbit & Sanity architecture flow diagram showing processes for preview, editing, development, and deployment.

Resources and further reading

How Stackbit Works

  1. Detailed conceptual guide: How Stackbit Works

Headless live preview docs

  1. Collaboration: Previewing & Sharing
  2. Automatic Content Reload

Edit content, build pages in context docs

  1. Building Landing Pages
  2. Global Styles
  3. Content Editor

Development docs

  1. create-stackbit-app
  2. stackbit.yaml
  3. Local Development with Stackbit
  4. Create from GitHub
  5. Use Packages from NPM

Deployment docs

  1. Publishing Changes
  2. Managed Hosting

Stackbit Web Framework Support

Next.js

Many of our starters & examples are based on Next.js, as it's quickly becoming the framework of choice for many companies, from SMBs to the enterprise. Next.js allows developers to use client-side, server-side or static rendering as needed, all within the same project. Stackbit is agnostic of these modes.

Learn more: Next.js | Stackbit Docs

Angular

Angular has deep usage with our enterprise customer base, is built on Typescript, and is component-based for web applications with libraries that cover many common development needs for scale.

Learn more: Angular | Stackbit Docs

SvelteKit

SvelteKit is an up-and-coming framework gathering enthusiastic support. However, at the time of writing, SvelteKit is still in beta and breaking changes are expected and indeed released from time to time.

Learn more: SvelteKit | Stackbit Docs

Nuxt 3

Nuxt 3 is still in Release Candidate status at the time of writing. When upgrading to a newer version of Nuxt 3, some code changes may be necessary.

Learn more: Nuxt 3 (Early Preview) | Stackbit Docs

Hydrogen

Shopify's Hydrogen is a relatively new project at the time of writing. It heavily utilizes React Server Components, a feature still under development by the React core team.

Learn more: Hydrogen | Stackbit Docs

Categorized in

Get started with Sanity

Other guides by author

[Docs] Sanity visual authoring, editing, and page building by Stackbit.

Learn how Content Ops and Marketers using Sanity can get full DXC (Digital Experience Composition) capabilities like live previews, in-context ("on-the-glass") editing, component library, page assembly, and page templates.

docs.stackbit.com