Skip to main content
Preact is a fast, lightweight JavaScript library for building user interfaces. At just 4kB, it provides the same modern API as React, including hooks, functional components, and class components, but with a significantly smaller footprint.

Quick start

Get up and running with Preact in minutes

Installation

Learn how to install and set up Preact

API reference

Explore the complete Preact API

Hooks

Use hooks for state and side effects

​
Why Preact?

Preact offers all the power of Virtual DOM components without the overhead:
  • Tiny size - Just 4kB gzipped, so you can ship less JavaScript to your users
  • React-compatible - Use the same API you already know, including ES6 classes, hooks, and functional components
  • Fast - Highly optimized diff algorithm and seamless hydration from server-side rendering
  • Modern features - JSX, Virtual DOM, DevTools, Hot Module Replacement, and Server-Side Rendering
  • Wide browser support - Works in all modern browsers
  • Extensive ecosystem - Access to preact/compat for React library compatibility

​
Hello World

Here’s a simple example to get you started with Preact: 
import { h, render } from 'preact';

// Create your UI tree and append it to document.body
render(
  <main>
    <h1>Hello World!</h1>
  </main>,
  document.body
);

​
Component-based architecture

Preact lets you build your UI by assembling trees of components. Components are functions or classes that return a description of what their tree should output: 
import { render } from 'preact';
import { useState } from 'preact/hooks';

const App = () => {
  const [input, setInput] = useState('');

  return (
    <div>
      <p>Do you agree to the statement: "Preact is awesome"?</p>
      <input 
        value={input} 
        onInput={e => setInput(e.target.value)} 
      />
    </div>
  );
};

render(<App />, document.body);

​
Core concepts

​
Virtual DOM

Preact uses a Virtual DOM to efficiently update the browser’s DOM. When you call render(), Preact creates a tree representation of your UI and updates only the parts that have changed.

​
JSX syntax

While you can use Preact with standard JavaScript, JSX provides a more intuitive way to describe your UI. JSX looks like HTML but is actually JavaScript: 
const element = <h1>Hello, world!</h1>;

​
Components

Components let you split your UI into independent, reusable pieces. You can create components as functions or ES6 classes:
  • Functional components - Simple functions that accept props and return JSX
  • Class components - ES6 classes that extend Component and have lifecycle methods

​
State and props

  • Props - Read-only data passed from parent to child components
  • State - Mutable data managed within a component that triggers re-renders when updated

​
Next steps

Install Preact

Set up Preact in your project

Build your first app

Follow our step-by-step quickstart guide

Build docs developers (and LLMs) love

Get started for freeTalk to us