---
sourceDocument: Brazil Build or modify applications
sourceDocumentLink: https://www.servicenow.com/docs/r/application-development

 Release :

    - brazil

ft:locale :

    - en-US

ft:publication_title :

    - Brazil Build or modify applications

ft:clusterId :

    - cadev

bundleId :

    - cadev

workflow :

    - Development, Data, and Analytics


---

# UI development with React

# User interface development with React {#ariaid-title1}

Release version: Brazil  
Updated September 10, 2026  
![](https://www.servicenow.com/docs/portal-asset/ico-clock) 4 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 User interface development with React

ServiceNow supports developing user interfaces (UIs) using the React library, a widely used framework for building reusable UI components with JavaScript or TypeScript.
React applications in ServiceNow are created using the ServiceNow IDE or SDK and leverage the ServiceNow Fluent UI Page API to define UI pages that are rendered through an HTML entry point (index.html).
After building and installing, React app assets are stored in designated ServiceNow tables to integrate with the platform.
Show full answer Show less  

## UI development process

* Create a new application in ServiceNow IDE or SDK and select a React template that includes necessary React files and folder structure.
* Add client-side assets such as index.html, scripts, and style sheets in the src/client directory, ensuring index.html includes the JavaScript entry point via a \<script\> tag.
* Define a UI page in a .now.ts file using the Fluent UI Page API, importing the HTML and assigning it to the page's html property.
* Build the application which runs Rollup to bundle dependencies and package client assets, outputting static files to dist/static.
* Install the application to upload static assets into ServiceNow tables like UX Asset, Images, and UX Theme Asset for usage within the instance.

**Note:** UI development with React is currently experimental and subject to content serving and supported content type limitations within ServiceNow.

## Important limitations

* Modify UI page HTML only in source code; changes made directly on the instance are not synchronized back to source and may cause issues.
* Unsupported content types include audio, video, and WebAssembly (WASM).
* File attachment size is limited by the system property com.glide.attachment.maxsize.
* Pre-loading linked content and relative stylesheet imports in HTML are not supported; stylesheets should be imported into code instead.
* CSS modules and relative CSS imports are unsupported.
* Only hash routing is supported; server-side rendering and React server components are not supported.

## Practical implementation details

A typical React UI page is defined in a .now.ts file in the src/fluent directory, where the HTML page (index.html) is imported and linked to the page definition. The index.html references the main React entry point script (e.g., main.jsx) which renders the root React component into the DOM.

After building and installation, the UI page is accessible on the instance via the configured endpoint URL (e.g., https://\<instance\>/\<scope\>incidentmanager.do), presenting the React-based interface such as an incident management page.

## Getting started and resources

* Begin by selecting a React application template in ServiceNow IDE or SDK.
* Use the ServiceNow Fluent UI Page API to define UI pages programmatically.
* Refer to ServiceNow SDK examples on GitHub for sample React application source code.
* Optionally incorporate some Next Experience Components using the React Wrapper Component Library available via npm and Build Agent or ServiceNow tools.  
Develop a user interface (UI) with the React library to build a full-stack application in source code.

## Overview of UI development with React {#ui-development-react__section_lkj_hrk_1gc}

React is an industry-standard web framework for building UI components that you use to develop and render custom user interfaces. A React component is a self-contained, reusable JavaScript function, such as a button, and supports
JavaScript (JS/JSX) and TypeScript (TS/TSX) syntax. For general information about React, see the [React documentation](https://react.dev/learn) on the react.dev website.

With the ServiceNow IDE or ServiceNow SDK, you can use React in
an application to create a UI page in ServiceNow Fluent code. The ServiceNow Fluent UI Page API refers to an HTML entry point (index.html) that loads the page at the endpoint provided. After building and installing the application on an instance, the
static assets are stored in the appropriate tables. For an example of a React application in source code, see the [ServiceNow SDK examples](https://github.com/ServiceNow/sdk-examples)
GitHub repository. To get started using React, select one of the React templates when creating an application with the ServiceNow IDE or ServiceNow SDK.  
Note:  
You can use some Next Experience Components in a React application with the React Wrapper Component Library Node Package Manager (npm) package on the [public npm registry](https://www.npmjs.com/package/@servicenow/react-components). To use the React Wrapper Component Library in an application, you can use Build Agent or you must install it from the ServiceNow IDE or ServiceNow SDK. For more information, see [Use third-party libraries with the ServiceNow IDE](https://www.servicenow.com/docs/bgfoOMyLq19RAgcY1V1vLQ "Call third-party libraries in your application to use existing open-source functionality with the ServiceNow IDE.") or [Use third-party libraries with the ServiceNow SDK](https://www.servicenow.com/docs/IKeF0r3R9xXtFXBo8e2Oag "Call third-party libraries in your application to use existing open-source functionality with the ServiceNow SDK.").

## UI development process {#ui-development-react__section_h2k_lfl_1gc}

The following list is a high-level overview of the process to develop a React application with the ServiceNow IDE or ServiceNow SDK:

1. Create an application and select one of the React templates.The application includes the files and directories required for React development.

2. In the src/client directory, add client assets for a user interface, such as an HTML entry point (index.html), client scripts, and style sheets. The index.html file must contain the `<script>` tag as the JavaScript entry point.
3. Define a UI page \[sys_ui_page\] in code with the ServiceNow Fluent UI Page API. In the now.ts file that contains the UI page definition, you import the HTML and refer to it from the html property of the UiPage object.
4. Build the application to execute a pre-build Rollup script that bundles dependencies and packages the client assets in the src/client directory before executing the rest of the build process. The standard Rollup build process and plugins are used as the default JavaScript bundler.

   Static assets are output to the dist/static directory.
5. Install the application to add the static assets to the application files \[sys_metadata\] in the appropriate tables: UX Asset \[sys_ux_lib_asset\], Images \[db_image\], and UX Theme Asset \[sys_ux_theme_asset\] tables. These tables support adding files as attachments.  
   Important:  
   UI development with React is an experimental feature due to how content is served from an instance and the content types and tables that are currently supported.
{#ui-development-react__ol_vrb_yqp_dgc}

## Limitations {#ui-development-react__section_fnc_3rk_1gc}

* The UI page HTML should be modified only in source code. Changes to the HTML of a UI page \[sys_ui_page\] on an instance aren't synchronized into source code and are likely to result in unintended behavior.
* Audio, video, and WASM content types aren't supported.
* The maximum file size of uploaded attachments is limited by the size configured with com.glide.attachment.max_size system property. For more information, see [Maximum allowed attachment size](https://www.servicenow.com/docs/access?context=sc-max-allowed-attachment-size&version=brazil&pubname=brazil-platform-security&ft:locale=en-US).
* Output paths must be deterministic.
* Pre-loading content linked from HTML isn't supported (`rel="preload"`).
* Relative style sheets linked from HTML aren't supported (`rel="stylesheet"`). Import style sheets into code instead (`@import 'path/to/style-sheet'`).
* Relative imports in CSS aren't supported.
* CSS modules aren't supported.
* Only hash routing is supported by UI pages.
* Server-side rendering and React server components aren't supported.
{#ui-development-react__ul_pkj_mrl_1gc}  

## UI page development with React {#ui-development-react__example_zck_szn_fgc}

In a .now.ts file in the src/fluent directory, a UI page is defined in ServiceNow Fluent code. The HTML of the page is imported from the index.html file in the src/client directory.

    //incident-manager.now.ts
    import '@servicenow/sdk/global'
    import { UiPage } from '@servicenow/sdk/core'
    import incidentPage from '../../client/index.html'

    UiPage({
        $id: Now.ID['incident-manager-page'],
        endpoint: '<scope>_incident_manager.do',
        description: 'Incident Response Manager UI Page',
        category: 'general',
        html: incidentPage,
        direct: true,
    })

In the index.html file, the `<script>` tag refers to the main.jsx file in the src/client directory.

    //index.html
    <html>
    <head>
      <title>Incident Response Manager</title>

      <!-- Initialize globals and Include ServiceNow's required scripts -->
      <sdk:now-ux-globals></sdk:now-ux-globals>

      <!-- Include your React entry point -->
      <script src="./main.jsx" type="module"></script>
    </head>
    <body>
      <div id="root"></div>
    </body>
    </html>

In the main.jsx file, the imports required for rendering the page and the main application component are included and the entry point of the React application is defined.

    //main.jsx
    import React from 'react'
    import ReactDOM from 'react-dom/client'
    import App from './app'

    const rootElement = document.getElementById('root')
    if (rootElement) {
        ReactDOM.createRoot(rootElement).render(
            <React.StrictMode>
                <App />
            </React.StrictMode>
        )
    }

After building and installing the application, you can open the page from the endpoint provided in the UiPage object (https://\<instance\>/\<scope\>_incident_manager.do), which
displays an interface for creating and managing incidents.
Figure 1. Example of a UI page created with React
**Related concepts**   

* [ServiceNow Fluent](https://www.servicenow.com/docs/TC8WqJka2pR8kg1lTg2RrA "Define application metadata in source code using the ServiceNow Fluent domain-specific programming language.")  
**Related reference**   

* [UI Page API - ServiceNow Fluent](https://www.servicenow.com/docs/tZTQo~Rm1bLEri1T0LdEUQ#fluent-ui-page-api "The UI Page API defines custom user interface (UI) pages [sys_ui_page] that display forms, dialogs, lists, and other UI components.")