Introduction ​

Minze is a dead-simple JS framework for native web components.

Overview ​

Minze (German shorthand for "Peppermint", pronounced /ˈmɪnt͡sə/) lets you rapidly build native web components.

It is not a framework for building complex user interfaces or single-page apps, like React, Vue or Angular. Instead, you can use Minze to create encapsulated, reusable, maintainable, cross-framework native web components.

Minze was made to be accessible to everyone, and to be easy to use. It removes a lot of complexity from the creation of custom web components.

Possible use cases:

• Design Systems: Create cross-framework design system libraries and share them with your team or the world. Define once, use everywhere.

• Light Alternative: If you don't want to use a common framework, but still want to create some components with JavaScript functionality for your site, you can use Minze.

• Browser Native Extending: You can add Minze to any web project and create components without using any build tools to extend its functionality.

Features ​

• 👶 Simple - Dive right in by scaffolding a project, installing from npm or using CDN link.
• ⚡ 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.

Architecture ​

Minze consists of two main classes:

• Minze - A class with multiple static methods for common tasks, like defining several components at once.
• MinzeElement - Base class for custom web components. It adds an abstraction layer around the web components API and several additional features like reactivity.

There's also a CLI tool that can be used to create a development environment for Minze components. Out of the box, it runs with vanilla Vite or Storybook and optionally TypeScript.

Browser Support ​

By default, Minze is transpiled to ES2020. Minze should be compatible with all browsers supporting ES2020 and Custom Elements.