Storyblok

Introduction

Storyblok is a service that let's you plugin frontend editing capabilities to any template engine, framework or system of your choice. We built Storyblok to encrease productivity and promote reusable components.

How Storyblok works

The key concepts behind Storyblok are highly inspired by the BEM methodology. The author of a story can create a nested tree of components and input content in a easy and fast responding interface.

You can then call the read only cdn with the JSON tree and render your components in a loop.

This page for example uses follwoing JSON to render the content:

{
    "body": [
        {
            "text": "Storyblok is a service that...",
            "component": "markdown"
        },
        {
            "text": "The key concepts ....",
            "title": "How Storyblok works",
            "component": "markdown"
        },
        {
            "code": "",
            "component": "codeblock"
        }
    ]
}

To render the JSON tree we recommend a template language that supports dynamic partials. In our example we use Twig to loop over the body and render the content:

{{blok._editable}}

<div>
{% for blok in blok.body %}
  {% include 'bloks/' ~ blok.component ~ '.html'
  with {blok: blok} only %}
{% endfor %}
</div>

Here is an example of a markdown component:

{{blok._editable}}

<div>
  <h2>{{blok.title}}</h2>
  <div class="markdown">
    {{blok.text|markdown}}
  </div>
</div>

Next steps and further reading

To learn more about Storyblok and how to create your own Theme or own components you can read the Developer's Documentation. If you have any other questions left don't hesitate to ask us using the chat on our website, Github.