Component Schema & Field Configuration

Field types

One field type is the smallest part in Storyblok terminology. It can be a single input field or even a custom field type (plugin). You can see the list of all field types in the following table with links to the detailed documentation of the field type.

General configuration options

All field types except the Blocks are translatable and all field types contain general configuration options - Required, Description, Display name.

Text

The text field should be used for short one-line long strings. The most common use case is the name of the product or author.

Sample JSON produced by Text Field:

"content": {
  "field_name": "Value of the field"
}

Textarea

Textarea field should be used for one paragraph without the possibility of styling or creating multiple paragraphs. The most common sample is a short teaser text of a product or article.

Sample JSON produced by TextArea Field:

"content": {
  "field_name": "Value of the field"
}

Image

The image field is used to insert or select images from the assets library. It can be used to crop your images to the preferred ratio.

How to crop the image?

You can crop the image by clicking on the image thumbnail. This action will open the image overlay, where you can select the cropped area from the original image.

If you set Force Crop to true, you are able to predefine the ratio or fixed-sized of the crop area. In this case, the content editor will be forced to crop the image in the predefined size or ratio.

Sample JSON produced by Text Field:

"content": {
  "field_name": "//a.storyblok.com/f/81002/200x200/df0881e1b2/unnamed.jpg"
}

Date/Time

Sample JSON produced by Date/Time Field:

"content":"[object Object]"

Boolean

Boolean is one of the Basic Field Types. It indicates a checkbox, which can hold two values, either True or False.

You can filter entries by boolean value. Imagine you want to allow your editors to have featured products with a boolean flag in your content schema. To filter all products to only receive the featured once you can utilize the filter_query operation to check for an exact value.

Sample JSON produced by Boolean Field:

"content":false

Link

Links are another representation of your content entries, eg. Stories. With the Links format, you can resolve uuids of stories. The links object returned consists of multiple keys, where each key is the uuid of one Story. In the link object, you will have access to basic information to identify, load or already display a link to that resource.

The Link(s) Object

You can access a draft or published versionof your links by providing the version parameter and the correct token type (eg. preview for draft, public for published).

Retrieve Multiple Links

Returns the links object containing all links of one space. Use the version parameter and the correct token types to receive either draft and published or only published links.

Anchor option for internal link

It is also possible to set an anchor for internal links. The option can be enabled in the schema configuration.

Dynamic Links

If you're looking for anchor links for lets say headlines it would be something to be implemented in your frontend which can take the current string of your headline and transforms it to a specific entry. One example would be Anchorjs.

Sample JSON produced by Link Field:

"content":{
  "id":"","url":"","linktype":"story","fieldtype":"multilink","cached_url":""
}

File

A single file upload input and access to the asset manager.

Asset

Assets in Storyblok are all files that you upload either using an image, file or multi-assets field or in the asset manager itself. Assets uploaded to Storyblok will be hosted on our infrastructure and delivered through our CDN with the best possible performance for you. Additionally, you can use our built-in image service to optimize and resize your images. Below you can find the MIME types for each asset type.

The Asset Object

You can now choose “Default Asset Folder” for the field type file which was previously only available for the type image.

Sample JSON produced by File Field:

"content":{
  "id":"","url":"","linktype":"story","fieldtype":"multilink","cached_url":""
}

Multi-Asset

A multi-asset upload input, including a description for each and access to the asset manager.

Additionally, you can use our built-in image service to optimize and resize your images. Below you can find the MIME types for each asset type.

• Multi-Asset fields can be reordered via drag controls.

• You can allow multiple image uploads in one field using the multi-asset field type.

Sample JSON produced by Multi-Asset Field:

"content":{
  "id":"","url":"","linktype":"story","fieldtype":"multilink","cached_url":""
}

Single-Option

Single-Option is a dropdown of key/value pairs, Stories, Datasources, external JSONs, or Field Level Translation Languages.

SOURCE TYPE

There are several source types in the Single-Option Field which are as below:

