Introduction

Plugins in Storyblok let you extend and enhance its functionality with custom features. By creating plugins, you can integrate third-party platforms, improve the editing experience, or add new tools to the Visual Editor.

Understanding Plugin Types

Storyblok provides a flexible plugin system that allows you to extend its functionality in three ways:

Field plugins

Use field plugins to create custom inputs in the Visual Editor. For example, the Bynder asset selector plugin lets users choose assets from an external asset management system instead of Storyblok’s default.

Tool plugins

Tool plugins add custom tool windows to the Visual Editor. For instance, the Import- and Export translatable fields plugins allow users to import and export content into translation files directly within the Visual Editor.

Space plugins

Space plugins provide full-page views accessible in a dedicated section of the space. An example is the Broken Links Checker, which scans the entire space for broken links.

How Plugins Work

Plugins in Storyblok are standalone web applications embedded via iframes. They function as extensions only if they integrate with Storyblok. Communication between plugins and Storyblok’s frontend happens via window.postMessage, as plugins can’t directly access the main application document due to cross-domain limitations. Field plugins and tool plugins can communicate with the frontend application via window.postMessage.

Plugins that need to interact with Storyblok’s backend can authenticate via OAuth 2.0, using the Management API. Tool plugins and space plugins are capable of obtaining an access token for this purpose.

Design System

When building a plugin, use Storyblok’s design system to maintain a consistent UI with the Storyblok interface:

• For Vue 2: npm install storyblok-design-system --save
• For Vue 3: npm install @storyblok/design-system --save
• For React-based frameworks, you can use Storyblok MUI.

These tools are optional. Choose your own design system or CSS styling if you prefer.

Getting Started with Plugins

Creating a new plugin depends on the plugin type: field plugins work differently from tool plugins and space plugins.

Any Storyblok user can create field plugins, which are deployed and served via a public URL by Storyblok. For details, see the field plugin documentation.

Tool plugins and space plugins require self-hosting and can only be created by users with access to the Partner Portal or Organizations in Storyblok. Learn how to create a partner account.

Registering a Plugin in Storyblok

As a Storyblok partner, access the Partner Portal; otherwise, go to your Organization.

1. Go to Extensions and click New Extension.
2. Name your app with a user-friendly name that end-users will see.
3. In the ID field, enter a unique, unguessable string of characters.
4. Select Tool or Sidebar as the Extension Type, depending on your plugin type.
5. For plugins communicating with Storyblok, open the plugin, go to OAuth 2.0 and Pages, and note:
   • Client Identifier and Client Secret (use as environment variables in you application).
   • Index and Redirection Endpoint (configure based on your app's hosting domain).

Installing the App

1. In the General tab, copy the Install Link.
2. Paste the link into your browser's address bar, press Enter, and select a space to install the plugin.

Your plugin is now installed in the selected space. To make it visible to users, run the plugin locally and configure its URLs in the plugin settings.

The first time the tool or space plugins is opened, an admin will need to approve it.