Netlify Docs
Ask Netlify

Contact

Netlify Create /Get started /

Get started with Netlify Create

Welcome to Netlify Create! Let’s get you up and running with a hands-on approach to learning Netlify Create’s core concepts. You’ll be able to take what you learn here to start a new project or bring Netlify Create into an existing site.

Tip

These tutorials are written for developers wanting to evaluate Netlify Create. If you’re more interested in Netlify Create’s editing capabilities, create a cloud project to explore.

# Where to start

  • Scroll down for stack-specific tutorials if you’ve already determined the stack you’re working with.
  • Use the quickstart guide below to add Netlify Create to an existing site.
  • Try the HTML + JSON tutorial if you want to follow a tutorial and don’t have a stack or don’t see your preferred stack.
  • Contact us with questions on any specific stack.

# Quickstart

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

# Prerequisites

  • Content stored in a headless CMS or individual files, separate from code.
  • Structured content defined by a predictable shape or schema in the content source.
  • Read/write access to the content source(s) via an API.

# Get started

Follow the steps below to get Netlify Create working for your site.

Tip

If you don't have an existing site, you can follow a stack-specific tutorial, or use a starter project by running npx create-stackbit-app.

# Run site in development

Your site should be running locally using its development server.

# Set Up Netlify Create visual editor

Install Netlify Create locally on your machine:

npm install -g @stackbit/cli

Start the visual editor from your web project's root directory. Use the --port option to specify your dev server's port (default: 3000).

stackbit dev --port [PORT]

Netlify Create's local visual editor runs on port 8090. If you open localhost:8090, you'll see your site running locally. This is Netlify Create proxying to your local dev server, with a few bells and whistles to make visual editing possible.

Open localhost:8090/_stackbit in your browser to register your local environment and enable the visual editor.

# Configure content source

To tell Netlify Create how to work with your content, add a stackbit.config.ts file in the root of your project with the appropriate configuration.

This typically requires two development dependencies:

Here are a few example configuration files (stackbit.config.ts):

import { ContentfulContentSource } from "@stackbit/cms-contentful";
import { defineStackbitConfig } from "@stackbit/types";

export default defineStackbitConfig({
  stackbitVersion: "~0.6.0",
  contentSources: [
    new ContentfulContentSource({
      spaceId: process.env.CONTENTFUL_SPACE_ID!,
      environment: process.env.CONTENTFUL_ENVIRONMENT!,
      previewToken: process.env.CONTENTFUL_PREVIEW_TOKEN!,
      accessToken: process.env.CONTENTFUL_MANAGEMENT_TOKEN!
    })
  ]
});

import { defineStackbitConfig } from "@stackbit/types";
import { DatoCMSContentSource } from "@stackbit/cms-datocms";

export default defineStackbitConfig({
  stackbitVersion: "~0.6.0",
  contentSources: [
    new DatoCMSContentSource({
      apiToken: process.env.DATOCMS_API_TOKEN!,
      projectId: process.env.DATOCMS_PROJECT_ID!
    })
  ],
  modelExtensions: [{ name: "page", type: "page", urlPath: "/{slug_field}" }]
});

import { defineStackbitConfig } from "@stackbit/types";
import { GitContentSource } from "@stackbit/cms-git";

export default defineStackbitConfig({
  stackbitVersion: "~0.6.0",
  contentSources: [
    new GitContentSource({
      rootPath: __dirname,
      contentDirs: ["content"],
      models: [
        // ...
      ],
      assetsConfig: {
        referenceType: "static",
        staticDir: "public",
        uploadDir: "images",
        publicPath: "/"
      }
    })
  ]
});

import { SanityContentSource } from '@stackbit/cms-sanity'
import { defineStackbitConfig } from '@stackbit/types'

export default defineStackbitConfig({
  stackbitVersion: '~0.6.0',
  contentSources: [
    new SanityContentSource({
      rootPath: __dirname,
      studioPath: path.join(__dirname, 'studio'),
      studioUrl: '',
      projectId: process.env.SANITY_PROJECT_ID!,
      token: process.env.SANITY_ACCESS_TOKEN!,
      dataset: process.env.SANITY_DATASET || 'production',
    }),
  ],
}

# Customize the editing experience

That's enough to get Netlify Create working with your content, but there's much more to explore to customize your editing environment for your team.

This is typically what developers explore next:

As you progress, there are more advanced features to consider:

# Available tutorials

Here are a list of available tutorials. Contact us with questions or feedback along your journey.

  • Gatsby + Contentful: learn the basics of Netlify Create with Gatsby as the site framework and Contentful as the content source.
  • HTML + Contentful: learn the basics of Netlify Create with a basic HTML site using Contentful as the content source.
  • HTML + JSON: learn the basics of Netlify Create with a basic HTML site using JSON files to store content.
  • Next.js + Contentful: learn the basics of Netlify Create with Next.js as the site framework and Contentful as the content source.
  • Next.js + Markdown: learn the basics of Netlify Create with Next.js as the site framework and Markdown files as the content source.