HTMLDrop.

Lit starter

A reusable web component built with Lit.

Open in editor Free. No install, no sign-up.
  • lit

The code

Three files, exactly what you get in the editor.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Lit starter</title>
  </head>
  <body>
    <my-element>
      <h1>Hello, Lit!</h1>
    </my-element>
  </body>
</html>

:root {
  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  color-scheme: light dark;
  color: rgba(255, 255, 255, 0.87);
  background-color: #242424;
  -webkit-font-smoothing: antialiased;
}
body {
  margin: 0;
  display: flex;
  place-items: center;
  min-width: 320px;
  min-height: 100vh;
}
@media (prefers-color-scheme: light) {
  :root {
    color: #213547;
    background-color: #ffffff;
  }
}

import { LitElement, css, html, svg } from "https://esm.sh/lit@3";

const logo = svg`<path fill="#00E8FF" d="m64 192l25.926-44.727l38.233-19.114l63.974 63.974l10.833 61.754L192 320l-64-64l-38.074-25.615z"/><path fill="#283198" d="M128 256V128l64-64v128l-64 64ZM0 256l64 64l9.202-60.602L64 192l-37.542 23.71L0 256Z"/><path fill="#324FFF" d="M64 192V64l64-64v128l-64 64Zm128 128V192l64-64v128l-64 64ZM0 256V128l64 64l-64 64Z"/><path fill="#0FF" d="M64 320V192l64 64z"/>`;

/**
 * An example element: a slot for your content, and a counter.
 */
class MyElement extends LitElement {
  static properties = {
    docsHint: {},
    count: { type: Number },
  };

  constructor() {
    super();
    this.docsHint = "Click on the Lit logo to learn more";
    this.count = 0;
  }

  render() {
    return html`
      <a href="https://lit.dev" target="_blank">
        <svg class="logo" viewBox="0 0 256 320" role="img" aria-label="Lit">${logo}</svg>
      </a>
      <slot></slot>
      <div class="card">
        <button @click=${() => this.count++} part="button">count is ${this.count}</button>
      </div>
      <p class="read-the-docs">${this.docsHint}</p>
    `;
  }

  static styles = css`
    :host {
      max-width: 1280px;
      margin: 0 auto;
      padding: 2rem;
      text-align: center;
    }
    .logo {
      height: 6em;
      padding: 1.5em;
      will-change: filter;
      transition: filter 300ms;
    }
    .logo:hover {
      filter: drop-shadow(0 0 2em #325cffaa);
    }
    .card {
      padding: 2em;
    }
    .read-the-docs {
      color: #888;
    }
    ::slotted(h1) {
      font-size: 3.2em;
      line-height: 1.1;
    }
    button {
      border-radius: 8px;
      border: 1px solid transparent;
      padding: 0.6em 1.2em;
      font-size: 1em;
      font-weight: 500;
      font-family: inherit;
      background-color: #1a1a1a;
      cursor: pointer;
      transition: border-color 0.25s;
    }
    button:hover {
      border-color: #646cff;
    }
    @media (prefers-color-scheme: light) {
      button {
        background-color: #f9f9f9;
      }
    }
  `;
}

customElements.define("my-element", MyElement);

Questions

Can I use Lit without a build step?

Yes. This starter loads Lit straight from a CDN, so it runs in the browser with no npm install, bundler, or config.

How do I start a Lit project online?

Click Open in editor. HTMLDrop copies this starter into a new drop with index.html, style.css, and script.js, and the preview updates as you edit.

Is it free?

Yes. Public drops, live collaboration, versions, and embeds are free, and you do not need an account to start.

Can I share or embed my Lit demo?

Yes. Every drop gets a public link and an embed code, and you can invite others to edit it with you in real time.

More starter kits