adding-lit.md

title	eleventyNavigation	versionLinks
Adding Lit to an existing project	key parent order Adding Lit Tools 8	v1 v2 tools/use/ tools/adding-lit/

Lit doesn't require any specialized tools, and Lit components work in any JavaScript framework or with any server templating system or CMS, so Lit is ideal for adding to existing projects and applications.

Install from npm

First, install the lit package from npm:

npm i lit

If you are not already using npm to manage JavaScript dependencies, you will have to set up your project first. We recommend the npm CLI.

Add a component

You can create a new element anywhere in your project's sources:

lib/components/my-element.ts

{% switchable-sample %}

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

@customElement('my-element')
class MyElement extends LitElement {
  render() {
    return html`
      <div>Hello from MyElement!</div>
    `;
  }
}

import {LitElement, html} from 'lit';

class MyElement extends LitElement {
  render() {
    return html`
      <div>Hello from MyElement!</div>
    `;
  }
}
customElements.define('my-element', MyElement);

{% endswitchable-sample %}

Use your component

How you use a component depends on your project and the libraries or frameworks it uses. You can use your component in HTML, with DOM APIs, or in template languages:

Plain HTML

<script type="module" src="/lib/components/my-element.js">
<my-element></my-element>

JSX

JSX is a very common templating language. In JSX, lower-case element names create HTML elements, which is what Lit components are. Use the tag name you specified in the @customElement() decorator:

import './components/my-element.js';

export const App = () => (
  <h1>My App</h1>
  <my-element></my-element>
)

Framework templates

Most JavaScript frameworks have great support for web components and Lit. Just import your element definition and use the element tag names in your templates.

Next steps

At this point, you should be able to build and run your project and see the "Hello from MyElement!" message.

If you're ready to add features to your component, head over to Components to learn about building your first Lit component, or Templates for details on writing templates.

For details on building projects, including some sample Rollup configurations, see Building for production.