Explorer

A file/folder explorer plugin for SilverBullet.

Custom ordering within folders, drag-and-drop reordering and moving, emoji and Phosphor icon support for pages and folders, and draggable panel resizing. Fully styleable via CSS variables.

Install

Add to your PLUGS.md:

- github:wuhhh/silverbullet-explorer/explorer.plug.js

Then run the Plugs: Update command.

Config

Add to your CONFIG page:

config.set("explorer", {
  position = "lhs",          -- "lhs" (default) or "rhs"
  exclude = {"^_", "^Library/"},  -- regex patterns to hide
})

Toolbar button

Add a toggle button to the top toolbar:

actionButton.define {
  icon = "sidebar",
  description = "Toggle Explorer",
  run = function()
    editor.invokeCommand("Explorer: Toggle")
  end
}

Usage

Command	Shortcut
Explorer: Toggle	Cmd-Alt-B / Ctrl-Alt-B
Explorer: Show
Explorer: Hide

• Click a page to navigate, a folder to expand/collapse
• Click an icon to open the emoji/icon picker
• Right-click for context menu (rename, delete, set icon, reset order)
• Drag items to reorder within a folder or move between folders
• Drag the panel edge to resize

Styling

The explorer runs in an iframe, so STYLES.md variables won't reach it. Instead, set styles directly in your explorer config:

config.set("explorer", {
  position = "lhs",
  exclude = {"^_", "^Library/"},
  styles = {
    bg = "#232136",
    text = "#c4c2d6",
    ["text-muted"] = "#6e6a86",
    accent = "#3e8fb0",
    hover = "#2a283e",
    border = "#393552",
    ["icon-file"] = "#6e6a86",
    ["icon-folder"] = "#9ccfd8",
    font = "'Lilex', monospace",
    ["font-size"] = "0.9375rem",
  },
})

Key	Default	Description
bg	Panel background	Panel background color
text	Root text color	Primary text color
text-muted	Meta subtle color	Secondary text, toggle arrows
accent	UI accent color	Active tabs, drag indicators, focus rings
hover	rgba(128,128,128,0.15)	Hover/selection background
border	Panel border color	Borders and dividers
icon-file	Same as text-muted	File icon tint
icon-folder	Same as text-muted	Folder icon tint
font	Editor font	Font family
font-size	Editor font size	Font size