NVIDIA Elements Artifact

# CDN

Use CDN-hosted Elements packages for prototypes, static pages, demos, and environments without a JavaScript build pipeline

CDN loading is the fastest path when you need a standalone HTML file or a server-rendered page that cannot use Vite, Rollup, ESBuild, or Webpack. For production applications with a build step, prefer package-manager installation so the app gets normal tooling, type checking, dependency locking, bundling, and tree-shaking. Elements publishes the public packages to npm, and public CDN providers can serve those package files directly. Browse the packages on jsDelivr: - [`@nvidia-elements/core`](https://www.jsdelivr.com/package/npm/@nvidia-elements/core) - [`@nvidia-elements/code`](https://www.jsdelivr.com/package/npm/@nvidia-elements/code) - [`@nvidia-elements/forms`](https://www.jsdelivr.com/package/npm/@nvidia-elements/forms) - [`@nvidia-elements/markdown`](https://www.jsdelivr.com/package/npm/@nvidia-elements/markdown) - [`@nvidia-elements/monaco`](https://www.jsdelivr.com/package/npm/@nvidia-elements/monaco) - [`@nvidia-elements/styles`](https://www.jsdelivr.com/package/npm/@nvidia-elements/styles) - [`@nvidia-elements/themes`](https://www.jsdelivr.com/package/npm/@nvidia-elements/themes) ## Full Bundle Use the full component bundle when you want the simplest static HTML setup. This loads the pre-built theme CSS, utility CSS, fonts, and all core component registrations. ```html NVIDIA Elements Artifact Elements loaded from the full CDN bundle. ``` This approach keeps authoring simple because one JavaScript import registers the bundled core components. The tradeoff is payload size: the page loads the full core bundle even if it uses only one component. ## Component ESM Imports Use jsDelivr ESM imports when the page uses only a small set of components. Keep the pre-built CSS imports, then import only the `define.js` entrypoints for the components that appear in the page. ```html NVIDIA Elements ESM CDN

Only the alert and badge component modules are imported.

Build status: ready

``` This approach can reduce JavaScript loaded by the page, but it has more moving parts. You must import every component registration that the markup uses, and browser-loaded ESM does not provide the same type checking, build diagnostics, dependency reuse, or optimization that package-manager builds provide. ## CDN Tradeoffs

Approach

Best For

Tradeoff

Full CDN bundle

Artifacts, demos, static pages, CMS pages, and environments without JavaScript package tooling.

Simplest setup, but loads the bundled component surface even when the page uses a small subset.

CDN ESM imports

Small standalone pages that use a known set of components.

Loads fewer component modules, but every used component needs an explicit registration import.

Build-time packages

Applications, libraries, tested user workflows, and production codebases.

Requires package tooling, but gives dependency locking, editor types, linting, test integration, bundling, and optimization.

For build-time package setup, use the standard installation flow: ```shell nve project.setup ``` ## Version Pinning The examples above omit versions for readability. For shared demos or production pages, pin package versions in CDN URLs so a new package release cannot change the page without a source change. ```html ``` Pin the related `@nvidia-elements/core`, `@nvidia-elements/styles`, and `@nvidia-elements/themes` URLs together. ## Internal NVIDIA-internal projects should use the internal CDN instead of public jsDelivr URLs. The internal CDN is the preferred CDN path for internal applications because it follows NVIDIA network policy, caching, availability, and package-distribution practices. Use public jsDelivr URLs for public examples and external demos.