Edit your code in Code view

Code view is the display mode that 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 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:

  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?
Search
Clear search
Close search
Google apps
Main menu
2559461412959615711
true
Search Help Center
true
true
true
true
true
5050422
false
false