Navigate in Code view

In Code view, you can see other project files, jump to different locations in your document, and search the code.

Browse files

When Google Web Designer is in Code view, the Files panel on the left displays a list of files and subfolders in your project folder.

Open files

Select a file in the panel to open it in a new tab. You can open the following file types:

  • .html source files created by Web Designer
  • .css*
  • .js*
  • .json*
  • .xml*

* For editing in Code view only.

Files that Web Designer can't open are grayed out.

To open files for other projects or in other folders, use the File > Open... menu command.

Filter the list of files

Enter part of a filename in the Filter files field to show only matching files.

Hide the Files panel

Click the Collapse button in the top right corner of the Files panel to hide the file list. Click the Expand button to open the panel again.

Navigate your document

If you select an element in Design view and switch to Code view, your cursor is positioned at the relevant code for the selected element.

Go to a line

Click the line or column number in the footer bar to enter a new value, then press Enter.

Use the minimap

The minimap on the right side of the window displays a miniature version of your entire document in Code view. Click within the minimap to jump to the corresponding part of the document, or drag up or down to scroll the document. You can turn off the minimap in your preferences.

To find text:

  1. Go to Edit > Find, or press Ctrl+F (Windows) or +F (Mac) to open the search bar at the bottom of the window.
  2. Enter your search term in the Find... field.
  3. Toggle the search options you want:
    • Regular expressions (.*)
    • Case sensitive (Aa)
    • Whole words ()
  4. Google Web Designer displays the total number of matches, and highlights the first match after your cursor position.
    • To find the next match: click or press Enter.
    • To find the previous match: click or press Shift+Enter.
    • To select all matches so you can edit them simultaneously: click Find all.

Press Esc or click the X to close the search bar.

To find and replace text:

  1. Go to Edit > Find/Replace, or press Ctrl+Shift+F (Windows) or +Shift+F (Mac) to open the search and replace bar at the bottom of the window.
  2. Enter your search term in the Find... field and your replacement text in the Replace... field.
  3. You can use the same options as when finding text (see above), in addition to replacing text:
    • To replace the current match and find the next match, click Replace.
    • To replace all matches, click Replace all.

Switch to Design view

Click the Design view button in the top right corner of the window.

Was this helpful?
How can we improve it?