SDK 4.0.0 #22

bryce-godfrey · 2025-09-04T21:05:21Z

bryce-godfrey
Sep 4, 2025
Maintainer

🔥 4.0.0 is here! 🔥

The latest release of the @servicenow/sdk just dropped on npm, and it’s a big one.
Internally, we’ve completely overhauled our plugin framework to make APIs more reliable, and way faster to ship. Translation? You’ll be seeing more APIs, more often 🚀.
But the real star of the show:

⚛️ Front-End app support with front end frameworks like React, Vue, Svelte, SolidJS, and others!
⚡️ New Fluent APIs to level up your applications development
🛠️ A rock-solid foundation for even bigger things coming soon

Check out the release notes below, kick the tires, and drop your thoughts on the discussion board. We can’t wait to see what you build with 4.0.0 🙌.

New Fluent APIs

Some new Fluent APIs have been added to make working with certain types of tables easier using the SDK.

ScriptInclude (sys_script_include)
UiPage (sys_ui_page)
UiAction (sys_ui_action)
ScriptAction (sysevent_script_action)
ServicePortal elements
- SpWidget (sp_widget)
- SPWidgetDependency (sp_dependency)
- SpAngularProvider (sp_angular_provider)

Command changes

There are some minor command changes to now-sdk and they can be viewed using --help option for more information.

Added clean command
The clean command will clean out the build output directory, typically dist folder. This is automatically performed as part of the build command, but if you have any other needs to clean out the folder you can use this command.
Added pack command
The pack command will package up the output of a build into an installable archive file. pack is automatically performed as part of the install command. Pack used to be run at the end of build but this was removed since installalso performs pack
Added download command
The download command can be used for downloading complete or incremental metadata from the instance for the application.

Front-end framework support

The SDK now supports building front-end applications with standard frameworks to run on ServiceNow! For this first release, we are natively supporting React out of the box, and in the future, we are aiming to support a "bring your own front end" (BYOF) approach. This new feature will let you use a more modern development experience for building UI applications.

To get started building front ends, simply choose a template with included front-end framework support such as now-sdk + fullstack React when running init to get started!

This is just the beginning of the BYOF support we are adding to the SDK and we will be following up soon with more support for providing your own bundler and tooling for other frameworks like Svelte, Vue, etc...

How does it work?

Front-end applications utilize the UiPage Fluent API for bundling and hosting the application and its entry point. The SDK detects importing from an .html page that is being assigned to the html attribute on UiPage Fluent API and bundles your front end into static assets served with your application.
By default, the front-end application code lives in your src/client directory (configurable in now.config.json with the clientDir property). Add all your images, style sheets, fonts, etc. here the same way you would for any typical React application that you're building. The out of the box bundler we have included is Rollup to package up the your front end application.

Example with React:

import { UiPage } from '@servicenow/sdk/core'
import indexPage from '../client/index.html'

UiPage({
    $id: Now.ID['sample-frontend'],
    endpoint: 'x_sampleapp-uipage-fe.do',
    description: 'Sample Front-End Application',
    category: 'general',
    html: indexPage,
    direct: true,
})

In the src/client folder create an index.html page like this:

<html>
<head>
  <title>Sample Front-End Application</title>

  <!-- Initialize globals and Include ServiceNow's required scripts -->
  <sdk:now-ux-globals></sdk:now-ux-globals>

  <!-- Include your React entry point -->
  <script src="./main.tsx" type="module"></script>
</head>
<body>
  <div id="root"></div>
</body>
</html>

