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.

Section titled Features 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)

Section titled How to upgrade? 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:

Section titled 1. New path to the Javascript Bridge 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>

Section titled 2. Class instantiation instead of init call 2. Class instantiation instead of init call

Instead of

storyblok.init()

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

use

const storyblokInstance = new StoryblokBridge()

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

Section titled 3. Resolve relationships and add comments 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
})

Section titled Examples: Examples:

Section titled Client side rendered pages: 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
  }
})

Section titled Server rendered pages: Server rendered pages:

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