Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/preactjs/preact/llms.txt

Use this file to discover all available pages before exploring further.

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 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: 
<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: 
{
  "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

Build docs developers (and LLMs) love

Get started for freeTalk to us