How Netlify Create Works
Walk through the core concepts of how Netlify Create works by following a developer's typical journey.
Understanding how Netlify Create works is easiest when we follow a developer's typical journey, where each step builds on concepts and practices from those before it.
There are two working modes in Netlify Create — local development and cloud projects.
Starting with Local Development
Developers typically start by working locally to build out a visual editing experience to suit their project's needs, while collaborating with content editors occurs in a cloud project, which is covered near the end of this guide.
Netlify Create Development Server
Working locally with Netlify Create is made possible by using the CLI. The
stackbit dev command runs in parallel with your site's development server to create a visual editing environment that enables developers to prepare a site before bringing in content editors.
Netlify Create is fully composable, which means that most content sources and site frameworks can be supported (with varying levels of required configuration).
Although Netlify Create services a large variety of sites, the one thing all sites have in common — what we consider to be the sole prerequisite — is that content must be structured and separated from code. We think of this as having a content-driven architecture.
For Netlify Create to be able to empower editors to change content, that content must be structured, which means it has a predictable shape, as defined by a content schema.
Netlify Create will inherit content schema when it is defined in the source. When Netlify Create can't infer the schema (e.g. file-based content), you must provide a schema definition through the Netlify Create configuration.
Netlify Create Configuration
Netlify Create's behavior for any given project is controlled by the configuration file,
stackbit.config.js|ts. Configuration is how Netlify Create knows how to retrieve and store content, which content models represent pages, how editing features should work, and so on.
Connecting Content Sources
Perhaps the most critical configuration property is identifying the source(s) of a site's content, which is (usually) done through the
contentSources config property.
Each content source implements Netlify Create's Content Source Interface, the mechanism that enables two-way content sync between Netlify and the source.
Once a site is properly configured, its content can be immediately edited through Netlify Create.
Two-Way Content Sync
One of the most powerful capabilities of Netlify Create is its two-way content synching mechanism, which provides the ability to:
- Make changes from Netlify Create that get saved back to the content source.
- Update content in Netlify Create when changes are made directly at the source.
- Automatically update the site preview when content changes have been made.
Traditional CMS Editing
When a content source is properly configured, all the models within source will be available to edit within Netlify Create's content editor panel.
When working with content from a headless CMS, this requires no additional configuration, as Netlify Create can automatically detect content models and fields from the CMS.
Basic Page Editing
To be able to edit with the page editor panel, you must tell Netlify Create which models represent pages. This is typically done through the
Editing can then be taken to the next level by enabling editing to click on elements in the preview and make the changes inline. This is made possible by annotating components by adding specific data attributes to inform Netlify Create how the structure of your content maps the elements in the DOM.
As powerful as inline editing is, it's made even more powerful when content editors can reuse content. Although there are multiple ways to do this, Netlify Create's content presets feature tends to boost editors' productivity the most.
When it comes time to bring content editors into your project, you can create a new cloud project and begin inviting others. This is typically done by importing a GitHub repository into Netlify Create, which kicks off a few other processes.
When first creating a cloud project, Netlify Create provisions services based on your site and configuration. While many of your services will already be configured, Netlify Create does the following:
- Production Site: Netlify Create deploys your site to a
[site].stackbit.appsite on Netlify, unless your organization is configured to skip this step.
- Container: Netlify Create creates a container that powers the editing experience for your site. This replaces
stackbit dev, used when working locally.
Once editors have been added to the Netlify Create project, they can begin publishing content to production. This process can also be customized, though it is through the project settings.
This concludes the overview on how Netlify Create works. Here are a few suggestions on what to do next.
Getting Started Tutorial
Follow the getting starter tutorial if you haven't. This provides a quick way to put some of these concepts into action.
We've covered a lot of the basics, but there are other features and concepts to explore.