Field-Type API Documentation

Your plugin will run in a sandbox which means you can't access other DOM elements of the application itself. However, Storyblok passes specific properties and methods to the plugin.


  • model : Current value of the plugin that; this object will be saved and retrieved in the API

  • options : Options parsed from the schema options array

  • schema : Schema options object

  • uid : Uid of the parent component

  • spaceId : Space id of the current space

  • storyId : Story id of the current story

  • storyItem : Object of the current story

  • sbLanguage : Current language

  • api : API function to call the delivery API

  • token : Draft token of the current space

  • blockId : uid of the blok the field type plugin is active in (will be undefined outside of the Visual Editor)

  • userId : id of the user that is currently using the interface


  • initWith : Should be used to define the initial data of the plugin.

  • pluginCreated : Should be used to initialize the plugin. Examples: Load data from Storyblok or external sources, Load and initialize a WYSIWYG editor.


The $sb variable contains commonly used helper functions.

  • $sb.getScript: Enables you to load external resources with a callback

this.$sb.getScript('', () => {
  // script available


Storyblok events will send specific triggers to the parent to change the sandbox appearance and behavior in the application.

  • this.$emit('toggle-modal', true): Opens the plugin in a full-screen overlay

  • this.$emit('toggle-modal', false): Closes the plugin full-screen overlay.

Getting current context

If you want to check the content model you can emit the get-context event like this:

this.$onGetContext(() => {

Built-in Components (Proxy Components)

You can use Storyblok's built-in components in your custom field type for user input that requires access to the management API.

Asset selector

This proxy component lets the user select an image {2} and sets the image URL to an attribute of your custom field-type. The field attribute needs to be the key to your model attribute. Following an example {1}:

<sb-asset-selector :uid="uid" field="your_model_attribute">

Important: your_model_attribute needs to be a property in your model that you pass in the initWith method.

Storyblok editing capabilities