Add a Component to a Design

This guide uses the Livingdocs timeline design and produces a symbolical change to it in order to show how to update a design locally.

If you already have a custom design, you can just use that.

Clone the design

git clone
cd livingdocs-design-timeline
npm install

Adding a new component to the design

In the design repository, create a new file named h3.html in src/components/Headers:

<script type="ld-conf">
    "label": "Title H3"

<h3 class="title" doc-editable="title">

In src/config.json add a new "h3" element to the components array:

  "groups": [
    "label": "Headers",
    "components": ["head", "hero", "title", "h3"]

Now you can start the development server or run a build to see your changes.