---
title: "Bridge · Leiho docs"
description: "The leiho package and leiho-bridge.js."
url: https://leiho.dev/docs/bridge
lang: en
updated: 2026-11-04
---
Reference

# Bridge

The leiho package and leiho-bridge.js.

## Install

## React

```bash
npm install leiho
```

Once, in the root layout (Next.js `app/layout.tsx`, Remix `root.tsx`, Vite `App.tsx`):

```jsx
import { LeihoBridge } from 'leiho/react';

<LeihoBridge wpOrigin="https://your-wordpress.example" />
```

The component renders nothing and imports the bridge dynamically, only inside the editor. It's a client component (`'use client'`), so it can sit in a Next.js server layout.

## Any bundler (ESM)

```js
if (window.self !== window.top) {
  const { initLeihoBridge } = await import('leiho');
  initLeihoBridge({ wpOrigin: 'https://your-wordpress.example' });
}
```

## Script tag

Copy `dist/leiho-bridge.js` to your public folder (the plugin also offers it for download in **Leiho → Démarrer**), then in `<head>`:

```html
<script>
  if (window.self !== window.top) {
    var s = document.createElement('script');
    s.src = '/leiho-bridge.js';
    s.setAttribute('data-wp-origin', 'https://your-wordpress.example');
    document.head.appendChild(s);
  }
</script>
```

The standalone file starts itself from its `data-wp-origin` attribute.

## Options

| Option | Default |  |
| --- | --- | --- |
| `wpOrigin` | required | Origin of wp-admin, e.g. `https://wp.example.com`. Messages from any other origin are ignored. |
| `cloakTimeout` | `4000` (`0` in the React component) | Hides the page until the editor sends its values, to avoid a flash of stale content. `0` disables it. |

## Allow framing

Your pages must let wp-admin display them:

```
Content-Security-Policy: frame-ancestors 'self' https://your-wordpress.example
```

and must not send `X-Frame-Options: DENY` or `SAMEORIGIN`.

## Protocol

Messages are `{ ns: 'leiho', type, … }`, sent with an explicit `targetOrigin` and checked against `event.origin`.

| Direction | Type | Meaning |
| --- | --- | --- |
| bridge → editor | `ready` | Fields, sections and image slot ratios on the page, plus its URL. Sent again after client-side navigation. |
| bridge → editor | `fieldFocus` | An editable element was clicked |
| bridge → editor | `sectionFocus` | A section was clicked |
| bridge → editor | `managedFocus` | A managed region was clicked |
| bridge → editor | `navigate` | A link was clicked |
| bridge → editor | `cloakTimeout` | The editor didn't answer in time |
| editor → bridge | `init` | Saved values to display |
| editor → bridge | `fieldUpdate` | Live value of a field being edited |
| editor → bridge | `focusField` / `focusSection` | Scroll to and highlight an element |

Updated November 4, 2026[Something unclear on this page? Tell us →](https://github.com/pixelersagency/leiho/issues/new?title=Docs%3A%20Bridge)