NarraLeaf UI Templates

The official UI template registry for NarraLeaf Studio.

A UI template is a ready-made interface — a page or a game-UI layer — that you add to a project from Studio's UI editor. Each template lives in its own directory under templates/ and ships the two files that make up an interface: a UIDocument (ui/uidoc.json) and its blueprint graph (ui/uigraphs.json).

Unlike plugins, templates are not release artifacts. Studio reads index.json and then fetches a chosen template's documents — and any resources it declares — directly from this repository's raw blob. There is no zip, no tag, and nothing is installed to disk: a template is applied into the open project, with fresh ids so it never collides with your existing work.

Use a template

In Studio: UI editor → the surfaces panel → “Start from a template”, pick one, and choose Add to project. A page template becomes a new Page; a game-UI template mounts into its slot (Dialog, Notification, Choice, …).

To point Studio at a fork or a private registry, set Settings → Plugins → UI template registry URL to your own index.json raw URL. Empty uses this registry.

Add a template

1. Create templates/<publisher>.<name>/ — the directory name must equal the id.

2. Add template.json (see schema/template.schema.json):

   {
     "manifestVersion": 1,
     "id": "publisher.my-template",
     "name": "My template",
     "version": "1.0.0",
     "description": "One line about what it is.",
     "publisher": "publisher",
     "categories": ["menu"],
     "document": "ui/uidoc.json",
     "graphs": "ui/uigraphs.json",
     "surface": { "kind": "appSurface" },
     "assets": []
   }

   For a game-UI template, use "surface": { "kind": "stageSurface", "slotId": "dialog" }. The surface field decides where the template lands on import, overriding the document's own mount — so templates authored on older schemas still place correctly.

3. Export the interface from Studio and drop the two JSON files under ui/. Templates may be authored on an older schema; Studio migrates them on import.

4. If the template references images, commit them under the template directory and list each one in assets as { "id": "<the assetId the document uses>", "path": "assets/…" }.

5. Regenerate the index and validate:

   node scripts/validate.mjs
   node scripts/generate-index.mjs

index.json is generated from the manifests — never hand-edit it. CI validates every template and fails if index.json is out of sync.

Layout

index.json                       generated, machine-readable index (do not edit)
templates/<id>/
  template.json                  the manifest — the single source of truth
  ui/uidoc.json                  UIDocument (surfaces + widget tree)
  ui/uigraphs.json               UIGraphDocument (blueprint logic)
  assets/…                       optional resources declared in template.json
schema/                          JSON schemas for index.json and template.json
scripts/                         dependency-free registry tooling (Node 22+)