Storyblok Bridge V2 Beta
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()
})