The Plugin Editor

To allow quick prototyping of your idea, Storyblok offers a plugin creation area where you can work on a prototype right in the browser. Once you’ve created your plugin, you will be able to access the view below. In the top left of the editor, you will find the plugin name and versions. The plugin name should match the name in the initWith() method. On the right side, you will see a preview of the plugin, and you can enable the local development mode if necessary. Clicking Save you will update the local preview. Clicking Publish will update the plugin wherever it is used in Storyblok.

The Prototyping Area

On the left side of the view, you can see a demo field plugin which is a basic Vue.js component.

Input

Those options will be passed to the preview instance of your plugin. Option Keys entered here will also be added to every newly created plugin instance during schema/field definition.

• Space Id: Space that will be passed to your plugin as preview configuration
• Options: Key-value pairs of configuration options that will be passed to your preview

If you look at the picture below you can see the options field when opening the input section. The options field is useful to pass API endpoints and tokens to the plugin, but it could also be used to pass some input to the plugin itself. You can access any option, for example, the endpoint option, inside the plugin with this.options.endpoint or in the template with {{ options.endpoint }}.

Output

The plugin output contains all fields defined in the initWith method and all your model properties. Only properties added to the model property will be stored and later retrieved in the Storyblok Content delivery API. If you only need a local variable for helpers or similar, you can use Vue data instead.

Settings

The Settings area will allow you to submit your plugin to review and also assign it to specific spaces. Once you've assigned the plugin to one of the spaces, you're either owner, admin, or collaborator. The admin of that space can use it in their components and content types. Here, you can also delete your field plugin if you don't need it anymore.