A Storyblok theme which covers main parts for an android app landing page - following material design lite.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


material-design demo theme for Storyblok

A Storyblok theme with liquid and our render service to simply start your website with us.

Visit our demo here:


Test the Storyblok Editor with the components of this project

User: material@dominikangerer.com
Password: material-theme
(please be nice)

What is a storyblok theme

If you want a hosting with our Rendering Service so you won't have to setup a server on your own you can directly choose from one of our themes. Checkout the theme documentation to know more about the template syntax.

How can I start with a theme

The most efficient way to start a storyblok project as a developer would be our Command Line Interface.

npm i storyblok-cli -g

and choose your theme. You can of course simply download or clone this repository as well.

git clone https://github.com/storyblok/material-design-theme

Start your local environment

Make sure npm is installed:

## Install all frontend development related dependencies.
npm install

## This will start up a proxy for the render service on :4200.

Getting started without CLI

  1. Clone the repository git clone https://github.com/storyblok/material-design-theme
  2. Rename _token.js to token.js and insert your theme token. You can find your theme token in the space settings of the Storyblok app.
  3. Replace INSERT_SPACE_ID with your space id and INSERT_YOUR_DOMAIN with your domain in config.js. You can find your space id and domain in the space settings.
  4. Run npm install
  5. Run gulp
  6. Ready! You can now edit the templates in views or defining css in the source folder.

Folder structure

  • /source/ The place where you should put all your scripts, styles source code.
  • /views/ All your layouts and components at one space - if you add a new or change an existing Liquid component (.liquid) the gulp build will trigger an instant reload for you in the browser - also each component is a representation of a storyblok component. If you create a headline component in storyblok - make sure to create a headline.liquid as well - so this application knows which component to render.

You want to know more about storyblok?

Local HTTPS / SSL without errors (Mac OS):

  1. https://certsimple.com/blog/localhost-ssl-fix
  2. Rename _cert.js to cert.js and insert paths to your key.pem and cert.pem.

Storyblok Logo