VC Display (@interop/vc-display)

Pure verifiable-credential display derivation and credential input parsing, for the browser, Node.js, and React Native.

Table of Contents

• Background
• Security
• Install
• Usage
• Contribute
• License

Background

The helpers a verifiable-credential viewer needs between "here is a VC" and "here is what to show": the credential's title, issuer and subject render info, issuance and expiry, Open Badges v3 achievements, skills, alignments and evidence, the display-field list, a verification checklist, and the parsing of pasted or scanned credential input (VC or VP JSON, a URL to fetch).

The guiding seam is raw values out, formatting in the UI. Nothing here imports Intl, moment, i18next, react-native, or any app config. Dates come out as ISO strings or Date, verification messages come from an injected labels map, and URL fetching is an injected fetchUrl callback. The app keeps a thin wrapper that applies its own formatting, localization, and transport.

The package was extracted from @interop/wallet-core's display subpath, where it had been reconciled from two wallet apps' drifted implementations. It has one dependency, @interop/data-integrity-core, which owns the VC types and the loose-shape guards (isVerifiableCredential, typeArray, issuerId, subjectId, ...). Import those from there.

Security

These helpers read untrusted credential JSON and return values an app renders. They never fetch on their own (the one network seam is the injected fetchUrl), never evaluate a credential's proof (the verification checklist is built from a caller-supplied verification result), and treat every field as optional and possibly malformed. Render the returned strings as text, not as markup.

Install

• Node.js 24+ is recommended.

PNPM

To install via PNPM:

pnpm install @interop/vc-display

Development

To install locally (for development):

git clone https://github.com/interop/vc-display.git
cd vc-display
pnpm install

Usage

import {
  credentialName,
  issuerRenderInfoFrom,
  getDisplayFields,
  isExpired,
  credentialsFromJSON
} from '@interop/vc-display'

const [vc] = credentialsFromJSON(pastedText)
credentialName(vc) // 'Bachelor of Science'
issuerRenderInfoFrom(vc) // { name, url, image, ... } -- raw, unformatted
getDisplayFields(vc) // the fields a credential card shows
isExpired(vc) // boolean, from the credential's own validity period

Contribute

PRs accepted. See CONTRIBUTING.md for editor setup (Prettier, ESLint, and EditorConfig) and how it maps to CI.

If editing the Readme, please conform to the standard-readme specification.

License

MIT License © 2026 Interop Alliance.