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)