---
title: "Quick start · Leiho docs"
description: "Install the plugin, connect your site, annotate your markup."
url: https://leiho.dev/docs/quick-start
lang: en
updated: 2026-11-04
---
Getting started

# Quick start

Install the plugin, connect your site, annotate your markup.

## 1. Install the plugin

[Download `leiho.zip`](https://leiho.dev/get/leiho.zip) (latest version, also listed on the [releases page](https://github.com/pixelersagency/leiho/releases)) and upload it in **Plugins → Add New → Upload Plugin**. Later versions show up in **Plugins** like any other update. Requires WordPress 6.0+ and PHP 7.4+. Model your content with Leiho Collections, or keep your [ACF](https://www.advancedcustomfields.com/) fields (free or Pro).

## 2. Point it at your site

**Leiho → Settings**: your front-end URL, the post types editors may open, and the URL pattern for each one (`/{slug}` by default; the front page maps to `/`).

## 3. Allow wp-admin to frame your site

Send this header from your front end (**Leiho → Get started** shows it with your domain filled in, and checks it for you):

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

## 4. Add the bridge and annotate your markup

**React (Next.js, Remix, Vite…)**

```bash
npm install leiho
```

```jsx
// Root layout: app/layout.tsx, root.tsx, App.tsx…
import { LeihoBridge } from 'leiho/react';

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

**Any other site (Astro, Nuxt, SvelteKit, HTML)**: copy `leiho-bridge.js` (downloadable from **Leiho → Get started**) to your public folder and add to `<head>`:

```html
<script>
  // Loads the bridge only inside the editor: visitors get ~150 bytes, not 10 KB.
  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>
```

Then annotate what should be editable:

```html
<main data-wp-post="12">
  <h1 data-wp-field="_title">About us</h1>
  <p data-wp-field="intro">We build things.</p>
  <img data-wp-field="hero_image" src="/hero.jpg" alt="" />
</main>
```

Back in wp-admin, **Leiho → Get started → Test the connection** confirms that the bridge answers. You're done. Step-by-step setups for each framework are in [`examples/`](https://leiho.dev/frameworks).

> **Using a coding agent?** **Leiho → Get started** gives you ready-to-paste prompts and the full integration contract ([`plugin/docs/agent-instructions.md`](https://github.com/pixelersagency/leiho/blob/main/plugin/docs/agent-instructions.md)) for Claude Code, Cursor, Codex and the like.

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