Demo builder

Published: Last updated:

Get the code on GitHub, or take a look at the example site.

Screenshot of the components page

Screenshot of context sensitive help

Demo builder is an 11ty site skeleton, designed to help you quickly create simple website and webapp demos. It allows you to map out the workflow, screens, and basic user interactions, as well as add notes and context sensitive help.

This project was inspired by some product management work I did for a client. I needed to present the initial research and workflows for a new product. Not being a designer, or at all familiar with design tools, it seemed quicker to create a simple website. This turned out to have several benefits:

Note: The demo site is intended to be an intermediate step between initial notes and ideas, and wireframing. You could create a detailed wireframe on top of this skeleton, but it would take some effort.