# UI libraries - SSR websites

> CSS frameworks, icons, charts and scripts for the pages of an SSR website - libraries.json, a catalog with hashes (SRI), packages of npm, addresses, libraries for some pages only, self-hosting, and the CSP which lets them in.

Source: https://docs.apimaker.dev/v4/docs/ssr/ui-libraries.html

The UI libraries of a website are loaded **in the browser of its visitors** : CSS frameworks, icons, charts, small frameworks of scripts. They are the website's own list, `libraries.json`, apart from the packages of npm the sandboxes of the account install (those run on the server).

The panel has them in the view **UI libraries** of a website : the catalog, your list, the order they load in, a library turned off, removed, or copied into the website.

**libraries.json**

```json
{
    "libraries": [
        { "id": "bootstrap" },
        { "id": "bootstrap-icons", "selfHost": true },
        { "id": "chartjs", "pages": ["/reports/*", "/"] },
        { "package": "canvas-confetti", "version": "1.9.3", "files": ["dist/confetti.browser.js"] },
        { "url": "https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap", "type": "css" }
    ]
}
```

## An entry

| Field | What it is |
|---|---|
| `id` | A library of the catalog : its version and its files, each with its hash. |
| `package`, `version`, `files` | Any package of npm, at an exact version, from jsDelivr : paths in the package, or `{ path, integrity, type }`. |
| `url`, `type`, `integrity` | Any address : `type` is `css`, `js` or `module` (else read from its end). |
| `pages` | The paths it loads on : `/reports/*` is every path which starts so. Every page when there are none. |
| `enabled` | `false` : not loaded. |
| `selfHost` | Its files are copied into `public/_lib/<package>@<version>/` and served by the website : no CDN is asked. |
| `csp` | What the CSP needs beyond the origins of its files : `{ "script": ["'unsafe-eval'"] }`. |

Every file goes into the head of the pages which load it : a style sheet as a `<link>`, a script as a `<script defer>` with the nonce of the page, both with their hash (`integrity`) when they have one. A CDN which sent something else would be refused by the browser.

## The catalog

Bootstrap, Bootswatch, Bootstrap Icons, Tailwind CSS, Bulma, Pico CSS, UIkit, Shoelace, Alpine.js (and its CSP build), htmx, _hyperscript, jQuery, Chart.js, ApexCharts, ECharts, Font Awesome, Tabler Icons, Lucide, Animate.css, AOS, GSAP, Swiper, GLightbox, SweetAlert2, Toastify, Flatpickr, Tom Select, SortableJS, Simple-DataTables, Leaflet, highlight.js, Prism, Marked, Mermaid, KaTeX, Day.js, Lodash, Axios, normalize.css and the Inter font : each at a version tried with the server, each file with its SHA-384 hash. The panel shows how a page uses each.

## Which pages load what

A page names the libraries it loads :

```ts
export const config: PageConfig = { libraries: ['chartjs'] };   // Chart.js alone
export const config: PageConfig = { libraries: false };         // none
```

A page which names none loads every library of the list for its path (`pages`). A layout may name them for the pages inside it.

## Using a library in a page

The style sheets apply as they load. A script loads with `defer` : code of the page which uses it waits for the page to be read.

```tsx
import { serialize } from 'am-ssr';

export default function Report({ data }: PageProps<typeof loader>) {
    return (
        <>
            <canvas id="sales"></canvas>
            <script>{`
document.addEventListener('DOMContentLoaded', () => {
    new Chart(document.getElementById('sales'), { type: 'line', data: ${serialize(data.chart)} });
});
`}</script>
        </>
    );
}
```

## The CSP

The policy of a page (`strict` by default) lets in the scripts and the style sheets of the libraries **that page** loads, by their origins : a page without Chart.js does not allow its CDN for scripts. A library which needs more says so in the catalog (Alpine.js needs `'unsafe-eval'`, Leaflet loads tiles from OpenStreetMap) ; an entry may add its own needs with `csp`.

A self-hosted library comes from the website itself : the policy needs nothing for it.

## Self-hosting

With `selfHost`, the panel downloads the files of the entry from jsDelivr, checks each against its hash (a file which differs is refused), and copies it into `public/_lib/<package>@<version>/`, with the fonts and images its style sheets name. The website then asks no CDN : nothing of your visitors goes to another company, and the website works where the CDN does not answer.

Remove the folder of a library from `public/_lib` when you remove it from the list.