---
title: "Browser Renderer"
description: "Learn how, when and why to use the Browser renderer."
canonical_url: "https://nuxtseo.com/docs/og-image/renderers/browser"
last_updated: "2026-05-06T18:43:50.365Z"
---

The Browser renderer uses a real browser to take screenshots, giving you full CSS support.

Using Browser is only recommended when you are prerendering all of your images.

## Installation

<code-group>

```sh [pnpm]
pnpm i -D playwright-core
```

```bash [yarn]
yarn add -D playwright-core
```

```bash [npm]
npm install -D playwright-core
```

</code-group>

<note>

In development and CI/prerender environments, the browser will auto-install if needed.

</note>

## Usage

The component filename suffix determines the renderer. Create your component with a `.browser.vue` suffix:

```bash
components/OgImage/MyTemplate.browser.vue
```

The module automatically detects the renderer from the filename - zero-config.

## Pros

- Full CSS support - any design you can build
- Render JPEGs without using `sharp`
- Page screenshots are simple and saves time

## Cons

- Requires a browser binary installation
- Much slower than Satori/Takumi, using it at runtime is not recommended (see [Performance](/docs/og-image/guides/performance#caching))
- Doesn't work on most hosting providers

## Development Browser

The module uses a local Chrome / Chromium binary in development environments, if available.

If it's not available, the module disables the Browser renderer.

## Prerenderer / CI Browser

When prerendering your images in a CI environment, the module will automatically install a browser binary for you.

If you'd like to opt-out of this, you should disable the binding.

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  ogImage: {
    compatibility: {
      prerender: {
        browser: false
      }
    }
  }
})
```

## Runtime Browser

The module only enables the Browser renderer by default in runtime environments if you explicitly include the `playwright-core`
dependency and the target environment is compatible.

Check the [compatibility](/docs/og-image/guides/compatibility) guide for more information.

## Cloudflare Browser Rendering

For Cloudflare Workers/Pages deployments, you can use [Cloudflare Browser Rendering](https://developers.cloudflare.com/browser-rendering/) for runtime screenshots.

See the [Cloudflare deployment guide](/docs/og-image/guides/cloudflare#browser-rendering) for setup instructions.

When using the [Cloudflare](https://cloudflare.com) provider:

- **Development:** Uses local `chrome-launcher` (zero config)
- **Prerender/Build:** Uses `playwright`
- **Production Runtime:** Uses Cloudflare Browser Rendering

The module automatically handles session reuse and timeout handling for optimal performance within Cloudflare's rate limits.