Installation

Learn how to install and set up Preact in your project

You can install Preact using your preferred package manager or include it directly via CDN.

Package manager installation

Install Preact using npm, yarn, or pnpm:

npm

npm install preact

Core packages

Preact provides several packages for different use cases:

Main package

The core Preact library includes everything you need to build components:

npm install preact

This gives you access to:

• render and hydrate for mounting components
• createElement (aliased as h) for creating virtual DOM nodes
• Component class for building class components
• Fragment for grouping elements without a wrapper
• createContext for context API
• createRef for accessing DOM elements

Hooks

For functional components with state and effects, install the hooks package:

npm install preact

Preact hooks are available from preact/hooks:

import { useState, useEffect, useRef } from 'preact/hooks';

Available hooks:

• useState - Add state to functional components
• useEffect - Perform side effects
• useLayoutEffect - Synchronous version of useEffect
• useReducer - Alternative to useState for complex state
• useRef - Create mutable refs
• useMemo - Memoize expensive computations
• useCallback - Memoize callback functions
• useContext - Access context values
• useImperativeHandle - Customize ref exposure
• useDebugValue - Display custom labels in DevTools
• useErrorBoundary - Handle errors in components
• useId - Generate unique IDs

React compatibility layer

For using React libraries with Preact, install the compatibility layer:

npm install preact

Then alias react and react-dom to preact/compat in your bundler configuration:

{
  "alias": {
    "react": "preact/compat",
    "react-dom": "preact/compat"
  }
}

CDN installation

You can use Preact directly in the browser without a build step using a CDN:

unpkg

<script type="module">
  import { h, render } from 'https://unpkg.com/preact?module';
  import { useState } from 'https://unpkg.com/preact/hooks?module';

  const App = () => {
    const [count, setCount] = useState(0);
    return (
      h('div', null,
        h('p', null, `Count: ${count}`),
        h('button', { onClick: () => setCount(count + 1) }, 'Increment')
      )
    );
  };

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

Package.json setup

After installation, your package.json should include Preact:

package.json

{
  "name": "my-preact-app",
  "version": "1.0.0",
  "type": "module",
  "dependencies": {
    "preact": "^11.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.28.0",
    "@babel/plugin-transform-react-jsx": "^7.27.1"
  }
}

JSX configuration

To use JSX syntax, you need to configure your build tool. Preact uses the h function (or createElement) for JSX transformation.

Babel configuration

Create a .babelrc or babel.config.js file:

.babelrc

{
  "plugins": [
    [
      "@babel/plugin-transform-react-jsx",
      {
        "pragma": "h",
        "pragmaFrag": "Fragment"
      }
    ]
  ]
}

TypeScript configuration

For TypeScript projects, configure tsconfig.json:

tsconfig.json

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "preact",
    "lib": ["DOM", "ES2015"],
    "module": "ESNext",
    "target": "ES2015"
  }
}

Alternatively, use the classic JSX transform:

tsconfig.json

{
  "compilerOptions": {
    "jsx": "react",
    "jsxFactory": "h",
    "jsxFragmentFactory": "Fragment"
  }
}

Verifying installation

Create a simple test file to verify your installation:

index.js

import { h, render } from 'preact';

const App = () => (
  <div>
    <h1>Preact is installed!</h1>
    <p>You're ready to start building.</p>
  </div>
);

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

Import paths

Preact exports are organized by functionality:

// Core functionality
import { render, h, Fragment, Component, createRef } from 'preact';

// Hooks
import { useState, useEffect, useCallback } from 'preact/hooks';

// React compatibility
import { render } from 'preact/compat';
import { useState } from 'preact/compat';

// Developer tools
import 'preact/debug';

// DevTools integration
import 'preact/devtools';

// Test utilities
import { act, setupRerender } from 'preact/test-utils';

// JSX runtime (automatic with modern configs)
import { jsx } from 'preact/jsx-runtime';

Next steps

Quick start guide

Build your first Preact application with our step-by-step guide