Debugging UI and data

Watch the Electron walkthrough, then try the same tools in the interactive workspace below.

The Reader excerpt is from Hello Worg, the Org-Mode Community! by the Worg contributors, licensed under GFDL 1.3 or later.

Open DevTools at the bottom of this workspace. The same dock is available in the product's Inbox after enabling Settings → Account → Developer mode. The preference stays on this device. Drag the dock's top edge to resize it.

Inspect follows the selected Inbox item. Enable the picker, then hover or select a component to see its catalog name, nesting, measured layout, properties, and actual View bindings. Selecting a binding highlights its visible uses in both surfaces for that item. Uses in closed or hidden surfaces remain listed. Press Escape to cancel picking.

Data validates the original Presentation View against its exact locked Lexicon. Select a path to inspect its definition, reference chain, constraints, and UI consumers. Native Reader inputs have their own records and Lexicons.

Source opens the saved WARC and highlights the selected item's originating entry. Use ‹ / › to browse captured entries; choose an associated Activity item to follow it in the Inbox. Selecting a UI value follows its recorded transform relationships to a captured field. Picking that field reveals its View consumers and highlights their visible UI uses. Unreported relationships remain explicit.

The docs replay a labelled teaching capture made from the five public examples, with its own archived image and stylesheet. Its extraction HTML and WARC were saved together. Product inspection uses the selected item's saved capture pair.

Composer opens the official A2UI component Gallery through Explore component catalog. From Inspect, Explore Text in the catalog goes directly to the selected component. The Gallery uses the same public examples as the component reference, with live previews, usage JSON, accepted properties and enum choices. Browsing creates no draft. It opens across the workspace; selecting Inspect, Data or Source returns to the bottom dock.

To try a presentation change, return to Composer and create a disposable draft. Try editing its A2UI JSON or Data Model, then switch tabs or select another Inbox item: the draft stays with the original item. It uses the selected item's exact compact or expanded surface and View, rendered by Fruitful's v0.9.1 catalog inside a locally hosted, pinned official Composer. Edits stay in the disposable draft; the original workspace remains unchanged.

Use Find #component to select the inspected component in Composer's JSON editor. Compare shows the original and draft source; Reset draft restores the original surface and View. Export draft downloads the surface and explicitly labelled sample View overrides for package authoring.

Draft checks distinguish valid A2UI, validity against the original View Lexicon, and whether the sample still preserves the original semantic record. A valid sample can deliberately differ from that record. Export does not publish a package or change its presentation builder.