Bridge

#Install

#React

npm install leiho

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

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)

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

<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

#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.