Link Search Menu Expand Document

Web UI

Summary

The Dendron Web UI refers to Dendron's native UI components build using the latest web technologies (instead of VSCode components). This lets us create dynamic interfaces with dynamic dropdowns, drag and drop and custom made components.

Quickstart

To get started, set enableWebUI to true and then reload your workspace to enable.

Components

TreeView

This is an implementation of the Dendron Tree View using the Dendron Web UI.

Calendar View

The Dendron Calendar View lets you view your daily journal in calendar form.

The Dendron Calendar View has the following capabilities:

  • Clicking on a given day date will open the corresponding daily journal note

  • Clicking on a given day without a daily journal note will create one

  • Days without daily journal note are grayed out and days that contain an entry are displayed in white.

  • Shows indicators in the form of dots (max 5) to reflect the word count of that entry. Each dot repesents 250 words.

  • Switching between month/year view

  • In a multi-vault workspace it shows the daily journal from the vault associated with the active note

  • NOTE: the calendar view will only work if you have default journal settings in your dendron.yml

    journal:
        dailyDomain: daily
        name: journal
        dateFormat: y.MM.dd
        addBehavior: childOfDomain
    

Configuration

journal.firstDayOfWeek
  • default: 0

Set start of week (eg. 0 for sunday, 1 for monday, 2 for tuesday, etc.) for the Dendron Calendar View

Preview

The Dendron Preview gives you a rich HTML preview for your notes.

  • NOTE: Preview V2 is missing the following features compared to the current preview:
  • scroll sync
  • export to PDF

If you discover any issues that are not listed above, please submit a bug repo here so we can add it to our roadmap!

Config

dev.enablePreviewV2

  • type: boolean
  • default: false

When turned on, Show Preview will display the v2 preview

Methods

Show Preview V2

Brings up the native Dendron Preview

Theming

Dendron Web UI supports a dark and light theme and will switch according to your current IDE theme. If you switched themes, you'll need to run Reload Window for Dendron to update its theme