Builder.io

Webflow

Migration Guides

Learn how Netlify Create can improve the way you edit and develop your site.

Netlify Create Overview

Get started by adding Netlify Create to your project or following one of our stack-specific tutorials.

Quickstart

Learn the basics of Netlify Create with Gatsby as the site framework and Contentful as the content source.

Gatsby + Contentful

Learn the basics of Netlify Create with a basic HTML site using Contentful as the content source.

HTML + Contentful

Learn the basics of Netlify Create with a basic HTML site using JSON files to store content.

HTML + JSON

Project Setup

Config

Page Editing

Inline Editing

Additional Capabilities

Next.js + Contentful

Learn the basics of Netlify Create with Next.js as the site framework and Markdown files as the content source.

Next.js + Markdown

Tutorials

Getting Started

Overview

How Netlify Create fits into your modern web stack.

What is Netlify Create?

Walk through the core concepts of how Netlify Create works by following a developer's typical journey.

How Netlify Create Works

Empowering non-technical editors to make structural changes to a website without the help of a developer.

Content-Driven Development

Help content editors work faster by providing a starting point for content.

Reusable Content

How Netlify Create works with structured content, along with content modeling basics.

Structured Content

Netlify Create stores content back to the appropriate source, while also listening for changes from each source.

Two-Way Content Sync

Concepts

Integrate analytics reporting into Netlify Create's editing environment.

Analytics

Learn how Automatic Content Reload works and how you can customize it.

Automatic Content Reload

Eject from a content source's default asset storage mechanism.

Asset Sources

Manage user roles and permissions by inheriting from third-party services or setting custom rules.

Access Control

Environment and setup details for Netlify Create cloud project containers.

Cloud Container

Create a Netlify Create cloud project from existing GitHub repositories.

Create from GitHub

How Netlify Create cloud projects interact with branches in your remote Git repository.

Git Branching

Use or eject from Netlify Create's out-of-the-box deployment strategy.

Managed Hosting

See and share changes in a cloud project before they go to production.

Previewing

Customize Netlify Create to work with your existing workflows in a cloud project.

Publishing

Working in a collaborative visual editing environment.

Cloud Project

Define content variations that editors can use to quickly create new pages and components.


Content Presets

An introduction to using the Content Source Interface (CSI)

Content Sources

Integrate workflow, automation and other other custom tasks into the visual editor.

Custom Actions

Bring custom behavior and content transformations by hooking into Netlify Create's document lifecycle methods.

Document Hooks

Handling forms and form submissions in Netlify Create.

Forms

Enable content editors to set site-wide styling options.

Global Styles

Develop and test your site in your local development environment.

Local Development

Manage localized content by editing from the content source or extending with Netlify Create.

Localization

Make personalized content editable in Netlify Create.

Personalization

Provide content editors with the ability to adjust preview context without editing content.

Preview Controls

Populate the sitemap navigator and use it for navigating website pages.

Sitemap Navigator

Representing site content within a controlled, hierarchical view in the content editor.

Tree View

View and restore previous versions of documents for content sources that support version control.

Version Control

Browser-embedded text editor that saves and automatically commits changes.

Code Editor

Traditional CMS form-based editing, with the ability to edit content within page and data models.

Content Editor

Create custom controls for fields in the page and content editors.

Custom Fields

Controlling how form fields are displayed for content editors.

Field Controls

Tidying up form fields into tabbed groups.

Field Groups

Highlights around elements in the preview that enable direct, in-place editing.

Editing panel that changes based on the context of the current page in the preview.

Page Editor

Adding shortcut buttons to the sidebar, linking to on-site and external content

Sidebar Buttons

Labels that note the current state of a document in the content source.

Status Labels

Methods for adjusting code and content in Netlify Create.

Visual Editing

Features

Detailed reference on enabling highlights on HTML elements via annotations.

Annotations

Configuration for custom tasks that can be triggered by content editors.

Actions

Configuration properties that after tasks run by the container in a cloud project.

Container

Options available within a single content model definition in Netlify Create.

Model Properties

Attributes for fields belonging to a model in Netlify Create configuration.

Field Properties

Introduction to configuring your content models for use with Netlify Create.

Content Modeling

Technical reference for working with one or more content sources.

Configuration properties that affect individual document objects.

Documents

Configuration properties that tell Netlify Create which framework you're using.

Frameworks

Technical reference for configuring media asset providers.

Media

Properties that override the default behavior for component presets.

Presets

Customize the preview experience for your site.

Previews

Specifying initial content to import into your content source when duplicating a repository.

Provisioning Content

Properties that handle how references are handled when creating new documents.

References

Customize sidebar navigation in Netlify Create's visual editor.

Sidebar

Properties that control how navigation features are populated.

Navigation

Primary Netlify Create configuration file reference (stackbit.config.js) that enables you to customize the visual editing experience for your site.

Configuration

The init method is responsible for initializing the content source instance.

init

The getVersion method is responsible for returning the versions of both the content source module and the content source interface that it implements.

getVersion

The getContentSourceType method returns the unique type of the content source module.

getContentSourceType

The getProjectId method is responsible for returning a unique identifier for the content source instance among other instances of the same type.

getProjectId

The getProjectManageUrl method is responsible for returning the URL address of the web-based management application of the content source for the current project.

getProjectManageUrl

The getSchema method is responsible for returning models and locales in Netlify Create format.

getSchema

The getDocuments method is responsible for returning documents in Netlify Create format.

getDocuments

The getAssets method is responsible for returning assets in the Netlify Create format.

getAssets

The startWatchingContentUpdates method is responsible for initiating the monitoring of content and schema changes within the content source.

startWatchingContentUpdates

The stopWatchingContentUpdates method is responsible for stopping the content source from monitoring any changes to the content and schema.

stopWatchingContentUpdates

The onWebhook method is responsible for handling content source webhooks and update the Netlify Create cache.

onWebhook

The onFilesChange method is responsible for handling file changes and update the Netlify Create cache.

onFilesChange

The hasAccess method is responsible for checking whether the current user has the necessary permissions to update the content in the underlying content source.

hasAccess

The createDocument method is responsible for creating a document in the underlying content source.

createDocument

The updateDocument method is responsible for updating a document in the underlying content source.

updateDocument

The deleteDocument is responsible for deleting a document from the underlying content source.

deleteDocument

The uploadAsset method is responsible for handling the upload of an asset to the underlying content source.

uploadAsset

The validateDocuments method is responsible for validating documents.

validateDocuments

The publishDocuments method is responsible for publishing documents in the underlying content source.

publishDocuments

The reset method is responsible for resetting the internal state of the content source instance.

reset

The destroy method is responsible for destroying the content source instance.

destroy

The getScheduledActions method is responsible for retrieving scheduled publish events from the content source

getScheduledActions

The createScheduledAction method creates a new scheduled event in the content source.

createScheduledAction

The cancelScheduledAction method cancels a previously-scheduled event in the content source.

cancelScheduledAction

The updateScheduledAction method changes the schedule for a previously-scheduled event.

updateScheduledAction

The getDocumentVersions method enables version control and returns a list of document versions.

getDocumentVersions

The getDocumentForVersion method retrieves a document version when version control is enabled and the versions list doesn't provide documents.

getDocumentForVersion

Interface Methods

Netlify Create managed cache for documents, assets and schema originally provided by the content source modules.

Cache

CSI generic types for extending the cached data

Generics

The Typescript definition of the Netlify Create Document type

Document

The Typescript definition of the Netlify Create DocumentVersion type

DocumentVersion

An interface between a content source and Netlify Create's visual editor allowing bi-directional content synchronization.