lit-rdf

A collection of lightweight, declarative Web Components for building RDF-driven user interfaces with Lit and Clownface.

Interactive examples, live previews, and API documentation are available in the Storybook.

Installation

npm install lit-rdf

Available Elements

Element	Description	Storybook
<rdf-environment>	Provides an RDF/JS environment in the context for downstream elements.	-
<rdf-dataset>	Combines child <rdf-graph> elements into a single RDF dataset.	-
<rdf-graph>	Data source for parent <rdf-dataset> elements.	-
<target-node>	Selects focus nodes from the graph (by type, predicate, or path) with optional sorting.	Docs (Source)
<focus-node>	Sets or provides focus nodes in the context for child elements.	-
<filter-node>	Filters the current focus nodes using clownface filter callbacks.	Docs (Source)
<traverse-graph>	Traverses RDF graph relationships along property paths and renders object nodes.	-
<resource-label>	Renders a human-readable label for the focus node (rdfs:label, schema:name, etc.).	-
<resource-link>	Renders an anchor (<a>) tag linking to a resource URI or property value.	-
<resource-value>	Formats and displays literal or resource values from the focus node.	-

Example Usage

Import the elements into your project:

import 'lit-rdf'

Compose them declaratively in your HTML or Lit templates:

<rdf-environment>
  <rdf-dataset id="graph2">
    <!-- rdf-dataset combines the data from rdf-graph elements -->
    <rdf-graph .value="${graph}">
    </rdf-graph>

    <!-- Target person nodes and sort them by name -->
    <target-node target-class="schema:Person" order-by="schema:name">
      <!-- Filter nodes (e.g. by custom condition) -->
      <filter-node .filter=${person => Number(person.out(ns.schema.age).value) >= 18}>
        <article>
          <!-- Display resource label and properties -->
          <h2><resource-label></resource-label></h2>
          <p>Homepage: <resource-link property="schema:url"></resource-link></p>

          <!-- Traverse relations -->
          <h3>Friends:</h3>
          <traverse-graph property-path="schema:knows">
            <p><resource-label></resource-label></p>
          </traverse-graph>
        </article>
      </filter-node>
    </target-node>
  </rdf-dataset>
</rdf-environment>

For more detailed guides and interactive demonstrations, visit the Storybook documentation.