Skip to content


ImagineUI for Foliant

ImagineUI is a tool that supports developing wireframes in a localized human-readable format.

This preprocessor allows using <imagineui> macros in Foliant


Before using ImagineUI, you need to install Node.js.

ImagineUI preprocessor code is written in Python, but it uses a JavaScript package. This script is provided in ImagineUI package:

$ pip install foliantcontrib.imagineui

ImagineUI uses Puppeteer for rendering in background, which is a huge dependency, so to avoid downloading Chrome every time this preprocessor applies, it's advised to install imagineui-cli globally.

$ npm i -g imagineui-cli


To enable the preprocessor, add imagineui to preprocessors section in the project config:

    - imagineui

The preprocessor has a number of options with the following default values:

    - imagineui:
        version: global
        cache_dir: !path .imagineuicache
Version of the imagineui-cli package in NPM. "global" (default) will skip and will use either the version already installed globally or the latest version, which speeds up NPX significantly.
Directory to store rendered images.


To insert a wireframe image rendered by ImagineUI into your documentation, use <imagineui>...</imagineui> tags in Markdown source:

    Page: "Welcome screen"
    Block: "Header"
        Header "Mockup poetry"
    Block: "Flowers"
        Two columns
            Image "Roses are red,"
            Image "Violets are blue."
            Image "Your mockups are awesome,"
            Image "And so are you!"
    Block: "Footer"
        One row
            Button "Try ImagineUI"
            Button "Subscribe"
            Button "Contribute"

ImagineUI preprocessor will replace such blocks with local image references.


BindSympli preprocessor was used as a starting point

Back to top