Tool Plugin

Tools are a different way to extend your visual editor. They allow you to improve your productivity by adding some functionality to the editor. Two examples of Tools are importing and exporting content or a custom clipboard.

Tools are specific to stories and will appear in your Visual Editor when editing a story.

Getting Started

To create a new tool you need to be signed up as a Partner. Head into the partner portal and click on Apps {1} and then the New button {2}. As App type select Tool {3} and click Create {4}.

To get started we will clone the tool plugin starter template: github.com/storyblok/storyblok-tool-example

$ git clone https://github.com/storyblok/storyblok-tool-example.git
$ cd storyblok-tool-example
$ npm install 

We will also need to install ngrok to create a tunnel to our local application. Once you installed ngrok, you can start the tunnel to port 3000.

$ npm i -g ngrok
$ ngrok http 3000

After starting the tunnel you will need to add the tunnel URL to the development settings in your tool settings, like in the image below. You need a URL to the app, e.g. the tunnel URL + auth/connect/storyblok{3} and an Oauth2 callback, e.g. the tunnel URL + auth/callback{4}.

Inside the starter, you will find a .env-example file. Rename this file to .env and fill in the client id {1} and client secret {2} as well as the Oauth2 callback {4}.

.env.local

CONFIDENTIAL_CLIENT_ID="Id from Storyblok App"
CONFIDENTIAL_CLIENT_SECRET="Secret from Storyblok App"
CONFIDENTIAL_CLIENT_REDIRECT_URI=https://YOUR_ID.ngrok.io/auth/callback

Now we can start our development server:

npm run dev

Now if you open http://localhost:3000/ it should redirect to Storyblok, but nothing happens. In order to test it, we first need to install our tool plugin in a specific space. Open any space click on Apps {1}, My apps {2}, and then on the new tool {3}.

Then click Install {1} and open a Story within that Space.

Now go back into Content and open a Story, e.g. Home. The first time you should see a confirmation screen to authorize the application to have access to Storyblok. Click Approve {1}.

Once you authenticate your tool you should be able to see it {2} within the Tools {1} section in the editor.