The plugin editor

To allow quick prototyping of your idea without you downloading or installing anything on your machine 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.

Example Plugin view

The Prototyping Area

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

Plugin prototyping area

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 defintion.

Plugin options

  • 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

Field type preview

The plugin preview will render your custom Vue.js component in a sandbox environment either with no options and space configuration or with those configured in the plugin options. It will be refreshed every time you press save.

Plugin preview

Find more information on “Enable local dev mode” in the next part of the docs.

Output

The plugin output contains all field defined in the initWith method 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. If you only need a local variable for helpers or similar you can use Vue data instead.

Plugin output

Settings

The settings area will allow you to submit your plugin to review and also assign it to specific spaces. This is important because by default only your account is able to use your plugin. 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.

Plugin output