How do I add TypeScript to the LitElement JavaScript starter?

While this starter is JavaScript-based, Lit supports TypeScript; you'll need to manually set up tsconfig.json and adjust build processes, as it's not included out-of-the-box. Check Lit's documentation for guidance on TypeScript integration.

LitElement starter vs plain Lit: what's the benefit?

This starter provides a pre-configured environment with testing, linting, and documentation tools, saving significant setup time compared to starting from scratch with Lit alone. It enforces best practices and includes modern workflows like live-reload and VS Code support.

How to test LitElement components in production mode with this starter?

Use the npm script `npm run test:prod` to run tests in Lit's production mode, as specified in the README's testing section. This ensures components behave correctly under optimized conditions.

Can I use this starter to build a full web app or just components?

It's optimized for creating reusable web components, but can be extended for applications; however, you'll need to add routing, state management, and other app-level features separately. For full apps, consider Lit's application-focused templates.

What's the migration path from Lit 2.0 to 3.0 using this template?

The starter is based on Lit 3.0 pre-release and designed to be interoperable with Lit 2.0, making upgrades straightforward by extending npm version ranges. Refer to the 'About this release' section for details on breaking changes.

How to deploy LitElement components built with this starter?

Since bundling is only for docs, you'll need to set up your own production build process using tools like Rollup or Webpack, following Lit's publishing best practices. The README recommends performing optimizations at the application level.

Open-Awesome

LitElement JavaScript starter

BSD-3-ClauseJavaScript

A starter template for building web components with LitElement and JavaScript.

GitHub

210 stars125 forks0 contributors

What is LitElement JavaScript starter?

LitElement JavaScript starter is a pre-configured project template for building web components using LitElement with JavaScript. It provides a ready-to-use development environment with testing, linting, and documentation tools, allowing developers to quickly start creating custom elements without manual setup. The template is based on Lit 3.0 pre-release and follows Lit's best practices for component development.

Target Audience

Frontend developers and teams looking to build reusable web components with LitElement and JavaScript, especially those starting new projects or learning Lit's ecosystem.

Value Proposition

It offers a standardized, opinionated setup that includes modern tooling and workflows, reducing initial configuration time. The template is maintained by the Lit team, ensuring alignment with Lit's evolving best practices and easy upgrades.

Overview

Sample component project using LitElement, in JavaScript

Use Cases

Best For

Starting new web component projects with LitElement and JavaScript
Learning LitElement and modern web component development workflows
Creating reusable UI component libraries as custom elements
Setting up a development environment with integrated testing and linting
Building documentation sites for web component projects
Experimenting with Lit 3.0 features and migration from Lit 2.0

Not Ideal For

Projects requiring deep integration with server-side frameworks like Next.js or SvelteKit
Teams wanting pre-styled, drop-in UI components without custom CSS and markup development
Environments prioritizing minimal, zero-config setups over opinionated toolchains

Pros & Cons

Pros

Modern Dev Tooling

Includes @web/test-runner for testing and @web/dev-server for development with live-reload, streamlining workflows as outlined in the README's setup sections.

Lit 3.0 Forward Compatibility

Based on Lit 3.0 pre-release with minimal breaking changes from Lit 2.0, ensuring easy upgrades and interoperability, per the 'About this release' section.

Integrated Code Quality

Comes with ESLint, Prettier, and lit-analyzer for linting and formatting, reducing manual configuration for consistent code standards.

Documentation Ready

Integrates Eleventy static site generator to build project docs from markdown, facilitating documentation from the start, as described in the static site section.

Cons

Pre-release Dependency

Relies on Lit 3.0 pre-release, which may introduce instability or changes before the final release, as cautioned in the README's release notes.

Limited Production Bundling

Rollup configuration is only for docs generation, not for optimizing component bundles, requiring additional setup for production deployments, as stated in the bundling section.

Tooling Overhead

Includes multiple tools like Eleventy and linting setups, which can be excessive for simple projects or add complexity for developers preferring leaner environments.

Frequently Asked Questions

Related Projects

Vite Lit Starter

Next generation frontend tooling. It's fast!

Welcome to the PWABuilder pwa-starter! Looking to build a new Progressive Web App and not sure where to get started? This is what you are looking for!

Stars1,321

Forks319

Last commit1 year ago

LitElement TypeScript starter

Sample component project using LitElement with TypeScript

Stars538

Forks213

Last commit6 months ago

pwa-lit-template

A template for building Progressive Web Applications using Lit and Vaadin Router.

Stars183

Forks22

Last commit3 years ago

Community-curated · Updated weekly · 100% open source

Found a gem we're missing?

Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.

Submit a project Star on GitHub