npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

malvid

v6.0.0

Published

UI to help you build and document web components

Downloads

444

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

electeriouselecterious

Keywords

rosidhandlertransformuifractalcomponents

Readme

Malvid

Travis Build Status Coverage Status Dependencies Greenkeeper badge

UI to help you build and document web components.

Malvid UI in a browser

Contents

Get started

Guide

Malvid 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 »

Demo

The website of Malvid 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.

Introduction

What is Malvid?

Malvid helps you to build, document and visualise components by turning a directory into an interactive UI.

How does it work?

  1. You execute Malvid using the CLI or using the API
  2. Malvid scans the folder you've specified and generates a static HTML output
  3. You open the output in your browser to start browsing through your components

Why Malvid?

  • It visualises components in a way that improves how your team works with components
  • It doesn't force you to use a defined directory structure, templating language or build tool
  • It integrates perfectly with Rosid
  • It's built on popular modules like React
  • It's lightweight and only includes what it really needs

What are components?

Components 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.

Links

Boilerplates:

  • 📐 Skeleton Components: UI for components written in Nunjucks, JS (with Babel, UglifyJS) and SASS (with cssnano, Autoprefixer)

Guides:

Resources:

Similar tools:

Sites powered by Malvid:

Documentation

Requirements

Malvid depends on...

Make sure to install and update all dependencies before you setup Malvid.

Interface

The interface of Malvid puts the focus on your components. This chapter gives you an overview about it's possibilities. Interface »

Hotkeys

Navigate through your components using the hotkeys provided by Malvid. Hotkeys »

API

Malvid 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 »

CLI

The 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 »

Components

Malvid 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 »

Integrations

The 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 »

Options

If you want more control over Malvid, pass an object of options to it. Options »

FAQ

Answers to frequently asked questions. FAQ »