Adding Lit to an existing project
Install from npmPermalink to “Install from npm”
First, install the
lit package from npm:
Add a componentPermalink to “Add a component”
You can create a new element anywhere in your project's sources:
Use your componentPermalink to “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 HTMLPermalink to “Plain HTML”
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
Framework templatesPermalink to “Framework templates”
Next stepsPermalink to “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.