The live editor

A Drupal or WordPress page does not say how it was made. To change one heading you find the template, block or field that printed it, change it in an admin form or a file, and reload to see whether it was the right one. An agent tells you what it changed in words, not on the page.

The live editor puts the page and what made it side by side, and nothing reaches the site until you say so.

• The local site you already run (ddev, Lando, a dev server), in the project’s Live tab. Wanigan starts and changes nothing to show it.
• Off until you switch it on, for Drupal, WordPress and other sites separately.
• It follows the agents: when one edits a file, the page reloads and the parts that file made are outlined.
• On Drupal and WordPress it names each part as the site does; with the site helper it also says what made each part and saves through the site’s own core.

Every change takes the same path, and you take each step.

1. The page. Select a part, then type on its words or try a style; each key and value shows as you go.
2. The design layer. What you keep waits in Wanigan’s layer, keyed to the part by what the site says it is, shown again after every reload. The site has nothing yet.
3. Make real. Words are saved through Drupal’s or WordPress’s own core, as you, with a revision where the site keeps one. A style goes to an agent as a brief, on your click.
4. Verify. The page is rendered with and without the layer at 390 and 1440 px, and compared.
5. Undo. Undo takes back the newest add or discard; an edit already in the site is never taken out of the layer.

The page takes the most room, with one toolbar above it and panels that close.

• Structure, on the left: Layers (the page’s parts, named as the site names them), Add (what the site can place, from its component library) and Pages (the site’s pages to walk).
• The page, in the middle: the chosen part outlined in blue with its name, and its action bar above it (Style, Move, Take out, Ask an agent).
• The Inspector, on the right: the chosen part’s Design, Made by and Data (more).
• The dock, beneath: Code, Notes, Problems, Request and DevTools, opened from their tabs in the status line (Developer tools).
• The status line: what just happened (“hero.twig changed: outlined the part of this page it makes.”) and the mode you are in, such as Selecting.

You stay logged in to your site while you work, so its own admin bars sit over the page. One switch in the live view’s bar hides them: Drupal’s admin toolbar and sidebar, or WordPress’s admin bar, with the space each core makes for them taken back, so the page looks as a visitor sees it and you stay logged in. It needs no reload, and it stays as you set it for every site and page. A theme’s own room for an admin bar is the theme’s, and stays; other admin toolbars from contributed projects are not hidden.

Drupal’s own status messages (“Saved”, “You are logged in”) used to push the page down and come and go between renders. They are hidden in the view now, and Wanigan says them in a pop-up of its own at the top of the page that goes after a few seconds (a site’s error stays longer), and keeps them in the notification tray as “Drupal says: …”. Messages a script adds after the page has loaded are not read. WordPress prints none on a site’s pages.

• Turn it onShow your site; add the helper.
• Pick a partChoose a part and read what made it.
• Type on the pageChange words where they show.
• Try a styleColour, size and space, shown as you go.
• The design layerWhere your edits wait until you make them real.
• Make realSave words through the site’s own core.
• VerifyCheck the site renders what you designed.
• CompareLine your local page up with a hosted one.