Storyblok Raises $80M Series C - Read News

Skip to main content

Creating Field Plugins


On May 13th, 2024, Storyblok started gradually rolling out a new design for its Visual Editor. Therefore, the Visual Editor product screenshots depicted in this resource may not match what you encounter in the Storyblok App. For more information and a detailed reference, please consult this FAQ on the new Visual Editor design.

This tutorial will take you through the steps to create a new field plugin with Storyblok’s Field Plugin CLI.


This tutorial requires the following applications to be installed on your machine:

Check if the dependencies are installed by running

node -v
yarn -v
npm -v
git --version

Create a Project

To create a new project, run Storyblok’s field plugin command line interface. This will run a setup wizard, letting you choose between different options along the way. Open the terminal and run

npx @storyblok/field-plugin-cli@latest create

The first question asked is whether the new project should be a monorepo or its opposite – polyrepo. If you’re not familiar with what a monorepo is, choose polyrepo.


A monorepo is a software-development strategy in which the code for a number of projects is stored in the same repository. A polyrepo is the opposite – a repository with a single project.

Next, choose a package name, in this example, “training-field”.

Finally, select a template. There are several frameworks to choose from.

Wait for the package to be installed.

That should have generated a new directory, initialized git, and installed dependencies with Yarn.

Run Locally

Navigate into the newly created directory.

cd training-field/

Start the application.

yarn dev

You will see the following result:

From the output in the terminal, open the Sandbox URL in your browser.

Here, you can view your field plugin during development.


The Plugin Sandbox emulates the Visual Editor, letting you view the field plugin while developing.