Storyblok Field Plugin in React

This React project is designed to function as a Storyblok field plugin application. It showcases some fundamental features for field plugins, including value updates, modal toggling, and asset selection. The primary goal of this starter is to provide developers with a clear blueprint for creating custom field plugins.

To remove the example code, simply delete the src/components/ directory and alter the imports and returned JSX in src/App.tsx.

For those who prefer to work with JavaScript instead of TypeScript, they can rename src/App.tsx to src/App.jsx.

Usage

For development, run the application locally with

npm run dev

and open the Sandbox.

To build the project, run

npm run build

Deploy the field plugin with the CLI. Issue a personal access token, rename .env.local.example to .env.example, open the file, set the value STORYBLOK_PERSONAL_ACCESS_TOKEN, and run

npm run deploy

Manifest File for Field Plugins

The manifest file is a configuration that enhances the functionality of your field plugin. This JSON file, named field-plugin.config.json and located in your project's root folder, is optional but highly recommended.

The manifest file allows you to configure options for your field plugin. When developing your field plugin with the Sandbox, the options are applied by default. Also, the deploy command automatically applies the options in production. So, you no longer need to configure the options manually.

Configuring a Manifest File

The options list within the file field-plugin.config.json should consist of key-value objects representing the essential options required for your field plugin to function correctly, along with their corresponding values. This is an example of how it should be structured:

{
  "options": [
    {
      "name": "myPluginInitialValue",
      "value": 100
    }
  ]
}

Now, you just need to access these options in your code like in the example below:

const { type, data, actions } = useFieldPlugin()

console.log(data.options.myPluginInitialValue)

Clean up the boilerplate

To start from a blank state, remove the example component <FieldPluginExample /> from src/App.tsx with <FieldPlugin />.

Continuous delivery

Set up continuous delivery with the CLI. Define an environmental variable STORYBLOK_PERSONAL_ACCESS_TOKEN, and use the --name and --skipPrompts options as such:

npm run deploy --name $NAME --skipPrompts

Design system

@storyblok/mui contains components and a Storyblok theme for MUI. To add it to this project, follow the instructions in the README.