Skip to content

Packages with several files

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.

The RPG Desk Basic Sheet, for example:

  • Directorybasic-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
{
"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.

RPG Desk Basic SheetDownload the .zipOpen in a new tab ↗

Test mode: the data stays in this browser only. The band in the corner switches the role (GM, sheet owner, another player) and shows the log of rolls.

  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….

.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 such as Alpine.js 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.
  • 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.