Awesome Preact Overview

A curated list of amazingly awesome things regarding Preact ecosystem :star2:

🏠 Home · 🔥 Feed · 📮 Subscribe · ❤️ Sponsor · 😺 preactjs/awesome-preact · ⭐ 867 · 🏷️ Front-End Development

[ Daily / Weekly / Overview ]

Awesome Preact

A curated list of amazingly awesome things regarding Preact (⭐36k) ecosystem 🌟

Preact (⭐36k) is a fast 3kb React alternative with the same ES6 API. Components & Virtual DOM.

Contents

• Community
• Toolkits
• Boilerplates
• Routing
• Components
• Libraries
• Testing Utils
• Articles
• Example Apps
• Real Apps
• Related Libraries
• Tips

Community

• Slack (Discussion Forum)
• Stack Overflow
• Github (⭐36k)
• Twitter

Toolkits

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

Boilerplates

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

Routing

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

Components

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

Libraries

• Redux Zero (⭐2k) - A lightweight state container based on Redux with a single store and no reducers.
• Unistore (⭐2.9k) - 350b / 650b state container with component actions for Preact & React.
• FPreact (⭐47) - Provides an alternative api for creating preact components, heavily inspired by elm.
• ProppyJS - A tiny library for functional props composition
• ClearX (⭐22) - Fast & Effortless state management for React, Preact and Inferno with zero learning curve.
• Preact-urql (⭐8.5k) - Use urql (⭐8.5k) with Preact core + hooks.
• hooked-head (⭐334) - Hooks to manipulate the <head> section of the DOM. This has a subpackage with core preact support (using preact/hooks).
• Teaful (⭐707) - Tiny (800B), easy and powerful (P)React state management.
• Nano Stores (⭐4.9k) - A tiny (199 bytes) state manager with many atomic tree-shakable stores.
• Modular Forms (⭐920) - Modular, type-safe and signal based form library for Preact.
• exome (⭐140) - 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 (⭐56) - JSX assertion testing (no DOM, right in Node).
• Preact Render Spy (⭐178) - Render Preact components with access to the produced virtual dom for testing.
• Preact Test Utils (⭐7) - Mock react-test-utils enzyme in preact.
• Preact Testing Library (⭐143) - Simple and complete Preact DOM testing utilities that encourage good testing practices.
• Preact Island (⭐210) - Render your Preact component as a widget on any web page with ease.

Articles

• WTF is JSX
• The Inner Workings of Virtual DOM
• Using Preact Instead of React
• Preact Internals #1: The Easy Parts
• Preact Internals #2: The Component Model
• Building a Small PWA with Preact and Firebase
• Authentication with Auth0

Example Apps

• Preact HN (⭐297) - Demonstration of Preact used to build Hacker News as a PWA.
• TodoMVC (⭐105) - TodoMVC done in Preact. Under 6kb and fast.
• Colors App (⭐98) - PWA for copying values from popular color palettes. Supports HEX, RGB, and HSL formats.
• Tracks (⭐16) - PWA for tracking things in general. Gdrive Sync.
• Hueify (⭐90) - Simple controller for your Philips Hue lights.
• Golazon - Football data mnmlist way.
• Shopping List (⭐21) - Progressive Web App Built Using Preact and PouchDB.
• Code and Comment (⭐17) - The application to add the comments to a file in Github (demo).
• Play.cash 🎶 (GitHub Project (⭐93))
• Songsterr 🎼 Using Preact X in production since 10.0 alpha
• BitMidi 🎹 Wayback machine for free MIDI files (GitHub Project (⭐567))
• Ultimate Guitar 🎸speed boosted by Preact.
• ESBench is built using Preact.
• BigWebQuiz (GitHub Project (⭐110))
• Nectarine.rocks (GitHub Project (⭐61)) 🍑
• OSS.Ninja (GitHub Project (⭐146))
• GuriVR (GitHub Project (⭐193))
• Offline Gallery (GitHub Project (⭐95)) 🎈
• Periodic Weather (GitHub Project (⭐59)) ☀️
• Rugby News Board (GitHub Project) (⭐7)
• Preact Gallery an 8KB photo gallery PWA built using Preact.
• Rainbow Explorer Preact app to translate real life color to digital color (Github project (⭐27)).
• YASCC Yet Another SoundCloud Client (Github project (⭐35)).
• Journalize 14k offline-capable journaling PWA using preact. (Github project (⭐35)).
• Proxx A game of proximity by GoogleChromeLabs using preact. (Github project (⭐1.3k)).
• Web Maker An offline and blazing fast frontend playground built using Preact. (Github project (⭐2.5k)).
• Intergram A live chat widget linked to your Telegram messenger built using Preact. (Github project (⭐1.4k)).
• Preact App in ES6 without Babel or JSX (GitHub Project (⭐8)).
• GHFresh Monitor GitHub repository releases – Prerendering with Preact. Built with Preact Compat, TypeScript, Material-UI and Redux Toolkit. (GitHub Project (⭐8)).
• Passwords Fountain - modern & performant password manager interface which works everywhere (Github project (⭐63)).
• macOS Web - macOS Big Sur Desktop experience for Web, built with Preact and Vite (Github project (⭐1k)).
• 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 (⭐558)).
• Idea Keeper 🧠 Highly extensible and minimalistic idea keeping app (GitHub Project (⭐0)).
• Trellith - Tiny Trello Clone PWA (GitHub Project (⭐12)).
• Gladys Assistant - A privacy-first, open-source home assistant (GitHub Project (⭐2.5k)).

Related Libraries

• React (⭐224k) - A declarative, efficient, and flexible JavaScript library for building user interfaces.
• Inferno (⭐16k) - An extremely fast, React-like JavaScript library for building modern user interfaces.
• Rax (⭐8k) - 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!

License