@view

Self-describing JSON-LD views. Data that knows how to display itself.

W3C Proposal →

The Problem

JSON-LD describes what data is, but not how to display it. Processors must maintain type mappings, limiting extensibility.

The Solution

Add @view to JSON-LD. Data hints at its preferred renderer. Processors that support it load the view; others ignore it.

{
  "@context": { "schema": "http://schema.org/" },
  "@type": "schema:Person",
  "@view": "https://jsonos.com/examples/src/panes/person.js",
  "schema:name": "Marie Curie",
  "schema:jobTitle": "Physicist"
}

Benefits

Self-Describing

Data carries its own display hint. No external configuration needed.

Decentralized

Anyone can publish views. No central registry required.

Progressive

Processors that don't support @view simply ignore it.

Extensible

New types get views immediately. No processor updates needed.

One Line

With solid-shim, rendering @view is one line:

<!-- Your self-describing data -->
<script type="application/ld+json">
{
  "@type": "schema:Person",
  "@view": "https://jsonos.com/examples/src/panes/person.js",
  "schema:name": "Marie Curie"
}
</script>

<!-- solid-shim auto-renders when @view is present -->
<script src="https://unpkg.com/solid-shim/dist/mashlib.min.js"></script>

That's it. The presence of @view triggers automatic rendering.

How It Works

When solid-shim encounters @view, it:

  1. Parses the JSON-LD into an RDF store
  2. Loads the pane module from the @view URL
  3. Calls render(subject, context)
  4. Falls back gracefully if @view fails
// Pane module structure (ES Module)
export default {
  name: 'myPane',
  render(subject, context) {
    const store = context.session.store;
    const div = document.createElement('div');
    // Render logic...
    return div;
  }
};

Precedent

This pattern exists elsewhere:

Try It

The Live Editor supports @view. Add it to any JSON-LD and watch it load your custom pane.

Open Live Editor →

How It Works · W3C Issue #384 · jsonos