Dendron views are served using Webviews

We use CRA to generate a client side React App and customize the webpack file to generate one javascript bundle and one css bundle for each webview.

Development Modes

When developing new views, there are two ways of doing development

  • IDE Mode
  • Browser Mode

Browser Mode

In browser mode, we start a webpack dev server to see changes to plugin views in real time.


  • realtime changes without running webpack export


  • not natively integrated into vscode, need to shim methods to access the running workspace

Browser mode is great for development speed but it means we're not acutally testing the view integration with VSCode. Instead, we need to manually call postMessage to simulate VSCode events.

IDE Mode

In IDE mode, we run webpack export to generate static js and css bundles of all views. We then launch the Dendron Plugin in development mode to see the webview changes integrated with VSCode


  • full fidelity webview testing


  • slow iteration time, exporting takes time
  • takes longer to debug (need to launch vscode, launch a web view developer tools, and then inspect the view inside of there)