Storyblok Raises $80M Series C - Read News

Skip to main content

Creating Field Plugins

INFO:

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.

Prerequisites

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.

learn:

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.

learn:

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