Filters are simple methods that modify the output of numbers, strings, variables and objects. They are placed within an output tag {{ }} and are denoted by a pipe character |.

Beside the liquid standard filters Storyblok has a useful extra helpers prepared for you:

Filter Function
markdown Parses text from markdown to html
asset_url Outputs a asset url
story_url Outputs a url path from the content entries uuid
url Outputs a link from the link object
resize Outputs a new image url to the resized image
label Outputs the value of the datasource item
divided_by_ceil Rounds up to integer
original_ratio Gets the ratio of a Storyblok image url
richtext Parses a richtext field to html


This filter renders html from the Storyblok richtext field.

{{ blok.your_richtext_field | richtext }}


Markdown is powerful and allows your editor to write articles, product descriptions and many more without writing HTML so you can reuse the content even on native apps.

{{ '# headline' | markdown }} <!-- Outputs: <h1>headline</h1>-->


Files which are uploaded from the views folder will have different published URLs to still access the right path you can use the asset_url filter.

{{ 'assets/js/scripts.js' | asset_url }} <!-- Outputs the theme url -->


Quickly access the url path from a content entry by their uuid.

{{ story.uuid | story_url }} <!-- Outputs a link, giving a story id -->


Quickly retrieve the URL linked using the Storylink/Weblink field type.

{{ | url }}


{{ '//' | resize:'300x300' }} 
<!-- Output: // -->

If you want to learn more about our image service have a look at its service page.

Advanced example

{{ blok.image | resize:'300x300' }}

# Example using lazyloaded responsive images with lazysizes.
  src="{{ blok.image | resize:'100x0' }}"
  data-src="{{ blok.image | resize:'300x0' }}"
  data-srcset="{{ blok.image | resize:'300x0' }} 300w,
  {{ blok.image | resize:'600x0' }} 600w,
  {{ blok.image | resize:'900x0' }} 900w" class="lazyload img-responsive" />


Access the value of a datasource entry by its key

{{ 'your_entries_key' | label:'you_datasource_slug' }} <!-- Outputs: your_entries_value -->


{{ '0.1' | divided_by_ceil }} <!-- Rounds up to integer = 1 -->