Demos & Examples
This pages lists a bunch of demos and examples you can use to learn Preact.
:information_desk_person: Built one of your own? Add it!
Preact Website (preactjs.com)
Of course this website is built with Preact.
Built with Preact & Material Design Lite.
GuriVR :eyeglasses: Natural language based Web VR story creator.
The audience participation Progressive Web App from Chrome Dev Summit 2016! Github Project
Open-Source peach.cool app.
Web Maker :zap: Blazing fast & offline frontend playground. Github Project
BitMidi :musical_keyboard: Wayback machine for free MIDI files Github Project
BBC Roasting Calculator :turkey: Calculates cooking times for different cuts of meat.
Desktop app for Dropbox, built with Preact, Electron and Photon.
Embed Hacker News :kissing_closed_eyes: Embed Hacker News comment tree below your blog article.
Connectivity Index :iphone:
A site that allows you to search through Akamai State of the Internet Connectivity Report data by country.
Drag & Drop file upload (webpack 2) :rocket: Desktop App for uploading assets to Contentful (API based CMS) Github Project
Exchange Widget :currency_exchange: The currency exchange widget inspired by a popular mobile app implemented using Preact, Meiosis, HTML tagged templates and native ES modules. Github Project
Modern peer-to-peer file sharing Progressive Web App.
Listen to radio and podcasts.
Full Demos & Examples
View documentation.js output online.
Unofficial fastest TodoMVC implementation.
Offline Sync TodoMVC with PouchDB. Github Project
Hacker News Minimal :newspaper:
Tiny hacker news client.
Preact Boilerplate :zap:
2 command starter project. Preact + Webpack + LESS + CSS Modules.
Preact Offline Starter :100:
Simplified Webpack2 starter for Progressive Web Apps, with offline support.
Preact Redux Example :repeat:
Preact + Redux example project, implementing a simple To-Do list.
Preact Without Babel :horse:
How to use Preact entirely without Babel, ES2015 or JSX.
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 :globe_with_meridians:
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
- Flickr Browser (@ CodePen)
- Animating Text (@ CodePen)
- 60FPS Rainbow Spiral (@ CodePen)
- Simple Clock (@ JSFiddle)
- 3D + ThreeJS (@ CodePen)
:zap: JSFiddle Template
:zap: CodePen Template