PKI Studio

PKI Studio for VS Code opens PKI and ASN.1 files in the @pkistudio/pkistudiojs viewer inside a VS Code Webview.

This extension is currently in preview. The first supported workflow is inspecting DER-like PKI assets and exporting the edited viewer state back to DER through VS Code's save dialog.

Features

• Open .der, .cer, .crt, .csr, .pem, .p12, and .pfx files with the PKI Studio custom editor.
• Use the pkistudiojs tree UI, Load/Save/Tools menus, node context actions, DER inspector, editing dialogs, OID labels, encapsulated child nodes, and clipboard actions.
• Follow the active VS Code light or dark theme inside the embedded pkistudiojs viewer.
• Export DER through VS Code's native save dialog instead of browser downloads.
• Open files from the Command Palette, Explorer context menu, editor title context menu, or Open With....
• Open Private Key Gadgets for key pair generation, PKCS#12 import/export, SubjectDN editing, CSR creation, and self-signed certificate creation.
• Open .p12 and .pfx files directly in Private Key Gadgets; non-PKCS#12 ASN.1 data passed to Private Key Gadgets is routed to the embedded pkistudiojs viewer.

Usage

Use one of these entry points:

• Command Palette: PKI Studio: Open PKI Studio
• Command Palette: PKI Studio: Open Private Key Gadgets
• Explorer context menu for .der, .cer, .crt, .csr, .pem, .p12, and .pfx files
• Editor title context menu for .der, .cer, .crt, .csr, .pem, .p12, and .pfx files
• VS Code Open With...: PKI Studio for .der, .cer, .crt, .csr, .pem, .p12, and .pfx files
• VS Code Open With...: Private Key Gadgets for .p12 and .pfx files

When the PKI Studio command is run without an active supported file, it opens a VS Code file picker for common PKI and ASN.1 files.

Private Key Gadgets opens as a standalone VS Code Webview. Generated and imported key material stays in Webview memory until it is exported, and PKCS#12 export uses VS Code's native save dialog. When it is opened from a .p12 or .pfx file, VS Code passes the file bytes into the Webview at startup so pvkgadgets can import PKCS#12 data automatically.

Notes

• File loading is owned by VS Code. The embedded viewer's browser-style Load from File item is hidden to avoid Webview file picker conflicts.
• Viewer theme selection is owned by VS Code and is synced to pkistudiojs when the active color theme changes.
• Clipboard-based load actions from pkistudiojs remain available inside the viewer.
• DER viewer panels opened from Private Key Gadgets handoff actions use normal pkistudiojs viewer behavior.
• PKI Studio is registered as an optional custom editor, so it appears under Open With... without replacing VS Code's default editor.
• Private Key Gadgets is registered as an optional custom editor for .p12 and .pfx files.
• Files opened with the PKI Studio custom editor are routed by file type: DER-like files open in the pkistudiojs viewer, while .p12 and .pfx files are passed to Private Key Gadgets startup detection.
• Private Key Gadgets uses the @pkistudio/pvkgadgets npm package and connects its browser PKI workflow to VS Code save dialogs, confirmation prompts, and DER viewer panels.

Development

Install dependencies:

npm install

Compile the extension:

npm run compile

The compile script builds the Private Key Gadgets Webview bundle and then compiles the VS Code extension host code.

Package a VSIX:

npm run package -- --out pkistudio4vscode-0.0.1.vsix

Launch the extension from VS Code with the Run Extension debug configuration.

Architecture

• @pkistudio/pkistudiojs remains the PKI engine and is consumed from its scoped npm package.
• @pkistudio/pvkgadgets provides the Private Key Gadgets browser app from its npm package; VS Code-specific behavior is supplied through a small Webview adapter under webview-src/.
• The VS Code extension owns file access, command registration, Webview lifecycle, and VS Code UX.
• PKI-specific integration code should live under src/pkistudio/ so command and Webview code do not depend directly on low-level library details.
• Browser-only Webview adapter code lives under webview-src/ and is bundled into media/ for the Webview.