Editing text straight in the Live Preview of FTP by Zaweba

Small wording changes make up a large share of website work. A price label, a phone number, a heading that needs one word swapped. Finding the right line in the code is often slower than the change itself. Live Preview in FTP by Zaweba has a shortcut for this: double-click the text on the rendered page, type the new words, and press Enter.

How it works

Double-click any piece of text in the preview and it becomes editable where it sits. Type your change and press Enter to keep it, or Esc to cancel. The change is written into the editor, into the line that produced that text.

Two details make this safe. The change is undoable, just like typing in the editor yourself, so you can take it back with Undo. And it is unsaved. Nothing is written to disk and nothing goes to the server until you save, which means you can try a few wordings in the preview and only keep the one you like.

When it changes the code, and when it does not

The preview only writes your edit into the code when it can be sure of doing so exactly. The element's source has to be plain text that reads exactly as shown on the page. A heading with plain words inside it in an HTML file is the ideal case.

If the text comes from PHP (a product name pulled from a database, say, or a date printed by a script), or if it holds markup such as a link or bold words in the middle, the app does not guess. Instead, the editor jumps to the code that made it, and nothing changes. You then make the edit in the code yourself, with the cursor already in the right place.

That second behaviour is useful in its own right. Double-click text you want to change, and either the change is made or you are taken straight to where it needs making. Either way, you did not have to hunt.

Working with the rest of Live Preview

Quick edits sit alongside the other ways the preview and the code talk to each other. In Select mode, which is on by default, clicking an element selects the line that produced it, and putting the cursor in an element outlines it in the preview. HTML pages refresh 300 ms after you stop typing, so once your quick edit is in the editor, the preview stays in step with it.

If you need to use links or forms in the preview, turn Select off. With it on, clicks are about finding code rather than following links.

Device sizes are worth combining with quick edits. A heading that fits at desktop width may wrap badly at phone width (375). Switch the preview to phone, double-click the heading, try a shorter wording, and see straight away whether it fits.

Mistakes to avoid

Do not forget to save. Because quick edits are unsaved, closing the tab without saving loses them just as it would lose any other unsaved typing. If Upload on Save is on for the site, saving also sends the file to the server, so think about whether the change is ready before you save.

Do not expect quick edits to change data. Text that comes from a database or a PHP variable lives somewhere other than the page's code, and the preview cannot rewrite it. When the editor jumps to a line of PHP instead of making your change, that is the reason.

And remember that this is a convenience for text, not a page designer. Live Preview in FTP by Zaweba is a preview helper, not a drag and drop builder, and quick edits fit that: they save you finding a line, and leave the structure of the page to you and the code editor.

For the many small wording fixes a website needs, though, double-click, type and Enter is about as quick as editing gets.