User Interface

Let's do a brief overview on how to navigate the Dendron User Interace (UI), which is called the Workbench.

πŸ’‘ TIP: If you're unfamiliar with VS Code, the command palette is used to quickly run commands, including Dendron commands. To bring up the command palette, use Ctrl+Shift+P / Cmd+Shift+P and start typing the command. If you see instructions telling you to run a command, remember to bring up the command palette and type the command name to run it.

Tutorial Dendron Layout Dark

πŸ’‘ TIP: VS Code lets you re-position any of these windows, so feel free to rearrange the windows to work best for you! Refer to VS Code documentation for more information on the VS Code UI.

1. Editor View

Where you can write and edit your notes. Notes in Dendron are Markdown files (e.g.,

2. Preview View

Shows the rendered Markdown of your currently opened note. If you close this pane, you can bring it back with the Dendron: Toggle Preview command.

You may see two additional sections at the bottom of the preview view, Children and Backlinks, which will be covered later in the tutorial.

πŸ’‘ TIP: The preview view is read-only and cannot be used to edit notes. All editing must be done in the editor view.

3. File Explorer Pane

This shows the files and folders in your vault. A vault stores your notes and assets (e.g., images, PDFs, etc.).

πŸ’‘ TIP: We encourage using the tree view, as opposed to the file explorer pane, for navigating your notes.

4. Outline Pane

Shows an outline of the currently opened note by listing the headers for navigation. Jump around sections of larger notes by clicking on the headers in this pane.

5. Calendar View Pane

Shows days where you've created a Details entry. If no journal entry exists for a given day, clicking on the date in the calendar will automatically create one.

Create Daily Journal from Calendar

6. Tree View Pane

This shows a hierarchical view of your notes, similar to how a folder structure would appear in your filesystem. You can click here to navigate around your notes.

Tree View Dark

This shows a list of other notes that have links to the current note opened in the editor view.

Backlinks Dark

Next Steps