In the src/client/* folder add a main.tsx file with your React code, CSS, and other assets to build your application

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './app'

const rootElement = document.getElementById('root')
if (rootElement) {
    ReactDOM.createRoot(rootElement).render(
        <React.StrictMode>
            <App />
        </React.StrictMode>
    )
}

When you are ready, just build and install then open the UI Page on the instance to view your application!

React Sample: https://github.com/ServiceNow/sdk-examples/tree/main/react-ui-page-ts-sample
Svelte Sample: https://github.com/ServiceNow/sdk-examples/tree/main/svelte-ui-page-sample
Vue Sample: https://github.com/ServiceNow/sdk-examples/tree/main/vue-ui-page-sample
SolidJS Sample: https://github.com/ServiceNow/sdk-examples/tree/main/solidjs-ui-page-sample

Limitations:

Only hash routing is currently supported by UI Pages.
Maximum file size of assets is limited to the com.glide.attachment.max_size system property
Preloading content linked from HTML isn't supported (rel="preload")
Relative style sheets linked from HTML aren't supported (rel="stylesheet"). Import your style sheets into code instead (import "path/to/style-sheet")
Relative @import in CSS isn't supported
CSS modules aren't supported
Server-side rendering and React server components aren't supported

API Changes

List API deprecates $id property as it is a coalescing table and uses combination of name, view, sys_domain, element, relationship, and parent properties. The property will not produce build errors but be marked as deprecated.
Role API deprecates $id property as it is a coalescing table and uses the name property to generate its key. The property will not produce build errors but will be marked as deprecated.
ClientScript API will no longer produce script fields with tagged template literalsscript tag during generation by default. Syntax highlighting for these tags were removed back in 3.0 in favor of Now.include functionality. The tags will not produce build errors, and they do not alter functionality.

//Before
ClientScript({
  script: script`gs.info("hello world")`
  ...
}) 

//After
ClientScript({
  script: `gs.info("hello world")`
  ...
})

Breaking Changes

Custom properties have been removed in this version. In versions 3.0 and earlier, you could specify custom properties not included in the type definition on any API. This was helpful for setting custom fields on out-of-box table definitions. However, this feature has been removed in 4.0 to prevent issues caused by allowing arbitrary properties in the API type. This feature would cause AI hallucinations during code generation due to lack of strict type checking on the arbitrary fields that were allowed. We are planning to bring this back soon (4.1+), so if you rely on this in your application please wait or alternatively use the Record API instead if that's a possibility.

For example, you could specify a field called x_customfield on an API like Role in version 3.0 and prior and that field would be automatically added to the build output.

Role({
  $id: Now.ID['my_id'],
  name: 'x_myapp_rolename',
  x_customfield: 'some value'
})

Documentation

https://www.servicenow.com/docs/bundle/zurich-application-development/page/build/servicenow-sdk/concept/servicenow-sdk-landing.html

Support and Issues

This discussion was created from the release SDK 4.0.0.

chasingtheflow · 2025-09-04T23:45:18Z

chasingtheflow
Sep 4, 2025

😮 <sdk:now-ux-globals></sdk:now-ux-globals> pog

0 replies

vincepg13 · 2025-09-08T08:29:26Z

vincepg13
Sep 8, 2025

Great job team!! Will give this a go over the coming days and let you know if any issues.

Really looking forward to the continued evolution of this. Devs have been wanting this capability for years on the platform.

The biggest limitations I can see in this initial release is no SSR(but that was to be expected) and being limited to hash routing. APIs like Tanstack router for the combination of route loading, cacheing, and file based routing are super convenient. But hopefully this is something that can be figured out in future updates.

Then if we can get to point where we can support Server Side Rendering and use next.js etc the sky is the limit!

Awesome work :)

1 reply

vincepg13 Sep 21, 2025

@bryce-godfrey Is there some kind of restriction on the max file size of the .jsdbx files that can go through the SDK and to the instance?

Whilst working on an app thats using some heavier imports today like tiptip html editor and code mirror script editor I noticed everything worked perfectly on the vite dev server, but when deployed to the instance the UI page did not load and in the console was the error: Failed to load: x_659318_shadkit/main at /uxasset/externals/x_659318_shadkit/main.jsdb

Digging into it further I realised the jsdbx attachment on the UX Asset record on the instance was just shy of 3MB, but the actual size of the main.jsdbx file in the dist folder of the repo was closer to 5MB. So seems like the file is getting truncated when its served to the instance? If I upload the jsdbx file from the dist folder manually, the UI page then works fine. Any ideas?

skylen15 · 2025-09-10T02:59:10Z

skylen15
Sep 10, 2025

The new version is awesome! Hopefully team will add hot reloading for the React page or something like "npm run dev", that will improve DX so much.

7 replies

vincepg13 Sep 10, 2025

Ah yeah I'm using WSL. With vite you can just proxy any of the endpoint requests you know you'll need to use in vite.config.ts. I've been using that with basic auth admin account to test locally.

Oh nice, one of the devs I work with swears by Svelte, I'll get him to give it a go.

skylen15 Sep 10, 2025

Ah yeah I'm using WSL. With vite you can just proxy any of the endpoint requests you know you'll need to use in vite.config.ts. I've been using that with basic auth admin account to test locally.

Oh nice, one of the devs I work with swears by Svelte, I'll get him to give it a go.

Yeah, but I recommend you should combine your app with Svelte locally first, ServiceNow IDE does not support Svelte extension file

bryce-godfrey Sep 10, 2025
Maintainer Author

There will be a couple more samples coming in next couple days for Vue and SolidJs, as well as how to configure Vite at least for a dev server. Love to see what you guys have also if you want to show off your own samples!

skylen15 Sep 10, 2025

Very promising! I encountered some issues in local projects, maybe I will create another thread for it.

vincepg13 Sep 10, 2025

There will be a couple more samples coming in next couple days for Vue and SolidJs, as well as how to configure Vite at least for a dev server. Love to see what you guys have also if you want to show off your own samples!

I have a repo running with a vite dev server. I've had a bit of trouble getting everything to play nice with the rollup build, but I think ive found ways around all the issues ive had via modifications to the now.prebuild.mjs file. tailwind in particular was a bit of a headache. Just getting react router v7 data mode working with tanstack query (thanks for the suggestion Khoi) then ill get it written up and make the repo public tomorrow

vincepg13 · 2025-09-11T16:39:47Z

vincepg13
Sep 11, 2025

I've had a go at building my own template which includes everything I personally would use when creating a react app. If anyone wants to give it a go and has any feedback would love to hear it. Hopefully the instructions are clear, for me I done this via terminal/VS Code rather than ServiceNow IDE

https://github.com/vincepg13/shad-kit-template

9 replies

bryce-godfrey Sep 12, 2025
Maintainer Author

Please correct me if I'm wrong! I think we should add all of npm packages as devDependencies, the build process will handle itself.

Correct, regular dependencies have the potential to be bundled as sys_modules so we recommend devDependencies here. I'll make sure we call that out in documentation

bryce-godfrey Sep 12, 2025
Maintainer Author

@bryce-godfrey have you or anyone in the team tried to get tailwind working? I could only get it to work by forcing a build in the now.prebuild.mjs to another css file and sending that to the instance. @skylen15 has just pointed out to me though that this wont work on the IDE due to the node dependencies. It doesnt seem to work using the traditional rollup css plugin. Khoi seems like he's exhausted all options too.

Considering many of the component libraries use tailwind, it would be cool to have it properly supported on the IDE. If you need any information on what weve tried so far please let us know!

I'll have the team take a look at tailwind support

vincepg13 Sep 12, 2025

I'll have the team take a look at tailwind support

Another few things I noticed about the build process which would be good to have supported natively:

When dependencies have a shared package which gets hoisted into the root node_modules folder, the build errors. It seems like its only looking in each packages specific node_modules folder, so any hoisted packages which no longer exist here cause an error. Was able to use the nodeResolve plugin to rectify this
The '@' key in imports did not work so had to use the alias plugin to map it to the client directory
I wasnt sure of how to handle media files but got it working by adding them to an assets folder in the client directory and using the url plugin to map to set the correct name for images on the instance

This was when building from vs code, not sure if using the ServiceNow IDE makes a difference to any of them.

chasingtheflow Sep 12, 2025

nice work on the dev server, i've been working in a similar direction but focusing on solidjs. My setup is similar to yours, however I discovered that you can use import { getCredentials } from "@servicenow/sdk-cli/dist/auth"; to leverage the credentials already stored in the now-sdk as opposed to having to spoof them through .env if you want to give that a try. There's also a getDefaultCredentials however that won't refresh the oauth token whereas calling getCredentials(undefined) will use the default credential but will also refresh the token if required.

vincepg13 Sep 12, 2025

nice work on the dev server, i've been working in a similar direction but focusing on solidjs. My setup is similar to yours, however I discovered that you can use import { getCredentials } from "@servicenow/sdk-cli/dist/auth"; to leverage the credentials already stored in the now-sdk as opposed to having to spoof them through .env if you want to give that a try. There's also a getDefaultCredentials however that won't refresh the oauth token whereas calling getCredentials(undefined) will use the default credential but will also refresh the token if required.

Legend! I'll give that a try. Not having to grab the cookie every time you get started will definitely be a better DX

SDK 4.0.0 #22

Uh oh!

Uh oh!

bryce-godfrey Sep 4, 2025 Maintainer

🔥 4.0.0 is here! 🔥

New Fluent APIs

Command changes

Front-end framework support

How does it work?

Limitations:

API Changes

Breaking Changes

Documentation

Support and Issues

Replies: 4 comments · 17 replies

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

bryce-godfrey Sep 10, 2025 Maintainer Author

Uh oh!

Uh oh!

Uh oh!

Uh oh!

bryce-godfrey Sep 12, 2025 Maintainer Author

Uh oh!

bryce-godfrey Sep 12, 2025 Maintainer Author

Uh oh!

Uh oh!

Uh oh!

Uh oh!

bryce-godfrey
Sep 4, 2025
Maintainer

Replies: 4 comments 17 replies

bryce-godfrey Sep 10, 2025
Maintainer Author

bryce-godfrey Sep 12, 2025
Maintainer Author

bryce-godfrey Sep 12, 2025
Maintainer Author