Quick Start ​

Try Minze online ​

Quickly check out what's Minze all about. You can try Minze in a Sandbox on CodePen or on StackBlitz by selecting one of the links below.

Scaffolding a project ​

The easiest way to get started locally is to scaffold a new Minze dev environment. It comes with everything you need to develop custom web components and publish them to npm.

Minze requires Node.js version >= 16.0.0

Follow these steps in your command line to get started.

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

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

$ yarn create minze my-project --template vite
$ cd my-project
$ yarn install

$ yarn create minze my-project --template vite
$ cd my-project
$ yarn install

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

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

Creating a component ​

1. In the root directory of your project start the development server and open the http://localhost:5173 URL.

$ npm run dev

$ npm run dev

$ yarn dev

$ yarn dev

$ pnpm run dev

$ pnpm run dev

2. Navigate to the src/lib directory and create a new new-element.js file. The lib directory is where all of your web components live. During development all of them are auto-registered and ready to use.

src/
└─ lib/
   ├─ ...
   └─ new-element.js 

src/
└─ lib/
   ├─ ...
   └─ new-element.js 

3. Paste the following code into the file. The component will be auto-registered with dash-case naming new-element inferred from the class name NewElement.

import { MinzeElement } from 'minze'

export class NewElement extends MinzeElement {
  // html template
  html = () => `<div>My very own component!</div>`

  // scoped stylesheet
  css = () => `
    div {
      background: rgb(55 245 220);
      color: rgb(50 50 50);
      padding: 1rem;
    }
  `
}

import { MinzeElement } from 'minze'

export class NewElement extends MinzeElement {
  // html template
  html = () => `<div>My very own component!</div>`

  // scoped stylesheet
  css = () => `
    div {
      background: rgb(55 245 220);
      color: rgb(50 50 50);
      padding: 1rem;
    }
  `
}

4. Create a preview.dev.html file in the src directory (by default, git won't track this file). The file is injected into the preview during dev runtime and is what you see on the screen when you are running the dev task, if no preview.dev.html file is present, it falls back to preview.html (which is tracked by git).

src/
├─ ...
├─ preview.dev.html 
└─ preview.html

src/
├─ ...
├─ preview.dev.html 
└─ preview.html

5. Add your element to preview.dev.html. This file is essentially a little sandbox for trying out and previewing your components.

<new-element></new-element> 

<new-element></new-element> 

6. Profit. Your component/element should be displayed in the browser.