O’Reilly Report: Decoupled Applications and Composable Web Architectures - Download Now

Empower your teams & get a 582% ROI: See Storyblok's CMS in action

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.


    • 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>


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

    2. Class instantiation instead of init call

    Instead of

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


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

    3. Resolve relationships and add comments

    Instead of

    storyblok.on('input', (payload) => {


    const storyblokInstance = new StoryblokBridge({
      resolveRelations: ['blog-post.author']
    storyblokInstance.on('input', (payload) => {
      // addComments is not required anymore


    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() {