Navigate in Code view

In Code view, you can see other project files, jump to different locations in your document, and search the code. You can also learn more about working in Code view.

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. The panel automatically updates to reflect any changes to the list.

Open files

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

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

^{* For editing in Code view only.}

You can also open image files (.jpg/.jpeg, .png, .gif) for viewing. Hover over an image's filename in the Files panel to see a thumbnail of the image.

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. The portion of code that's visible in the editor is highlighted in the minimap.

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.

Search the code

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 ()
   • Restrict to selection ()
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 Ctrl+G (Windows) or ⌘+G (Mac).
   • To find the previous match, click or press Shift+Ctrl+G (Windows) or Shift+⌘+G (Mac).
   • 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.