The Editor

Our editor hosted on app.storyblok.com includes two editor modes, that can be toggled in each content entry or on folder level, to fit your content management needs.

  • Form Only
  • Visual Composer

Form Only

The form only editor is perfect for flat content structures, fast prototyping, and mobile apps. You can easily build your content types, create content entries, fill them up, save, publish and you’re ready to consume your data using our Content Delivery API. No additional integration needed, simply consume your content and use it wherever you want.

Form Only

Visual Composer

Edit your websites content entries as you browse it, and keep your code clean, too. Thanks to our “JavaScript Bridge”, our visual composer gives you a preview of the changes you make to your website, even before those changes go live. Our composer also boasts visual hints to help you easily find the elements you’re looking for.

Visual Composer

While browsing your content in our editor with the visual composer enabled we will embed your website in our editor using an iframe and some query parameters. This enables us to send iframe events to your website and that allows you to listen for events from our application. It will allow your content creator to click into your content entries and even nested components as you can see in the image above, where we clicked on a “column” component.

How does this work?

In short: Magic. We tried a lot as we started developing Storyblok and finally found a solution that does not mess with your HTML but still allows us to add click events. You can append a version query param for your Content Delivery API calls to switch between a draft and a public version. The draft version is the latest saved version of one content entry and is enriched by our API. On each component and the content type, we will add a property _editable in the draft version. In this _editable property we added a ready to use HTML comment.

{
  "_editable": "<!--#storyblok#{\"name\": \"grid\", \"space\": \"48408\", \"uid\": \"98cccd01-f807-4494-996d-c6b0de204abc\", \"id\": \"307934\"}-->",
  "component": "grid",
  "columns": [{
      "_editable": "<!--#storyblok#{\"name\": \"column\", \"space\": \"48408\", \"uid\": \"5db2e929-6d3d-4564-982e-fa8513b0e5de\", \"id\": \"307934\"}-->",
      "component": "column",
      "width": "1-4",
      "content": [{
        "_editable": "<!--#storyblok#{\"name\": \"markdown\", \"space\": \"48408\", \"uid\": \"947be9f0-47c3-4315-a95a-550f0c560eb5\", \"id\": \"307934\"}-->",
        "component": "markdown",
        "text": "Nest components using an intuitive editor"
      }]
    },
    {
      "_editable": "<!--#storyblok#{\"name\": \"column\", \"space\": \"48408\", \"uid\": \"7c44c5d8-0adb-4c01-a797-12d9b300b99b\", \"id\": \"307934\"}-->",
      "component": "column",
      "width": "1-2",
      "content": [{
        "_editable": "<!--#storyblok#{\"name\": \"image\", \"space\": \"48408\", \"uid\": \"78cccd01-f807-4494-996d-c6b0de2045a5"\", \"id\": \"307934\"}-->",
        "component": "image",
        "src": "//a.storyblok.com/f/..."
      }]
    }
  ]
}

Those HTML comments should be placed before your content-type and component representations in your website. Now all that is left to do is to add our JavaScript Bridge Script and initializing it with your draft token. This allows us to add small bits of CSS (for the borders while hovering and status border while clicked) and EventListeners to the element directly after that HTML comment. After clicking on the DOM element after the HTML comment, our JavaScript Bridge will send an iframe event to our main application, and we will open the respective content type or component in our editor.

If you now change your content and hit the save button in our editor - we will not only save your content and deliver it with our API, we will also send a JavaScript event to your embedded page so you can load the new content from our API or reload your page if you prefer server-side rendering.

JavaScript Bridge

The best thing about our visual composer is, that you do not need the JavaScript Bridge on your production system nor will we deliver the _editable attribute if your version is not set to draft. No need to load extra bytes or another script on your production site.

Ready to start?

Documentation