--- sourceDocument: Zurich Build or modify applications sourceDocumentLink: https://www.servicenow.com/docs/r/zurich/application-development Release : - zurich ft:locale : - en-US ft:publication_title : - Zurich Build or modify applications ft:clusterId : - cadev bundleId : - cadev workflow : - Development, Data, and Analytics --- # Exploring Lux # Exploring Lux {#ariaid-title1} Release version: Zurich Updated September 29, 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 Exploring Lux Lux is a framework designed for creating widget-based user interfaces on a ServiceNow instance. It delivers fully rendered HTML to browsers and hydrates it into an interactive single-page application, hosted under the URL structure/aiux//. Theaiuxprefix is consistent across platform package names and API identifiers, serving as a stable coding reference. Show full answer Show less ## Key Features * **Faster page loading:** Users see fully rendered content immediately upon navigation, eliminating loading spinners and blank screens. Subsequent navigation is handled client-side for a smooth single-page app experience. * **Efficient data handling:** Data loaders execute server-side near the ServiceNow instance, reducing latency by avoiding client-side fetch round trips. * **Built on Lit widgets:** All Lux UI components extend platform base classes from `@servicenow/aiux-components-core`, such as `AIUXElement` and `AIUXWidgetElement`. Direct extension of LitElement is discouraged to leverage built-in server-side rendering (SSR), styling, and data-fetching. * **Design system integration:** Tailwind and DaisyUI styles are automatically applied through adopted stylesheets, ensuring consistent application styling without manual imports. * **Data fetching convention:** Widgets and pages implement a static async `loader(ctx)` method that fetches data server-side before rendering, with results accessible via `this.loaderData` during SSR and client hydration. * **Layout and routing:** The framework supports file-based routing through the `pages/` directory and includes a single layout file (`pages/layout.js`) to wrap pages with app chrome elements like headers, navigation, and footers. * **Context API support:** Enables data sharing across widgets without prop-drilling using `createContext()`. ## Key Components * **aiux.json:** Defines app manifest details such as app name, URL basename, and landing route. * **Pages:** Lit widgets organized in a directory structure that maps to URLs. * **Loaders:** Static async methods on widgets or pages for server-side data loading. * **Widgets:** Reusable Lit-based UI elements extending Lux base classes. * **Layout:** Central layout component that renders consistent app chrome. ## Practical Application and Audience ServiceNow customers use Lux to build scoped applications with custom, high-performance UI experiences deployed independently via the ServiceNow SDK. Lux is targeted at developers proficient in JavaScript ES modules, HTML, CSS, and web components or component frameworks. Prior experience with Lit is beneficial but not mandatory. Lux is a framework for building widget-based UI experiences on a ServiceNow instance. Lux streams the rendered HTML to the browser and hydrates it into a fully interactive single-page app. Your app is served under /aiux/\/\. The `aiux` prefix is the platform's public URL surface. It also appears in package names such as @servicenow/aiux-components-core and in API identifiers such as `AIUXElement`. Those are real names you type in code, and they don't change. ## Faster page loading {#exploring-lux__lux-server-rendered-then-hydrated} When a user navigates to your Lux app they will see fully rendered content immediately, with no loading spinners or blank screens. Subsequent navigation happens client-side, so the app feels like a single-page app. Lux provides the following benefits: * The browser shows the first screen quickly. * The markup is accessible and search engines can read it. * Data retrieval is efficient. Loaders run on the server, near your ServiceNow instance. This helps prevent the delay of a round trip that client-side fetches cause. ## Built on Lit widgets {#exploring-lux__lux-built-on-lit-widgets} You build all Lux UI with Lit widgets. Your widgets extend a platform base class from the package @servicenow/aiux-components-core. Use `AIUXElement` for a simpler presentational widget or a page. Never extend `LitElement` directly. The base classes carry the SSR, styling, and data-fetching plumbing: * Tailwind and DaisyUI styling, applied automatically through adopted stylesheets, so your widgets inherit the design system without manual imports. * SSR-safe `this.loaderData`, holding the result of your widget's `static async loader(ctx)` method during both server render and client hydration. * `getLayoutData(key)`, reading layout-level data shared across all pages. * The `static async loader(ctx)` convention, a framework-managed pattern for fetching data before render. {#exploring-lux__ul_tp3_mzz_skc} The fundamental building blocks are described in the following table. {#exploring-lux__table-lux-building-blocks__entry__2} | Building block | Description | |-|-| | aiux.json | The app manifest: app name, URL basename, landing route | | Pages | Lit widgets under pages/; directory structure maps directly to URLs (file-based routing) | | Loaders | A `static async loader(ctx)` method on a page or widget that fetches data on the server before render; the result becomes `this.loaderData` | | Widgets | Reusable Lit UI units extending `AIUXWidgetElement` (discoverable, self-fetching) or `AIUXElement` (presentational) | | Layout | A single pages/layout.js that renders the app chrome (header, navigation, footer) around each page | | Context API | `createContext()` for sharing data across widgets without prop-drilling | [Table 1. Lux building blocks] {#exploring-lux__table-lux-building-blocks} ## What you build with it {#exploring-lux__lux-what-you-build-with-it} You build a scoped ServiceNow application that depends on Lux. Your application lives in its own repository, separate from Lux itself. It deploys to a ServiceNow instance on its own schedule using the [ServiceNow SDK](https://www.servicenow.com/docs/Sy1o23ccr2KHV6AUmyrjYg "ServiceNow SDK is the command-line tool that scaffolds, builds, and deploys a Lux application. It's distributed as the npm package @servicenow/sdk and invoked as now-sdk."). ## Who this is for {#exploring-lux__lux-who-this-is-for} Lux is for developers building custom UI experiences on a ServiceNow instance. You should know JavaScript (ES modules) and basic HTML and CSS, plus web components or a component framework. Prior Lit experience helps but isn't required.