Search
Clear search
Close search
Google apps
Main menu

Edit your code in Code view

Code view lets you view and edit your code in Google Web Designer's built-in code editing tool. In addition to HTML, you can create CSS, JavaScript, and XML files in Code view. Code view uses code autocompletion, which makes your code easier to write, with fewer errors.

For ads and HTML files, you can switch between Code view and Design view, with the changes that you make to the code in Code view reflected in Design view. This lets you instantly test how changes in your code will affect your designs.

Some panels and menu commands are disabled in Code view.

To switch to Code view:

Click the Code view button  in the view bar. If you have selected an element in Design view, the code for it will be highlighted in Code view.

To search the code:

  1. Press Control + F (Windows) or Command + F (Mac) to open the search box at the top of the window.
  2. Enter your search term in the Search box. You may also use regular expressions (between two forward slashes) for a more complex search.
  3. Press Enter. The first result will be highlighted.
  4. Press Enter again to find each subsequent result.

To search and replace:

  1. Use Alt + Control + F (Windows) or Option + Command + F (Mac) to open the search box at the top of the window.
  2. Enter your search term in the Search box. You may also use regular expressions (between two forward slashes) for a more complex search.
  3. Press Enter.
  4. Enter the replacement string.
  5. Press Enter again.
  6. Click:
    • Yes - to replace the selection.
    • No - to leave the selection unchanged and move to the next search result.
    • All - to replaces every search result.
    • Stop - to exit the search and replace action.

Add GreenSock JavaScript Libraries

You can add popular GreenSock animation tools directly from the File menu if your environment is DoubleClick or HTML.

To insert a GreenSock library:

  1. Make sure you're in Code view.
  2. From the File menu, select Include JS Library > GreenSock.
  3. Choose a library from the list. You can repeat the process to add multiple libraries.
Note: This option isn't available if you selected an AdWords environment for your ad.

Code view settings

You can adjust options for Code view, including colors, key mapping, and autocompletion behavior, in your preferences.

Differences with the published version

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 article helpful?
How can we improve it?