🍪 Cookie Notice

We use cookies to learn how you interact with our content, and show you relevant content and ads based on your browsing history. You can adjust your settings below. Here's our policy.

Cookie settings
Skip to main content

From content strategy to code, JoyConf brings the Storyblok community together - Register Now!

Browse apps
Install

Requires Premium plan

Author
Storyblok GmbH
Last update
8/14/2025
Advanced paths
Programmable preview paths

Install this app to configure programmable preview paths for content folders and stories.

The preview path (referred to as Real Path in Storyblok) is the path requested from the preview environment in the Visual Editor.

This app has been developed with the following non-exhaustive list of scenarios in mind:

  • Root-level folders should point to different preview domains
  • Different preview domains based on the selected language
  • The URL structure uses other separators than slashes.
  • Virtual folders. For example, a folder should be omitted from the preview path.

Templating Syntax

The preview path is programmable using the templating engine Squirrely (v8). The following variables are available:

  • it.story The current story object
  • it.folder The current folder object (only available for folders)
  • it.lang The code of the currently selected language (see field-level translation)
  • it.branch_id The current branch ID (see Pipelines app)
  • it.env_location The current environment location (as defined in Settings > Visual Editor)
  • it.env_name The current environment name (as defined in Settings > Visual Editor)
  • @activeTranslatedSlug A helper to handle translated slugs. Learn more in this documentation resource.

Usage

In the Content section of a space, select a folder or a story and access its Settings via the button in the toolbar. Use the Real Path to configure the preview path.

Alternatively, for stories, go to the Config section within the Visual Editor to configure the Real Path.

Note that installing this app requires setting the preview path for every folder manually.

Examples

Use a different domain when the language is de.

{{@if(it.lang == 'de')}}https://www.yoursite.de/{{#else}}https://www.yoursite.com/{{it.lang}}{{/if}}

Use a custom preview URL if the current preview environment is not named"Default".

{{@if(it.env_name != 'Default')}}https://www.yoursite.com/{{/if}}

Use a folder slug and append a slash if a language has been selected.

{{it.folder.slug}}{{ it.lang ? '/' + it.lang  : '' }}

Resources