Edit your code in Code view

Code view lets you view and edit your code in Google Web Designer's built-in code editor. In addition to HTML, you can work on CSS, JavaScript, and XML files.

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 the following Code view options in your preferences:

  • Color theme
  • Key map
  • Remember zoom percentage
  • Show trailing spaces
  • Highlight selection matches
  • Indentation
  • Auto close brackets
  • Auto close tags
  • Auto completion
  • Use spaces for tabs
  • Show minimap

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 (Windows) or +Space (Mac) to trigger auto completion.

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.

Note: This option isn't available if your ad environment is set to Google Ads or Google AdMob.

To insert a GreenSock library:

  1. Make sure you're in Code view.
  2. From the File menu, select Include JS Library > GreenSock.
  3. 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.

Was this helpful?
How can we improve it?