Storyblok Bridge V2 Beta

Feb 16, 2021

Storyblok Bridge V2 Beta

Changes in:app

We are proud to announce that the Storyblok Javascript Bridge Version 2 has been released as beta version.

You can use it by using the new path app.storyblok.com/f/storyblok-v2-latest.js and by changing the init function to a class instantiation.

The new bridge has a lot of new features and works best with Javascript frameworks like Nuxt, Gatsby, Gridsome, Next, Vuejs, React and much more.

Features

Breadcrumbs navigation
Add block before/after (only if registering input event)
Move block (only if registering input event)
Duplicate block (only if registering input event)
Delete block (only if registering input event)

How to upgrade?

If you want to upgrade from the Bridge Version 1 to the Version 2 you need to adapt following parts of your application:

1. New path to the Javascript Bridge

Instead of

<script src="https://app.storyblok.com/f/storyblok-latest.js?t=123"></script>

use

<script src="https://app.storyblok.com/f/storyblok-v2-latest.js"></script>

2. Class instantiation instead of init call

Instead of

storyblok.init()

storyblok.on('change', () => {})

use

const storyblokInstance = new StoryblokBridge()

storyblokInstance.on('change', () => {})

3. Resolve relationships and add comments

Instead of

storyblok.on('input', (payload) => {
  storyblok.addComments(payload.story)
  storyblok.resolveRelations(['blog-post.author'])
})

use

const storyblokInstance = new StoryblokBridge({
  resolveRelations: ['blog-post.author']
})

storyblokInstance.on('input', (payload) => {
  // addComments is not required anymore
})

Examples:

Client side rendered pages:

const storyblokInstance = new StoryblokBridge()

storyblokInstance.on('input', (payload) => {
  console.log('Content changed', payload.story.content)
  // Handle re-rendering
})

storyblokInstance.on('change', (payload) => {
  // Load draft version of story
})

// Call ping editor to see if in editor
storyblokInstance.pingEditor(() => {
  if (storyblokInstance.isInEditor()) {
    // Load draft version of story
  } else {
    // Load published version of story
  }
})

Server rendered pages:

storyblokInstance = new StoryblokBridge()
storyblokInstance.on(['change', 'published'], function() {
  window.location.reload()
})

Jump Links