---
title: "Introduction · Leiho docs"
description: "What Leiho is and how it works."
url: https://leiho.dev/docs/introduction
lang: en
updated: 2026-11-04
---
Getting started

# Introduction

What Leiho is and how it works.

**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).

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