Awesome lit-html

A curated list of awesome lit-html resources.

lit-html — an efficient, expressive, extensible HTML templating library for JavaScript.

Contents

• General resources
• Community
• Implementations
• Components
• Starter Templates
• IDE Plugins
• Tools
• Tutorials
• Videos
• Podcasts
• Blogs
• Inspired Solutions
• Other awesome resources

General resources

• Documentation
• GitHub repository

Community

• lit-html Twitter
• #lit-html - Channel in Polymer Slack

Implementations

Sorted by creation date (oldest first).

• @polymer/lit-element - Ultra-light custom element base class with a simple but expressive API.
• @gluon/gluon - Lightweight library for building Web Components and applications.
• @moleculejs/molecule - Library for creating fast and reactive Custom Elements.
• 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.
• fabys-lit-element - Base class for creating Web Components using TypeScript and lit-html.
• @littleq/element-lite - A take on using lit-html and Polymer's property mixin.
• @corpuscule/element - Small framework based on Web Components and lit-html.
• @dabolus/localized-lit-element - LitElement extension that provides easy l10n out of the box.
• lit-apollo - Set of base classes to help create custom elements connected to an ApolloClient cache.

Components

• Material Web Components - Material Design implemented as Web Components.
• Wired Elements - Collection of elements that appear hand drawn.

Starter Templates

• PWA Starter Kit - Starter template by the Polymer team.
• Create-lit-app - Create lit-html apps with no build configuration.

IDE Plugins

• VSCode lit-html plugin - Syntax highlighting and IntelliSense for lit-html template strings.
• vim-html-template-literals - Syntax highlighting and indentation for lit-html.
• TypeScript lit-html Plugin - TypeScript server plugin that adds IntelliSense for lit-html template strings.

Tools

• babel-plugin-template-html-minifier - Babel plugin for minifying HTML in tagged template strings.
• rollup-plugin-minify-html-literals - Rollup plugin to minify HTML in tagged template strings.
• lit-loader - LitElement Single File Component loader for Webpack.
• generator-lit-element - Yeoman generator for creating LitElement based Custom Elements.
• Nutmeg - CLI tool to build, test, and publish vanilla Web Components with a little spice.

Tutorials

• Efficient Template Rendering Using lit-html
• lit-html examples

Videos

• Efficient, Expressive, and Extensible HTML Templates (Polymer Summit 2017)
• lit-HTML (Chrome Dev Summit 2017)
• VDOM vs lit-html - HTTP203

Podcasts

• The Web Platform Podcast 159: lit-html - HTML Templates via JavaScript Template Literals - An episode with the lit-html creator Justin Fagnani.

Blogs

• A bit about lit-html rendering
• Building a chat with Twilio, lit-html, Parcel and TypeScript
• Making a fullstack CRUD app with LitHTML, Redux, Express, and Webpack

Inspired Solutions

These libraries do not depend on lit-html, but are inspired by some of its concepts. They also use html tagged template literal, and leverage the benefits of the same IDE Plugins for syntax highlighting.

• 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.

Other awesome resources

If you want more awesome resources, check the awesome list!

---

License