--- 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 --- # Exploring Lux # Exploring Lux {#ariaid-title1} Release version: Australia 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 ServiceNow customers to build widget-based, single-page UI applications on their ServiceNow instances. It delivers server-side rendered HTML to browsers, which is then hydrated into fully interactive applications. Lux apps are accessed under URLs prefixed with/aiux/, which is also reflected in related package names and API identifiers. Show full answer Show less This framework enhances user experience by enabling faster initial page loads with fully rendered content, eliminating loading spinners or blank screens. Subsequent navigation occurs client-side for a smooth single-page app feel. Server-side data loaders efficiently retrieve data close to the ServiceNow instance, reducing latency compared to client-side fetching. ## Key Features * **Built on Lit Widgets:** All UI components are Lit widgets extending platform base classes from `@servicenow/aiux-components-core`. Developers use `AIUXElement` for presentational widgets or pages and should avoid extending LitElement directly. * **Styling:** Tailwind and DaisyUI styles are automatically applied through adopted stylesheets, providing consistent design system integration without manual imports. * **Server-Side Rendering (SSR) Support:** Includes SSR-safe data loading with `this.loaderData` populated by static async `loader(ctx)` methods that fetch data server-side before rendering. * **Layout and Context API:** Supports a single layout widget for app chrome (header, navigation, footer) and a context API (`createContext()`) for sharing data across widgets without prop drilling. * **App Structure:** Uses a manifest file (`aiux.json`) for app configuration, file-based routing via the `pages/` directory, reusable widgets, and loaders for pre-render data fetching. ## What You Can Build and Who Should Use Lux Lux enables development of scoped, custom UI applications that run on a ServiceNow instance. These apps are maintained in separate repositories and deployed independently using the ServiceNow SDK. The framework is intended for developers familiar with JavaScript (ES modules), HTML, CSS, and web components or similar component frameworks. While prior experience with Lit is beneficial, it is not mandatory. ## Benefits for ServiceNow Customers * Deliver fast, accessible, and SEO-friendly UI experiences with immediate content visibility on page load. * Leverage server-side data fetching to minimize client-side delays and improve performance. * Build consistent, styled interfaces easily using integrated Tailwind and DaisyUI support. * Create modular, maintainable applications with clear structure and reusable components. 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/qqnlIBoD6w1T9XfXyLmSHg "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.