A curated list of awesome lit-html resources.
lit-html — an efficient, expressive, extensible HTML templating library for JavaScript.
- General resources
- Community
- Overview
- Implementations
- Components
- Starter Templates
- IDE Plugins
- TypeScript Plugins
- Tools
- Examples
- Videos
- Podcasts
- Blogs
- Projects
- Inspired Solutions
- Other awesome resources
Sorted by creation date (oldest first).
- lit-element - Simple base class for creating fast, lightweight Web Components.
- @gluon/gluon - Lightweight library for building Web Components and applications.
- @lit-any/core - Partials library, which uses lit-html to compose views and forms from smaller templates.
- lit-html-element - Base class for creating Web Components using lit-html.
- fit-html - Combination of lit-html, Web Components and Redux.
- lit-html-brackets - A lit-html extension that uses a bracket syntax similar to Angular's template syntax.
- @littleq/element-lite - A take on using lit-html and Polymer's property mixin.
- @popeindustries/lit-html-server - Render lit-html templates on the server as Node.js streams.
- ullr - Building Web Components with Functional Programming Using lit-html.
- ce-decorators - TypeScript library for building Web Components based on decorators proposal and lit-html.
- @appnest/lit-translate - Lightweight i18n library providing a lit-html directive.
- haunted - React's Hooks API but for standard web components and hyperHTML or lit-html.
- functional-web-component - Functional component like React, but for Web Components.
The following libraries allow using lit-html as a renderer, while also providing alternatives such as HyperHTML or JSX.
- @corpuscule/lit-html-renderer - lit-html based renderer for Corpuscule.
- @helikopter/render-lit-html - lit-html based renderer for Helicopter.
- @moleculejs/molecule-lit - lit-html based renderer for Molecule.
- @skatejs/element-lit-html - lit-html based renderer for SkateJS.
- icomponent-lit - lit-html based renderer for icomponent.
These are not implementations of lit-html itself but rather community extensions of the official LitElement base class.
- @apollo-elements/lit-apollo - LitElement integrations with Apollo GraphQL.
- @collaborne/lit-flexbox-literals - Provides LitElement CSS literals & classes ported from @polymer/iron-flex-layout.
- @morbidick/lit-element-notify - Small mixin for LitElement to get easy change events via the properties getter.
- fluent-localize-mixin - LitElement extension that provides easy l10n out of the box.
- nextbone - Backbone re-imagined with ES classes and decorators for using with LitElement.
- @feature-hub/dom - Library for building a Feature Hub integrator using Web Components.
- Amber Components - Web Components implementation of the Amber Design System.
- Bronconents - Modern Web Components built with Lit-Element.
- Carbon Custom Elements - Experimental variant of Carbon Design System built with Web Components.
- Chartjs Web Components - Web components for chartjs.
- Clever components - Collection of Web Components made by Clever Cloud.
- Ink Components - Web components for interactive scientific writing.
- LRNWebComponents - ELMS:LN produced web components for any project.
- Material Web Components - Material Design implemented as Web Components.
- Microsoft Graph Toolkit - Collection of web components for the Microsoft Graph.
- RapiDoc - OpenAPI Viewer - Web Component to view OpenAPI 3.0 & Swagger 2.0 Spec
- UI5 Web Components - Enterprise-flavored sugar on top of native APIs!
- Weightless - High quality web components with a small footprint.
- Wired Elements - Collection of elements that appear hand drawn.
- PWA Starter Kit - Starter template by the Polymer team.
- open-wc-starter-app - Starter app based on Open Web Components Recommendations.
- generator-lit-element-next - Generator for developing your next custom element with latest LitElement in TypeScript.
- @rxdi/starter-client-lit-html - Client side application build with
@rxdi, lit-html, GraphQL, dependency injection.
- vscode-lit-html - Syntax highlighting and IntelliSense for lit-html template strings.
- vscode-lit-plugin - Syntax highlighting, type checking and code completion for lit-html.
- es6-string-html - VSCode extension which provides syntax highlighting for HTML in ES6 multiline strings.
- vim-html-template-literals - Syntax highlighting and indentation for lit-html.
- ts-lit-plugin - Plugin that adds type checking and code completion for lit-html. Used by
vscode-lit-plugin. - typescript-lit-html-plugin - TypeScript server plugin that adds IntelliSense for lit-html. Used by
vscode-lit-html.
- babel-plugin-template-html-minifier - Babel plugin for minifying HTML in tagged template strings.
- eslint-plugin-lit - ESLint plugin for lit-html template strings.
- lit-analyzer - CLI that type checks bindings in lit-html templates.
- rollup-plugin-minify-html-literals - Rollup plugin to minify HTML in tagged template strings.
- rollup-plugin-lit-css - Rollup plugin to import CSS files as LitElement tagged
csstemplate strings. - rollup-plugin-postcss-lit - Rollup plugin to load PostCSS-processed stylesheets in LitElement components.
- lit-loader - LitElement Single File Component loader for Webpack.
- Nutmeg - CLI tool to build, test, and publish vanilla Web Components with a little spice.
- open-wc - Set of recommendations to help you generate, test, lint, demo, and publish Web Components.
- lit-demos - Examples for using the lit-html library and LitElement base class.
- lit-html workshop
- Efficient, Expressive, and Extensible HTML Templates (Polymer Summit 2017)
- lit-HTML (Chrome Dev Summit 2017)
- VDOM vs lit-html - HTTP203
- Declarative Reactive Web Components with Justin Fagnani
- The Web Platform Podcast 159: lit-html - HTML Templates via JavaScript Template Literals - An episode with the lit-html creator Justin Fagnani.
- ShopTalk Show 348: Getting lit-html with Justin Fagnani - Another episode with Justin Fagnani as a guest.
- A gentle introduction to lit-html
- lit-html templates from zero to hero
- Building a chat with Twilio, lit-html, Parcel and TypeScript
- Making a fullstack CRUD app with LitHTML, Redux, Express, and Webpack
- The future of Polymer & lit-html
- A night experimenting with Lit-HTML
- LitElement To Do App
- A new, lean way of creating web apps
- LitElement with Rollup, Babel & Karma
- Let's Build Web Components! Part 5: LitElement
These libraries do not depend on lit-html, but are inspired by some of its concepts. They use html tagged
template literal, and leverage the benefits of the same IDE Plugins for syntax highlighting.
- htm - Hyperscript Tagged Markup: JSX alternative using standard tagged templates, with compiler support.
- hybrids - UI library for creating Web Components with simple and functional API.
- lit-ntml - Lightweight and modern templating for SSR in Node.js, inspired by lit-html.
- lite-html - A modern replacement for VirtualDOM rendering engines.
- modulor-html - Missing template engine for Web Components.
- nanohtml - HTML template strings for the browser with support for Server Side Rendering in Node.
- picohtml - Powerfully ~2kB (gzip) HTML template strings.
If you want more awesome resources, check the awesome list!
