Viewer Usage

Viewer Usage

The viewer UI lives in app/static/pkistudio.js. It can be used directly with script tags or imported from npm as @pkistudio/pkistudiojs/viewer.

Script Tag Usage

The bundled index.html only needs a mount target plus the Core and Viewer scripts:

<div id="pkistudio"></div>
<script src="pkistudio-core.js" defer></script>
<script src="pkistudio.js" defer></script>

When #pkistudio, [data-pkistudio], or [data-pkistudio-mount] is present, the script auto-initializes and renders the viewer into a Shadow DOM.

Manual Initialization

Disable auto-init when embedding the viewer into another page and initialize it yourself:

<div id="certificate-viewer"></div>
<script src="/path/to/pkistudio-core.js" defer></script>
<script src="/path/to/pkistudio.js" data-pkistudio-auto-init="false" defer></script>
<script>
  window.addEventListener('DOMContentLoaded', () => {
    const studio = window.PkiStudio.init({
      mount: '#certificate-viewer',
      oidUrl: '/path/to/oids.json'
    });

    studio.loadBytes(
      new Uint8Array([0x30, 0x03, 0x02, 0x01, 0x01]),
      'Loaded DER.'
    );
  });
</script>

By default, the generated UI is isolated in a Shadow DOM so host-page styles do not need to match PkiStudioJS internal markup.

npm Viewer Import

const viewer = require('@pkistudio/pkistudiojs/viewer');
const oidResolver = require('@pkistudio/pkistudiojs/oid-resolver');

window.addEventListener('DOMContentLoaded', () => {
  const studio = viewer.init({
    mount: '#certificate-viewer',
    oidResolver: oidResolver.create({
      '1.2.3.4.5': 'Example Custom Extension'
    }),
    newWindowUrl: '/viewer.html'
  });

  studio.loadBytes(
    new Uint8Array([0x30, 0x03, 0x02, 0x01, 0x01]),
    'Loaded DER.'
  );
});

Importing @pkistudio/pkistudiojs/viewer is safe in Node-like module evaluation contexts. Calling init() still requires a browser DOM.

Viewer Exports

@pkistudio/pkistudiojs/viewer exports:

• version: package viewer version.
• core: loaded Core API when pkistudio-core.js is available in the same global context.
• init(options): creates a viewer instance.
• autoInit(): initializes the default viewer when a known mount target is present.

init Options

Common init(options) values include:

• mount: selector or element used as the viewer mount target.
• oidUrl: URL used to fetch oids.json when no resolver is supplied.
• oidResolver: resolver object with a resolve(oid) method.
• oidNames: object keyed by dotted OID strings.
• newWindowUrl: standalone viewer URL used by selected-node new-window actions.
• editable: pass false to start in read-only mode.

When neither oidResolver nor oidNames is supplied, the viewer fetches options.oidUrl || 'oids.json'.

Viewer Instance

init() returns an object with:

• loadBytes(bytes, notice): load DER bytes into the viewer.
• getNodeBytes(nodeId): export a node and its subtree as DER bytes.
• setEditable(editable): switch read/write behavior after initialization.
• close(): clear the current document.
• mount: mount element.
• root: viewer root element.

Node IDs are visible in the generated tree markup as data-node-id attributes and match Core API node IDs for the same parsed document.

Theme and Layout

The viewer follows the browser or operating system light/dark preference. Selected node actions, dialogs, notices, tree display, and new-window views use the same effective theme.

The bundled viewer fills the available browser content area under the top menu. Large trees scroll inside the viewer.