Design Manualv1.0.6

  output: "path/to/export/",
  pages: "path/to/pages/",
  components: "path/to/components.json",
  meta: {
    domain: "",
    title: "My Design Manual",
    avatar: "",
    version: "v1.1.0"
  nav: [{ label: "Home", href: "/" }],
  headHtml: '<script>console.log("im in the head");</script>',
  bodyHtml: '<script>console.log("im in the footer");</script>',
  contentsFlag: "contents",
  componentHeadHtml: `
    <link rel="stylesheet" href="/assets/style.css" />
    <script>console.log("im in the component head");</script>
  componentBodyHtml: `
    <script>console.log("im in the component body");</script>
  prerender: {
    port: 3000,
    path: "/design-manual/",
    serveFolder: "/httpdocs/"
  onComplete: () => {},
  onLog: msg => {}


option default value type description
output null string output directory
pages null string directory that holds your pages
components null string json file with components
meta - object
meta.domain '' string domain for your project
meta.title '' string title for your project
force false boolean force update for all components and pages
meta.avatar '' string avatar for your project
meta.version '' string version
nav [] array array of objects with navigation items
- {}.label - string label of the navigation item
- {}.href - string link for the navigation item
- {}.target - string use _blank for new window
headHtml '' string string of html to include in the head
bodyHtml '' string string of html to include in the body
componentHeadHtml '' string string of html to include in the head of the component
componentBodyHtml '' string string of html to include in the body of the component
contentsFlag 'contents' string css id to identify the contents heading
renderComponents true boolean turn rendering components on/off
renderCSS true boolean turn rendering css on/off
prerender null object / null prerender all components to get their heights (at 1200px wide browser window, using Puppeteer). This speeds up the user interface and makes it less jumpy, but makes compiling Design Manual slower because it needs to open all components in a headless browser
prerender.port - number static server port for rendering components (http://localhost:{port})
prerender.path - string path to design manual folder (http://localhost:{port}/{path})
prerender.serveFolder - string directory to start the static file server in
onComplete function(){} function function to be called when done
onLog console.log function custom logging function

Custom styling

You can customize the look and feel by adding an extra css file or a style tag through the headHtml option:

  headHtml: `
    <link rel="stylesheet" href="/assets/css/design-manual.css">
      .content h1 {
        color: red;
      .header {
        background-color: red;
      } {
        border-top-color: red;
        border-left-color: red;
      .component__meta:before {
        background-color: red;
      .sidebar__nav__item__link {
        background-color: red;

All pages get a body class formatted like so: #{lowercase-slug(filename)}-page. For example the body class for the file 'My' will be .my-file-page.