preact alternatives and similar libraries
Based on the "MVC Frameworks and Libraries" category.
Alternatively, view Preact alternatives based on common mentions on social networks and blogs.
-
react-native
A framework for building native applications using React -
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web. -
react
A declarative, efficient, and flexible JavaScript library for building user interfaces. -
backbone
Give your JS App some Backbone with Models, Views, Collections, and Events -
ember.js
Ember.js - A JavaScript framework for creating ambitious web applications -
nativescript
⚡ Empowering JavaScript with native platform APIs. ✨ Best of all worlds (TypeScript, Swift, Objective C, Kotlin, Java). Use what you love ❤️ Angular, Capacitor, Ionic, React, Svelte, Vue and you name it compatible. -
Alpine.js
A rugged, minimal framework for composing JavaScript behavior in your markup. -
GrapesJS
Free and Open source Web Builder Framework. Next generation tool for building templates without coding -
hyperapp
1kB-ish JavaScript framework for building hypertext applications. -
inferno
:fire: An extremely fast, React-like JavaScript library for building modern user interfaces -
Adonis
🚀 The Node.js Framework highly focused on developer ergonomics, stability and confidence -
knockout
Knockout makes it easier to create rich, responsive UIs with JavaScript -
aurelia
The Aurelia 1 framework entry point, bringing together all the required sub-modules of Aurelia. -
Stimulus
A modest JavaScript framework for the HTML you already have [Moved to: https://github.com/hotwired/stimulus] -
Rete.js
JavaScript framework for visual programming and creating node editor #StandWithUkraine -
derby
MVC framework making it easy to write realtime, collaborative applications that run in both Node.js and browsers -
litegraph.js
A graph node engine and editor written in Javascript similar to PD or UDK Blueprints, comes with its own editor in HTML5 Canvas2D. The engine can run client side or server side using Node. It allows to export graphs as JSONs to be included in applications independently. -
FFCreator
一个基于node.js的高速视频制作库 A fast video processing library based on node.js -
FoalTS
Full-featured Node.js framework, with no complexity. 🚀 Simple and easy to use, TypeScript-based and well-documented. -
Monkberry
Monkberry is a JavaScript library for building web user interfaces -
rxweb
Tons of extensively featured packages for Angular, VUE and React Projects
Appwrite - The Open Source Firebase alternative introduces iOS support
* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest.
Do you think we are missing an alternative of preact or a related project?
Popular Comparisons
README
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
- Instant production-grade app setup with Preact CLI
💁 More information at the Preact Website ➞
You can find some awesome libraries in the awesome-preact list :sunglasses:
Getting Started
💁 Note: You don't need ES2015 to use Preact... but give it a try!
The easiest way to get started with Preact is to use Preact CLI. This simple command-line tool wraps up the best possible tooling for you, and even keeps things like Webpack and Babel up-to-date as they change. Best of all, it's easy to understand! Start a project or compile for production in a single command (preact build
), with no configuration needed and best practices baked in! 🙌
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 https://babeljs.io/docs/en/babel-plugin-transform-react-jsx#usage
// In tsconfig you can specify this with the jsxFactory
/** @jsx h */
// create our tree and append it to document.body:
render(<main><h1>Hello</h1></main>, document.body);
// update the tree in-place:
render(<main><h1>Hello World!</h1></main>, document.body);
// ^ 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 (
<div>
<p>Do you agree to the statement: "Preact is awesome"?</p>
<input value={input} onInput={e => setInput(e.target.value)} />
</div>
)
}
render(<App />, document.body);
Sponsors
Become a sponsor and get your logo on our README on GitHub with a link to your site. [Become a sponsor]
Backers
Support us with a monthly donation and help us continue our activities. [Become a backer]
License
MIT
*Note that all licence references and agreements mentioned in the preact README section above
are relevant to that project's source code only.