Skip to main content

Getting started checklist

Choose your framework​

Different frameworks offer different advantages:

  • Lit: The best overall choice with excellent TypeScript support and great developer experience.
  • Stencil: Ideal for large component libraries with JSX syntax and built-in optimisations.
  • Vanilla JavaScript: For projects requiring minimal dependencies and maximum control.
  • Fast Element: Designed for enterprise applications with focus on performance and accessibility.

Set up a development environment​

# For Lit-based components
npm create vite@latest my-components -- --template lit-ts
cd my-components
npm install
npm run dev

Create your first component​

import { LitElement, html, css } from 'lit';
import { customElement, property } from 'lit/decorators.js';

@customElement('hello-world')
export class HelloWorld extends LitElement {
  @property()
  name: string = 'World';

  static styles = css`
    :host {
      display: block;
      padding: 1rem;
      background: #f0f0f0;
      border-radius: 8px;
    }
  `;

  render() {
    return html`<h1>Hello, ${this.name}!</h1>`;
  }
}

Test your component​

<!DOCTYPE html>
<html>
<head>
  <script type="module" src="./hello-world.js"></script>
</head>
<body>
  <hello-world name="Developer"></hello-world>
</body>
</html>

Package and distribute​

{
  "name": "my-web-components",
  "main": "dist/index.js",
  "module": "dist/index.js",
  "files": ["dist"],
  "scripts": {
    "build": "vite build",
    "prepublishOnly": "npm run build"
  }
}