Self

Sample JSON produced by Single-Option Self Source Field:

"content":{
  "id":"","url":"","linktype":"story","fieldtype":"multilink","cached_url":""
}

Stories

Sample JSON produced by Single-Option Stories Source Field:

"content":{
  "id":"","url":"","linktype":"story","fieldtype":"multilink","cached_url":""
}

Languages

Sample JSON produced by Single-Option Languages Source Field:

"content":{
  "id":"","url":"","linktype":"story","fieldtype":"multilink","cached_url":""
}

Datasources

Sample JSON produced by Single-Option Datasource Source Field:

"content":{
  "id":"","url":"","linktype":"story","fieldtype":"multilink","cached_url":""
}

External JSON

Sample JSON produced by Single-Option External JSON Source Field:

"content":{
  "id":"","url":"","linktype":"story","fieldtype":"multilink","cached_url":""
}

Multi-Option

A multi-select option of key/value pairs, Stories, Datasources, external JSONs, or Field Level Translation Languages. 

All the configuration options are similar to Single-Option. The only difference is that we get an additional configuration option in Multi-Option, which is as below:

The default value for multi-options

You can set a Default Value for multi-options with the following schema:

[ "your_first_value", "your_second_value", "third", ... ]

Sample JSON produced by Multi-Option Field:

"content":["value1","value2", ... ]

Number

A number text field without formatting. 

Sample JSON produced by Number Field:

"content":"number_value"

Markdown

Write markdown with a text area and additional formatting options.

There is also an example of how to use it with our migration CLI to transform fields.

Sample JSON produced by _Markdown Field (for bold & italic):

"content":"**Bold**\n\n*Italic*"

Toggle Rich-text

You can toggle to Rich-text view by clicking on the 👁 (eye) icon and toggle back to Markdown by clicking on it back.

Richtext

A multi-line field with formatting options that results in a JSON format. Storyblok comes with a powerful Richtext editor that saves your content in a structured JSON format. You can customize the toolbar for each field individually and even let the user insert Storyblok blocks. If you have written your content in Markdown you can import it using the toolbar button "Paste from Markdown".

Features

• Customizable Toolbar: Bold, Italic, Strikethrough, Underline, Inline-code, Code-block, Paragraph, H1, H2, H3, H4, H5, H6, Unordered list, Ordered list, Quote, Horizontal rule, Link, Image, Components, Paste Markdown, Undo, Redo

• Clean JSON Output

• JSON to HTML converter included in SDKs

• Advanced link dialog with "New window" option and asset link function

• Advanced image dialog with alt-tag and title definition

• Component insertion with allowlist option

• Paste from Markdown import function

• Auto-height and sticky-toolbar

• Works with export and import app

• Code-language selector of code-block

Sample JSON produced by Richtext Field (for bold & italic):

"content":{
  "type":"doc",
  "content":[
  {
    "type":"paragraph",
    "content":[
    {
      "text":"Bold",
      "type":"text",
      "marks":[
      {
        "type":"bold"
      }]
    }]
  },
  {
    "type":"paragraph",
    "content":[
    {
      "text":"Italic",
      "type":"text",
      "marks":[
      {
        "type":"italic"
      }]
    }]
  }]
}

Some resources to check
- Rich Text Renderer for React
- Rich Text Renderer for VueJS/NuxtJS

Table

It is easy to use field type to manage tables.

Features

• Add, move or delete rows and columns

• Outputs structured JSON

• Allows multi-line text

• Works with translation export and import

Developer documentation

The table field type stores its information as structured JSON and you need to take care of the rendering of the HTML.

Following an example:

{
  "plugin": "translateable-table",
  "thead": [
    {
      "value": "Head1"
    },
    {
      "value": "Head2"
    }
  ],
  "tbody": [
    {
      "component": "_table_row",
      "body": [
        {
          "component": "_table_col",
          "value": "one"
        },
        {
          "component": "_table_col",
          "value": "two"
        }
      ]
    }
  ]
}

