Demos & Examples
This pages lists a bunch of demos and examples you can use to learn Preact.
๐ Built one of your own? Add it!
Full Apps
Preact Website (preactjs.com)
Of course this website is built with Preact.
Github Project
ESBench โฐ
Built with Preact & Material Design Lite.
GuriVR ๐
Natural language based Web VR story creator.
Github Project
BigWebQuiz ๐ฒ
The audience participation Progressive Web App from Chrome Dev Summit 2016!
Github Project
Nectarine.rocks ๐
Open-Source peach.cool app.
Github Project
Web Maker โก Blazing fast & offline frontend playground. Github Project
BitMidi ๐น Wayback machine for free MIDI files Github Project
BBC Roasting Calculator ๐ฆ Calculates cooking times for different cuts of meat.
Dropfox ๐บ
Desktop app for Dropbox, built with Preact, Electron and Photon.
Embed Hacker News ๐ Embed Hacker News comment tree below your blog article.
Connectivity Index ๐ฑ
A site that allows you to search through Akamai State of the Internet Connectivity Report data by country.
Drag & Drop file upload (webpack 2) ๐ Desktop App for uploading assets to Contentful (API based CMS) Github Project
Exchange Widget ๐ฑ The currency exchange widget inspired by a popular mobile app implemented using Preact, Meiosis, HTML tagged templates and native ES modules. Github Project
Blaze โก
Modern peer-to-peer file sharing Progressive Web App.
Github Project
1tuner ๐ป
Listen to radio and podcasts.
Github Project
ColoGuessr ๐ Test how well you know your colors Github Project
Full Demos & Examples
Documentation Viewer
View documentation.js output online.
Github Project
TodoMVC
Unofficial fastest TodoMVC implementation.
Github Project
TodoMVC+PouchDB ๐พ
Offline Sync TodoMVC with PouchDB.
Github Project
Hacker News Minimal ๐ฐ
Tiny hacker news client.
Github Project
Preact Boilerplate โก
2 command starter project. Preact + Webpack + LESS + CSS Modules.
Github Project
Preact Offline Starter ๐ฏ
Simplified Webpack2 starter for Progressive Web Apps, with offline support.
Github Project
Preact Redux Example ๐
Preact + Redux example project, implementing a simple To-Do list.
Github Project
Preact Without Babel ๐ด
How to use Preact entirely without Babel, ES2015 or JSX.
preact-minimal ๐
Minimal Preact structure with all the necessary tools to start your project right away.
preact-typescript-webpack4-less Another one minimal set with Preact, Typescript and Webpack 4.
Preact Homepage Generator ๐
Quickly spin up a new personal webpage by only needing to modify JSON data.
Github Project
Parcel + Preact + Unistore Starter Starter pack for lightning-fast prototyping and small/medium size project structure
buildless-preact-starter ๐ A starter/template for using Preact in buildless environments
Codepens
- Flickr Browser (@ CodePen)
- Animating Text (@ CodePen)
- 60FPS Rainbow Spiral (@ CodePen)
- Simple Clock (@ JSFiddle)
- 3D + ThreeJS (@ CodePen)
- Endless Horse (@ CodePen)
Templates
โก CodePen Template