Hyperapp vs Preact
Which should you use? A side-by-side look at what each one does, who it suits, what it costs, how hard it is to set up, and where each falls short.
Open source · MIT
A tiny JavaScript framework for building browser apps with a virtual DOM.
Open source · MIT
A small (about 4kB) React-style library for building user interfaces in JavaScript.
The short answer
Choose Hyperapp if you need…
- Developers who want a very small framework for simple to medium browser apps
- People who like a functional style with plain state and actions
- Developers who want to try a framework without setting up a build tool
Choose Preact if you need…
- Web developers who already know React and want a lighter library
- Projects where small bundle size matters, such as pages loaded over slow connections
- Teams that want an optional compatibility alias (preact/compat) to reuse React-based code
- Developers building apps that need server-side rendering with hydration
Side-by-side
| Hyperapp | Preact | |
|---|---|---|
| Type | Library | Library |
| Price | Free and open source | Free and open source |
| Licence | MIT | MIT |
| GitHub stars | 19.2k | 39k |
| Setup difficulty | Beginner | Intermediate |
| How you get it | Install with a package manager | Install with a package manager |
| Main language | JavaScript | JavaScript |
| Last code update | 20 months ago | 4 days ago |
What each one is
Hyperapp
Hyperapp is a small JavaScript library for building interactive web pages and apps. You describe what the page should look like from your current state, and it updates the real page when that state changes. The README says it is about 1 kB and can be loaded directly in a script tag without a build step.
Preact
Preact is a JavaScript library for building user interfaces out of reusable components, using an API that closely follows React. The README describes it as a fast, roughly 4kB alternative to React with a similar modern API, covering components, hooks, JSX, and a virtual DOM. Developers use it when they want React-style code with a much smaller download size.
Best for
Hyperapp
- Developers who want a very small framework for simple to medium browser apps
- People who like a functional style with plain state and actions
- Developers who want to try a framework without setting up a build tool
Preact
- Web developers who already know React and want a lighter library
- Projects where small bundle size matters, such as pages loaded over slow connections
- Teams that want an optional compatibility alias (preact/compat) to reuse React-based code
- Developers building apps that need server-side rendering with hydration
Strengths
Hyperapp
- Very small size, stated as about 1 kB
- Few concepts to learn: views, actions, effects, and subscriptions
- Works with no build step by loading it from a CDN
Preact
- Very small size (the README states about 4kB), which helps page load time
- Familiar React API, including class components, hooks, and functional components
- MIT licensed with a large community and many stars on GitHub
Not ideal for
Hyperapp
- Teams that need a large ecosystem of ready-made components, since the README lists several official packages as planned and points to third-party collections
- Non-programmers, since it requires writing JavaScript
Preact
- Complete beginners who have never written JavaScript; the README assumes familiarity with components and modern JS syntax
- Projects that depend on React-only libraries without testing compatibility, since the README only describes compatibility as 'extensive' via an alias and does not list limits
- Native mobile app development, which the README does not mention
Trade-offs
Hyperapp
- Several official packages (http, random, navigation) are listed as planned, not finished
- Ecosystem is smaller than larger frameworks; third-party packages are found in a separate collection
- The README does not detail production usage or browser support
Preact
- The README is truncated and gives limited detail on edge-case React compatibility
- Some React ecosystem libraries may need the compat layer or may not work fully
- Tooling such as DevTools and HMR depends on additional setup that the README only briefly mentions
Getting started
Frequently asked questions
What is the difference between Hyperapp and Preact?
Hyperapp: A tiny JavaScript framework for building browser apps with a virtual DOM. Preact: A small (about 4kB) React-style library for building user interfaces in JavaScript. Hyperapp suits developers who want a very small framework for simple to medium browser apps, while Preact suits web developers who already know react and want a lighter library.
Are Hyperapp and Preact free?
Hyperapp: Free and open source. Preact: Free and open source.
Which is easier to set up, Hyperapp or Preact?
Hyperapp is easier to get started with (rated beginner); Preact is rated intermediate and usually needs more setup.
Is Hyperapp or Preact more popular?
Preact has more GitHub stars (39k) than Hyperapp (19.2k). Popularity isn't the same as fit — check which one matches your use case above.
What are other alternatives to Hyperapp and Preact?
Other options people compare them with include React, Svelte, Mithril, Inferno, Million.js.
Keep comparing
Built from our catalogue entries for both products: open-source details come from each project's README (AI-assisted, refreshed weekly) and GitHub data; AI-tool details are editorial. Spotted something wrong? Let us know from either product's page.