fidemark

Badge & region demo

Two ways to surface Fidemark attestations on a page: a small <fidemark-badge> chip pinned to a known UID, and a content-aware <fidemark-region> wrapper that recomputes the canonical hash on render. Both ship in @fidemark/badge.

01

Badge

Paste any attestation UID below to preview the React component. The badge fetches /api/attestation/[uid], decodes the response, and links to the verify page on click.

Theme

Light theme

verifying…

Embed code

// React
import { FidemarkBadge } from "@fidemark/badge";
<FidemarkBadge uid="0x..." apiBase="http://localhost:3100" theme="light" />

// Web Component (any HTML page) — served from jsDelivr; pin a major to your liking
<script type="module"
        src="https://cdn.jsdelivr.net/npm/@fidemark/badge@^0.1/dist/web-component.js"></script>
<fidemark-badge uid="0x..." api-base="http://localhost:3100" theme="light"></fidemark-badge>

02

Region

Wraps a content subtree, recomputes its canonical hash on the client, fetches the on-chain attestation, and renders a status pill. Click into the paragraph below and edit any character: the pill flips to Tampered the moment the canonical hash drifts from the declared one. Revert your edit to flip it back.

Outline

Verified content sample

This paragraph is wrapped in a fidemark-region. The component hashes the canonical text on render and compares it to the declared content-hash and the on-chain attestation.

Embed code

// React
import { FidemarkRegion } from "@fidemark/badge";
<FidemarkRegion uid="0x..." contentHash="0x..." apiBase="http://localhost:3100" outline="subtle">
  <article>...your attested content...</article>
</FidemarkRegion>

// Web Component (any HTML page)
<script type="module"
        src="https://cdn.jsdelivr.net/npm/@fidemark/badge@^0.1/dist/region.js"></script>
<fidemark-region uid="0x..." content-hash="0x..." api-base="http://localhost:3100" outline="subtle">
  <article>...your attested content...</article>
</fidemark-region>