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:
- Go to Edit > Find, or press Ctrl+F (Windows) or ⌘+F (Mac) to open the search bar at the bottom of the window.
- Enter your search term in the Find... field.
- Toggle the search options you want:
- Regular expressions (.*)
- Case sensitive (Aa)
- Whole words ()
- Restrict to selection ()
- 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:
- 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.
- Enter your search term in the Find... field and your replacement text in the Replace... field.
- 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.