Netlify Create Configuration

Adding Netlify Create's local visual editor application to an existing site takes just a few quick steps.

Install CLI#

Install the Stackbit CLI for Netlify Create, which we'll use to launch the local visual editor application.

npm install -g @stackbit/cli@latest

Run Visual Editor#

With the Next.js development server still running, open a new terminal session to run the visual editor using the CLI's dev command.

stackbit dev

Now, if you visit localhost:8090, you'll see the Next.js site that is also running on port 3000. The application running on port 8090 is a local Netlify Create application that proxies to the development server, and also contains a few assets and routes to facilitate visual editing.

Register Your Project#

One such route is /_stackbit. This will redirect to the authentication process that makes it possible to work with Netlify Create locally.

Open localhost:8090/_stackbit in your browser and create an account. You'll be redirected to a new URL that is unique to your local editing environment. The preview here is the application running on localhost:8090.

Configure Content Source#

Next, we have to add our configuration file to tell Netlify Create how content is stored. First, install a couple development dependencies. (Netlify Create does not require any production dependencies.)

npm install -D @stackbit/cms-contentful @stackbit/types

Then, add a stackbit.config.ts configuration file that specifies the source of content as Contentful. This is the minimum configuration needed to work with this project locally.

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 || 'master',
      previewToken: process.env.CONTENTFUL_PREVIEW_TOKEN!,
      accessToken: process.env.CONTENTFUL_MANAGEMENT_TOKEN!,
    }),
  ],
})

Basic Content Editing#

Notice that the content tab is populated with the content in your Contentful space. This is editable via a two-way content sync.

You can edit in Netlify Create and it will be saved in Contentful. Or you can edit in Contentful, and the new values will be pulled into Netlify Create automatically.