> ## Documentation Index
> Fetch the complete documentation index at: https://docs.screenjson.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Install

> Install screenjson-ui from npm or via the CDN script tag.

## npm

```bash theme={null}
npm install screenjson-ui
```

Package metadata:

| Field                         | Value                                         |
| ----------------------------- | --------------------------------------------- |
| `name`                        | `screenjson-ui`                               |
| `version`                     | `1.0.0`                                       |
| `main` / `module`             | `./dist/screenjson-ui.js`                     |
| `types`                       | `./dist/index.d.ts`                           |
| `exports["./dist/style.css"]` | Pre-compiled stylesheet for non-Svelte usage. |

## CDN

```html theme={null}
<script src="https://cdn.screenjson.com/ui/screenjson-ui.js"></script>
```

The CDN build is a single ES-module bundle. Use it as the script tag shown above or import it as an ESM URL in modern browsers.

## CSS

If you use the CDN build or a bundler that doesn't auto-import Svelte styles, include the stylesheet:

```html theme={null}
<link rel="stylesheet" href="https://cdn.screenjson.com/ui/style.css">
```

Or, from npm:

```ts theme={null}
import 'screenjson-ui/dist/style.css';
```

## TypeScript

Types ship with the npm package. Import whatever you need:

```ts theme={null}
import ScreenJSONUI, {
  type ScreenJSONUIConfig,
  type ScreenJSONDocument,
  type Theme,
  type Lang,
} from 'screenjson-ui';
```