{"revision":"c10276e953456835cdbb1f3a60d58ae1980be353","document":{"id":2225,"path":"application-development/lux-lab-for-vs-code.md","title":"Lux Lab for VS Code","bundle":null,"doc_type":null,"release":"australia","body":"\n# Lux Lab for VS Code\n\nServiceNow Lux Lab for VS Code brings project creation, instance browsing, local preview, build, and deployment into Visual Studio Code. It ships alongside the standalone Lux Lab desktop app as a separate product.\n\nUse the Lux Lab VS Code extension, rather than the standalone Lux Lab app, when you want the same build/preview/deploy workflow inside an editor you already use. The extension adds project creation, instance browsing, local preview, build, and deployment commands to VS Code.\n\nFor the desktop app, see [Lux Lab](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/application-development/lux-lab-app.md).\n\n## Requirements\n\n|Requirement|Minimum version|\n|-----------|---------------|\n|Visual Studio Code|1.97|\n|Node.js|24|\n|pnpm|10|\n|now-sdk|4.12|\n|Target instance|Zurich Patch 12 or later, or Australia Patch 5 or later|\n\nThe **Lux: Show Environment Check** command displays the required and detected versions for Node.js, pnpm, and ServiceNow SDK. After fixing a failure, run **Lux: Re-check Environment**.\n\n**Warning:** The Environment Check page offers **Skip checks and proceed anyway**. Skipping leaves the extension's features enabled while the checks are unmet, and commands may fail. The check must pass before you can create a project.\n\n## Instance connections\n\nYou connect to an instance from **Instance Explorer** in the [Lux Lab](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/application-development/lux-lab-app.md) activity bar view by selecting **Connect to ServiceNow**, or by running **Lux: Add ServiceNow Instance**. You enter the instance name or full URL, then select an authentication method.\n\n-   **Basic**\n\n    You enter your username, password, and a unique profile alias. The extension validates the credentials against the instance, then stores the profile in VS Code SecretStorage. The extension masks passwords and doesn't write them to the project.\n\n-   **OAuth**\n\n    You enter a profile alias, open the authorization URL the extension displays, authorize in the browser, and paste the returned code into a masked input. The extension exchanges it using Authorization Code with PKCE and stores the token in VS Code SecretStorage. You don't enter a username or password in the extension.\n\n    Remote instances must use HTTPS.\n\n\n## What it provides\n\n-   **Instance Explorer**\n\n    Browses Experiences, Pages, and Widgets on a connected instance. Select an artifact to open its metadata, open its source, or launch a preview.\n\n-   **Script Runner**\n\n    Creates projects, installs dependencies, and runs dev, build, and deploy. Actions include **Dev**, **Build**, **Deploy**, **Stop**, **Show Command Output**, and **Show Dev Server Terminal**.\n\n-   **Quick Preview**\n\n    Opens local preview-able pages and widgets without leaving VS Code. Save the file first, then select it in Quick Preview. You can also select and hold \\(or right-click\\) a preview-able file and select **Lux: Open Preview**.\n\n    An AI agent can drive page and widget creation through the project's bundled skills. The extension isn't tied to a specific agent vendor.\n\n\n## Commands\n\nOpen the **Command Palette** \\(`Cmd+Shift+P` on macOS, `Ctrl+Shift+P` on Windows and Linux\\) and search for `Lux:`.\n\n-   `Lux: Show Welcome Page`\n-   `Lux: Show Environment Check`\n-   `Lux: Re-check Environment`\n-   `Lux: Add ServiceNow Instance`\n-   `Lux: Sign in to Active Instance`\n-   `Lux: Refresh Instance Explorer`\n-   `Lux: Create LUX Project`\n-   `Lux: Create Page`\n-   `Lux: Run Script...`\n-   `Lux: Build`\n-   `Lux: Deploy`\n-   `Lux: Open Preview`\n-   `Lux: Show Command Output`\n\nSelecting and holding \\(or right-clicking\\) a project, page, widget, or preview-able file in the **Explorer** or [Lux Lab](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/application-development/lux-lab-app.md) views gives the same actions in context. The context menu also opens a terminal and reveals a project in **Finder** or **File Explorer**.\n\n## Workflow\n\nThe `Lux: Create Lux Project` command scaffolds a standalone application. You select the instance, the parent folder, the application name, the project folder name, the **Standalone App** template, and the scope suffix. When the extension retrieves the vendor prefix from the instance, the prefix is fixed and only the suffix is editable. The extension then scaffolds, installs dependencies, and opens the project. The `Lux: Create Page` command adds a route and creates `pages/<page-slug>/page.js`.\n\nFor extension applications rather than standalone ones, see [Create an extension application with Lux Lab](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/application-development/create-an-extension-application-with-lux-lab.md).\n\n**Related topics**  \n\n\n[Lux Lab](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/application-development/lux-lab-app.md)\n\n[ServiceNow SDK](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/application-development/now-sdk.md)\n\n"}}