In a template language like Liquid you could write something like the following to render the table:

<table>
  <thead>
    <tr>
      {% for th in content.thead %}
        <th>{{ th.value }}</th>
      {% endfor %}
    </tr>
  </thead>
  <tbody>
    {% for tr in content.tbody %}
      <tr>
        {% for td in tr.body %}
          <td>{{ td.value }}</td>
        {% endfor %}
      </tr>
    {% endfor %}
  </tbody>
</table>

Sample JSON produced by Table Field:

"content":{
  "tbody":[
  {
    "_uid":"a3fc5b10-d309-41af-89a0-d5131d93ce4f",
    "body":[
    {
      "_uid":"ede4bb0f-a25c-4046-9d52-0e71f6a6bb14",
      "value":"",
      "component":"_table_col"
    },
    {
      "_uid":"05527061-fb62-4127-9219-0667f707470e",
      "value":"",
      "component":"_table_col"
    },
    {
      "_uid":"fbd202c7-ebd9-423c-95ab-4489478073d3",
      "value":"",
      "component":"_table_col"
    }],
    "component":"_table_row"
  }],
  "thead":[
  {
    "_uid":"e35c2247-d319-4f6e-8fff-b4c52b66cc92",
    "value":"Heading 1",
    "component":"_table_head"
  },
  {
    "_uid":"e3142f21-ea52-4ac3-bef6-616f327e71d6",
    "value":"Heading 2",
    "component":"_table_head"
  },
  {
    "_uid":"051e9c71-9839-4cdd-b4b6-43d663111b27",
    "value":"Heading 3",
    "component":"_table_head"
  }],
  "fieldtype":"table"
}

Blocks

Blocks is a field to interleave other components in your current one, a field to allow nesting of Bloks.

This type of component lives only within a Story and other Bloks, like Hero, Grid, and Full-Width Image. You can’t create new Stories from this as it is only a part of one Story. To use them in one content type you will need to create a field of the type blocks that

allows the nesting of components.

