The Plugin Editor

To allow quick prototyping of your idea we’ve introduced a plugin creation area where you can prototype your basic idea 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 {1}. The plugin name should match the name in the initWith() method {2}. On the right side, you will get a preview of the plugin {3} and are able to enable a local development mode if necessary {4}. If you click Save {5} you will update the local preview. If you click Publish you will update the plugin everywhere where it's used inside Storyblok {6}.

Find more information on "Enable local dev mode" in the Enable Local Dev Mode section.

The Prototyping Area

On the left side of the view, you can see a demo Fieldtype 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 which will be passed to your preview

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

Output

The plugin output {2} contains all field defined in the initWith method {3} and all your model properties. Only properties added to the model property will be stored and later be retrieved in the Storyblok Content delivery API {4}. 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 {1} and also assign it to specific spaces {2}. Once you've assigned the plugin to one of the spaces you're either owner, admin, or collaborator the admin of that space will be able to use it in their components and content types. Here you can also delete your field-type {3} if you don't need it anymore.