Preact VS lit-element

Compare Preact vs lit-element and see what are their differences.

Preact

⚛️ Fast 3kB React alternative with the same modern API. Components & Virtual DOM. (by preactjs)

lit-element

LEGACY REPO. This repository is for maintenance of the legacy LitElement library. The LitElement base class is now part of the Lit library, which is developed in the lit monorepo. (by Polymer)
Our great sponsors
  • SonarLint - Deliver Cleaner and Safer Code - Right in Your IDE of Choice!
  • Scout APM - Less time debugging, more time building
  • OPS - Build and Run Open Source Unikernels
Preact lit-element
43 8
30,819 4,482
1.4% -0.0%
8.2 4.7
4 days ago 3 months ago
JavaScript TypeScript
MIT License BSD 3-clause "New" or "Revised" License
The number of mentions indicates the total number of mentions that we've tracked plus the number of user suggested alternatives.
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.

Preact

Posts with mentions or reviews of Preact. We have used some of these posts to build our list of alternatives and similar projects. The last one was on 2022-01-21.
  • Let me critique your site's FE perf
    5 projects | reddit.com/r/Frontend | 21 Jan 2022
    Your JS bundle size is really inflated because of React, I suspect you could move to Preact and drastically reduce your overall JS package. I haven't done this with Next.js before, but it looks like there is some good reading out there on the subject.
  • Why you have to use className in React, but not in Preact?
    1 project | dev.to | 13 Jan 2022
    You see, there is a JS framework, called Preact. It's an alternative to React with the same API. And there is a very interesting statement on its official page.
  • Building Chrome extension with Vite ⚡️
    3 projects | dev.to | 6 Jan 2022
    In this article, we will create a simple Chrome extension, that will be responsible for displaying recent top posts from DEV Community. For this, we will use Preact bootstrapped with Vite build tool.
  • Preact Async Rendering
    2 projects | dev.to | 5 Jan 2022
    Bear in mind that this is still under review by the Preact team but if you need it desperately like us, feel free try out the preact-async package on npm. I'm hoping that Preact team will accept this change and get it into the main package.
  • My Evaluation of SvelteKit for Full-Stack Web App Development
    17 projects | news.ycombinator.com | 5 Jan 2022
    [2] "preact-compat adds somewhere around 2kb to your bundle size, but has the advantage of supporting the vast majority of existing React modules you might find on npm" https://preactjs.com/guide/v8/switching-to-preact/
  • Anyone Know How I Could Replicate This Look for my site? It's Inverse.com
    1 project | reddit.com/r/webdev | 20 Dec 2021
    Not sure what exactly you would like to replicate but frontend is done with Preact https://preactjs.com/ . Hope that helps.
  • Vala reactive programming
    2 projects | dev.to | 6 Dec 2021
    I've been doing some web programming using preact these last weeks and one of the things that impressed the most was the way logic and UI are split in code. When doing functional components this is specially explicit. Your function returns whatever should be displayed by the component and receives a props object containing all the information the components need to render. A component rerenders when some of its props are changed, either because an external component made changes or in response to an event.
  • How to use Preact with Astro
    2 projects | dev.to | 21 Nov 2021
    Preact is a "Fast 3kB alternative to React with the same modern API". It's smaller than React but shares most of it's features (Hooks, Context), so you can write normal React code but benefit from better performance.
  • Don't Optimize Your React App, Use Preact Instead
    4 projects | dev.to | 1 Nov 2021
    A few months ago, I wrote an article based on optimizing react loading time, and most of the reader's comments were to try Preact to get default optimization. So I decided to try preact with the same app used for the previous article. Let's first get an intro about Preact.
  • 🥑 Put your React on a diet
    4 projects | dev.to | 21 Oct 2021
    For a long time I heard people complaining that React & ReactDOM has a huge size, and everyone recommended to use Preact instead.

lit-element

Posts with mentions or reviews of lit-element. We have used some of these posts to build our list of alternatives and similar projects. The last one was on 2021-07-29.
  • GraphQL - Diving Deep
    47 projects | dev.to | 29 Jul 2021
    Using vanilla JS or TS or using web components and want to have a framework-independent way of doing things? You can stick to the GraphQL codegen itself since it takes care of almost everything underneath. Or if you want, you can also use Apollo Client’s vanilla version @apollo/client/core. Apollo Elements does come with support for a lot of webcomponent libraries like Lit, Fast and Gluon or even without any of it and hence is quite flexible.
  • 17 Best Web Development Frameworks For 2021
    16 projects | dev.to | 2 Jul 2021
    The LitElement framework is easy to use as a base class to create lightweight and faster web components for working with any framework. LitElement is yet another one of the top web development frameworks among developers for using lit-html for rendering into shadow DOM. It also adds API for managing attributes and properties. Let’s find out whether the framework is good enough for your project.
  • How to Implement an Event Bus in TypeScript
    1 project | dev.to | 16 Jun 2021
    When you're working with Web Components through LitElement, it's usual firing events for sending messages between them. You can use either Standard or Custom events.
  • A Technology Radar Volume 24 summary
    10 projects | reddit.com/r/webdev | 25 Apr 2021
    🔸lit-element - a simple base class for creating fast, lightweight web components;
  • Lit - New framework from Google
    3 projects | reddit.com/r/javascript | 21 Apr 2021
    Isn't this just Polymer Lit Elements rebranded? https://github.com/Polymer/lit-element
  • React-like components without react?
    6 projects | reddit.com/r/webdev | 15 Apr 2021
    Web components are a good start, but it is better to use LitElement to build them in that case, instead of using it directly.
  • I made a Vue 3 inspired library powered by WebComponents using @vue/reactivity
    2 projects | reddit.com/r/javascript | 3 Jan 2021
    Other frameworks which are using the same principle are [lit-element](https://github.com/Polymer/lit-element) and [heresy](https://github.com/WebReflection/heresy). there are surely more but these are ones i've found when looking for inspiration.
  • Using tailwind at build-time with lit-element
    8 projects | dev.to | 29 Dec 2020
    Using a lit-element component:

What are some alternatives?

When comparing Preact and lit-element you can also consider the following projects:

Svelte - Cybernetically enhanced web apps

React - A declarative, efficient, and flexible JavaScript library for building user interfaces.

Vue.js - 🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

Mithril.js - A JavaScript Framework for Building Brilliant Applications

inferno - :fire: An extremely fast, React-like JavaScript library for building modern user interfaces

Alpine.js - A rugged, minimal framework for composing JavaScript behavior in your markup.

riot - Simple and elegant component-based UI library

PostCSS - Transforming styles with JS plugins

hyperapp - The tiny framework for building hypertext applications.

react-native - A framework for building native applications using React