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.

Contents

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

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.

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.

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

• 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 - 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 🧠 Highly extensible and minimalistic idea keeping app (GitHub Project).

Related Libraries

• 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!

License