You're viewing docs for an older version of Lit. Click here for the latest version.
Adding Lit to an existing project
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.
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:
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:
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.
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.