Preact

Awesome Preact ¶

A curated list of amazingly awesome things regarding Preact ecosystem

Preact is a fast 3kb React alternative with the same ES6 API. Components & Virtual DOM.

Real Apps

Community¶

Slack (Discussion Forum)
Stack Overflow
Github
Twitter

Toolkits¶

Preact CLI - Build a Preact Progressive Web App in seconds.
Vite - Fast native-ESM powered web dev build tool for Preact, Vue or React.
nwb - Quick Development with React, Inferno or Preact.
React App Rewire Preact - Use Preact with create-react-app without ejecting.
Preact CLI PostCSS - It removes the default postcss config on Preact CLI, so you can use postcss.config.js.
Create Preact App - Create Preact apps with no build configuration.
Storybook Preact - Storybook for Preact is a UI development environment for your Preact components.

Boilerplates¶

Official Boilerplate - Ready-to-rock Preact starter project, powered by Webpack.
Preact Simple Starter - PWA Simple Starter with Preact, Preact-mdl and Webpack2.
Preact Offline Starter - Webpack2 boilerplate for building SPA / PWA / offline front-end apps with Preact.
TypeScript Preact Starter - Barebones starter project for Preact with TypeScript.
TypeScript PWA Preact Starter - PWA Starter with TypeScript and SASS (131kb)
Electron TypeScript Preact Boilerplate - Electron starter project with TypeScript and Preact support, powered by esbuild.
Preact Modern Startupper - PWA boilerplate with support for TypeScript, Goober, Unistore and Plop.
Preact Redux SSR Example - Server-side Rendering with Redux Example.
Preact PWA - PWA focused on raw performance, server side rendering, prerendering, redux, express, rollup.
Preact Chrome Extension - A Full Feature Preact Chrome Extension Starter Kit.
Preact Web Extension - ⚡️ WebExtension Vite Starter Template with Preact.
Preact Neutralino TypeScript Starter - Starter project for building lightweight desktop applications with Preact and neutralino.js.
Simple Deno Starter - Tiny starter template with Preact and Deno for building single page applications.

Routing¶

Preact Router - URL router for Preact.
Preact Route Async - A (440b gzip) route component that enables async loading of page-components.
Wouter - A tiny (1KB gzip) router for Preact/React with React Router-like API.

Components¶

Preact Material Components - Preact wrapper for "Material Components for the web".
Preact Scroll Header - A (800b gzip) header that will show/hide while scrolling for Preact.
Preact Progress - Simple and lightweight (~590 bytes gzip) progress bar component for Preact.
Preact Compat - Use any React library with Preact (full example).
Preact Render To String - Universal rendering.
Preact Markup - Render HTML & Custom Elements as JSX & Components.
Preact Portal - Render Preact components into (a) SPACE.
Preact Richtextarea - Simple HTML editor component.
Preact Token Input - Text field that tokenizes input, for things like tags.
Preact Virtual List - Easily render lists with millions of rows (demo).
Preact Cycle - Functional-reactive paradigm for Preact.
Preact Layout - Small and simple layout library.
Preact Socrates - Preact plugin for Socrates.
Preact Flyd - Use flyd FRP streams in Preact + JSX.
Preact I18nline - Integrates the ecosystem around i18n-js with Preact via i18nline.
Preact MUI - The MUI CSS Preact library.
Preact MDL - Use MDL as Preact components.
Preact Photon - Build beautiful desktop UI with photon.
Preact Classless Component - Create preact components without the class keyword.
Preact Hyperscript - Hyperscript-like syntax for creating elements.
Shallow Compare - Simplified shouldComponentUpdate helper.
Preact Codemod - Transform your React code to Preact.
Preact Helmet - A document head manager for Preact.
Preact Delegate - Delegate DOM events.
Preact No SSR - Skip Server Side Rendering of Components.
Preact Head - Standalone, declarative \<Head /> for Preact.
Preact Side Effect - Create components whose nested prop changes map to a global side effect.
Preact Tiny Atom - Preact Integration with Tiny Atom.
Preact Level List - Live updating leveldb list component for Preact.
Preact Country Picker - Country picker based on bootstrap 3 made for Preact.
Preact Fluid - A minimal UI kit for Preact.
Preact Feather Icons - Feather icons for Preact.
Preact Animate On Change - Add CSS3 animation when properties change.
Preact Async Route - Async route component for preact-router.
MU Forms - Dead simple form library for (P)React.
Pimg - Progressive Image Component; Used for lazy loading images.
Preact Component Console - Console Emulator. Simulates typing via dynamic delays.
Preact Translate - Minimalistic translate (i18n) library for Preact.
Preact Dock - Simple DnD and touch-enabled Dock for Preact apps.
Preact Particles - Lightweight component to easily add cool particles animations to websites.
Pant - Mobile UI Components built on Preact (docs and demos). Ported from awesome Vue components of Vant.
Preact Transitioning - Exposes Preact components for easily implementing basic CSS animations and transitions.
Preact Nominal Allocator - A numerical input element that can also manipulated with two buttons (-/+).
Tailored Components - Unstyled components and hooks for Preact & Deno.
Plotery - Fast and lightweight charting library.
Formica - Simple declarative forms for Preact.

