React Webview Architecture

Patterns and conventions for React webviews in Project Rayfin.

Related skills (do not duplicate):

• vscode-webview-trpc-messaging — tRPC routers, procedures, telemetry, AbortSignal, subscriptions, WebviewController

Full reference: See references/REACT_ARCHITECTURE_GUIDELINES.md

When to Use

• Creating or modifying a webview
• Adding new components inside packages/tools/vscode/src/webviews/
• Working with React Context state management
• Integrating Monaco Editor
• Debugging stale closure issues in event handlers

Rendering Pipeline