When viewing Web Designer source files for ads and HTML pages, you can switch between Code view and Design view. The edits that you make in Code view are reflected in Design view, letting you instantly test how changes in your code affect your designs.
To switch to Code view:
Click the Code view
button in the top right corner of the window.
Design view panels and some menu commands are unavailable in Code view.
Code view settings
You can adjust formatting and editor options for Code view in your preferences, including the following settings:
- Color theme
- Key map
- Line wrapping
- Indent size
- Auto indentation
- Auto completion
- Using spaces for tabs
- Minimap visibility
For a full list of options, see the page on setting your preferences.
Working with your code
The following features make it easier to write and edit code. You can also learn how to navigate in Code view within your document or between files.
Zoom
To change the code text size, use the zoom controls (- and +) on the right side of the footer bar. By default, Google Web Designer remembers the zoom level you set for Code view.
Collapse code blocks
Use the arrows in the left margin to collapse and expand blocks of code.
Indentation
By default, Google Web Designer automatically indents new lines as you type. If a block of code isn't properly indented (for example, if you copied and pasted in code from another file), you can select the code and press Tab to indent it.
Code auto completion
By default, Google Web Designer displays suggestions as you type. If you've turned off this preference, you can press Ctrl+Space to trigger auto completion.
Language mode
Google Web Designer bases syntax coloring and code auto completion on the file extension. To override the default language mode, click the current language in the footer and select the new language from the pop-up menu.
GreenSock JavaScript libraries
You can add popular GreenSock animation tools using a menu command if your environment is set to Display & Video 360 or your project is an HTML page.
To insert a GreenSock library:
- Make sure you're in Code view.
- From the File menu, select Include JS Library > GreenSock.
- Select a library from the list.
You can repeat the process to add multiple libraries.
Differences from the published code
Code view doesn't necessarily reflect how your code will look when you publish your document. The code you see while authoring your document may be compressed to take less space, and some code may not be visible in Code view at all, but will be included within the published file.