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 rollup and vite.

Minze requires Node.js version >= 16.0.0

Follow these steps in your command line to get started.

npm

bash
$ npm init [email protected] my-project -- --template js
$ cd my-project
$ npm install

yarn

bash
$ yarn create minze my-project --template js
$ cd my-project
$ yarn install

pnpm

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
$ npm run dev

# yarn
$ yarn dev

# pnpm
$ 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.