Storyblok Raises $80M Series C - Read News

What’s the True Total Price of Enterprise CMS? Find out here.

Skip to main content
  • 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()
    })