Generate an interactive UI to develop, preview and document web components.
Live Demo DocumentationMalvid analyses your folder structure and turns your files into a visual UI.
.
├── arrow
│ ├── arrow.data.json
│ └── arrow.njk
├── area
│ ├── area.data.json
│ └── area.njk
├── audio
│ ├── audio.config.json
│ ├── audio.data.json
│ ├── audio.md
│ └── audio.njk
└── ...
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.
comwrap GmbH
Digital Enterprise Company
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.
Electerious
Web designer and developer
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.
Setgraphic
Webdesign Frankfurt
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.
Malvid allows you to test and debug isolated components aswell as sections or whole webpages.
Life gets easier when everyone and everything works perfectly together. Malvid is the foundation for the workflow your team has been waiting for.
Malvid exports static HTML, JS and CSS files. Host your UI anywhere simply by uploading the files to your server.
No matter which templating language or folder structure you use, Malvid can be adjusted to display whatever you want.
Malvid offers a great visual reference to acceptance definition in agile methodologies. Everyone can see what you are talking about.
electerious$ malvid
Usage:
malvid [command] [filenames] [options]
Commands:
html [filename] output HTML for the UI
json [filename] output JSON with component data
Options:
-V, --version output the version number
-h, --help output usage information
Examples:
$ malvid index.html index.html.json
$ malvid html index.html
$ malvid json index.html.json
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.
Want to get started with Malvid? Grab the source and documentation from GitHub or play with our ready-to-rock boilerplate.