Introduction

Leiho is the visual content editor for headless WordPress. Your editors see the real front end, Next.js, Astro, Nuxt, SvelteKit, React or plain HTML, inside wp-admin. They click a heading, change it, watch it update live, save, and publish. Define your content types in Leiho, or keep your existing ACF fields: either way WordPress stays the single source of truth.

Headless WordPress gives developers a modern front end, but it takes the "what you see" away from editors. They fill in forms blind, wait for a build, and discover the result on the live site. Leiho puts the site back in front of them, without asking developers to give up their stack.

• Works with any front end. A ~10 KB, dependency-free bridge talks to wp-admin through postMessage. React apps get a one-line component.
• Your data model, untouched. Leiho reads and writes the ACF fields you already have — repeaters, groups, flexible content, relationships, images.
• Or no field plugin at all. Leiho Collections defines content types and fields in Leiho itself, stored in typed tables. WordPress + Leiho is enough.
• Nothing public. The bridge never calls the WordPress API and holds no secrets. Every message is origin-checked on both sides.
• Publishing that fits your hosting. Live content, a build hook (Vercel, Netlify, Cloudflare Pages), GitHub Actions with live build status, a publish commit, or Coolify.

#How it works

┌──────────────────────── wp-admin ────────────────────────┐
│  Leiho editor                                             │
│  ┌──────────────┐  ┌───────────────────────────┐  ┌─────┐│
│  │ Pages        │  │  <iframe> your real site  │  │Field││
│  │ Structure    │  │  ┌─────────────────────┐  │  │panel││
│  │ History      │  │  │ leiho-bridge.js      │◄─┼──┤     ││
│  └──────────────┘  │  └─────────────────────┘  │  └─────┘│
│                    └───────────────────────────┘         │
│             REST (leiho/v1, nonce + capabilities)         │
└───────────────────────────┬──────────────────────────────┘
                            ▼
                     WordPress + ACF

1. The editor loads your front end in an iframe.
2. The bridge finds the elements you annotated with data-wp-field and reports them.
3. Clicking an element opens its field. Typing updates the page instantly, in the browser only.
4. Save writes to WordPress. Publish triggers your deployment (or nothing at all in live mode).