ReciTAC browser library

ReciTAC renders one bilingual TCA knowledge network directly in a host page. The first release supports one <recitac-network> per page and does not use an iframe.

Webflow embed

Add an Embed element with a positive width and height. Pin both the package version and its matching published integrity value:

<style>
  recitac-network {
    display: block;
    width: 100%;
    height: 80vh;
    min-height: 560px;
    --recitac-font-family: "Neue Haas Grotesk Display", Arial, sans-serif;
  }
</style>

<recitac-network
  src="https://example.org/data/ReciTAC_data.json"
  language="en"
  focus-id="optional-stable-id"
></recitac-network>

<script
  defer
  src="https://cdn.jsdelivr.net/npm/@ofi-data-team/[email protected]/dist/recitac.min.js"
  integrity="sha384-RELEASE-VALUE"
  crossorigin="anonymous"
></script>

The npm package does not provide Neue Haas Grotesk Display font software. The host must separately license and load that webfont using the exact family name supplied by its licensed CSS. Without it, the component uses the readable Arial/system fallback.

src is required and must resolve to HTTP(S) JSON containing a nodes object, a links array, and a non-empty HTTP(S) metadata.imgBase. The data and images must permit browser CORS access. language accepts en or fr and otherwise uses English. focus-id is an optional stable entity ID; an unknown ID leaves the network usable. Changing src, or calling reload(), starts a fresh load.

The host owns the component size. Give it a positive width and height at every responsive breakpoint. Only one active component per document is supported; a second receives the local MULTIPLE_INSTANCES_UNSUPPORTED error.

Events and accessibility

The component reflects data-state="loading|ready|error" and emits bubbling recitac-ready and recitac-error events. Loading is announced as a polite status and expected failures appear as a local role="alert", leaving surrounding host controls usable. Keep the component in the normal reading order and do not remove visible focus styles or accessible names from its controls.

const network = document.querySelector("recitac-network")
network.addEventListener("recitac-ready", event => console.log(event.detail))
network.addEventListener("recitac-error", event => console.error(event.detail))

Troubleshooting and verification

• A secure Webflow page must use HTTPS for the exact bundle, JSON, and image URLs.
• Webflow CSP must allow the jsDelivr script and the configured data/image origins; those origins must also return compatible CORS headers.
• A missing size produces CONTAINER_SIZE_INVALID; set an explicit height and reload.
• A blocked/unreachable source produces FETCH_FAILED; malformed or incompatible JSON produces JSON_INVALID or DATASET_INVALID.
• Host CSS must not deliberately target .recitac-root internals or use overriding inline/!important rules against them.

After publishing Webflow staging, verify the network and images render, the console is clean, English/French switching works, search and every filter work, and hover, selection, story details, links, legend, zoom, and pan work at desktop and touch widths. Confirm the generated page contains no iframe and surrounding links/forms/controls still work.

Upgrade and rollback

Never use latest, a tag, an omitted version, or a version range in production. For an upgrade, change the exact jsDelivr version and SRI value together on staging, repeat the verification above, then publish. Record the previous known-good pair. To roll back, restore that exact URL and matching SRI without changing the component markup or dataset.

Licensed under GPL-3.0-only. Visualization designed and developed by Nadieh Bremer.