Search
Clear search
Close search
Google apps
Main menu

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. 

To switch to Code view:

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

Using search in Code view

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

Add GreenSock JavaScript Libraries

You can add popular GreenSock animation tools directly from the file menu.

To insert a GreenSock library:

  1. Make sure you're in code view
  2. Select File > Include JS Library > GreenSock > 
  3. Choose a library from the list. You can repeat the process to add multiple libraries.

Code view settings

The settings panel lets you change many option for code view, including colors, key mapping, and autocompletion behavior.

To change Code view settings:

Select Edit > Preferences...

 

In the code view window you can:

  • Select one of the light or dark themes
  • Choose from several key mappings, including mappings for Emacs, Sublime, and Vim.
  • Customize your code editor settings
Was this article helpful?
How can we improve it?