---
sourceDocument: Australia Build or modify applications
sourceDocumentLink: https://www.servicenow.com/docs/r/australia/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


---

# Widget editor

# Widget editor {#ariaid-title1}

Release version: Australia  
Updated October 1, 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 Widget editor

The Widget Editor provides a three-panel workspace designed for building and previewing widgets within ServiceNow.
It streamlines development by combining a code editor, live preview, and property management into one interface, enabling efficient widget creation and testing.
Show full answer Show less  

## Key Features

* **Component and Script Tabs:** These tabs offer code editing with syntax highlighting and autocomplete for the widget's client-side component (index.js) and server-side script (server.js). The server script uses an export default function with access to GlideRecordSecure and GlideQuery, ensuring queries respect ACLs. Server functions can be invoked from the component with .get(), .update(), or .refresh().
* **Support for Complex Widgets:** Widget Builder edits only the component and server script files. For widgets with additional utility files imported relatively, these files are not editable in the Widget Editor. Customers should use the Lux Lab VS Code extension to work with such complex widgets fully.
* **Preview Tab:** Provides a live, resizable, and zoomable viewport of the widget. Users can interact with zoom controls or mouse scroll with Ctrl/Cmd to inspect widget behavior dynamically. The preview updates immediately after building. Errors such as missing dependencies or import failures are clearly displayed with retry options, improving troubleshooting.
* **Property Panel:** Features two modes:
  * **Widget Properties:** Edit metadata like name, ID, description, and category.
  * **Preview Props:** Inject custom property values into the live preview to test widget behavior with different inputs without altering saved defaults.
* **Save, Build, and Publish Workflow:**
  * **Save:** Preserves current edits.
  * **Build:** Compiles the widget without deployment, updating the preview immediately for rapid iteration. Build errors do not erase edits and are shown clearly.
  * **Publish:** Compiles and deploys the widget to the instance. The first publish confirms widget creation, and subsequent publishes confirm deployment. Publishing errors are displayed for resolution.

## Key Outcomes

ServiceNow customers using the Widget Editor can expect a streamlined development experience for creating, testing, and deploying widgets efficiently. The integration of code editing, live preview, and property management accelerates iteration cycles and reduces deployment errors. For complex widgets with multiple files, leveraging the Lux Lab VS Code extension ensures full editing capability. Clear error messages and immediate preview feedback help maintain high-quality widget development and deployment.  
The widget editor is a three-panel workspace for building and previewing a widget. It has a code editor for the component and server script, a live preview, and a panel for widget properties.

## Component and Script tabs {#widget-editor__widget-editor-component-and-script-tabs}

Both tabs are code editors with syntax highlighting and autocomplete for the widget component code and its server script. The server script is written as `export default function server(data, options, input) {...}`, with `GlideRecordSecure`, `GlideQuery`, and `gs` available --- use `GlideRecordSecure` rather than `GlideRecord` so queries respect ACLs. Call `this.server.get(input)`, `.update()`, or `.refresh()` from the component to run it.
Figure 1. Component tab with syntax highlighting and autocomplete

## Complex widgets with additional files {#widget-editor__widget-editor-complex-widgets-with-additional-files}

Widget Builder only edits the widget's component (index.js) and server script (server.js). A complex widget that has relative imports to other utility files isn't fully editable here,
those additional files aren't shown in the Component or Script tabs.  
Important:  
If a widget imports from files other than its own component and server script, use the [Lux Lab VS Code extension](https://marketplace.visualstudio.com/items?itemName=ServiceNow.now-vscode-extension-ainpx-lab) instead.
Figure 2. Complex widget with additional utility files, opened in the Lux Lab VS Code extension

## Preview tab {#widget-editor__widget-editor-preview-tab}

The Preview tab renders the widget live, in a resizable and zoomable viewport:

* Drag the handles on the left, right, bottom, or corner to resize the preview.
* Use the zoom controls in the bottom-right corner, or hold Ctrl/Cmd and scroll, to zoom in and out. The zoom controls reflow the layout rather than just scaling it visually.
* Select Refresh to reload the preview from the latest build, bypassing the short cache Widget Builder keeps when you switch tabs.

If the preview can't load, it shows the specific problem, such as a missing dependency, a timeout, an import failure, or a registration error with a Retry button. A widget that hasn't been built yet
shows "Preview not available yet --- Click Build to compile" instead of an error.
Figure 3. Preview tab with resize handles and zoom controls

## Property panel {#widget-editor__widget-editor-property-panel}

The property panel on the right has two modes:

Widget Properties
:   A form for the widget's metadata: name, ID, description, category, and similar fields.

Preview Props
:   Inject property values into the running preview to see how the widget behaves with different inputs, without changing the widget's saved defaults.
Figure 4. Property panel in Widget Properties mode Figure 5. Property panel in Preview Props mode

## Save, Publish, and Build {#widget-editor__widget-editor-save-publish-and-build}

Save
:   Builds the widget without deploying it. The preview updates right away, so you can iterate quickly. If a build fails, your edits aren't lost --- Widget Builder saves a draft and shows the build error. Fix the issue and
    save or publish again.

Publish
:   Builds and deploys the widget to the instance. A new or cloned widget's first publish shows "Widget created and published"; later publishes show "Widget published". If publishing fails after a successful build,
    Widget Builder shows the error.