⚛️ Fast 3kB React alternative with the same modern API. Components & Virtual DOM.
Alternatives To Preact
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Preact35,0745,7613,394a day ago221July 09, 2023248mitJavaScript
⚛️ Fast 3kB React alternative with the same modern API. Components & Virtual DOM.
Marko12,813944240a day ago821July 18, 202355mitJavaScript
A declarative, HTML-based language that makes building web apps fun
Hyperhtml3,026143552 months ago233October 04, 202212iscHTML
A Fast & Light Virtual DOM Alternative
Morphdom2,8132691525 months ago67January 31, 202342mitJavaScript
Fast and lightweight DOM diffing/patching (no virtual DOM needed)
Asm Dom2,695757 months ago16August 16, 2020126otherC++
A minimal WebAssembly virtual DOM to build C++ SPA (Single page applications)
Percy2,191342 months ago24January 09, 202341apache-2.0Rust
Build frontend browser apps with Rust + WebAssembly. Supports server side rendering.
Sauron1,8162913 days ago107August 28, 2023mitRust
A versatile web framework and library for building client-side and server-side web applications
Binding.scala1,580123 days ago119December 25, 201948mitScala
Reactive data-binding for Scala
Simple Virtual Dom1,5671463 years ago11November 08, 201810mitJavaScript
Basic virtual-dom algorithm
Atomico1,003872a month ago276August 20, 202313mitJavaScript
Atomico a micro-library for creating webcomponents using only functions, hooks and virtual-dom.
Alternatives To Preact
Select To Compare

Alternative Project Comparisons


Fast 3kB alternative to React with the same modern API.

All the power of Virtual DOM components, without the overhead:

  • Familiar React API & patterns: ES6 Class, hooks, and Functional Components
  • Extensive React compatibility via a simple preact/compat alias
  • Everything you need: JSX, VDOM, DevTools, HMR, SSR.
  • Highly optimized diff algorithm and seamless hydration from Server Side Rendering
  • Supports all modern browsers and IE11
  • Transparent asynchronous rendering with a pluggable scheduler

More information at the Preact Website

npm Preact Slack Community OpenCollective Backers OpenCollective Sponsors

coveralls gzip size brotli size

You can find some awesome libraries in the awesome-preact list 😎

Getting Started

Note: You don't need ES2015 to use Preact... but give it a try!

Tutorial: Building UI with Preact

With Preact, you create user interfaces by assembling trees of components and elements. Components are functions or classes that return a description of what their tree should output. These descriptions are typically written in JSX (shown underneath), or HTM which leverages standard JavaScript Tagged Templates. Both syntaxes can express trees of elements with "props" (similar to HTML attributes) and children.

To get started using Preact, first look at the render() function. This function accepts a tree description and creates the structure described. Next, it appends this structure to a parent DOM element provided as the second argument. Future calls to render() will reuse the existing tree and update it in-place in the DOM. Internally, render() will calculate the difference from previous outputted structures in an attempt to perform as few DOM operations as possible.

import { h, render } from 'preact';
// Tells babel to use h for JSX. It's better to configure this globally.
// See
// In tsconfig you can specify this with the jsxFactory
/** @jsx h */

// create our tree and append it to document.body:

// update the tree in-place:
		<h1>Hello World!</h1>
// ^ this second invocation of render(...) will use a single DOM call to update the text of the <h1>

Hooray! render() has taken our structure and output a User Interface! This approach demonstrates a simple case, but would be difficult to use as an application grows in complexity. Each change would be forced to calculate the difference between the current and updated structure for the entire application. Components can help here by dividing the User Interface into nested Components each can calculate their difference from their mounted point. Here's an example:

import { render, h } from 'preact';
import { useState } from 'preact/hooks';

/** @jsx h */

const App = () => {
	const [input, setInput] = useState('');

	return (
			<p>Do you agree to the statement: "Preact is awesome"?</p>
			<input value={input} onInput={e => setInput(} />

render(<App />, document.body);


Become a sponsor and get your logo on our README on GitHub with a link to your site. [Become a sponsor]



Support us with a monthly donation and help us continue our activities. [Become a backer]




Popular Dom Projects
Popular Virtual Dom Projects
Popular Web User Interface Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Virtual Dom