Skip to content
On this page

Quick Start

Try Minze online

Quickly check out what's Minze all about.

Site
StackBlitzJavaScriptTypeScript
CodePenJavaScript
WebComponents.devJavaScript

Scaffolding a project

The easiest way to get started locally is to scaffold a new Minze Dev and Publishing environment. It comes with everything you need to develop custom web components and publish them to npm. Out of the box, it comes with vite.

Minze requires Node.js version >= 16.0.0

Follow these steps in your command line to get started.

bash
$ npm init [email protected] my-project -- --template js
$ cd my-project
$ npm install
bash
$ yarn create minze my-project --template js
$ cd my-project
$ yarn install
bash
$ pnpm create minze my-project -- --template js
$ 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.
bash
$ npm run dev
bash
$ yarn dev
bash
$ pnpm run dev
  1. Navigate to the lib directory and create a new file.
src/
└─ lib/
   ├─ ...
   └─ my-element.js
  1. Paste the following code into the file.
js
import { MinzeElement } from 'minze'

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

  // scoped stylesheet
  css = () => `
    div {
      background: rgb(55 245 220);
      padding: 1rem;
    }
  `
}
  1. Open the module.js and template.js files.
src/
├─ ...
├─ module.js
└─ template.js
  1. Define an export for your component at the bottom of module.js.
js
// ...
export * from './lib/my-element'
  1. Add your component to the template inside template.js.
js
export default `
  <my-element></my-element>
  <minze-counter></minze-counter>
`
  1. Profit. Your component should be displayed in the browser.

Next steps:

Released under the MIT License.