Component/Schema 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.

Name Short Description
Text a basic single-line text field
Textarea a multi-line text area without formatting options
Image a single image upload input and access to the asset manager
Date/Time a date and time picker
Boolean a checkbox - true/false
Link internal and external links, eMail, and anchors
File a single file upload input and access to the asset manager
Multi-Asset a multi asset upload input, including description for each and access to the asset manager
Single-Option a dropdown of key/value pairs, Stories, Datasources, external JSONs, or Field Level Translation Languages.
Multi-Option a multi select option of key/value pairs, Stories, Datasources, external JSONs, or Field Level Translation Languages.
Number a number text field without formatting
Blocks a field to allowed nesting of Bloks
Markdown a multi-line field with formatting options resulting in Markdown format
Richtext a multi-line field with formatting options that results in a JSON format
Group allows you to group fields in a section (no input possibility)
Plugin extend the Visual Editor Content area with your own Custom Field Type

Here you can learn more about all options when configuring your content types and components in Storyblok.

Config Tab

You can find the general settings in the Config tab of your component/content type.

app.storyblok.com
storyblok field configuration

Technical name

This is the technical name that will be included in the JSON content of your content entries under the attribute component. If you do not define a "Display name" the "Technical name" will be transformed to a human-readable name in the editor interface. For example: "feature_area" will be transformed to "Feature Area".

Be aware! Changing the technical name can take a few minutes to update all content items. Make sure your editors have saved their current work and exit the editor. If you use branches, only the "Preview" branch will have the new component name until you deploy the other branches.

Display name

The value of this field will be shown for editors as a component/content-type name. If this field is empty, the "Technical name" will be shown.

<div id="topic-preview"></div>

Preview field

The preview field allows you to select one of the fields you set up in the schema so that the value entered in this field will be shown when you see this block in the overview (e.g., in the body with nestable blocks). For example, if you set up a headline text field, you could set this as the preview. Storyblok automatically sets one of the fields as a preview

Preview template

With this option, you can define a template that gets rendered in the blocks field. The template language you can use here is based on Squirrelly.

To render the preview, you use the following template.

<div>{{text}}</div>
<!-- ".image" is the field name -->
{{image(options.image.filename)/}} 

<!-- old image field -->
{{image(options.image)/}} 

All fields you have defined in your schema can be used with the following syntax: {{YOUR_FIELD_NAME}}. When using helpers like if() or image() the attributes are accessible via the options object.

Allowed HTML tags

  • Tags: div, span, strong, ul, li, p

  • Attributes: class

Styling

Preview templates can be styled with classes that are inside our index-latest.css, which uses UiKit V2:

<div class="uk-text-bold">{{item}}</div>

Linked Stories

If you linked another story inside your schema through a single or multi-select field, you could only use the story id in the preview template, not the fields inside that linked story.

# possible
<div>{{linkedAuthor}}</div>

# not possible
<div>{{linkedAuthor.name}}</div>

Available helpers

image

{{image(options.your_attribute)/}}

if/else

{{if(options.your_attribute === 1)}}
Display this
{{#else}}
Display this
{{/if}}

each

{{each(options.somearray)}}
Display this
The current array element is {{@this}}
The current index is {{@index}}
{{/each}}

foreach

{{foreach(options.someobject)}}
This loops over each of an objects keys and values.
The value of the current child is {{@this}}
The current key is {{@key}}
{{/foreach}}
app.storyblok.com
Storyblok editing capabilities

Preview Screenshot

This option lets you define a screenshot shown when the user inserts a new component in the blocks field. This helps the user to identify the component type better.

Block icon

Here you can set the icon that defines this block.

General configuration options

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

Configuration Options Type Description
Translatable Boolean If true, it enables translation of field in the case of the Field Level Translations.
Required Boolean If true, it forbids save of the story, if the field is empty.
Description String Text is shown under the field in the Storyblok Editor.
Display name String It overrides the default name of the field.
Renaming String It allows you to change the field 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.

Configuration Option Type Description
Maximum characters Number Defines a maximal number of allowed characters in the field.
Regex Validation Regex You can use the regex to validate the value of the field. Eg. to validate if the value is a valid email string.
Default Value String Defines the default value of the field.
Enables RTL Boolean If true, the field value will be shown from right to left in Storyblok Editor.

Sample JSON produced by Text Field:

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

Text Field can be transformed into the Textarea Field directly in the Storyblok Editor without losing the value.

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.

Configuration Option Type Description
Maximum characters Number Defines a maximal number of allowed characters in the field.
Regex Validation Regex You can use the regex to validate the value of the field. Eg. to validate if the value is a valid email string.
Default Value String Defines the default value of the field.
Enables RTL Boolean If true, the field value will be shown from right to left in Storyblok Editor.

Sample JSON produced by TextArea Field:

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

Image

DEPRECATED:

Image Field will be in future deprecated in the favour of the Assets Field.

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.

Configuration Option Type Description
Force Crop Boolean It toggles the preset crop options of the image. Read how to crop image section following this table for more information.
Prepend https to url Boolean If true, the URL of the image will be prepend with "https://".
Default assets folder Select It is an asset folder where the new images will be added to.
Default Value String DEPRECATED - have currently no effect.

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"
}
hint:

Storyblok offers also Image Service with which you can adjust format, size and effects applied to your images. Read more in the Image Service documentation.

Date/Time

Configuration Option Type Description
Disable time selection Boolean It toggles the preset crop options of the image. Read how to crop image section following this table for more information.
Default Value String DEPRECATED - have currently no effect.

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.

IMPORTANT:

By default, the value of Boolean Field Type is 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.

Configuration Option Type Description
Restrict to content types Boolean If true, you can choose content types from the whitelist
Enable email field Boolean If true, you will be able to add an email field
Enable asset selection Boolean If true, you can add asset from Asset manager or Upload new from your local machine
Enable anchor field on internal link Boolean If true, you will be able to set an anchor for internal links

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).

