Linked Open Data,
rendered as cards.
This site is a static demo of lodox-data-viewer — a framework-agnostic library of web components and a pure data pipeline that turns Linked Art, schema.org and generic JSON-LD / RDF into themeable cards. Zero runtime dependencies, no build step, no CSS framework.
Pick a bundle below and it is fetched, run through the pipeline and laid
out in the browser. The profile is detected from the data itself; the
theme control re-renders the same records against a different set of
--lod-card-* custom properties.
Linked Art
A @graph of HumanMadeObject records in the
Linked Art profile. Production place, date and materials are read from
the nested produced_by structure; the sidecar renames them
through its _terms vocabulary and hides the
identified_by row.
Generic JSON-LD — CIDOC-CRM + SKOS
Flattened RDF with full ontology URIs as keys and
[{"@value": …}] leaves — no profile to detect. The generic
adapter finds the title, description and image slots through the
_fields lists in the sidecar, shortens
E22_Human-Made_Object to “Human-Made Object”, and renders
every remaining property losslessly.
Mona Lisa
The Starry Night
Linked Art template
The annotated skeleton curators start from, with every slot left as a
placeholder (OBJECT-ID, PLACE-OF-CREATION).
Useful for seeing which fields a complete Linked Art record can carry —
and that empty placeholders render rather than break.
Embed it
The whole integration is one script tag and one element. Point
src at your JSON-LD, config at an optional
presentation sidecar, and base-url at wherever the images
live.
<script type="module" src="https://unpkg.com/lodox-data-viewer"></script>
<lod-bundle
src="data/linked-art.jsonld"
config="data/linked-art.cards.json"
base-url="data/"
lang="en"></lod-bundle>
This page imports the same unpinned latest from unpkg, so
every release renders here as soon as it is published. It differs from
the snippet in one way: it fetches the JSON itself and hands it to the
element as a property, which is what lets the dropdown swap bundles
without re-creating the element.
Presentation stays out of the data
Card variant, width, height and header colours live in a
*.cards.json sidecar keyed by record id, so the JSON-LD
itself stays clean.
Site theme always wins
The Ink and Press themes above are page-level
--lod-card-* custom properties. They outrank the
sidecar’s per-record colours by design — which is why the header
colours flatten when you switch away from Default.
Nothing disappears
Unrecognised properties fall back to a humanised label rather than
being dropped, and the untouched source record stays available at
card.raw.
Also runs in Node
lodox-data-viewer/core is DOM-free:
extractCards(json, config) returns the same view-models
for server-side rendering or a static-site build.