DocsFrameworksPreact

Preact Adapter

3KB React-compatible alternative with Signals for fine-grained reactivity. Drop-in compatibility via preact/compat — migrate from React with zero code changes.

Preact 10 · Signals · 3KB

3KB runtime

Preact's entire runtime is 3KB gzipped — 10× smaller than React 18 (39KB).

Preact Signals

@preact/signals provides signal(), computed(), and effect() for surgically reactive UIs.

React compat

preact/compat makes Preact a drop-in replacement for React — use all React ecosystem packages.

Fast reconciler

Optimized VDOM diffing — Preact is consistently faster than React in DOM benchmarks.

Hooks API

Full hooks compatibility: useState, useEffect, useRef, useContext, useMemo, useCallback.

TypeScript

Full TypeScript types included. JSX via preact/jsx-runtime.

Setup

bash

npm create lunx-dev@latest my-preact-app -- --framework preact --ts
cd my-preact-app && npm install && npm run dev

Preact Signals

typescriptsrc/App.tsx

import { signal, computed, effect } from '@preact/signals'
import { useSignal } from '@preact/signals/react'  // or @preact/signals

// Global signals — shared across components without context
const count    = signal(0)
const doubled  = computed(() => count.value * 2)

effect(() => {
  console.log('Count is now:', count.value)
})

export function Counter() {
  return (
    <div>
      {/* Signal .value access auto-subscribes this component */}
      <h2>Count: {count}</h2>
      <p>Doubled: {doubled}</p>
      <button onClick={() => count.value++}>Increment</button>
      <button onClick={() => count.value--}>Decrement</button>
    </div>
  )
}

Using as React drop-in

typescriptlunx.config.ts

export default defineConfig({
  framework: 'preact',
  resolve: {
    alias: {
      // Map all React imports to Preact compat — zero code changes
      'react':       'preact/compat',
      'react-dom':   'preact/compat',
      'react/jsx-runtime': 'preact/jsx-runtime',
    }
  }
})

When to choose Preact

Choose Preact when bundle size is critical — e-commerce landing pages, microsites, or apps targeting low-end mobile devices. The preact/compat alias lets you use the full React ecosystem (React Router, React Query, Radix UI) without changing any import statements.

PreviousElectron Adapter NextLit Adapter