Rapid Prototyping

How to use Fabricator to quickly build new views

Fabricator's assembly engine is a powerful templating engine built on top of Handlebars.js. It helps you compose new materials and prototypical pages with very little friction.


Layouts are wrappers for pages. You can define as many layouts as you want by creating .html files in your layouts directory.

Example layout:

<!doctype html>
<html lang="en">

    {% body %}


View content is inserted in the {% body %} placeholder.

Context can be passed from a view to the layout via front-matter.

The layout that a view uses is also defined in front-matter:

layout: custom-layout
title: My Custom Layout

This would use src/views/layouts/custom-layout.html.

When no layout property is defined, the view uses the default layout.


Views are unique pages templated using Handlebars. These are both Fabricator pages and user-created pages.

Example view:

title: Document Name
name: World

<h1>{{home.greeting}}, {{name}}!</h1>

{{> button}}

This outputs a page that uses the default layout (since no layout was defined).

The front-matter block at the top provides context to both the layout and the view itself.

Context is also piped in from data files. In this example, {{home.greeting}} refers to the greeting property in home.json.

Fabricator pages are typically stored at the root level of the views directory and user-created views (e.g. "templates", "pages", "interfaces") should be stored in subdirectories:

└── views
    ├── templates
    │   ├── about.html
    │   └── home.html
    ├── components.html
    ├── docs.html
    ├── index.html
    └── structures.html