Embedding

Embedding

The browser application is exported from @pkistudio/pvkgadgets/app as initPrivateKeyGadgets.

import { initPrivateKeyGadgets } from '@pkistudio/pvkgadgets/app';
import '@pkistudio/pvkgadgets/styles.css';

const app = initPrivateKeyGadgets({
  mount: '#app',
  theme: 'dark',
  host: {
    confirm: async (message) => window.confirm(message),
    saveFile: async ({ bytes, suggestedName }) => {
      console.log(`save ${suggestedName}`, bytes.byteLength);
    },
    openDerViewer: async ({ title, bytes }) => {
      console.log(`open ${title}`, bytes.byteLength);
    }
  }
});

await app.openBytes(new Uint8Array([0x30, 0x03, 0x02, 0x01, 0x01]), 'sample.der');

Mount Target

mount can be a selector or host element. The application fills the available browser viewport and manages its own tree, viewer, splitters, and API log layout.

Theme

The app follows browser or operating system light/dark preference by default.

Use theme: 'light' or theme: 'dark' to force a theme. The same effective theme is forwarded to embedded PkiStudioJS viewer windows.

The standalone app also supports query parameters:

?theme=light
?theme=dark

Host Callbacks

Host callbacks keep environment-specific behavior outside the package.

Common callbacks include:

• confirm: ask the host to confirm destructive or mismatch-prone actions.
• saveFile: bridge generated bytes to the host's native save behavior.
• openDerViewer: open DER output in a host-owned viewer, such as a separate Webview.

VS Code-specific file access, dialogs, and Webview lifecycle should stay in the host application, not inside @pkistudio/pvkgadgets.

Opening Bytes

Use openBytes(bytes, name) to send input to the application.

PKCS#12 input is imported by Private Key Gadgets. Other ASN.1 DER or PEM input is routed to the PkiStudioJS viewer path.

PkiStudioJS Integration

Private Key Gadgets imports PkiStudioJS from the published @pkistudio/pkistudiojs package:

• @pkistudio/pkistudiojs/core
• @pkistudio/pkistudiojs/oid-resolver
• @pkistudio/pkistudiojs/viewer

The embedded viewer is read-only for key material and editable for SubjectDN items.