Visual editing for any site, on WordPress.

1. 01

   Allow the editor to display your site

   Set the header in your server configuration.

   add_header Content-Security-Policy "frame-ancestors 'self' https://cms.example.com" always;

   <IfModule mod_headers.c>
     Header always set Content-Security-Policy "frame-ancestors 'self' https://cms.example.com"
   </IfModule>

   Content-Security-Policy: frame-ancestors 'self' https://cms.example.com

2. 02

   Add the bridge

   Put leiho-bridge.js in the site’s public folder, then add this code to the layout’s head.

   <script>
     if (window.self !== window.top) {
       var s = document.createElement('script');
       s.src = '/leiho-bridge.js';
       s.setAttribute('data-wp-origin', 'https://cms.example.com');
       document.head.appendChild(s);
     }
   </script>

3. 03

   Read the content

   Read the content from these URLs, at build time or on each request.

   # All published content, in one request
   GET https://cms.example.com/wp-json/leiho/v1/export
   
   # One page, by its path
   GET https://cms.example.com/wp-json/leiho/v1/content?path=/about

   Building with Node? npm install leiho gives you loadLeihoContent from leiho/content.

4. 04

   Mark what editors can change

   Spread field() on each element editors should change. Always render the element, even when its value is empty.

   <section data-wp-post="12" data-leiho-section="Hero">
     <h1 data-wp-field="hero_title">…</h1>
     <img data-wp-field="hero_image" src="…" alt="…">
     <article data-wp-field="cards.0.title">…</article>
   </section>

Replace https://cms.example.com with your WordPress address. In wp-admin, Leiho → Get started shows these steps with your address filled in, checks each one, and can give the whole setup to your coding agent as one prompt.