Examples

Everything below runs in your browser, on a small dataset of chefs and recipes. The examples share one store, so a change in one tab shows up in the others.

Loading data

Linked data usually lives in a triplestoreTriplestore A database for RDF. It stores triples and answers SPARQL queries., a database made for it. LocalStore lets you use a folder on your computer instead. It is slower than a real database, but it is a good fit for small datasets.

Picking a folder is optional. Without one, the examples use an in-memory store with the same recipes and chefs.

Fetching a list

SPARQLSPARQL The query language for RDF, comparable to SQL for relational databases. is the query language for linked data, comparable to SQL. TypedSparql is a Vite plugin that generates TypeScript types for the results of your queries, so a change to a query shows up in your code right away. Try changing the query below: the type next to it updates as you type.

query.rq
query.rq.d.ts
results

Fetching a document

In linked data, a resourceResource Anything that is described in RDF, such as a recipe or a chef. On this site a resource together with all its data is also called a document. such as a recipe is not stored as one document but as many small pieces, called triplesTriple One RDF statement, made of a subject, a predicate and an object. Compare it to one cell in a table: the row, the column and the value.. That makes a simple question harder to answer: what belongs to this recipe? ResourceFetcher fetches one complete document, and lets you decide what belongs in it.

Below, ResourceFetcher runs on the store from Loading data. Click a resource to fetch it. Without a shape it takes everything about the resource, including its nested parts, called blank nodesBlank node A thing in RDF without its own web address. It only exists as part of another resource, like the ingredient lines of a recipe. Comparable to a nested object in JSON., such as the ingredients of a recipe, each with a name, an amount and a unit. Links to other resources, such as the chef of a recipe, are not followed.

document
queries

Viewing and editing

The SHACLSHACL The W3C standard for describing and validating RDF data. A SHACL file contains shapes. renderer is a React component that turns a shapeShape A description of what a resource should look like: which properties it has, of which type and how many. Comparable to a Zod or JSON Schema. ShapeThing uses shapes to fetch, show, edit, type and generate data. into a view or a form.

The shapes below describe a chef and a recipe. ResourceFetcher uses them to fetch exactly what is needed: a recipe with all its ingredients comes back in one query. The SHACL renderer then shows a chef:

Converting and generating

A shapeShape A description of what a resource should look like: which properties it has, of which type and how many. Comparable to a Zod or JSON Schema. ShapeThing uses shapes to fetch, show, edit, type and generate data. can become a TypeScript type, and RDFRDF The data format behind linked data. All data is written as small statements of three parts, called triples, like "this recipe – has chef – Julia Child". data can be read into a plain JavaScript object of that type. Pick a resource: on the left the type generated from its shape, on the right the resource as an object, with English property names.