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
  • Join the community
  • Discord
  • Forum / 中文论坛
  • Merch store
  • Brand guidelines
Follow us
DiscordTwitterBlueskyThreadsMastodonYouTubeGitHub
© 2026 Obsidian

Visual UI Editor

echorgiechorgi415 downloads

A plugin to help you visually select and modify any UI element.

Add to Obsidian
  • Overview
  • Scorecard
  • Updates3

English 简体中文 繁體中文
A plugin that helps you visually select and modify any UI element.

How to use

CleanShot 2026-05-16 at 17.02.32@2x

Click the icon on the left toolbar to enter selection mode. In this mode, hovering your mouse over any element will select elements of the same type. Left-clicking will then open the editing panel, as shown in the image.

CleanShot 2026-05-16 at 17.02.32@2x CleanShot 2026-05-16 at 17.04.04@2x CleanShot 2026-05-16 at 17.04.36@2x
  • Override Weight: Used to set the strength of the override; the higher the value, the more likely it is to take effect.
  • Force Switch: When enabled, it overrides any styles that are not set as forced (!important). If both are forced, it depends on CSS specificity/priority.
  • Erase Styles: Completely erases the modification history of a specific element, restoring it to its original state before any changes were made using this plugin (does not remove styles applied by themes or other methods).
  • Reset: Resets any modifications made since the panel was opened in the current session (closing the window has the same effect).
  • Document Preview: Temporarily applies the modifications to the document to preview the effect (the effect disappears after closing the window).
  • Save: Permanently saves the effects to the snippet folder. You can view the auto-generated style text by opening .snippet/--ui-designer-[your repo/vault name]-default.css.

How to install

  1. Search for Visual UI Editor in the official community plugins marketplace (Recommended).
  2. Install via the BRAT plugin: After installing BRAT, enter this repository path: echorgi/obsidian-visual-ui-editor.

Contact

my REDNOTE

可视化UI元素编辑器

一个帮助你可视化选择并修改任意UI元素的插件

如何使用

CleanShot 2026-05-16 at 17.02.32@2x

点击左侧功能栏的图标,会进入选择模式,此时鼠标移到任意元素即可选中同类元素,左键点击后会打开编辑栏,如图

CleanShot 2026-04-23 at 19.08.20@2x CleanShot 2026-04-23 at 19.09.22@2x CleanShot 2026-04-23 at 19.09.30@2x
  • 覆盖权重:用来设置覆盖的强度,越高越容易生效
  • 强制开关:开启后可以覆盖掉任何没有设置强制(!import)的样式,如果都有强制,则看优先级
  • 抹除样式:完全抹除某个元素的修改历史,恢复到没有用该插件进行任何修改时的状态(不抹除主题等其他途径导致的样式)
  • 重置:重置本次面板打开以来的修改(关闭窗口同理)
  • 文档预览:把修改暂时应用到文档,预览效果(关闭窗口后效果消失)
  • 保存:将效果永久保存到snippet文件夹下,可以通过打开.snippet/--ui-designer-[你的仓库名]-default.css来查看自动生成的样式文本

如何安装

  1. 官方插件市场搜索Visual Ui Editor(推荐)
  2. 使用BRAT插件安装, 安装BRAT插件后输入本仓库路径: echorgi/obsidian-visual-ui-editor

🍠

我的小红书主页

可視化 UI 元素編輯器

一個幫助你可視化選擇並修改任意 UI 元素的插件

如何使用

CleanShot 2026-05-16 at 17.02.32@2x

點擊左側功能欄的瞄準圖標,會進入選擇模式,此時滑鼠移到任意元素即可選中同類元素,左鍵點擊後會打開編輯欄,如圖

CleanShot 2026-05-16 at 17.18.41@2x CleanShot 2026-05-16 at 17.19.32@2x CleanShot 2026-05-16 at 17.19.59@2x
  • 覆蓋權重:用來設置覆蓋的強度,越高越容易生效
  • 強制開關:開啟後可以覆蓋掉任何沒有設置強制(!important)的樣式,如果都有強制,則看優先級
  • 抹除樣式:完全抹除某個元素的修改歷史,恢復到沒有用該插件進行任何修改時的狀態(
91%
HealthExcellent
ReviewSatisfactory
About
Visually select and edit any Obsidian UI element with an on-screen selector; hover to highlight similar elements and click to open an editor. Adjust override strength and force rules, erase or reset edits, preview changes in the document, and save results as a reusable CSS snippet.
AppearanceCSSSnippets
Details
Current version
1.1.4
Last updated
4 days ago
Created
4 weeks ago
Updates
3 releases
Downloads
415
Compatible with
Obsidian 0.15.0+
Platforms
Desktop only
License
0BSD
Report bugRequest featureReport plugin
Sponsor
Support
Author
echorgiechorgi
www.xiaohongshu.com/user/profile/61c83d00000000001000bd3e
GitHubechorgi
  1. Community
  2. Plugins
  3. Appearance
  4. Visual UI Editor

Related plugins

Snippetor

Create and tweak common snippets.

Style Settings

Adjust theme, plugin, and snippet CSS variables.

Lapel

Show the heading levels in the gutter of the editor.

CSS Editor

Edit CSS snippet files.

Show Whitespace

CSS styles and CM6 extensions to highlight whitespace in Source and Live Preview modes.

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.

Focus Mode

Add a toggle to hide interface elements so you can focus on your note.

Better Bullets

Improves readability of bulleted notes.

Color Palette

Create and insert color palettes into your notes.

Linkify

Convert matching text into links.