Search...Search plugins and themes...
⌘K
Sign in
  • Get started
  • Download
  • Pricing
  • Enterprise
  • Account
  • Obsidian
  • Overview
  • Sync
  • Publish
  • Canvas
  • Mobile
  • Web Clipper
  • CLI
  • Learn
  • Help
  • Developers
  • Changelog
  • About
  • Roadmap
  • Blog
  • Resources
  • System status
  • License overview
  • Terms of service
  • Privacy policy
  • Security
  • Community
  • Plugins
  • Themes
  • Discord
  • Forum / 中文论坛
  • Merch store
  • Brand guidelines
Follow us
DiscordTwitterBlueskyThreadsMastodonYouTubeGitHub
© 2026 Obsidian

SnipDock

Joe RaadJoe Raad154 downloads

Toggle, create, rename and reload CSS snippets from a status-bar menu.

Add to Obsidian
  • Overview
  • Scorecard
  • Updates6

SnipDock

Status-bar menu for managing CSS snippets in Obsidian. Toggle them, rename them, open them in your editor, and create new ones without leaving the note you're working on.

A rewrite of the unmaintained MySnippets plugin against the current Obsidian API.


Demo

SnipDock demo


What's new in v1.1.0

Anchor to status bar icon

New setting to open the menu directly above the SnipDock status-bar icon instead of in the corner of the window. The menu stays pinned just above the bar and grows/shrinks upward as the list changes.

Suggested by @Frumkin13 in Issue #4.

Anchor to status bar

Snippet search

Filter the snippet list as you type. New setting adds a search box to the top of the menu that filters the snippet list as you type.

Suggested by @ksdavidc in Issue #2.

Snippet search

Multi-column layout

New setting lays snippets out across multiple columns instead of a single list. Configure the number of columns (2–6); snippets are distributed evenly across them. When enabled, the "Menu width" setting becomes "Column width". The menu is automatically kept within the screen bounds at any column count.

Suggested by @Bin-T in Issue #1.

Multi-column layout


Usage

Click the dock icon in the status bar (bottom-right) to open the menu.

Snippet menu

The menu has three sections. The top and bottom rows stay pinned; the middle list scrolls.

Master row

  • Master toggle: flips every snippet off and back on. The previously-enabled set is remembered, so toggling back on restores it.
  • Check icon: enable all.
  • X icon: disable all. No memory.

Snippet rows

One row per .css file in your snippets folder.

  • Toggle (or click anywhere on the row) to enable/disable.
  • Pencil icon: rename the file. If the snippet was enabled, it gets re-enabled under the new name.
  • </> icon: open the file in your OS default app for CSS.

Action row

  • Reload: re-read the snippets folder. Useful after adding files outside Obsidian.
  • Open folder: opens the snippets folder in your file manager.
  • +: opens the new-snippet modal. Name + body, body pre-filled from your snippet template. The file lands in .obsidian/snippets/; if the folder doesn't exist yet, it gets created.
  • Gear: jumps to SnipDock's settings.

Commands

Command
Open snippet menu Same as clicking the status-bar icon
Create CSS snippet Opens the new-snippet modal
Toggle all snippets on or off Master switch. Bind a hotkey for fast theme isolation.

Settings

Settings tab

  • Menu width (px) and max height (% of window).
  • Anchor to status bar icon: open the menu directly above the icon instead of the window corner.
  • Search bar: filter the snippet list as you type.
  • Multi-column layout: spread snippets across 2–6 columns; "Menu width" becomes "Column width" when on.
  • Open after creating: open the new file in your editor immediately.
  • Enable on creation: turn new snippets on right away.
  • Snippet template: starter CSS for new snippets.

Install

In Obsidian: Settings → Community plugins → Browse, search for "SnipDock", click Install, then Enable.

Manual install

  1. Grab main.js, manifest.json, and styles.css from the latest release.
  2. Put them in <your-vault>/.obsidian/plugins/snipdock/.
  3. In Obsidian: Settings → Community plugins, reload, enable SnipDock.

Develop

npm install
npm run dev     # watch + rebuild
npm run build   # production build, type-checks first

The release bundle is just main.js, manifest.json, styles.css.


Contributing

Issues and pull requests are welcome on the SnipDock repository.

  • Bug reports: include steps to reproduce, your Obsidian version, your OS, and a screenshot or screen recording if the bug is visual.
  • Feature ideas: open an issue describing the use case before sinking time into a PR. Keeps scope creep in check and avoids work going in the wrong direction.
  • Pull requests
    1. Fork the repo and create a feature branch off main.
    2. Run npm install then npm run dev while you work.
    3. Keep changes focused, one PR per concern. Match the existing TypeScript style (tabs, double quotes, no any casts unless unavoidable).
    4. Run npm run build before pushing. It type-checks first and will fail loudly on errors.
    5. Describe what the PR changes and why in the body. Screenshots help for any UI tweak.

This plugin has a narrow scope (status-bar snippet management). Suggestions that expand into broader theme or CSS tooling are likely to be declined, but a good issue conversation is the best way to find out.


Credits

  • MySnippets by Chetachi Ezikeuzor.
  • Icons from Lucide.

License

MIT

94%
HealthExcellent
ReviewPassed
About
Manage CSS snippets from a status-bar dock: toggle, rename, open in your editor, reload the snippets folder, and create new snippets without leaving your note. Use a master switch to flip sets on/off, open the snippets folder, and create files from a template that can be auto-enabled.
CSSThemingStatus bar
Details
Current version
1.1.2
Last updated
3 days ago
Created
Last week
Updates
6 releases
Downloads
154
Compatible with
Obsidian 1.4.4+
Platforms
Desktop only
License
MIT
Report bugRequest featureReport plugin
Author
Joe RaadJoe Raadjoeraad
GitHubjoeraad
  1. Community
  2. Plugins
  3. CSS
  4. SnipDock

Related plugins

Style Settings

Adjust theme, plugin, and snippet CSS variables.

Workspaces Plus

Quickly switch and manage workspaces.

Contextual Typography

Add a data-tag-name attribute to all top-level divs in preview mode containing the child's tag name, allowing contextual typography styling.

Theme Design Utilities

Some utilities and quality-of-life features for designers of Obsidian themes.

Minimal Theme Settings

Control the colors and fonts in Minimal Theme.

Hider

Hide interface elements such as tooltips, status bar, titlebar, and more.

Lapel

Show the heading levels in the gutter of the editor.

CSS Editor

Edit CSS snippet files.

Admonition

Admonition block-styled content.

Custom Frames

Turn web apps into panes using iframes with custom styling. Also comes with presets for Google Keep, Todoist and more.