UIF React Wrapper Tool

A CLI toolkit for working with ui-framework-react-wrapper — a template that lets ServiceNow developers build UI Builder components using React. This tool handles fetching, scaffolding, developing, and deploying that template so you don't have to do it manually.

---

Prerequisites

Requirement	Notes
Node.js	v16 or higher recommended
ServiceNow CLI (snc)	Required for configure and deploy
snc ui-component extension	Must be installed via snc extension add --name ui-component

---

Installation

No installation required — use npx to run commands on the fly:

npx ui-framework-react-wrapper-tool <command>

Or install globally if you prefer shorter commands:

npm install -g ui-framework-react-wrapper-tool

---

Quick Start

# 1. Fetch the latest template into the current directory
npx ui-framework-react-wrapper-tool fetch

# 2. Start the local development server
npx ui-framework-react-wrapper-tool dev

# 3. Scaffold and configure the project
npx ui-framework-react-wrapper-tool configure

# 4. Clean the template repo from examples
npx ui-framework-react-wrapper-tool clean

# 5. Deploy to ServiceNow when ready
npx ui-framework-react-wrapper-tool deploy

dev, clean, and deploy must be run from the directory where you fetched the template.

---

Commands

fetch

Downloads the latest UIF React wrapper template from GitHub into the current directory and installs npm dependencies.

npx ui-framework-react-wrapper-tool fetch

If the target directory is not empty, you will be prompted to confirm before it is cleared.

---

dev

Starts the local development server so you can iterate on your React component in the browser.

npx ui-framework-react-wrapper-tool dev

This is a thin wrapper around npm start inside the project directory.

---

configure

Scaffolds the project by customising the template with your component's vendor prefix, label, and application scope.

npx ui-framework-react-wrapper-tool configure [options]

Options

Flag	Description
--vendor-prefix <prefix>	Vendor prefix for the component (e.g. acme)
--label <label>	Human-readable label shown in UI Builder
--scope <scope>	ServiceNow application scope (auto-generated if omitted)

Any option that is not provided via flags will be collected interactively.

What it does

• Validates that snc and the ui-component extension are installed
• Generates a unique component tag in the format x-{vendorPrefix}-{randomSuffix}
• Updates now-ui.json with the new scope name, component tag, and label
• Renames source files and directories to match the new component tag
• Updates package.json with the component name and description
• Saves your configuration to uif.wrapper.config.json

---

clean

Strips out all sample/demo content and leaves you with a blank slate ready for you to create something awesome 😎. Your component tag, scope, and vendor prefix are preserved — only the boilerplate content is removed.

npx ui-framework-react-wrapper-tool clean

What it clears

• src/components/MyReactApp.js — replaced with an empty starter component
• src/components/ subdirectories — all child components removed
• now-ui.json → actions and properties — emptied
• now-ui.json → description — reset to placeholder
• README.md — cleared
• AGENT.md, CLAUDE.md, GEMINI.md — added, so you can start agentic development right away

---

deploy

Deploys the component to ServiceNow using the snc CLI.

npx ui-framework-react-wrapper-tool deploy [--profile <profile>]

Options

Flag	Description
--profile <profile>	snc profile to use for authentication (optional)

This is a wrapper around snc ui-component deploy --force.

---

License

ISC