Editing code
The editor up close: autocomplete, find and replace, error checking, settings, and shortcuts.
The middle pane is where you write your code. It handles PHP, HTML, CSS and JavaScript, and it has the everyday tools you would expect from a desktop editor, all in the browser. This guide walks through them.
Saving: it happens for you
zizcode saves as you type, so you rarely need to think about it. The status next to the file name shows saved once your latest changes are stored. You can also save right now with the Save button or Ctrl/Cmd+S. Every save also adds to the file's version history.
Syntax highlighting
Your code is colored as you type so it is easier to read and to spot a typo. zizcode picks the right colors automatically based on the file type.
Autocomplete
As you type, zizcode suggests function names, keywords, and names you have already used in the file. It is a fast way to avoid spelling mistakes and to remember a function name.
- Suggestions pop up after a couple of letters.
- Use the up and down arrows to pick one, then Enter or Tab to accept it.
- Press Esc to dismiss the list, or Ctrl/Cmd+Space to call it up on demand.
Find and replace
Click Find on the editor bar, or press Ctrl/Cmd+F, to search the open file. The bar shows how many matches there are and which one you are on, with arrows to step through them. Press Ctrl/Cmd+H (or the small arrow on the find bar) to show the replace row, where you can swap one match or all of them at once. The Aa button makes the search match upper and lower case exactly.
Jump to a file fast
The Go to file button in the Files panel, or Ctrl/Cmd+P, opens a quick search. Start typing part of a file's name and press Enter to open it. Useful once a project has more than a few files.
Error checking
zizcode keeps an eye on your code for structural slip-ups, like an unclosed tag or a missing bracket, and underlines them. When there is something to look at, a small warning triangle with a count appears on the editor bar. Click it to see the list of problems and jump to each one. It sticks to clear, high-value warnings rather than nagging, so if it flags something it is usually worth a look.
Editor settings
Open the More menu on the toolbar and choose Editor settings to tune the editor to your liking. Your choices are remembered on your device. You can turn on or off:
- Syntax highlighting and Line numbers.
- Word wrap, which wraps long lines to the screen instead of scrolling sideways. It is on by default on small screens.
- Auto-indent, which keeps your indentation when you press Enter.
- Auto-close brackets, quotes and tags, which adds the matching closer for you.
- Error checking and Autocomplete, the two features above.
You can also set the font size and the tab width (how many spaces one indent uses).
Keyboard shortcuts
The ? button on the editor bar lists the shortcuts. The main ones:
- Ctrl/Cmd+F find, Ctrl/Cmd+H find and replace.
- Ctrl/Cmd+P quick-open a file.
- Ctrl/Cmd+S save now.
- Tab inserts an indent, Esc closes the find bar or quick-open.
On a phone or tablet
zizcode works on touch screens too. A row of common symbols (brackets, quotes, $, ; and so on) sits above the keyboard so you do not have to hunt for them. The tabs at the top switch between Files, Editor and Preview, one at a time.
Arranging the panels
On a wide screen you can shape the workspace to suit you:
- Use the Files and Preview toggles at the top to show or hide either side panel.
- Drag the divider between panels to make one wider.
- Fill screen hides the site navigation so the editor takes the whole window. It is also in the More menu.