Lightweight Design System Generator

hello world

code

hello world

Component library

Mix documentation with real life components to get an active representation of your websites components.

Free form markdown

Write your pages in free form markdown and embed your `!{components}` wherever you want, as often as you want. No limits.

Fits the way you work

Use your source code documentation, HTML comments or a web scraper to collect components. No need to write markup or code any different.

NPM Install

> npm i design-manual collect-components --save-dev

Tag your HTML components

  <!-- @component
    name: hello world
    description: This is my first component
  -->

  <img src="https://assets.imgix.net/examples/butterfly.jpg?px=50&w=1200&h=50&fit=crop" alt="" />

Embed components in markdown

!{hello world}

Build

const DesignManual = require('design-manual');
const collectComponents = require('collect-components');

// gather components
collectComponents({
  url: 'http://localhost:8000/',
  paths: ['homepage.html', 'page.html'],
  output: 'docs/components.json',
  complete: function() {
    
    // build design manual
    DesignManual.build({
      output: 'docs/',
      pages: './',
      components: 'docs/components.json',
      meta: {
        domain: 'example.com',
        title: 'Example'
      }
    });
  }
});

> Starting design manual
> Starting components
> Found 1 changed component
> Rendering component ./lib/hello-world.html
> Generated components
> Starting pages
> Found 1 changed page
> Generated docs/index.html
> Generated pages
> Design manual complete

hello world

code