New UI update out now

Today we’ve updated our side-by-side editor to allow it to grow on features and be more integrated into our system.

So what has changed?

  • Story information on the left side
  • Compose on your right side
  • Save a story by pressing “ctrl + s” or “cmd + s”
  • Adding new components/blocks to your site was never easier
  • Preview: desktop, tablet, mobile and shuffle
  • Copy your current component
  • Know your Story: The name of your Story appears on the top left corner
  • Faster! Our Side By Side editor is now even faster than before!

New Features

Story information on the left side

Hidden behind modals and 2 - 3 clicks you now can directly access the settings of your story.

  1. Navigate back in the breadcrumb
  2. Change the name or slug with just one click
  3. You can see when you’ve created and updated your content now instantly
  4. Advanced settings like Export/Import are now accessible with just one click
  5. Jump back in your publishing version history just like that.

Story Settings

Composing on your right side

The side by side editor and it’s composing feature can now be found on the right side. Why we did this change is to make sure you can stay in your normal reading flow - which for most of our current customers is from left to right.

Composing flow

You can now first look at your content - click on it - edit and save it in just one clear flow through the editor. You can even skip the save button click by using the save shortcut everybody knows. “ctrl + s” for windows and “cmd + s” for mac.

Adding new components/blocks to your site was never easier

Never be distracted by our component full-screen overlay ever again. Now the “add blocks” button allows you to directly add new components in the sidebar.

Add new blocks

Preview: desktop, tablet, mobile and shuffle

One of the most important - and before hidden features - your content preview. You don’t have to resize your browser window or switch to mobile devices. Simply press the preview button and have direct access to the most common sizes & even a random width mode (some call it disco mode).

preview mode

Copy your current component

Before you would have to use the component breadcrumb to navigate to the parent of the current component - look for the component - now you can directly copy the component you’ve clicked on. The normal copy, delete and drag & drop are still on the same position - directly at your component.

copy components

Know your Story: The name of your Story now appears on the top left corner

We take your feedback serious so we’ve added the name of your current story now in a more prominent place. Now it’s directly next to the also newly introduced Storyblok logo which lets you access the main navigation from everywhere in the editor.

Know your story

Faster! Our Side By Side editor is now even faster than before!

Storyblok is all about speed and performance for developers and editors. Developers shouldn’t care about the interface and the CMS at all. But Editors should love the way they can editor their content and help developers getting things done and editors to create outstanding content.

Try it yourself

You can start using our new editor NOW in your own space. The update is now available on Live for every user of Storyblok!

As always - we’re looking forward to hear your feedback, features requests or similar right down below in the comments!


More to read...

About the author

Dominik Angerer

A web performance specialist and perfectionist. After working for big agencies as a full stack developer he founded Storyblok. He is also an active contributor to the open source community and one of the organizers of Stahlstadt.js.