# Packages with several files

> The plugin as a .zip: manifest.json, several sheets and tables, separate CSS and JavaScript, images, fonts and sounds.

Page: https://docs.rpgdesk.com/en/fichas/pacotes/

A single `.html` file handles one sheet. Use a **package** (a `.zip`) when the plugin has:

- more than one sheet, or sheets and tables together;
- the CSS and JavaScript in separate files;
- images, fonts or sounds of its own.

## What goes in the package

The RPG Desk Basic Sheet, for example:

- basic-sheet.zip

  - manifest.json the manifest, at the root
  - sheet.html the sheet
  - style.css
  - sheet.js
  - portrait.svg the portrait’s silhouette

`manifest.json` has the same fields as the single file’s manifest and, on each sheet or table, the `entry`, its HTML:

`manifest.json`

```json
{
  "rpgdesk": 1,
  "id": "br.rpgdesk.basic-sheet",
  "name": { "en": "RPG Desk Basic Sheet", "pt": "Ficha Básica do RPG Desk (inglês)" },
  "version": "1.0.0",
  "author": "RPG Desk",
  "description": "A sheet for any system: attributes, skills, attacks, inventory and notes, with health and energy on the player's card.",
  "sdk": 1,
  "sheets": [
    {
      "type": "br.rpgdesk.basic-sheet.character",
      "title": { "en": "Character", "pt": "Personagem" },
      "entry": "sheet.html",
      "private": { "gm": "gm" }
    }
  ]
}
```

- Each entry HTML loads rpgdesk.js (and, if you want, `rpgdesk.css`) in its `<head>`, as in the single file. The manifest does not go inside the HTML.
- The other files come in through relative paths: `<link rel="stylesheet" href="style.css">`, `<script src="sheet.js"></script>`, `<img src="img/crest.webp">`.
- The `"$schema"` in the manifest (optional) gives you the editor’s help: `“$schema”: “https://docs.rpgdesk.com/_sdk/1/manifest.schema.json”`.
- The `"icon"` (optional) is a `.png` or `.svg` from the package.

Every field is in [The manifest](https://docs.rpgdesk.com/en/referencia/manifesto/).

*Working example:* [RPG Desk Basic Sheet](https://docs.rpgdesk.com/exemplos/en/basic-sheet/sheet.html) ([Download the .zip](https://docs.rpgdesk.com/exemplos/en/basic-sheet.zip))

## Build the .zip

1. Put the files in a folder, with `manifest.json` at its root.
2. Select **the contents** of the folder (not the folder) and compress them: on Windows, right-click → **Send to → Compressed (zipped) folder**.
3. Install the `.zip` in **Room settings → Plugins → Install plugin…**.

> **Tip**
>
> Compressed the folder instead of its contents? RPG Desk notices, uses what is inside the folder and warns you. Next time, compress the contents.

## Accepted files

`.html` `.htm` `.css` `.js` `.mjs` `.json` `.txt` `.md` `.png` `.jpg` `.jpeg` `.webp` `.gif` `.svg` `.woff2` `.woff` `.ttf` `.otf` `.mp3` `.ogg` `.wav`

- The package has up to 10 MB and 500 files.
- Paths are case-sensitive: `Portrait.png` is not `portrait.png`.
- The page reads the package’s own files, even with `fetch('data/spells.json')`. The internet, no.

## Libraries

Libraries such as [Alpine.js](https://alpinejs.dev) and jQuery work, as long as their file goes inside the package. A `<script src>` from a CDN is an error, because the sheet has no internet.

1. Download the library’s `.min.js` build (for Alpine, the `cdn.min.js` of the `alpinejs` package on npm).
2. Save it in a `vendor/` folder of the package, as `vendor/alpine.min.js`.
3. Load it by its relative path, after rpgdesk.js: `<script defer src="vendor/alpine.min.js"></script>`.

- The verifier gives no warnings for a library’s code: a file in `vendor/`, or code that starts with the `/*!` license comment. See [The verifier](https://docs.rpgdesk.com/en/referencia/verificador/).
- With Alpine, use `x-data`, `x-show` and `x-for` for the screen (tabs, showing and hiding) and `data-field` for the data. Don’t put `x-model` and `data-field` on the same field: both would write the same value.
- jQuery’s `$.ajax` and `$.getJSON` read the package’s files (`$.getJSON('data/spells.json')`), but not the internet.