Artifact spec overview
A ShareOut artifact is a self-contained HTML file published to ShareOut and served at a stable URL. The file owns its data: storage keys, table schemas, and realtime doc IDs are all declared inside the file itself in a manifest block. The ShareOut SDK reads the manifest to wire up persistence; the visual editor reads it to populate its data panel and autocomplete.
What the spec requires
Section titled “What the spec requires”Every artifact must include four things:
| Element | Purpose |
|---|---|
<script type="shareout/manifest"> | Declares all data sources — required in <head> |
data-shareout-page | Marks page containers — required on every page element |
data-shareout-binding | Connects an element to a data value — required for all dynamic content |
data-shareout-template | Marks repeating content driven by a table or JSON array |
Without the manifest the editor shows empty panels and offers no autocomplete. Without
data-shareout-page the outline navigation is blank. Without data-shareout-binding the
editor cannot track which values are in use.
Publishing is never blocked by spec gaps — artifacts go live regardless. Every HTML
publish returns an advisory editor_readiness profile (see Publishing)
that grades these markers and names what each gap disables in the studio.
Attribute reference
Section titled “Attribute reference”| Attribute | Example value | Purpose |
|---|---|---|
data-shareout-page | "dashboard" | Page container ID |
data-shareout-page-title | "Dashboard" | Display name in editor outline |
data-shareout-section | "kpis" | Section within a page |
data-shareout-section-title | "Key Metrics" | Section display name |
data-shareout-sortable | (present) or "x" | Enable drag-to-reorder in editor |
data-shareout-tabs | "views" | Tab group container ID |
data-shareout-tab | "daily" | Individual tab ID |
data-shareout-binding | "json:metrics.revenue" | Data binding expression |
data-shareout-format | "currency" | Display format |
data-shareout-editable | "true" | Allow in-place editing |
data-shareout-template | "task-row" | Template name for repeating items |
data-shareout-chart | '{"type":"line"}' | Chart configuration JSON |
data-shareout-realtime | "board-sync" | Realtime Y.js doc ID |
data-shareout-action | "navigate" | Action type on interactive element |
data-shareout-if | "json:user.loggedIn = true" | Conditional visibility |
data-shareout-nav | "main" | Navigation container ID |
data-shareout-link | "page:dashboard" | Navigation link target |
Editor feature matrix
Section titled “Editor feature matrix”| Editor feature | What it needs | Missing consequence |
|---|---|---|
| Data panel | Manifest sources | Empty panel |
| Autocomplete | Manifest sources | No suggestions |
| Mock preview | Manifest default on json, tables, and connections | Empty preview (no live fetch in studio) |
| Page outline | data-shareout-page | No outline |
| Section outline | data-shareout-section | Flat outline |
| Variable tracking | data-shareout-binding | Variables invisible |
| Template editing | data-shareout-template | Can’t add/remove rows |
| Action diagram | data-shareout-action | No action visualization |
Compliance checklist
Section titled “Compliance checklist”Before publishing an artifact verify:
<script type="shareout/manifest">exists in<head>with"version": "2.0"- Every
sdk.jsonkey is declared insources.json - Every
sdk.table()name is declared insources.tables - Every page element has
data-shareout-page - Every dynamic value has
data-shareout-binding - Repeating content uses
data-shareout-template defaultsample data on json, table, and connection sources (live connectors preview from manifest defaults — no query in the studio)