Dendron Plugin Views Quickstart

To see a video walkthrough of everything, go here


  1. Finish steps from Dendron Plugin Quickstart
  2. Launch Test Workspace

Video Walkthroughs


  • NOTE: unlike all other packages in the monorepo, running the watch script watch will not compile code inside this pacakge

When working on plugin views, there are two modes of development: browser and IDE.

Developing in Browser Mode

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

  1. Make sure that Test Workspace is running on port 3005
  2. Navigate to package
    cd $DENDRON_REPO_ROOT/packages/dendron-plugin-views
  3. Run
    # this builds stylesheets and generates a dynamic index.html
    yarn setup
    env REACT_APP_VIEW_NAME=$VIEW_NAME yarn start
    • NOTE: $VIEW_NAME is anything in dendron-plugin-views/src/views/* minus the .tsx extension. it is the name of the Component, not the file name
      • Dendron will dynamically require the module when yarn start is called
    • This will open up the browser at localhost:3000. When developing on the browser, Dendron will have some defaults loaded depending on what view you are using.
  4. When developing against the browser, you don't have direct access to the workspace. Instead, you'll need to use window.postMessage api to simulate vscode actions. To do this, open up the developer console (inside browser) and simulate events by pasting the following event:

    • TIP: You can change the id to any id inside of Test Workspace to see how different views function
    id = "9eae08fb-5e3f-4a7e-a989-3f206825d490";
      type: "onDidChangeActiveTextEditor",
      data: { note: { id } },
      source: "vscode",

Developing in IDE Mode

Start anchor ^FIQf5ZoJXIBP not found

  1. After you have made code changes, export all assets by running
    yarn build:dev ^w6jviyyunzqw
  2. After assets are compiled, follow the Run extension for Plugin Core


  1. Dendron Plugin Quickstart˄