Web Frameworks

Integrating Stackbit with Web Frameworks

Stackbit is not framework-specific in any way, and does not require using framework-specific libraries. Rather, it has certain requirements that websites built with virtually all modern frameworks can satisfy.

It's highly recommend to read How Stackbit Works before diving further. In this article we assume that you're up to speed on content-driven development and working modes (local development vs. a hosted Stackbit project).


Making your site editable

To run in any environment, including local development, you need the following:

  1. A valid configuration file (reference). Make sure to specify which content models represent pages, and what is their URL path.
  2. Support for Content Reload (guide). This typcailly requires adding code to your site. See specific framework guides for
  3. [Optional] Annotations: HTML data attributes marking where in the page content objects and their fields are found. Annotations enable visual highlighting in the editor.

When content changes are made by anyone, Stackbit detects the change automatically. Then, gracefully reloading on-page content without a full-page reload is essential for the user experience.

Reloading can be handled by the visual editor in "fully-automatic" mode for certain frameworks (currently Next.js, Angular and Gatsby). For other frameworks, your website's code should implement a listener on content change events and efficiently refresh the page contents. These events are only fired when working with the visual editor - your production site is never affected.

In each of the framework guides below we link to a concrete code example and explain how content reload was implemented in it.

Configuring how to run your website

When you create a hosted Stackbit Project (either by choosing a starter or importing an existing repository), Stackbit runs your website in a cloud-based container. Inside that container, we run your site's server.

Your website server should be run in your web framework's development mode, in which any code changes trigger a refresh and any statically-generated pages can be re-created on content changes.

For a few frameworks (currently Next.js, Angular and Gatsby) the needed configuration is all set by default. For others, see the guide to bringing your own framework.

Configuring how to deploy your live website

If you're using Managed Hosting you also need to include a Netlify configuration file netlify.toml in your repository. All starters & examples include this file.

Framework-specific notes