rdf-snippet

An RDF viewer which allows switching between various serializations.

Default usage

The initial text of the RDF snippet must be added inside a child <script> element with type attribute set to the appropriate RDF media type. The element's formats property selects the media types which should be available as alternative serializations.

<rdf-snippet formats="application/ld+json,application/n-quads">
  <script type="text/turtle">
＠base <http://example.com/> .
＠prefix schema: <http://schema.org/> .

<john> a schema:Person ;
  schema:name "John Doe" .
  </script>
</rdf-snippet>

The initial RDF representation remains unchanged, while selecting the output formats re-serializes the actual triples and presents the output.

Usage with properties

In case when a <script> cannot be used, the snippet can be initialized by passing the serialized input and input format using properties/attributes

<rdf-snippet .input="${turtle}" input-format="text/turtle">
</rdf-snippet>

Supported types

Out of the box all common RDF formats are supported, where some can only be used for the input (no serializer available):

• JSON-LD
• N-Triples
• N-Quads
• Turtle/N3
• TriG (input only)
• RDF/XML (input only)

Support for additional types can be added by registering an RDF/JS-compliant parser and/or serializer using the @rdfjs/formats-common package.

Properties

| Property | Attribute | Modifiers | Type | Default | Description | |------------------|------------------|-----------|----------------------------|---------------|--------------------------------------------------| | customPrefixes | customPrefixes | | object | {} | | | formats | formats | | string | | comma-separated list of output formats | | input | | | string | | set the input serialized value (ignored when <script> is used) | | inputFormat | input-format | | string | "text/turtle" | set the format of the input (ignored when <script> is used) | | layout | layout | | "vertical"\|"horizontal" | | controls the position of selection buttons | | onlyOutput | only-output | | boolean | | hides the input editor and only shows the outputs | | prefixes | prefixes | | string | "" | a comma-separated list of prefixes to use for serializing. Any prefix included in the @zazuko/vocabularies package can be used | | selectedFormat | | | string | | gets the selected output format | | value | | readonly | string | | Gets the text contents of the currently showing editor |

Events

| Event | Type | |-----------------|-----------------------------------| | value-changed | CustomEvent<{ value: string; }> |

CSS Shadow Parts

| Part | Description | |------------|-----------------------------------------| | format | every format selection button | | input | selection button for the input format | | output | selection button for the output formats | | selected | the currently selected format button |