Property Description
id Numeric id of the referenced content entry
slug The full_slug of the content entry
name Given name of the content entry
is_folder Is this content entry a folder (true/false)
parent_id Parent folder numeric id
published Is this story published (true/false)
position The numeric position value of the content entry
uuid The uuid of the content entry
Multiple uuid One key per Story, where the key is the uuid of the story
is_startpage IS this story a startpage (true/false)

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.

Query Parameter Description
token (required) Your public or preview token
starts_with Filter by full_slug. Can be used to retrieve all links form a specific folder. Examples: starts_with=de/beitraege, starts_with=en/posts
version Default: published. Possible values: draft, published
paginated Set this to 1 if you want to retrieve the paginated results. With the parameters per_page and page, you can define the page size and page number
cv Read more about cache version at Cache invalidation
ATTENTION:

This API endpoint is not paged by default. Activate it using paginated=1.

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 as shown below.

app.storyblok.com
Anchor options for internal links

Anchor options for internal links

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.

hint:

If you’re referencing to linking to other entries, using the link field we will update the referenced entry right away. We’ve also introduced something called “Resolve Links” which allows your developer to access linked entries without additional query.

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.

Asset Type MIME Types
image image/x—png, image/png, image/gif, image/jpeg, image/svg+xml, image/webp
video video/*, application/mp4, application/x—mpegurl, application/vnd.apple.mpegurl, audio/webm
audio audio/*
text application/msword, text/plain, application/pdf, application/vnd.openxmlformats-officedocument.wordprocessingml.document

The Asset Object

Property Description
filename Full path of the asset, including the file name
file File Object
short_filename The file name of the asset

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

Configuration Option Type Description
Prepend https to url Boolean If true, it will prepend file url with https
Default asset folder Dropdown You can choose an asset folder where the assets should be assigned to
Default value String Defines the default value of the field

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.

Field Type Description
multiasset Multi-Assets; an upload field for multiple files

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.

Asset Type MIME Types
image image/x—png, image/png, image/gif, image/jpeg, image/svg+xml, image/webp
video video/*, application/mp4, application/x—mpegurl, application/vnd.apple.mpegurl, audio/webm
audio audio/*
text application/msword, text/plain, application/pdf, application/vnd.openxmlformats-officedocument.wordprocessingml.document
  • Multi-Asset fields can be reordered via drag controls.

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

Configuration Option Type Description
Default asset folder Dropdown You can choose an asset folder where the assets should be assigned to
app.storyblok.com
Multi-select options in Storyblok

Multi-select options in Storyblok

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.

HINT:

You can find an example of single-option as an external JSON here.

Field Type Description
option Single-Option; a single dropdown

SOURCE TYPE

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

app.storyblok.com
Source types in Storyblok

Source types in Storyblok

Self

Configuration Option Type Description
Hide empty option Boolean If true, it will hide the empty option
Options String Add name/value as options
Default Value String Defines the default value of the field

Sample JSON produced by Single-Option Self Source Field:

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

Stories

Configuration Option Type Description
Use UID instead of ID Boolean Recommended to be checked (true), as UID is required for automatic link resolving
Path to folder of stories String In case you have a multi-language folder structure you can add the {0} placeholder and the path will be adapted dynamically. Examples: {0}/categories/, {0}/{1}/categories/
Restrict to content type Dropdown You can choose content types from the whitelist
Default value String Defines the default value of the field

Sample JSON produced by Single-Option Stories Source Field:

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

Languages

Configuration Option Type Description
Hide empty options Boolean If true, it will hide the empty option
Default value String If true, it will hide the empty option

Sample JSON produced by Single-Option Languages Source Field:

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

Datasources

Configuration Option Type Description
Hide empty option Boolean If true, it will hide the empty option
Internal datasource Dropdown Select an internal database from the dropdown
Default value String Defines the default value of the field

Sample JSON produced by Single-Option Datasource Source Field:

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

External JSON

Configuration Option Type Description
Hide empty option Boolean If true, it will hide the empty option
URL String Add URL to the external JSON
Default value String Defines the default value of the field

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. 

HINT:

You can find an example of a multi-option as an external JSON here.

Field Type Description
options Multi-Options; a list of checkboxes

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:

Configuration Option Type Description
Minimum & Maximum Number Defines minimum & maximum numbers for the particular source.

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. 

Configuration Option Type Description
Default value String Defines the default value of the field
hint:

You can convert string to JSON function

Sample JSON produced by Number Field:

"content":"number_value"

Markdown

Write markdown with a text area and additional formatting options.

Configuration Option Type Description
Rich-text as default Boolean Enable rich markdown view by default (true/false); Only for type: markdown
Allow empty paragraphs Boolean Enables the allotment of empty paragraphs.
Customize toolbar Boolean Enables a list of options from the toolbar, like Bold, Italic, Code-block, H1, H2, H3, H4, H5, Unordered list, Ordered list, Quote, Link, Image, Help, Enlarge
Maximum characters Number Set the max length of the input string; Only for type: text, textarea, markdown
Enable RTL (Right to left) Boolean Enable global RTL for this field
Default value String Defines the default value of the field
hint:

Check out the npm module that lets you convert Markdown and HTML into Storyblok’s Richtext field format.

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*"

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".

Configuration Option Type Description
Customize toolbar Boolean Enables a list of options from the toolbar, like Bold, Italic, Code-block, H1, H2, H3, H4, H5, Unordered list, Ordered list, Quote, Link, Image, Help, Enlarge
CSS class options (label/value) String Add name/value as options
Allow only specific components to be inserted Boolean If enables, get two options to select from: - Component(s) - Group(s) Get a dropdown for Component and Component group whitelist
app.storyblok.com
Storyblok editing capabilities

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

hint:

Read more at the documentation of the Richtext field.

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"
      }]
    }]
  }]
}

Table

It is easy to use field type to manage tables.

app.storyblok.com
Table field types on Storyblok

Table field types on Storyblok

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.

Configuration Option Type Description
Allow only specific components to be inserted Boolean If enables, get two options to select from: - Component(s) - Group(s) Get a dropdown for Component and Component group whitelist
Allowed maximum Number Defines the maximal number of allowed characters in the field

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
+         }
        ]
    },
    ...
}
Type Examples
Content Types Post, Authors, Product, Page, Team Members, FAQ article,
Bloks Hero, Grid, Section, Newsletter Section, Chapter, Full Width Image, Slider

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).

Property Description
group_id Alternates group id (uuid string)
Configuration option Description
Section items This is the list of all the fields of components you are in and which will be included in the group and which can be collapsed in the content editor

Component Groups

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

The Component Object

Property Description
component_group_uuid The component group uuid of the component

The Component Group Object

Property Description
id Numericc Unique ID
name Name of the group
uuid Uuid of the group

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

Property Description
component_group Your full component group object
component_group[name] The component group name is required

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.

learn:

Read the plugins documentation to learn how to create your own custom field type.

Datasources

required:

It is available in the Basic and higher plans.

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.

app.storyblok.com
An example of datasource

An example of datasource

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.

NOTE:

Learn more about the single-option and multi-options fields.

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.

Property Description
id Unique identifier in the context of datasource.
name The key of the datasource key/value pair.
value The value of the datasource key/value pair.
dimension_value The given value in the requested dimension.

Datasource is defined by the following properties.

Property Decription
name Name of the dimension used in Storyblok UI.
id/slug Identifier used to access the datasource content with Delivery API.
dimensions Definition of dimension used in datasource entries.
IMPORTANT:

To learn more about datasource objects, datasource entry objects, and how to request them, you should check the Delivery API documentation.

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.

app.storyblok.com
Settings of datasources and dimensions

Settings of datasources and dimensions

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.

app.storyblok.com
screenshot of datasource with active dimension

screenshot of datasource with active dimension

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.

Icon Desription
Arrow Drag & Drop the datasource entry to reorder the entries. The same order will be send by the API and shown in Storyblok UI.
Floppy Disk Saves the changes.
Trash Removes the datasource entry.
Dot Represent the state of the datasource entry. - Green - entry is saved - Gray - entry has unsaved changes

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.

app.storyblok.com
how to select datasource as source for single-options field type

how to select datasource as source for single-options field type

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
    }
  ]
}
IMPORTANT:

You can create and manage the datasources through our Management API. Check the datasources chapter and datasource entries chapter there.

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.

hint:

You are able to define presets to both types of components - Content Types and Bloks.

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.

app.storyblok.com
Shown list of defined presets for a component/story from example use case

Shown list of defined presets for a component/story from example use case

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.

app.storyblok.com
Showing where to find presets

Showing where the Define Preset button is

hint:

Each component can have one preset set as default.

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.

Option Description
Name Input field where you can change the name of preset.
Screenshot upload You can upload a preview image of the preset.
Fill preset with current content Override data of the preset with current values from the content editor.
Delete Permanently deletes the preset from the list of presets.
hint:

We recommend uploading a preview image to preset. This makes the work of the content creator much easier.

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