For developers

Keep your stack. Add one line per field.

Leiho doesn’t ask you to change framework, router or hosting. Spread field() where editors should click, read the content in one request, and get types for it.

Try it in your browser Read the docs

Hero.tsx

import { field, block } from 'leiho';

export function Hero({ page, i }) {
  return (
    <section {...block(page, 'sections', i, 'Hero')}>
      <h1 {...field(page, `sections.${i}.title`)}>{page.fields.sections[i].title}</h1>
    </section>
  );
}

One line per field

field(), block() and entry() return the attributes to spread. Pure functions: server components and build time included.

One request per build

loadLeihoContent fetches the whole site once, with an ETag and a snapshot fallback.

Types for your content

npx leiho types writes TypeScript declarations for exactly the JSON you receive.

Schema as code

Keep leiho.schema.json in your repository and import it on staging and production.

Nothing for visitors

The bridge loads only inside the editor, has no dependencies and makes no network request.

Extensible

Adapters for other field plugins, deployment drivers, filters on the content API.

Annotate in a few minutes

Your components stay the same. Add the attributes where editors should be able to click.

Hero.tsx

import { field, block } from 'leiho';

export function Hero({ page, i }) {
  return (
    <section {...block(page, 'sections', i, 'Hero')}>
      <h1 {...field(page, `sections.${i}.title`)}>{page.fields.sections[i].title}</h1>
    </section>
  );
}

Open source, readable

The plugin and the bridge are GPL and live on GitHub. Read the code, open an issue, send a pull request.

Edit the real site.

Free and open source. Try it on a real WordPress, in your browser.

Try it in your browser View on GitHub