> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.

# Preact

Learn how to build a Preact application using Rsbuild.

## Create a Preact application

Create a Preact application with [create-rsbuild](/guide/start/quick-start.md#create-an-rsbuild-application):


```sh [npm]
npm create rsbuild@latest
```

```sh [yarn]
yarn create rsbuild
```

```sh [pnpm]
pnpm create rsbuild@latest
```

```sh [bun]
bun create rsbuild@latest
```

Then select `Preact` when prompted to "Select framework".

## Use Preact in an existing project

To compile Preact, you need to register the Rsbuild [Preact plugin](/plugins/list/plugin-preact.md). The plugin will automatically add the necessary configuration for Preact builds.

For example, register the plugin in Rsbuild config:

```ts title="rsbuild.config.ts"
import { defineConfig } from '@rsbuild/core';
import { pluginPreact } from '@rsbuild/plugin-preact';

export default defineConfig({
  plugins: [pluginPreact()],
});
```

## Preact Fast Refresh

Preact plugin uses [@preact/prefresh](https://github.com/preactjs/prefresh) and [@rspack/plugin-preact-refresh](https://github.com/rstackjs/rspack-plugin-preact-refresh) to hot reload Preact components.

### Component recognition

Prefresh needs to be able to recognize your components. This means that components should
start with a capital letter and hooks should start with `use` followed by a capital letter.
This allows the plugin to effectively recognize these.

Do note that a component as seen below is not named:

```jsx
export default () => {
  return <p>Want to refresh</p>;
};
```

Instead do:

```jsx
const MyComponent = () => {
  return <p>Want to refresh</p>;
};

export default MyComponent;
```

When you are working with HOC's be sure to lift up the `displayName` so the plugin can
recognize it as a component.