During the development phase of your projects, when you're writing Lit components, the following tools can help boost your productivity:
- A dev server, for previewing code without a build step.
- TypeScript, for writing type-checked code.
- A code formatter, for consistently formatting code.
- Lit-specific IDE plugins, for linting and syntax-highlighting Lit templates.
Check out the Starter Kits documentation to easily setup a development environment with all of these features pre-configured.
Development and production buildsPermalink to “Development and production builds”
All the Lit packages are published with development and production builds, using Node's support for export conditions.
The production build is optimized with very aggressive minification settings. The development build is unminified for easier debugging and includes extra checks and warnings. The default build is the production build, so that projects don't accidentally deploy the larger development build.
You must opt into the development build by specifying the
"development" export condition in tools that support export conditions, such as Rollup, Webpack, and Web Dev Server. This is done differently for each tool.
For example, in Rollup, using the
@rollup/node-resolve plugin, you can select the development build with
Development build runtime warningsPermalink to “Development build runtime warnings”
The development builds of
LitElement support extra runtime warnings that can help identify issues that would be costly to check for in production builds.
Some warnings are always displayed. There are also two categories of optional warnings that can be turned on or off:
'migration'. Warnings related to migration from LitElement 2.x. Off by default.
'change-in-update'. Warnings related to changing reactive state during an update. On by default.
You can control the optional warnings using the
ReactiveElement.enableWarning() methods. You can call them on any subclass of
LitElement and your own classes. Calling the methods on a given class turns warnings on or off for and the warnings for that class and any subclasses. For instance, you can turn off a category of warnings on all
ReactiveElement classes, on all
LitElement classes, or on a specific
These methods are only available in development builds, so be sure to guard their access. We recommend using optional chaining.
You can also control warnings within a single class by defining a
static enabledWarnings property:
It's best for code size if the code to control warnings is eliminated in your own production builds.
Local dev serversPermalink to “Local dev servers”
To run this code in the browser, the bare specifier (
'lit') needs to be transformed to a URL that the browser can load (such as
There are many development servers that can deal with module specifiers. If you already have a dev server that does this and integrates with your build process, that should be sufficient.
If you need a dev server, we recommend Web Dev Server.
Web Dev ServerPermalink to “Web Dev Server”
Web Dev Server is an open-source dev server that enables a build-free development process.
It handles rewriting bare module specifiers to valid URLs, as required by browsers.
Install Web Dev Server:
Add a command to your
Run the dev server:
Legacy browser supportPermalink to “Legacy browser support”
@web/dev-server-legacy package to support older browsers.
Install the Web Dev Server legacy package:
For full installation and usage instructions, see the Web Dev Server documentation.
TypeScriptPermalink to “TypeScript”
To install TypeScript in your project:
To build the code:
Linting can help catch errors in your code. We recommend using ESLint for linting Lit code.
To install ESLint in your project:
To run it:
Or add it to your npm scripts:
For full installation and usage instructions, see the ESLint documentation.
We also recommend the
eslint-plugin-lit for ESLint which provides linting for Lit's HTML templates, inlcluding common HTML linting checks plus Lit-specific rules.
Integrating linting into your IDE workflow can help catch errors as early as possible. See Lit-specific IDE plugins to configure your IDE for Lit.
Source formattingPermalink to “Source formatting”
Using a code formatter can help ensure code is consistent and readable. Integrating your formatter of choice with your IDE ensures your code is always clean and tidy.
A few popular options include:
Lit-specific IDE pluginsPermalink to “Lit-specific IDE plugins”
There are a number of IDE plugins that may be useful when developing with Lit. In particular, we recommend using a syntax highlighter that works with Lit templates.
lit-pluginPermalink to “lit-plugin”
lit-plugin provides syntax highlighting, type checking, and more for Lit templates. It's available for VS Code, or you can use the
ts-lit-plugin TypeScript compiler plugin which works with Sublime Text and Atom.
- Syntax highlighting
- Code completion
- Hover-over docs
- Jump to definition
- Quick Fixes
ESLintPermalink to “ESLint”
Other pluginsPermalink to “Other plugins”
See the awesome-lit-html repo for other IDE plugins, as well as additional tools and information.