Web UI

Summary

The Dendron Web UI refers to Dendron's native UI components build using the latest web technologies (instead of VS Code 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.

The nav order should be implemented in the following precedent:

  • Alphanumeric

Calendar View

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

Dendron Calendar View

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.dateFormat
  • default: y.MM.dd

Possible tokens can be looked up under https://github.com/moment/luxon/blob/master/docs/formatting.md#table-of-tokens

journal.firstDayOfWeek
currently not supported

Reason: luxon (the date library we use) currently does not support this (https://github.com/moment/luxon/issues/373).

  • default: 0

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

Graph Panel

Dendron Graph Panel lets you visualize the relationships between active note in the editor and its immediate neighbors.

Graph Panel

Graph Depth

The depth filter allows you to see the second or third degree of nodes from the active note. See video here

Preview

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

Config

This is the configuration namespace that holds all Dendron Preview related settings.

Below is an overview of what the preview namespace looks like.

preview:
  automaticallyShowPreview:
  enableFMTitle:
  enableNoteTitleForLink:
  enableFrontmatterTags:
  enableHashesForFMTags:
  enablePrettyRefs:
  enableMermaid:
  enableKatex:

automaticallyShowPreview

If enabled, preview panel will be shown upon startup and when switching between notes (if not already shown)

  • type: boolean
  • default: false

enableFMTitle

Render frontmatter title property as title of the note.

  • default: true

Render wikilink with linked note's frontmatter title when the wikilink does not have a link alias.

  • default: true

enableFrontmatterTags

Render frontmatter tags in note preview if they exist.

  • default: true

enableHashesForFMTags

Render frontmatter tags with hashtags (#) prepended, if they exist.

  • default: false

enablePrettyRefs

Render note references as pretty refs

  • default: true

enableMermaid

Render Mermaid diagrams.

  • default: true

enableKatex

Render Katex.

  • default: true

Cook

Uninstall Dendron Markdown Preview Enhanced

  1. Enable Preview V2 in your dendron.yml
  2. Uninstall Dendron Markdown Preview Enhanced

FAQ

  1. Can you pin a particular note's preview, and open a different preview pane for any notes opened thereafter?
  • We do not support it at the moment. However, as a temporary workaround, if the daily journal does not have too much Dendron-specific Markdown, you can use the built-in VS Code Markdown Preview in addition to Dendron's own 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


Backlinks