Developing components.
The right way.

Generate an interactive UI to develop, preview and document web components.

Live Demo Documentation

A UI for your components.

Malvid analyses your folder structure and turns your files into a visual UI.

├── arrow
│   ├──
│   └── arrow.njk
├── area
│   ├──
│   └── area.njk
├── audio
│   ├── audio.config.json
│   ├──
│   ├──
│   └── audio.njk
└── ...


Screenshot of Malvid
Malvid changed the way we work at comwrap. It's the foundation and single source of truth for the project manager, designer, developer and client.
Connecting front-end and back-end can be a painful process. Malvid takes this pain away by separating the site into small, testable and reliable components.
Malvid allows us to work on multiple components at the same time. It keeps the team and project organized so we can add more logic without losing sight.
Placeholder Placeholder Placeholder

Many features,
but only what matters.

Faster to work with

Malvid is written in Node.js and rendered via React to ensure a blazing fast generation and usage. Switch between components without a single reload.

Easier to test

Malvid allows you to test and debug isolated components aswell as sections or whole webpages.

A workflow to love

Life gets easier when everyone and everything works perfectly together. Malvid is the foundation for the workflow your team has been waiting for.

Easy to deploy

Malvid exports static HTML, JS and CSS files. Host your UI anywhere simply by uploading the files to your server.

Adjustable to your needs

No matter which templating language or folder structure you use, Malvid can be adjusted to display whatever you want.

Useful to reference

Malvid offers a great visual reference to acceptance definition in agile methodologies. Everyone can see what you are talking about.

electerious$ malvid


malvid [command] [filenames] [options]


html [filename] output HTML for the UI
json [filename] output JSON with component data


-V, --version output the version number
-h, --help output usage information


$ malvid index.html index.html.json
$ malvid html index.html
$ malvid json index.html.json

Make code visual.
With your terminal.

Malvid can be integrated into your project using its API or CLI. The CLI tool is located in the bin folder and allows you to run Malvid without adding JS files to your project.

Execute Malvid using the CLI or using the API
Malvid scans the folder you've specified and generates a static HTML output
Open the generated site to view the UI