{"id":13827211,"url":"https://github.com/Malvid/Malvid","last_synced_at":"2025-07-09T03:31:21.451Z","repository":{"id":57291098,"uuid":"90838468","full_name":"Malvid/Malvid","owner":"Malvid","description":"UI to help you build and document web components.","archived":false,"fork":false,"pushed_at":"2022-01-08T15:49:33.000Z","size":951,"stargazers_count":359,"open_issues_count":4,"forks_count":21,"subscribers_count":13,"default_branch":"master","last_synced_at":"2024-07-18T14:42:04.288Z","etag":null,"topics":["cli","component-builder","component-library","components","static-site-generator"],"latest_commit_sha":null,"homepage":"https://malvid.electerious.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Malvid.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-05-10T08:13:10.000Z","updated_at":"2024-06-01T10:19:21.000Z","dependencies_parsed_at":"2022-09-01T15:21:11.222Z","dependency_job_id":null,"html_url":"https://github.com/Malvid/Malvid","commit_stats":null,"previous_names":["comwrap/rosid-handler-components"],"tags_count":63,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Malvid%2FMalvid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Malvid%2FMalvid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Malvid%2FMalvid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Malvid%2FMalvid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Malvid","download_url":"https://codeload.github.com/Malvid/Malvid/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":213898240,"owners_count":15654239,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cli","component-builder","component-library","components","static-site-generator"],"created_at":"2024-08-04T09:01:52.119Z","updated_at":"2024-08-04T09:06:29.456Z","avatar_url":"https://github.com/Malvid.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Malvid\n\n[![Travis Build Status](https://travis-ci.org/Malvid/Malvid.svg?branch=master)](https://travis-ci.org/Malvid/Malvid) [![Coverage Status](https://coveralls.io/repos/github/comwrap/Malvid/badge.svg?branch=master)](https://coveralls.io/github/comwrap/Malvid?branch=master)  [![Dependencies](https://david-dm.org/comwrap/Malvid.svg)](https://david-dm.org/comwrap/Malvid#info=dependencies) [![Greenkeeper badge](https://badges.greenkeeper.io/Malvid/Malvid.svg)](https://greenkeeper.io/)\n\nUI to help you build and document web components.\n\n![Malvid UI in a browser](https://s.electerious.com/images/malvid/readme.png)\n\n## Contents\n\n- 🏃 [Get started](#get-started)\n- 📄 [Introduction](#introduction)\n- 🔗 [Links](#links)\n- ⚙️ [Documentation](#documentation)\n\n## Get started\n\n### Guide\n\nMalvid can be integrated into your project in two ways: Using the CLI *or* using the API of Malvid. Check out our guide for more information. [Get started with Malvid \u0026#187;](docs/Get%20started.md)\n\n### Demo\n\nThe website of [Malvid](https://malvid.electerious.com) is open-source and built entirely with Malvid. You can take a look at the components and how they are made in the [repository of the website](https://github.com/Malvid/website).\n\n## Introduction\n\n### What is Malvid?\n\nMalvid helps you to build, document and visualise components by turning a directory into an interactive UI.\n\n### How does it work?\n\n1. You execute Malvid using the CLI *or* using the API\n2. Malvid scans the folder you've specified and generates a static HTML output\n3. You open the output in your browser to start browsing through your components\n\n### Why Malvid?\n\n- It visualises components in a way that improves how your team works with components\n- It doesn't force you to use a defined directory structure, templating language or build tool\n- It integrates perfectly with [Rosid](https://rosid.electerious.com)\n- It's built on popular modules like [React](https://reactjs.org)\n- It's lightweight and only includes what it really needs\n\n### What are components?\n\nComponents are independent and reusable pieces of a project. A component could be a tiny chunk of HTML, a whole page or something in between. Malvid does not enforce any specific templating engine or naming conventions for those components.\n\n## Links\n\nBoilerplates:\n\n- 📐 [Skeleton Components](https://github.com/electerious/Skeleton-Components): UI for components written in Nunjucks, JS (with Babel, UglifyJS) and SASS (with cssnano, Autoprefixer)\n\nGuides:\n\n- 📄 [Get started](docs/Get%20started.md)\n- 📄 [Integrations](docs/Integrations.md)\n- 📄 [Inspector tabs](docs/Inspector%20tabs.md)\n\nResources:\n\n- 🎬🇩🇪 [Scalable Front-Ends with Web Components and Malvid](https://www.youtube.com/watch?v=4o-WHDXjNgo\u0026index=8\u0026list=LL5lfEWoNEhOh1SDcVlr37iQ\u0026t=0s)\n- 📄 [Sharing components between front-end and back-end](https://medium.com/@electerious/sharing-components-between-front-end-and-back-end-1e9a624bceae)\n- 📄 [Styleguide](docs/Styleguide.md)\n\nSimilar tools:\n\n- 🛠 [Fractal](https://fractal.build)\n- 🛠 [Pattern Lab](https://patternlab.io)\n\nSites powered by Malvid:\n\n- 🌍 [Malvid](https://malvid.electerious.com)\n- 🌏 [Commerz Real AG](https://www.commerzreal.com)\n\n## Documentation\n\n### Requirements\n\nMalvid depends on...\n\n- [Node.js](https://nodejs.org/en/) (v8.9.0 or newer)\n- [npm](https://www.npmjs.com)\n\nMake sure to install and update all dependencies before you setup Malvid.\n\n### Interface\n\nThe interface of Malvid puts the focus on your components. This chapter gives you an overview about it's possibilities. [Interface \u0026#187;](docs/Interface.md)\n\n### Hotkeys\n\nNavigate through your components using the hotkeys provided by Malvid. [Hotkeys \u0026#187;](docs/Hotkeys.md)\n\n### API\n\nMalvid can be integrated into your project using its API *or* CLI. The API gives you more flexibility and allows you to use Malvid in your existing asset pipeline or toolset. [API \u0026#187;](docs/API.md)\n\n### CLI\n\nThe CLI of Malvid is located in the `bin` folder and allows you to run Malvid without adding JS files to your project. This approach is simpler than using the API, but provides less flexibility. [CLI \u0026#187;](docs/CLI.md)\n\n### Components\n\nMalvid scans folders and detects all components in the given structure. This chapter explains how to store and manage components and how to add additional information to the UI using a configuration file. [Components \u0026#187;](docs/Components.md)\n\n### Integrations\n\nThe API of Malvid allows you to use your existing asset pipeline or toolset together with Malvid. This includes Rosid, Gulp, NPM scripts and other systems. [Integrations \u0026#187;](docs/Integrations.md)\n\n### Options\n\nIf you want more control over Malvid, pass an object of options to it. [Options \u0026#187;](docs/Options.md)\n\n### FAQ\n\nAnswers to frequently asked questions. [FAQ \u0026#187;](docs/FAQ.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMalvid%2FMalvid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FMalvid%2FMalvid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMalvid%2FMalvid/lists"}