PKI Studio for VS Code
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.
| |