Skip to content

Marko 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.

Marko

Open source · MIT

An HTML-based language for building web UIs, with server and browser rendering.

Preact

Open source · MIT

A small (about 4kB) React-style library for building user interfaces in JavaScript.

The short answer

Choose Marko if you need…

  • JavaScript developers who prefer HTML-style templates over JSX
  • Teams building sites that need server-side rendering in Node.js
  • Developers exploring alternatives to React, Vue, or Svelte

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

MarkoPreact
TypeFrameworkLibrary
PriceFree and open sourceFree and open source
LicenceMITMIT
GitHub stars14.5k39k
Setup difficultyIntermediateIntermediate
How you get itInstall with a package managerInstall with a package manager
Main languageJavaScriptJavaScript
Last code update6 days ago4 days ago

What each one is

Marko

Marko is a JavaScript framework where you write user interface templates in an HTML-like syntax. It can render pages on a server, in the browser, or both. Developers use it to build interactive websites and web apps.

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

Marko

  • JavaScript developers who prefer HTML-style templates over JSX
  • Teams building sites that need server-side rendering in Node.js
  • Developers exploring alternatives to React, Vue, or Svelte

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

Marko

  • Declarative HTML-based syntax that is familiar to people who know HTML
  • Supports both server-side and client-side rendering from one codebase
  • Open source under the MIT license with an active project (14k+ stars)

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

Marko

  • Beginners who only need a plain static website, since plain HTML or a static site generator is simpler
  • Teams that rely heavily on a large existing React component ecosystem, since Marko's ecosystem is smaller

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

Marko

  • Smaller community and fewer third-party libraries than the most popular frameworks
  • The README provided is truncated, so details of setup and features are limited in this analysis

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

Marko

Clone the repository

git clone https://github.com/marko-js/marko
Step-by-step guide: how to use Marko

Preact

Install from npm

npm install preact
Step-by-step guide: how to use Preact

Frequently asked questions

What is the difference between Marko and Preact?

Marko: An HTML-based language for building web UIs, with server and browser rendering. Preact: A small (about 4kB) React-style library for building user interfaces in JavaScript. Marko suits javascript developers who prefer html-style templates over jsx, while Preact suits web developers who already know react and want a lighter library.

Are Marko and Preact free?

Marko: Free and open source. Preact: Free and open source.

Is Marko or Preact more popular?

Preact has more GitHub stars (39k) than Marko (14.5k). Popularity isn't the same as fit — check which one matches your use case above.

What are other alternatives to Marko and Preact?

Other options people compare them with include React, Svelte, Razzle, 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.