Installation

Minze can be installed in several different ways.

npm

Installing from npm:

npmyarnpnpmbun

bash

$ npm add minze

bash

$ yarn add minze

bash

$ pnpm add minze

bash

$ bun add minze

import { MinzeElement } from 'minze'

class MyElement extends MinzeElement {
  html = () => 'Hello Minze!'
}

MyElement.define()

html

<my-element></my-element>

CLI

Installing via command line:

Minze requires Node.js version >= 16.0.0

npmyarnpnpmbun

bash

$ npm create minze@latest

bash

$ yarn create minze

bash

$ pnpm create minze

bash

$ bun create minze

Then follow the prompts!

Command line options

You can also directly specify the project name and the template you want to use via additional command line options. For example, to scaffold a Vite environment, run:

npmyarnpnpmbun

bash

$ npm create minze@latest my-project -- --template vite

bash

$ yarn create minze my-project --template vite

bash

$ pnpm create minze my-project -- --template vite

bash

$ bun create minze my-project --template vite

Currently supported template presets include:

vite
vite-ts
storybook
storybook-ts

You can use . for the project name to scaffold in the current directory.

CDN

Loading Minze via a CDN link from esm.sh, unpkg or jsdelivr. Pick one of the following:

esm.sh

https://esm.sh/minze for latest version
https://esm.sh/[email protected] pin to specific version

unpkg

https://unpkg.com/minze for latest version
https://unpkg.com/[email protected] pin to specific version

jsdelivr

https://esm.run/minze for latest version
https://esm.run/[email protected] pin to specific version

WARNING

In production, always pin your imports to a specific version to prevent your application from breaking unexpectedly during a future update.

ModuleModule > defineAll

html

<html>
  <head></head>
  <body>
    <!-- custom element -->
    <my-element></my-element>

    <!-- js code -->
    <script type="module">
      import { MinzeElement } from 'https://esm.sh/minze'

      ;(class MyElement extends MinzeElement {
        html = () => 'Hello Minze!'
      }).define()
    </script>
  </body>
</html>

html

<html>
  <head></head>
  <body>
    <!-- custom elements -->
    <first-element></first-element>
    <second-element></second-element>

    <!-- js code -->
    <script type="module">
      import { Minze, MinzeElement } from 'https://esm.sh/minze'

      class FirstElement extends MinzeElement {
        html = () => 'Hello Minze!'
      }

      class SecondElement extends MinzeElement {
        html = () => 'Hello Minze again!'
      }

      Minze.defineAll([FirstElement, SecondElement])
    </script>
  </body>
</html>

Installation ​

npm ​

CLI ​

Command line options ​

CDN ​

Installation

npm

CLI

Command line options

CDN