{"id":50777064,"url":"https://github.com/dylanlindgren/sn-sdk-next-ui","last_synced_at":"2026-06-12T00:30:41.029Z","repository":{"id":363346621,"uuid":"1260828416","full_name":"dylanlindgren/sn-sdk-next-ui","owner":"dylanlindgren","description":"Next Experience UI components in your ServiceNow SDK project","archived":false,"fork":false,"pushed_at":"2026-06-08T13:15:00.000Z","size":35,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-06-08T15:14:43.141Z","etag":null,"topics":["cli","fluent","next-experience","now","sdk","servicenow","ui-builder","ui-component"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dylanlindgren.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-06-05T23:19:52.000Z","updated_at":"2026-06-08T13:12:07.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/dylanlindgren/sn-sdk-next-ui","commit_stats":null,"previous_names":["dylanlindgren/sn-sdk-next-ui"],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/dylanlindgren/sn-sdk-next-ui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dylanlindgren%2Fsn-sdk-next-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dylanlindgren%2Fsn-sdk-next-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dylanlindgren%2Fsn-sdk-next-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dylanlindgren%2Fsn-sdk-next-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dylanlindgren","download_url":"https://codeload.github.com/dylanlindgren/sn-sdk-next-ui/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dylanlindgren%2Fsn-sdk-next-ui/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34224103,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-11T02:00:06.485Z","response_time":57,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cli","fluent","next-experience","now","sdk","servicenow","ui-builder","ui-component"],"created_at":"2026-06-12T00:30:36.136Z","updated_at":"2026-06-12T00:30:40.984Z","avatar_url":"https://github.com/dylanlindgren.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# sn-sdk-next-ui – Next Experience UI components in your ServiceNow SDK project\n\n\nAdd Next Experience UI component development to a ServiceNow SDK (Fluent) project. Build components with the ServiceNow CLI, install them with the SDK.\n\n## Why\n\nBuilding on ServiceNow with the SDK / Fluent is increasingly common and powerful. `sn-sdk-next-ui` makes it even more powerful by letting you develop Next Experience components **inside** an existing SDK project, so a single repository and scoped application holds both your Fluent/server code and your UI components.\n\nIt does this by splitting responsibilities between the two toolchains:\n\n- the **ServiceNow CLI (`snc`)** is used only to _build_ the components, and\n- the **ServiceNow SDK (`now-sdk`)** is used to install the built components onto an instance alongside the rest of your application.\n\n## Prerequisites\n\n- An existing ServiceNow SDK project (created with `now-sdk init`).\n- The **ServiceNow CLI** (`snc`) installed and on your `PATH` — used for building and the dev server. See the [UI component CLI docs](https://developer.servicenow.com/dev.do#!/reference/next-experience/australia/cli/getting-started).\n\n## Getting started\n\nFrom the root of your SDK project:\n\n```bash\n# 1. Install\nnpm add -D sn-sdk-next-ui\n\n# 2. Transform the project into a hybrid SDK + Next Experience project (run once)\nnpm exec sn-sdk-next-ui init\n\n# 3. Add one or more components (interactive)\nnpm exec sn-sdk-next-ui add\n```\n\n\u003e [!NOTE]\n\u003e Examples in this README use `npm`. Substitute your preferred package manager — just mind the per-manager syntax:\n\u003e\n\u003e | Task | npm | pnpm | yarn |\n\u003e | --- | --- | --- | --- |\n\u003e | run a binary | `npm exec sn-sdk-next-ui …` | `pnpm exec sn-sdk-next-ui …` | `yarn sn-sdk-next-ui …` |\n\u003e | run a script | `npm run dev` | `pnpm dev` | `yarn dev` |\n\u003e\n\u003e `sn-sdk-next-ui` detects which manager invoked it and uses it for any installs it runs, so you don't need to configure anything.\n\n## Commands\n\n### `sn-sdk-next-ui init`\n\nTransforms the current SDK project in place. It:\n\n- adds the `dev`, `build`, `clean` and `deploy` scripts (your existing `transform`/`types` scripts are preserved),\n- adds the Next Experience dev dependencies and a `module` entry to `package.json`,\n- creates `now-ui.json` (seeded with your scope from `now.config.json`), `now-cli.json`, `.eslintrc`, `.storybook/`, and Storybook configuration,\n- on pnpm projects, allows pnpm to run the build scripts the UI stack needs (via `allowBuilds` in `pnpm-workspace.yaml`), and\n- installs dependencies (using whichever package manager invoked it).\n\n`init` is run **once**. It refuses to run if `now-ui.json` already exists, or if the directory isn't an SDK project (no `now.config.json`).\n\n### `sn-sdk-next-ui add`\n\nInteractively scaffolds one or more components. For each component it:\n\n- creates `src/now-ui/\u003ccomponent\u003e/` from the component template,\n- registers the component in `now-ui.json`, and\n- adds an import to the `src/now-ui` barrel.\n\nComponent names must be valid custom-element names (lowercase, start with a letter, contain a hyphen — e.g. `my-counter`).\n\n## Project scripts (after `init`)\n\nRun these with your package manager (`npm run build`, `pnpm build`, `yarn build`, …):\n\n| Script    | What it does                                                                                                                                                        |\n| --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `dev`     | Runs Storybook with interactive component previews and live reload.                                                                                                 |\n| `clean`   | `now-sdk clean` and removes the `.now-cli` working directory.                                                                                                       |\n| `build`   | everything in `clean` plus `snc ui-component generate-update-set`, unpacks the update set into the ServiceNow SDK `dist` folder, and then `now-sdk build`           |\n| `deploy`  | `now-sdk pack \u0026\u0026 now-sdk install` — installs the built application (UI components included) onto your instance.                                                      |\n\n## Project layout (after `init` + `add`)\n\n```\nyour-sdk-project/\n├── now-ui.json                 # Next Experience component manifest\n├── now-cli.json                # snc dev-server config\n├── .storybook/\n│   └── main.mjs                # Storybook configuration\n├── stories/\n│   └── my-counter.stories.js   # EDIT THIS — component preview and tests\n└── src/\n    ├── fluent/ …               # your existing SDK/Fluent code (untouched)\n    ├── server/ …               # your existing server code (untouched)\n    └── now-ui/\n        ├── index.js            # barrel — imports every component\n        └── my-counter/\n            ├── index.js\n            └── index.scss\n```\n\n## Component stories\n\nEach component gets a Storybook story file (e.g., `stories/my-counter.stories.js`). Edit these files to:\n\n- **Define variants**: Create multiple named stories to showcase different states and prop combinations.\n- **Test interactions**: Use Storybook's play functions to test user interactions and component behavior.\n- **Document props**: Use `argTypes` to describe component properties with descriptions, types, and control UI.\n\nExample story:\n\n```js\nimport '../src/now-ui'\n\nconst TAG = 'my-counter'\n\nexport default {\n  title: 'Components/my-counter',\n  tags: ['autodocs'],\n  render: (args) =\u003e {\n    const el = document.createElement(TAG)\n    el.setAttribute('button-size', String(args.buttonSize))\n    return el\n  },\n  argTypes: {\n    buttonSize: {\n      description: 'The size applied to the buttons',\n      control: { type: 'select' },\n      options: ['sm', 'md', 'lg'],\n    },\n  },\n  args: { buttonSize: 'md' },\n}\n\nexport const Default = {}\nexport const Large = { args: { buttonSize: 'lg' } }\n```\n\n## Plugins\n\n`sn-sdk-next-ui` can be extended by plugins that layer extra template files and `package.json` entries on top of the base. A plugin is any installed package that declares an `snSdkNextUiPlugin` field in its `package.json`:\n\n```json\n{\n  \"name\": \"my-sn-sdk-next-ui-plugin\",\n  \"snSdkNextUiPlugin\": \"./plugin.js\"\n}\n```\n\nwhose entry exports a descriptor:\n\n```js\n// plugin.js\nexport const plugin = {\n  templateDir: \"./template\", // overlaid on the base template tree\n  packageMerge: \"./package.merge.json\", // optional, deep-merged into package.json\n};\n```\n\nPlugins declared as dependencies of your project are **discovered automatically**. You can also pass them explicitly (e.g. a local path during development):\n\n```bash\nnpm exec sn-sdk-next-ui init --plugins ../my-sn-sdk-next-ui-plugin\nnpm exec sn-sdk-next-ui add --plugins ../my-sn-sdk-next-ui-plugin\n```\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdylanlindgren%2Fsn-sdk-next-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdylanlindgren%2Fsn-sdk-next-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdylanlindgren%2Fsn-sdk-next-ui/lists"}