@rdfjs-elements/rdf-snippet NPM

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