Design Custom UI kits in Child Themes

Starting from LiveCanvas 4.4, developers can enhance their themes with a defined folder structure that integrates directly with the LiveCanvas editor. This feature allows you to build modular, reusable UI kits inside your child themes, giving users a customized editing experience to the end user - all via simple HTML files in hot folders. See aso the the introduction article.

📁 The "livecanvas" Folder: build your custom UI kit

Every child theme that wants to integrate with LiveCanvas should include a folder named /livecanvas/ in the root directory.

By packaging your custom /livecanvas/ folder inside a child theme, you can:

  • Provide a ready-made UI kit for clients
  • Maintain design consistency across projects
  • Create themes that deliver a premium editing experience

This folder must follow a specific structure:

/livecanvas
├── blocks/
├── sections/
└── pages/

Each subfolder should contain any kind of .html files, which will be automatically detected and displayed inside the LiveCanvas editor.

Here is what each subfolder is for:

/pages/

This folder should include full-page templates (e.g., homepages, about pages, landing pages) that users can insert and customize.

/sections/

This folder is for layout-ready horizontal sections (e.g., hero headers, testimonials, contact forms). These are commonly higher lever components for page structure.

/blocks/

Use this folder for small, reusable components (e.g., buttons, image + text snippets, icon boxes). These are atomic-level elements meant to be used as part of larger layouts.

🗂️ Use Subfolders for  Categories

Each of the three folders can include subfolders, which are used as categories in the editor.

For example:

/livecanvas/sections/
├── Hero/
│   ├── hero-1.html
│   └── hero-2.html
└── Testimonials/
    └── testimonials-classic.html

In the editor, these files will be listed under the appropriate category names ("Hero", "Testimonials").

🛠 How to Add Your Own Blocks

  1. Create your custom .html file.
  2. Place it inside the appropriate folder (blocks, sections, or pages).
  3. Optionally organize it in a subfolder to categorize it.
  4. Refresh the LiveCanvas editor — your new item will appear automatically.

💡 Tip: Use Picostrap Starter

We recommend starting from the Picostrap Starter Child Theme, which already includes the /livecanvas/ structure. This gives you a clean and compatible foundation for developing modular themes.

📁 The "starter-data" Folder: delivering a complete site package

[LC 4.6+] You can include  in your child theme a "starter-data" folder, containing a set of JSON files to initialize starter content and fully setup the site.

As a practical example, have a look at the "starter-data" folder of Gourmet, our free child theme for picostrap.

Here is a list of the files that will be imported, if present, at child activation, after user confirmation:

  • demo-content.xml file to deliver demo content using standard WordPress XML (You can build this using the built-in WordPress XML Export Plugin)
  • menus.json file to preconfigure menus. You can build a JSON file from the Picostrap backend settings.
  • theme-options.json file to preconfigure Customizer options, to retain the exact Bootstrap Customizer settings. You can build a JSON file from the Picostrap backend settings.
  • livecanvas-settings.json file to preconfigure LiveCanvas options, to retain the exact Bootstrap Customizer settings. See the examples file to enable header, footer, and dynamic templating.

🔄 Editor Sync Behavior

LiveCanvas will automatically detect new .html files placed into the /livecanvas/ folders. You don’t need to recompile or trigger any sync process — simply reload the editor and your content will appear.

This modular file-based approach makes LiveCanvas theme development faster, more organized, and easier to maintain. It's the ideal foundation for building modern, editable WordPress themes with developer-first control.