Fragment Workbench

Build and test UI fragments against a real manifest contract. Load an example app manifest or paste your own, author a fragment in HTML or J5ML, watch it render through the real runtime against simulated host data, and download a mod that validates.

The checks are the real toolchain running in your browser, through @xriptjs/validate/core:

• The app manifest is validated against the schema of the version it targets (its $schema, else its xript field) and linted, on every edit.
• Your fragment is assembled into a mod manifest that fills the selected slot, then cross-validated against the app manifest and linted as a pair: unknown bindings, a format the slot does not accept, a capability the slot needs, invalid expressions, and anything the sanitizer will strip. Edits to either side re-run the checks.
• The fill’s bindings are derived from the names your expressions read, each mapped to its path in the host’s data. The host data is sampled from the manifest’s readers (player.getHealth becomes player.health) and its types, and you can change it on the Author tab to see the fragment respond.
• Export downloads a zip holding mod-manifest.json and the fragment file it points at (or a single manifest with the source inlined), with copy buttons for each piece. Run xript validate --cross app.json mod-manifest.json on the result and it passes the same checks the workbench showed.

Loading Fragment Workbench...

1 Manifest 2 Author 3 Preview 4 Export

▸ Load the app manifest your mod will target

Every xript mod targets a specific app manifest. The manifest declares the slots a mod can fill, the formats each slot accepts, the data a fragment can bind to, and the capabilities a fill needs.

Quick start: pick an example manifest below. Your own app: select "Custom" and paste your app's manifest.json, or generate one with xript init --yes. Every edit is checked by @xriptjs/validate: schema errors against the version the manifest targets, plus xript lint findings.

App Manifest

Dashboard App Game HUD Custom...

Slot Contract

Click a slot in the preview to inspect its contract, or load a manifest to get started.

▸ Write your fragment in HTML or J5ML and bind it to host data

Use data-bind="key" to display a value, data-if="expr" to show an element conditionally, data-each="item in list" to repeat an element per list entry, and {{ expr }} to interpolate into text. The real runtime renders every mount.

As you type, the fragment is assembled into a mod manifest, cross-validated against the app manifest, and linted. The findings below the editor are the ones xript validate --cross and xript lint would print: unknown bindings, formats the slot does not accept, missing capabilities, and anything the sanitizer will strip.

Fragment Source

HTML J5ML Sample...

Mount

Host Data

Load a manifest to simulate host data.

Console

Clear

Mount a fragment to see output here.

▸ See your fragments mounted in the host's slot layout

This simulates how your fragment will appear inside the host application. Change the host data (Author tab) to test how your fragment responds. Click a slot to inspect its contract.

Host Preview

Clear Slots

Load a manifest to see the host's slot layout.

Slot Contract

Click a slot to inspect it.

▸ Download your mod: a manifest plus its fragment source

The workbench writes a mod-manifest.json that fills the slot you picked with your fragment, declares the bindings your expressions read, and requests the capability the slot requires. The zip holds the manifest and the fragment file it points at; tick Inline source to embed the fragment in the manifest instead.

Mod Manifest

Copy Download .zip

Name Fill id Inline source

Author a fragment and select a slot to see your mod manifest here.

Fragment

Copy

What's Next

1

Download the zip and unpack it as your mod's folder

2

Validate the mod against the host app: xript validate --cross app.json mod-manifest.json

3

Lint the pair for the findings shown here: xript lint app.json mod-manifest.json

4

Add behavior with an entry script (xript init --mod scaffolds one) using the sandbox fragment API for dynamic updates