Libraries & Add-ons

A collection of modules built to work wonderfully with Preact.

💁 Built one of your own? Add it!

Add-Ons

• 🔁 preact-cycle: Functional-reactive paradigm for Preact
• 📄 preact-render-to-string: Universal rendering.
• ⏲ relaks: Create components with render methods that return asynchronously.
• 🔩 express-preact-views: Express View Engine.
• 💾 Prefresh: Fast-Refresh for Preact.
• 📑 adonis-preact: Use Preact in Adonisjs

Components

• 🌎 preact-router: URL routing for your components
• 📑 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-layout: Small and simple layout library
• 👷 preact-helmet: A document head manager for Preact
• ↕ preact-custom-scrollbars: Fully customizable scrollbars, for frictionless native browser scrolling
• 🧱 @modular-forms/preact: Modular and type-safe form library

Integrations

• 💭 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.
• 💠 Capacitor: Turn your Preact app into a Native iOS/Android App and PWA.
• :ice_cube: Kretes: Build full-stack TypeScript apps using Preact and Node.js
• 🏝: preact-island: Run your Preact widget on any website with reactive props.

GUI Toolkits

• 🎴 @mui/material: the React UI library you always wanted. Follow your own design system, or start with Material Design.
• 👍 preact-material-components: Material Components for the Web (supersedes MDL)
• 🔳 preact-mdl: Use MDL as Preact components
• 🚀 preact-photon: build beautiful desktop UI with photon
• 🐧 preact-weui: Weui for Preact
• 💅 preact-fluid: Fluid minimal UI kit for Preact
• 📖 storybook-preact: Storybook for Preact is a UI development environment for your Preact components

Testing

• 🔬 preact-jsx-chai: JSX assertion testing (no DOM, right in Node)
• ✅ unexpected-preact: JSX assertions, events, snapshots in Jest (DOM, works under Node jsdom or out-of-the-box in Jest) - docs

Utilities

• 🎩 preact-classless-component: create preact components without the class keyword
• 🔨 preact-hyperscript: Hyperscript-like syntax for creating elements
• ✅ shallow-compare: simplified shouldComponentUpdate helper.
• 📶 @deepsignal/preact: Extension of @preact/signals for full state management