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!

Full Apps

Preact Website (preactjs.com)
Of course this website is built with Preact.
Github Project

ESBench :alarm_clock:
Built with Preact & Material Design Lite.

GuriVR :eyeglasses: Natural language based Web VR story creator.
Github Project

BigWebQuiz :game_die:
The audience participation Progressive Web App from Chrome Dev Summit 2016! Github Project

Nectarine.rocks :peach:
Open-Source peach.cool app.
Github Project

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.

Dropfox :wolf:
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

Code and Comment :memo: An application for adding comments to any file on Github. 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

Full Demos & Examples

Documentation Viewer
View documentation.js output online.
Github Project

TodoMVC
Unofficial fastest TodoMVC implementation.
Github Project

TodoMVC+PouchDB :floppy_disk:
Offline Sync TodoMVC with PouchDB. Github Project

Hacker News Minimal :newspaper:
Tiny hacker news client.
Github Project

Preact Boilerplate :zap:
2 command starter project. Preact + Webpack + LESS + CSS Modules.
Github Project

Preact Offline Starter :100:
Simplified Webpack2 starter for Progressive Web Apps, with offline support.
Github Project

Preact Redux Example :repeat:
Preact + Redux example project, implementing a simple To-Do list.
Github Project

Preact Without Babel :horse:
How to use Preact entirely without Babel, ES2015 or JSX.

preact-minimal :rocket:
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

Codepens

Templates

:zap: JSFiddle Template

:zap: CodePen Template

Built by a bunch of lovely people like @valotas.