Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/n6ai/minze

Dead-simple JS framework for native web components.
https://github.com/n6ai/minze

custom-elements design-system shadow-dom storybook ui vite vitejs web-components web-elements webcomponents

Last synced: about 1 month ago
JSON representation

Dead-simple JS framework for native web components.

Host: GitHub
URL: https://github.com/n6ai/minze
Owner: n6ai
License: mit
Created: 2021-12-13T19:26:22.000Z (over 2 years ago)
Default Branch: main
Last Pushed: 2024-06-01T04:39:52.000Z (about 1 month ago)
Last Synced: 2024-06-01T06:22:28.489Z (about 1 month ago)
Topics: custom-elements, design-system, shadow-dom, storybook, ui, vite, vitejs, web-components, web-elements, webcomponents
Language: TypeScript
Homepage: http://minze.dev
Size: 3.52 MB
Stars: 545
Watchers: 7
Forks: 24
Open Issues: 5
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md

Lists

awesome-stars - n6ai/minze - Dead-simple JS framework for native web components. (TypeScript)

README

         



  

    

  



# Minze

> Dead-simple JS framework for native web components.

Minze (German shorthand for "Peppermint", pronounced [/ˈmɪnt͡sə/](https://upload.wikimedia.org/wikipedia/commons/c/c2/De-Minze.ogg)) lets you rapidly build native web components.

It provides an intuitive abstraction layer around the web components API with its own fully typed [JavaScript API](https://minze.dev/api/). Including reactivity, lifecycle hooks, scoped styles, one-shot components registration, and more.

1. You can create cross-framework component libraries or design systems and share them with your team or the world.

2. You can add Minze to any web project and create components without even using any build tools.

[Read the Docs to Learn More](https://minze.dev).

## Features

- 👶 Simple - Dive right in by [scaffolding](packages/create-minze) a project, installing from [npm](https://minze.dev/guide/installation#npm) or using a [CDN link](https://minze.dev/guide/installation#cdn).

- ⚡ Fast - Tiny footprint ~3KB (minified and compressed).

- 🚀 Modern - Based on the latest technologies around web components.

- 📦 Shareable - Build component libraries or design systems. Define once, use everywhere.

- 🎲 Framework Agnostic - Use Minze with any common framework - React, Vue, Svelte, etc ...

- 📕 Storybook - Minze x Storybook dev environment integration.

- 📖 Extensive Docs - Comprehensive documentation and API reference.

- 🔒 Typed API - Scale your component library with ease by using TypeScript.

## Packages

| Package                                         | Version                                                                                                                                                    | Description                                                  |

| ----------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------ |

| [create-minze](packages/create-minze)           | [![create-minze version](https://img.shields.io/npm/v/create-minze.svg?label=%20&color=323232)](packages/create-minze/CHANGELOG.md)                        | Scaffolding CLI tool for setting up a Minze dev environment. |

| [minze](packages/minze)                         | [![minze version](https://img.shields.io/npm/v/minze.svg?label=%20&color=323232)](packages/minze/CHANGELOG.md)                                             | Dead-simple JS framework for native web components.          |

| [minze-vscode](packages/minze-vscode)           | [![minze-vscode version](https://img.shields.io/visual-studio-marketplace/v/n6ai.minze-vscode?label=%20&color=323232)](packages/minze-vscode/CHANGELOG.md) | VS Code language support for Minze.                          |

| [vite-plugin-minze](packages/vite-plugin-minze) | [![vite-plugin-minze version](https://img.shields.io/npm/v/vite-plugin-minze.svg?label=%20&color=323232)](packages/vite-plugin-minze/CHANGELOG.md)         | Vite plugin for Minze dev environment.                       |

## Contribution

See [Contributing Guide](https://github.com/n6ai/minze/blob/main/.github/CONTRIBUTING.md). Open the Minze repo in Codeflow or StackBlitz.

[![Open in Codeflow](https://developer.stackblitz.com/img/open_in_codeflow_small.svg)](https://pr.new/n6ai/minze)

[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz_small.svg)](https://stackblitz.com/github/n6ai/minze?title=minze&terminal=dev)

## License

MIT