Skip to content
On this page

Installation

Minze can be installed in several different ways.

npm

Installing from npm:

bash
$ npm install minze
bash
$ yarn add minze
bash
$ pnpm add minze

TIP

You can also import the main Minze class as a default import:
import Minze, { MinzeElement } from 'minze'

js
import { Minze, MinzeElement } from 'minze'

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

Minze.defineAll([MyElement])
html
<my-element></my-element>

CLI

Installing via command line:

TIP

The CLI method scaffolds a Minze Dev and Publishing environment including rollup and vite.

Minze requires Node.js version >= 16.0.0

npm

bash
$ npm init [email protected]
bash
$ yarn create minze
bash
$ pnpm create minze

Then follow the prompts!

Templates

There are currently the following templates available:

  • JavaScript - js
  • TypeScript - ts

The shorthand can be used in command line options, e.g. --template ts

Command line options

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

bash
$ npm init [email protected] my-project -- --template ts
bash
$ yarn create minze my-project --template ts
bash
$ pnpm create minze my-project -- --template ts

CDN

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

TIP

Module refers here to the ES Module build of Minze and CDN refers to the UMD build.

unpkg

Module

CDN

jsdelivr

Module

CDN

minze.dev

This is a shorthand redirect to unpkg.

CDN

  • //cdn.minze.dev/latest for latest version
  • //cdn.minze.dev/1.0.0 pin to specific version

Example

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

    <!-- import and custom component definition -->
    <script type="module">
      import { MinzeElement } from '//unpkg.com/[email protected]/dist/module.js'

      (class MyElement extends MinzeElement {
        html = () => `Hello Minze!`
      }.define())
    </script>
  </body>
</html>
html
<html>
  <head></head>
  <body>
    <!-- custom component -->
    <my-element></my-element>

    <!-- minze -->
    <script src="//unpkg.com/[email protected]" defer></script>

    <!-- custom component definition -->
    <script type="module">
      (class MyElement extends MinzeElement {
        html = () => `Hello Minze!`
      }.define())
    </script>
  </body>
</html>
html
<html>
  <head></head>
  <body>
    <!-- custom components -->
    <my-element></my-element>
    <my-element-two></my-element-two>

    <!-- import and custom component definition -->
    <script type="module">
      import { Minze, MinzeElement } from '//unpkg.com/[email protected]/dist/module.js'

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

      class MyElementTwo extends MinzeElement {
        html = () => `Hello Minze again!`
      }

      Minze.defineAll([MyElement, MyElementTwo])
    </script>
  </body>
</html>

Released under the MIT License.