Libraries¶

Redux Zero - A lightweight state container based on Redux with a single store and no reducers.
Unistore - 350b / 650b state container with component actions for Preact & React.
FPreact - Provides an alternative api for creating preact components, heavily inspired by elm.
ProppyJS - A tiny library for functional props composition
ClearX - Fast & Effortless state management for React, Preact and Inferno with zero learning curve.
Preact-urql - Use urql with Preact core + hooks.
hooked-head - Hooks to manipulate the <head> section of the DOM. This has a subpackage with core preact support (using preact/hooks).
Teaful - Tiny (800B), easy and powerful (P)React state management.
Nano Stores - A tiny (199 bytes) state manager with many atomic tree-shakable stores.
Modular Forms - Modular, type-safe and signal based form library for Preact.
exome - Simple proxy based state manager for deeply nested states.
Fastro - Fast & Modular SSR Web Framework for Deno, TypeScript, Preact & Tailwind.

Testing Utils¶

Preact JSX Chai - JSX assertion testing (no DOM, right in Node).
Preact Render Spy - Render Preact components with access to the produced virtual dom for testing.
Preact Test Utils - Mock react-test-utils enzyme in preact.
Preact Testing Library - Simple and complete Preact DOM testing utilities that encourage good testing practices.
Preact Island - Render your Preact component as a widget on any web page with ease.

Articles¶

Example Apps¶

Preact HN - Demonstration of Preact used to build Hacker News as a PWA.
TodoMVC - TodoMVC done in Preact. Under 6kb and fast.
Colors App - PWA for copying values from popular color palettes. Supports HEX, RGB, and HSL formats.
Tracks - PWA for tracking things in general. Gdrive Sync.
Hueify - Simple controller for your Philips Hue lights.
Golazon - Football data mnmlist way.
Shopping List - Progressive Web App Built Using Preact and PouchDB.
Code and Comment - The application to add the comments to a file in Github (demo).
Play.cash (GitHub Project)
Songsterr 🎼 Using Preact X in production since 10.0 alpha
BitMidi 🎹 Wayback machine for free MIDI files (GitHub Project)
Ultimate Guitar 🎸speed boosted by Preact.
ESBench is built using Preact.
BigWebQuiz (GitHub Project)
Nectarine.rocks (GitHub Project)
OSS.Ninja (GitHub Project)
GuriVR (GitHub Project)
Offline Gallery (GitHub Project)
Periodic Weather (GitHub Project)
Rugby News Board (GitHub Project)
Preact Gallery an 8KB photo gallery PWA built using Preact.
Rainbow Explorer Preact app to translate real life color to digital color (Github project).
YASCC Yet Another SoundCloud Client (Github project).
Journalize 14k offline-capable journaling PWA using preact. (Github project).
Proxx A game of proximity by GoogleChromeLabs using preact. (Github project).
Web Maker An offline and blazing fast frontend playground built using Preact. (Github project).
Intergram A live chat widget linked to your Telegram messenger built using Preact. (Github project).
Preact App in ES6 without Babel or JSX (GitHub Project).
GHFresh Monitor GitHub repository releases – Prerendering with Preact. Built with Preact Compat, TypeScript, Material-UI and Redux Toolkit. (GitHub Project).
Passwords Fountain - modern & performant password manager interface which works everywhere (Github project).
macOS Web - macOS Big Sur Desktop experience for Web, built with Preact and Vite (Github project).
Cinemate - Movie Recommender System built with Preact and TypeScript. Backend written in Rust.
Windows 11 Web - Awe-amazing Windows 11 clone for the web! ⚡ (Github project).
Idea Keeper :brain: Highly extensible and minimalistic idea keeping app (GitHub Project).
Trellith - Tiny Trello Clone PWA (GitHub Project).
Gladys Assistant - A privacy-first, open-source home assistant (GitHub Project).

React - A declarative, efficient, and flexible JavaScript library for building user interfaces.
Inferno - An extremely fast, React-like JavaScript library for building modern user interfaces.
Rax - A universal React-compatible render engine.

Tips¶

Contribute some ;)

Contribution¶

Your contributions and suggestions are welcome anytime. Build great stuffs with Preact, share with us ;)
Make sure you follow the guidelines. Thank you!