The webview to layer the RPC channel over
interface MyRpcSchema extends WebviewRpcSchema {
webviewRequests: { getSelection: { params: void; result: { text: string } } };
hostRequests: { save: { params: { content: string }; result: { ok: boolean } } };
hostEvents: { theme: { kind: 'light' | 'dark' } };
webviewEvents: { dirty: { isDirty: boolean } };
}
const rpc = createWebviewRpc<MyRpcSchema>(panel.webview);
rpc.onRequest('save', async ({ content }) => ({ ok: await writeFile(content) }));
rpc.onEvent('dirty', ({ isDirty }) => updateTabTitle(isDirty));
rpc.emit('theme', { kind: 'dark' });
const { text } = await rpc.request('getSelection', undefined, { timeoutMs: 5000 });
Creates a typed request/response + event RPC channel over a
vscode.Webview. VS Code's ownpostMessage/onDidReceiveMessageare fire-and-forget with no correlation, timeout, or cancellation built in — this fills that gap.Works with both
WebviewPanel.webviewandWebviewView.webview(they share the sameWebviewshape), andManagedWebviewPanel/ManagedWebviewViewboth expose this automatically as.rpc.The webview-side counterpart ships as
@kkdev92/vscode-ext-kit/webview-client— vscode-free, so it bundles into webview code — and is written against the same WebviewRpcSchema, which keeps method names and TypeScript payload shapes aligned. It does not make values crossingpostMessagetrustworthy: validate them in handlers.