Embed SHACL Renderer

Add one script tag to any page, then place a <shacl-renderer> element wherever the form should appear.

<script type="module" src="https://embed.shacl-renderer.shapething.com/shacl-renderer.js"></script>

<shacl-renderer
  shapes="https://example.org/shapes.ttl"
  data="https://example.org/data.ttl"
  focus-node="http://example.org/ada"
  mode="edit"
></shacl-renderer>

Edit

View

Attributes

• shapes, data, read-only-data: a URL (relative URLs resolve against the page) or inline RDF text.
• focus-node: the IRI to render. node-shapes: space-separated shape IRIs, if the shapes don't target it on their own.
• mode: edit, view or facet.
• interface-language, content-language, content-languages (space-separated), language-mode, view-mode-label-layout, facet-change-mode, cors-proxy-url, map-style-url.
• Feature flags such as enable-edit-in-place="false". They need an explicit "true" or "false"; a bare attribute is ignored.

Getting the result

document.querySelector("shacl-renderer").addEventListener("shacl-submit", (event) => {
  const { dataGraph, additions, deletions } = event.detail;
});

Settings from JavaScript: environment

Attributes can only hold text. For settings that can't be written as text, such as functions, RDF stores or custom widgets, set the element's environment property from JavaScript. It takes the same fields as the props of the React <ShaclRenderer> component. If a field is set both ways, environment wins.

<shacl-renderer id="form" shapes="shapes.ttl" data="data.ttl"></shacl-renderer>

<script type="module">
  // 1. Wait until the element is ready
  await customElements.whenDefined("shacl-renderer");

  // 2. Find the element
  const form = document.getElementById("form");

  // 3. Give it the extra settings
  form.environment = {
    enableUndoRedo: false,
    interfaceLocales: { "nl-NL": null },
  };
</script>

Two rules:

1. Always wait first (step 1). If you set environment before the element is ready, it is silently ignored.
2. To change a setting later, assign a new object. Changing a field on the old one does nothing:

   form.environment = { ...form.environment, mode: "view" }; // works
   form.environment.mode = "view";                          // does nothing

Assigning a new object rebuilds the form, so any edits that haven't been submitted are lost.

Example

This form has no data attribute. Its data is set through environment, and the button below switches it between edit and view mode.

await customElements.whenDefined("shacl-renderer");
const form = document.getElementById("environment-demo");

form.environment = {
  dataGraph: `
    @prefix schema: <https://schema.org/> .
    <http://example.org/grace> a schema:Person ;
      schema:givenName "Grace" ;
      schema:familyName "Hopper" .
  `,
};

document.getElementById("environment-demo-toggle").addEventListener("click", (event) => {
  const mode = form.environment.mode === "view" ? "edit" : "view";
  form.environment = { ...form.environment, mode };
  event.target.textContent = mode === "view" ? "Switch to edit mode" : "Switch to view mode";
});