Introduction

Storyblok is a service that lets you plugin frontend editing capabilities to any template engine, framework or system of your choice. Storyblok will increase your productivity and promotes 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 an easy and fast responding interface.

You can then call the read-only CDN to get a JSON tree and render your components in a loop with your favorite template and programming language.

This page, for example, uses following 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 through the body and render the content:

root.twig
{{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:

markdown.twig
{{blok._editable}}

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

Documentation