Quick Start
Try Minze online
Quickly check out what's Minze all about.
Site | ||
---|---|---|
StackBlitz | JavaScript | TypeScript |
CodePen | JavaScript | |
WebComponents.dev | JavaScript |
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
- 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
- Navigate to the
lib
directory and create a new file.
src/
└─ lib/
├─ ...
└─ my-element.js
- 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;
}
`
}
- Open the
module.js
andtemplate.js
files.
src/
├─ ...
├─ module.js
└─ template.js
- Define an export for your component at the bottom of
module.js
.
js
// ...
export * from './lib/my-element'
- Add your component to the template inside
template.js
.
js
export default `
<my-element></my-element>
<minze-counter></minze-counter>
`
- Profit. Your component should be displayed in the browser.
Next steps:
- Learn how to publish and use your components.
- Learn how to use Minze with TypeScript.