Folder Structure - Cloud Rendering Service

There’s a lot going on in your rendering service project folder, so let’s makes some sense of it. If you’ve started yet - you can follow this guide with our Quickstart Theme directly on Github.


Since the fastest way to start with a Storyblok Cloud Rendering Service project is with the CLI you will start with a fully configured Setup out of the box - if you want to start by hand this is the configuration explained quickly:

  "storyblok": {
    "spaceId": "INSERT_SPACE_ID", // insert your Space id.
    "domain": "INSERT_YOUR_DOMAIN", // insert your Rendering Service Subdomain (*
    "themeToken": "INSERT_TOKEN", // insert theme token (do not publically share this)
    "environment": "dev", // default environment - you can switch this to `live` or deploy into production 
    "debug": false // debug mode

my-project/token.js and my-project/_token.js

Rename the _token.js to token.js and replace the "INSERT_TOKEN" with your theme token from your spaces dashboard. If you’ve started your project with the CLI - you’re already ready to go.


This is the place where your CSS and JS are located. The default setup directly supports SCSS but you’re of course free to change this at any point of time. By default, we’ve structured all our projects this way and create an SCSS file for each component we create.


This is the place where your HTML (Liquid) is located. There are some base liquid files so you can start even faster.

  • page.liqud: Default base for all your pages. The first root component will be included here.
  • 404.liquid: Will be shown if there is no content entry defined by the provided slug.
  • manifest.liquid: Look at it as a manifest.json with superpowers. You will be able to load any content of Storyblok right there.
  • service-worker.liquid: Default UpUp Service Worker - change it as you want.
  • /components/: The place where all your components will be located. The kickstart will guide you through the basics.


This document is all you need to know about what’s required in your package.json file. It must be actual JSON, not just a JavaScript object literal. In the “script” node of this JSON, you can see tasks we’ve predefined for you.


This is the place where the majority of tasks are currently defined. You can remove gulp and change to webpack or anything else if you need. Make sure you don’t drop the gulp-blok task - otherwise your newly created components won’t be uploaded to the Rendering Service.