The Zest Edit button

A small button in the corner of your own pages. On a page your app serves, whose dev server forwards /__zest to Zest, it offers Edit here: the editor loads into the running page (Editing in place). Beside it, and on any other page, it opens the page in the editor. Only browsers you marked show it; everyone else's browser never knows it exists.

#Set it up once

zest service install          # the Zest service at login (macOS, Linux), and this browser gets marked
zest service add path/to/repo # let it open pages from this repo, in every worktree of it

One add covers every git worktree of the repo, the ones you have and the ones you make later: a checkout counts when its git rev-parse --git-common-dir is a registered repo's. Register a folder inside the repo (repo/apps/web) and the same folder in each worktree counts. When several worktrees map the same address, the file comes from the checkout whose dev server answers on that port. Each worktree's team extension still asks for its own approval once (zest trust path/to/worktree), because an approval covers exact files in one folder.

zest service repos lists what is registered and marks a path that is gone or that another registration of the same repo already covers; zest service prune takes those out.

Mark another browser with zest service hello. Its page also offers a Zest Edit bookmark to drag to your bookmarks bar, for pages that do not carry the button.

#Put it on a page

Add one line to the pages you edit (a dev build, a staging page, a template's footer):

<script>(function(){if(!/(^|; )zest_edit=1/.test(document.cookie))return;var s=document.createElement('script');s.src='http://127.0.0.1:4470/__zest/button.js';document.head.appendChild(s);})();</script>

Without the cookie the line does nothing: no request, no button. With it, the page loads the button from your own machine. The button asks the page's own address for /__zest/health: when your dev server forwards it to Zest, the button offers Edit here, with a still copy of the page in the ⋯ menu beside it, and Stop editing once the editor is on the page. Forwarding takes a few lines in your dev server's config: Editing in place. If the page has its own control in the bottom-right corner, lift the button above it: add s.setAttribute('data-zest-offset','64'); before appendChild (pixels from the bottom; 16 by default).

#Tell it which file is behind an address

The repo's zest.json maps addresses to folders:

{ "sites": [{ "url": "http://127.0.0.1:8080/", "root": "public" }] }

http://127.0.0.1:8080/pricing/index.html then opens public/pricing/index.html. An extension can resolve addresses a fixed mapping cannot (a route on a live site, say) with its resolve(url) hook, and with its pages hook open a page an app renders as a live page.

#What it can and cannot do

See Security and privacy. In short: localhost only, cookie-gated, it reads only the page's address, and it opens only pages your registered repos map, never hidden paths. Edit here gets a session for that one page only, and only when the page asking is that page, on this machine.

Suggest a change to this page