A powerful tool that lets you prototype complex web applications and document design systems.

Bedrock is a static site generator that enables teams to efficiently work together, document HTML/CSS components, and provide a single source of truth for what an application should look like. It is primarily meant to create prototypes for web applications, but can be used to generate any website.

Create complex prototypes with many UI states

One of the main features of Bedrock is the page tree, which is a listing of every page in the prototype. The tree allows you to navigate to every page easily and get a clear overview of which screens exist. You can list the different states of screens to show off the depth of your design.

Documentation made easy

Nobody likes writing documentation, but at least Bedrock makes it easy—and partly automatic! Document components, your project’s colors and typography or generate an index of icons from either an icon font or SVG files.

Start from scratch

Bedrock makes no assumptions about the base HTML and CSS you want to use for a project and allows you to use any framework you want - or none at all. We purposefully designed Bedrock to work with any CSS framework like Bootstrap, Foundation or your own.

Optionality

A Bedrock-based project can grow according to the project needs. It might start with just a few templates, with no need for the tree navigation or the documentation. All options can be enabled or disabled through the configuration file.

Use real data

Some things—like data tables—are time-intensive to draw in a visual app, but can be generated in a pinch using a bit of Javascript, HTML and CSS. Easily render data from a Javascript object to your templates to prototype a with real data.

Download Bedrock

Visit the repository for information on how to install and use Bedrock. Bedrock is MIT-licensed.

Visit Repository

Get started with the tutorial

Follow our basic tutorial to get started with Bedrock within minutes.

Get started