Online styleguide to create living design systems and nunjucks based templates

Usage no npm install needed!

<script type="module">
  import viuStyleguide from 'https://cdn.skypack.dev/@viu/styleguide';


VIU Styleguide

A frontend to your components based online styleguide. Perfect to create living design systems and templates. Requires a Nunjucks parser. Works best with VIU Launchpad.

Getting Started


Styleguide requires NodeJS and NPM. We recommend using NVM to manage node versions.


Install VIU Styleguide into your project

npm install @viu/styleguide --save-dev

And reference the VIU Styleguide on all of the pages you need to document the styleguide.

{% extends '../node_modules/@viu/styleguide/dist/layout.html' %}


On each page based on the styleguide layout, you have three blocks available

{% block intro %}
    {# Introductory text to this online styleguide goes here (optional) #}
{% endblock %}

{% block content %}
    {# Free form html content to enhance the styleguide here (optional) #}
{% endblock %}

{% block additional %}
    {# Additional content below the left hand navigation #}
{% endblock %}


There is macros to help you describe your design system


Will create a single color tab. Supply it with a color object {name, color, description}.


Will create a collection of colortabs. One tab for each color in the array of colors supplied.


We use SemVer for versioning. For the versions available, see the tags on this repository.


  • Andreas Nebiker - Maintainer - VIU
  • Raphael Ochsenbein - Maintainer - VIU
  • The Team at VIU - Contributors - VIU


This project is licensed under the MIT License - see the LICENSE file for details


  • Thank you, dear customers. We use this styleguide in many of our projects. It is fuel for and the result of great things built with our customers.
  • Inspired by many of the phantastic styleguides and design systems out there. Keep on rocking web community!