The key concept

The key concepts behind Storyblok are inspired by the BEM methodology. One way this manifests itself is through the relationship between developer and editor.

Content Types

In Storyblok "Content Types" define the type of a content entry and can hold the basic fields for your content entries. By default we will ship a "Page" content type.

{
  "component":"post",
  "title": "Your title",
  "text": "#Lorem ipsum dolor sit amet, consectetur adipiscing elit. In...",
  "image": "//a.storyblok.com/f/..."
}

Components

Components in Storyblok are either at root level which are called "Content Types" or unlimited nestable allowing you to build a nested tree of such components inside one content entry. This allows you to build a component structure involving grid and columns with again image components in there.

{
  "component": "grid",
  "columns": [{
      "component": "column",
      "width": "1-4",
      "content": [{
        "component": "markdown",
        "text": "Nest components using an intuitive editor"
      }]
    },
    {
      "component": "column",
      "width": "1-2",
      "content": [{
        "component": "image",
        "src": "//a.storyblok.com/f/..."
      }]
    }
  ]
}

A structure like this allows your editor to change the layout of pages and reuse components you’ve already created. You can create astoundingly flexible layouts for your customers and reuse them in different places of your project to minimize duplicated work and improve productivity. The visual compose mode of our editor will make it unbelievably easy for them to navigate through this structure.

How would this page look like?

Want to see how the content behind the current page looks like? You can see it for yourself by checking out the JSON which we use to render the page. Go ahead and open the link below.

https://api.storyblok.com/v1/cdn/stories/docs/the-key-concept?token=miQeEopSce7bklQFVbBozQtt

You can replace docs/the-key-concept in the URL with any other slug you can find on www.storyblok.com.