{
    "story": {
    "uuid": "ac0d2ed0-e323-43ca-ae59-5cd7d38683cb",
    "name": "My third post",
    "slug": "my-third-post",
    "full_slug": "posts/my-third-post",
    "content": {
-      "component": "your_content_type",
+      "component": "page",
        // fields you define for your content type
+      "body": [ // also a field you defined (type blocks)
+         {
+            "component": "teaser",
+            "headline": "My headline Content",
+            // fields you define for your blok
+         }
        ]
    },
    ...
}

Nestable blocks

Every block in Storyblok can have child blocks. If you define a block as nestable, then the editor of the content can position that block in a nestable area.

Usually, root blocks like pages, articles and products aren’t defined as nestable, as they are designed to build the root of your content structure. Read more on “What is a root block?”.

Sample JSON produced by Block Field (added Button block):

"content":[
{
  "_uid":"f96a9549-9687-4351-849b-89ac8c55a3c2",
  "link":"",
  "text":"",
  "style":[],
  "component":"button",
  "is_inline":false,
  "paragraph_style":[]
}]

Group

Group field allows you to group fields in a section (no input possibility).

Component Groups

A component group can be used to group components together. Each component can have only one component group.

The Component Object

The Component Group Object

Retrieve one Component Group

Returns a single, fully loaded component group object by providing a specific numeric id.

Retrieve multiple Component Groups 

Returns an array of component group objects. The response of this endpoint is not paginated and you will retrieve all component groups.

Create a Component Group

Delete a Component Group

Delete any component group using its numeric id.

Plugins aka Custom Field Type

A custom field type is a field type (plugin) that can be created by you or your developer to fulfil special requirements, that can't be fulfilled by the default set of the field types. The common sample is the integration with 3rd party services as e-shops or image services as Cloudinary.

Datasources

A data source is a collection of key-value pairs. A collection like this can define the strict options in your application/website or it can be used to define the buttons/labels in your application, that is not context-specific. You can access datasources directly through the Delivery API or use them in the Storyblok UI as the source of data in the single-option or multi-options field.

A good sample from the world of tech writers is the type of article. You can define multiple types (“review”, “first try”, “tutorial”, … ) as datasource values and then use them to define your articles. Similar to tags.

The structure of datasource and datasource entry

Each datasource consists of one or more datasource entries and it is represented as a single JSON file. The datasource entry object consists of the following properties.

Datasource is defined by the following properties.

Datasource dimensions - internalisation

Each datasource may contain multiple dimensions. This dimension can be used to translate the values from key-values pairs. In general, the dimension can be used also for different purposes as defining different values for different situations.

You can define the dimension in the Settings of the datasource by defining its name and identifier. The name will be used in Storyblok UI and an identifier is used in the API request to get the dimension value.

To preview and edit the values in one of the dimensions, you need to enter the UI of the datasources. Click on the label with the name of the dimension under the search and you will see a new field under each default value of the datasource entry.

Datasource entry actions

By default, the datasource entries are saved automatically. If you want to change this behaviour, uncheck the Autosave option in the header of the datasource detail. Additional actions of the datasource entry can be found on the right-hand side of the datasource entry fields.

Import and export of the datasource

Datasource entries can be imported to and exported from Storyblok as the CSV file type. You can find this functionality in the Settings of the datasource. You may export/import the datasource entries per dimension.

Datasource in the Stories

One of the main use cases for datasources is to use them as the source in the Single-Option field or the Multi-Options field. This way you may use the same group of data in multiple places through your application/website. It is a highly recommended development strategy as it creates a single source of truth for your data, which allows you to edit data only in one place in future instead of updating all occurrences of those data.

You can set the datasource as a source of the Single-Option field or Multi-Options field by selecting the Datasource option in the source dropdown and choosing one of the internal datasources. See the example of the following image.

How to request datasource entries with Delivery API

Datasource entries can be requested from the Delivery API using the URL like this https://api.storyblok.com/v1/cdn/datasource_entries?datasource=:slug&token=:token

Sample response from a request can be found here.

// 20200626123726
// https://api.storyblok.com/v1/cdn/datasource_entries?datasource=labels&token=ask9soUkv02QqbZgmZdeDAtt

{
  "datasource_entries": [
    {
      "id": 22237,
      "name": "cancel",
      "value": "Abbrechen",
      "dimension_value": null
    },
    {
      "id": 22238,
      "name": "read_more",
      "value": "Mehr erfahren",
      "dimension_value": null
    },
    {
      "id": 37116,
      "name": "hello_email",
      "value": "hello@storyblok.com",
      "dimension_value": null
    }
  ]
}

Presets

A preset defines the sample data of the component and each component may have defined a list of multiple presets. This feature should be used to guide your content creator in the process of creating new stories as they don't have to start always with empty components. They may choose one of the presets and tweak the data of it. Only a user with developer rights may create/edit preset.

Example use case

Let's say we have a teaser component with three different design variants. 

1. Teaser with background image

2. Teaser with background colour and text

3. Teaser with a call to action button

We could define three different components in Storyblok or we can define a component called Teaser with different options. The single-component approach can be difficult to understand for a content creator without enough experience. To make the process easier, we can define three presets for those three variants and let the content creator choose the preset in the creation process. This will add a component with pre-filled values into the Story.

How to define Preset?

Only developers can create and edit the Presets. If the developer opens the Story in the Content Editor, he/she can see the Define schema button and next to it a dropdown arrow. The Define Preset button is hidden in this dropdown. By using the Define preset button a preset overlay is open, where you can define the Name of the preset and see the existing presets plus which one is selected as the default one for the component. After filling in the name of the preset and clicking the Add preset button, the preset is created in the component.

You may always edit the preset by clicking on the name of the preset in the list of existing presets. This will open for you the following options.

• Presets can be also managed using the Management API. Read more about it in the MAPI Docs.