Edit your code

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.

Code View

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 the Design view. This lets you instantly test how changes in your code will affect your designs. You can also select objects with the selection tool and change the CSS styling for those objects in the CSS panel. 

Color themes

Code view lets you chose from a number of light and dark color themes.

To select a theme:

Be certain that you're in code view, then select the theme you want to use from Settings > Theme

Key maps

Code view lets you choose from several key mappings, including mappings for Emacs, Sublime, and Vim.

To select a Key map:

Be certain that you're in code view, then select the key map you want to use from Settings > Key map.

Using search

To search the code:

  1. Use Ctrl+F (Windows) or Cmd+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 slashes) for a more complex search
  3. Press Enter. The first result will be highlighted
  4. Press Enter again to find subsequet results

To search and replace:

  1. Use Alt+Ctrl+F (Windows) or Opt+Cmd+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 slashes) for a more complex search
  3. Press Enter.
  4. Enter the replacement string
  5. Press Enter again.
  6. Click
    • Yes - to replaces the selection
    • No - 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
Was this article helpful?