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

 Release :

    - australia

ft:locale :

    - en-US

ft:publication_title :

    - Australia Build or modify applications

ft:clusterId :

    - cadev

bundleId :

    - cadev

workflow :

    - Development, Data, and Analytics


---

# Edit code with the Now Code Editor (advanced feature)

# Edit code with the Now Code Editor (advanced feature) {#ariaid-title1}

Release version: Australia  
Updated March 12, 2026  
![](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 Edit Code with the Now Code Editor (Advanced Feature)

Now Code Editor is a rich-text editing interface designed for modifying UI configurations, data resource configurations, and scripts within Next Experience UI Builder components.
It supports multiple coding languages, including CSS, HTML, JavaScript, XML, and JSON.
Show full answer Show less  

## Key Features

* **Basic Editing:** Includes formatting code, highlighting syntax, and checking for errors.
* **Debugging:** Enables script debugging with options to add breakpoints, conditional breakpoints, and logpoints.
* **Command Palette:** Provides access to common operations like find and replace, folding code blocks, and toggling comments.
* **Code Formatting:** Automatically formats code with proper indentation and highlights syntax errors.
* **Auto-Suggestions:** Displays valid elements for easy insertion into the code.
* **Script Macros:** Inserts standard code templates for common operations, such as loops and GlideRecord queries.

## Key Outcomes

Using Now Code Editor enhances your coding efficiency by providing essential editing features, debugging capabilities, and code templates. This enables you to swiftly modify and test your UI components, ensuring that your applications are well-configured and functional.  
Now Code Editor is a rich-text editor like interface that supports Cascading Style
Sheets (CSS), Hypertext Markup Language (HTML), JavaScript, Extensible Markup Language (XML),
and JavaScript Object Notation (JSON). Use Now Code Editor to modify UI configuration, data
resource configuration, styles, events, client-side and server-side scripts in Next Experience UI Builder
components.  
Now Code Editor supports the following features:

* Basic editing
* Debugging
* Command palette
* Code formatting
* Syntax checking and highlighting
* Auto-suggestions
* Script macros for common code
{#now-code-editor__ul_erg_s54_24b}

## Basic editing {#now-code-editor__section_wl4_nhp_24b}

{#now-code-editor__table_unk_l3p_24b__entry__2}

| Action | Description |
|-|-|
| Format code ![]() | Applies proper indentation to the script. Keyboard shortcut: * Windows: Shift+Alt+F * Mac: Shift+Option+F {#now-code-editor__ul_c5d_bjp_24b} |
| Highlight syntax | Highlights the syntax of the code. |
| Check syntax ![syntax check icon]() | Checks for formatting errors and highlights syntax errors. * Windows: Shift+Alt+C * Mac: Shit+Option+C {#now-code-editor__ul_ayb_yfs_24b} |
| Show suggestions | Displays a list of valid elements at the insertion point such as: * Class names * Function names * Object names * Variable names {#now-code-editor__ul_o4s_klp_24b}Select and click an entry to add it to the script. Keyboard shortcut: * Windows: Control+Space * Mac: Control+Space {#now-code-editor__ul_h5g_5mp_24b} You can also enable or turn off Syntax highlighting from the Settings menu. |
| Toggle comments ![toggle comments icon]() | Comments one or more lines of code with two consecutive forward-slashes //. Keyboard shortcut: * Windows: Control+/ * Mac: Command+/ {#now-code-editor__ul_n1q_d4p_24b} |
| Show minimap | Displays the minimap of the code snippet. You can display or hide the minimap option, from the Settings menu. |
| Enable word wrap | Enables word wrap function in the editor area. You can toggle the Enable word wrap option from the Settings menu. |
| Show command palette | Displays a list of available commands for the common operations. You can execute editor commands, find and replace text, fold and unfold code blocks, toggle comments and many more tasks using the same interactive window. Keyboard shortcut * Windows: F1 * Mac: F1 {#now-code-editor__ul_cj3_qyp_24b} |
| Expand editor ![expand editor icon]() or collapse editor ![collapse editor icon]() | Expands or collapses the editor. Keyboard shortcut * Windows: Control+M * Mac: Control+M {#now-code-editor__ul_dwp_hzq_24b} |
[ ]

{#now-code-editor__table_unk_l3p_24b}

## Debugging {#now-code-editor__section_fwz_xyp_24b}

To launch Script Debugger, click the Script Debugger icon ![Script Debugger icon]() in the toolbar.  
Note:  
You can add a breakpoint, conditional breakpoint, or logpoint, only when debugging is enabled and selected language is JavaScript.
{#now-code-editor__table_ysr_rzp_24b__entry__2}

| Task | Do this |
|-|-|
| Add breakpoint | Right-click beside a line number in the ruler area and select Add breakpoint. |
| Add conditional breakpoint | 1. Right-click beside a line number in the ruler area and select Add conditional breakpoint. 2. Enter a break condition in the editor. |
| Add logpoint | Right-click beside a line number in the ruler area and select Add logpoint. |
| Compare text in Diff mode | Use the side-by-side view icon ![now code editor side by side view]() and inline view icon ![Now code editor inline view]() to toggle between views. |
[ ]

{#now-code-editor__table_ysr_rzp_24b}

## Code editor macros {#now-code-editor__section_ygk_h1q_24b}

for
:
    * Description: Inserts a standard for loop with an example array.
    * Output:

          for (var i=0; i< myArray.length; i++) {
           //myArray[i];
           
          }

    {#now-code-editor__ul_dgy_4pq_24b}

method
:
    * Description: Inserts an empty JavaScript function template.
    * Output:

          /*_________________________________________________________________
             * Description:
             * Parameters:
             * Returns:
             ________________________________________________________________*/
             : function() {
             
             },

    {#now-code-editor__ul_efh_ffx_msb}

info
:
    * Description: Inserts a GlideSystem information message.
    * Output:

          gs.addInfoMessage(gs.getMessage(""));

    {#now-code-editor__ul_wwt_ffx_msb}

doc
:
    * Description: Inserts a comment block for describing a function or parameters.
    * Output:

          /**
           
          * Description: 
           
          * Parameters: 
           
          * Returns:
          */

    {#now-code-editor__ul_a5f_gfx_msb}

vargror
:
    * Description: Inserts a GlideRecord query for two values with an OR condition.
    * Output:

          var gr = new GlideRecord('');
           
          var qc = gr.addQuery('field', 'value1');
           
          qc.addOrCondition('field', 'value2');
          gr.query();
           
          while (gr.next()) {

           
          }

    {#now-code-editor__ul_gqz_gfx_msb}

vargr
:
    * Description: Inserts a standard GlideRecord query for a single value.
    * Output:

          var gr = new GlideRecord("");
          gr.addQuery("name", "value");
          gr.query();
          if (gr.next()) {
             
          }

    {#now-code-editor__ul_gyq_hfx_msb}