---
sourceDocument: Yokohama Build or modify applications
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/yokohama/application-development

 Release :

    - yokohama

ft:locale :

    - en-US

ft:publication_title :

    - Yokohama Build or modify applications

ft:clusterId :

    - cadev

bundleId :

    - cadev

workflow :

    - Development, Data, and Analytics


---

# HTML syntax editor

# HTML syntax editor {#ariaid-title1}

* Release version: Yokohama
* 
* Updated January 30, 2025
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 2 minutes to read

Summarize  
![AI sparkle icon](https://servicenow.com/docs/portal-asset/ai-sparkle-icon) Summarized using AI  
This content was generated using new OpenAI-powered functionality. Results are provided on an as is basis and are not guaranteed to be accurate or complete.  

## Summary of HTML syntax editor

The HTML syntax editor in ServiceNow Yokohama release offers comprehensive support for editing both HTML and Jelly scripts, allowing you to define the content rendered on pages.
It accommodates static XHTML as well as dynamic Jelly-generated content, and supports calls to script includes and UI Macros.
Show full answer Show less  

## Key Features

* **Syntax Support:** Provides syntax coloring, indentation, line numbering, and automatic insertion of closing braces and quotes for both HTML and Jelly.
* **Auto-suggestions:** Offers tag completion suggestions to speed up coding in both HTML and Jelly.
* **Script Macros:** Includes shortcuts for common code snippets to enhance productivity.
* **Toggle Syntax Editor:** Allows enabling or disabling the syntax editor to switch between views.
* **Search and Replace:** Supports searching, replacing single or all occurrences of text strings, with support for regular expressions to efficiently edit scripts.
* **Commenting:** Enables quick commenting of selected code blocks.
* **Full Screen Mode:** Expands the editor to use the entire form view for easier editing (not supported in Internet Explorer).
* **Keyboard Shortcuts:** Multiple shortcuts are provided for common actions such as commenting, searching, replacing, toggling full screen, and accessing help.

## Practical Editing Tips

* Use the Tab key to insert fixed spaces or to indent single or multiple lines of code.
* Use Shift+Tab to decrease indentation or remove tabs from the start of lines.

## What to Expect

With this editor, you can efficiently create and maintain HTML and Jelly scripts with enhanced readability and ease of navigation, leading to faster development and fewer errors when defining page content or dynamic behaviors in ServiceNow.  
The HTML syntax editor provides support for editing HTML and Jelly scripts and defines what's rendered when the page is displayed. The HTML syntax editor can contain either static XHTML or dynamically generated content defined as Jelly, and can call script includes and UI Macros.{#html-syntax-editor__html-short-desc}  
The syntax editor has these features.

* HTML and Jelly script support
* HTML and Jelly syntax coloring, indentation, line numbers, and automatic creation of closing braces and quotes
* Auto-suggestions for HTML and Jelly tags
* Script macros for common code shortcuts
{#html-syntax-editor__ul_qwf_hgt_3hb}  
Figure 1. HTML syntax editor  
{#html-syntax-editor__table_cwn_f3t_3hb__entry__4}

| Icon | Keyboard shortcut | Name | Description |
|-|-|-|-|
| ![Toggle syntax editor icon]() | N/A | Toggle syntax editor | Disables the syntax editor. Click the Toggle syntax editor icon (![Toggle syntax editor icon]()) again to enable the syntax editor. |
| ![Toggle comment icon]() | Cmd+/ | Toggle comment | Comments the selected code. |
| ![Replace icon]() | Cmd+E | Replace | Replaces the next occurrence of a text string in the script field. 1. Click the Replace icon (![Replace icon]()), then enter the string to replace, and press Enter. You can use regular expressions enclosed in slashes to define the string to replace. For example, the term <kbd class="ph userinput">/a{3}/</kbd> locates <kbd class="ph userinput">aaa</kbd>. 2. Enter the replacement string and press Enter. {#html-syntax-editor__ol_j4t_3tt_3hb} |
| ![Replace all icon]() | Cmd | Replace All | Replaces all occurrences of a text string in the script field. 1. Click the Replace all icon (![Replace all icon]()), then enter the string to replace and press Enter. You can use regular expressions enclosed in slashes to define the string to replace. For example, the term <kbd class="ph userinput">/a{3}/</kbd> locates <kbd class="ph userinput">aaa</kbd>. 2. Enter the replacement string and press Enter. {#html-syntax-editor__ol_ixf_qtt_3hb} |
| ![Start searching icon]() | Cmd+F | Start Searching | Highlights all occurrences of a search term in the script field and locates the first occurrence. Click the Start searching icon (![Start searching icon]()), then enter the search term and press Enter. |
| ![Find next icon]() | Cmd+G | Find Next | Locates the next occurrence of the current search term in the script field. Click the Start searching icon (![Start searching icon]()) to change the current search term. |
| ![Find previous icon]() | Cmd+Shift+G | Find Previous | Locates the previous occurrence of the current search term in the script field. Click the Start searching icon (![Start searching icon]()) to change the current search term. |
| ![Toggle full screen icon]() | Ctrl+M | Toggle Full Screen | Expands the script field to use the full form view for easier editing. Click the Toggle full screen icon (![Toggle full screen icon]()) again to return to standard form view. This feature is not available for Internet Explorer. |
| ![Help icon]() | Cmd+H | Help | Displays the keyboard shortcuts help screen. |
| ![Save icon]() | N/A | Save | Saves changes without leaving the current view. Click the Save icon (![Save icon]()) in full screen mode to save without returning to standard form view. |
[Table 1. HTML and Jelly editing functions]

{#html-syntax-editor__table_cwn_f3t_3hb}

## Editing tips {#html-syntax-editor__editing-tips}

* To insert a fixed space anywhere in your code, press Tab.
* To indent a single line of code, click in the leading white space of the line and then press Tab.
* To indent one or more lines of code, select the code and then press Tab. To decrease the indentation, press Shift+Tab.
* To remove one tab from the start of a line of code, click in the line and press Shift+Tab.
{#html-syntax-editor__ul_at2_m5t_3hb}