README file from
GithubHTML Effectiveness for Obsidian
Render spatial HTML content inside notes AND view standalone HTML files within Obsidian. Based on the html-effectiveness methodology.
在 Obsidian 中渲染空间化 HTML 内容 + 浏览独立 HTML 文件。基于 html-effectiveness 方法论。
What It Solves / 解决的问题
1. Obsidian cannot render spatial HTML content natively / Obsidian 无法直接渲染空间化 HTML 内容
Markdown is linear, but information like comparisons, timelines, and dashboards needs spatial layout that only HTML can express. This plugin lets you render these structures directly inside your notes using html-effect code blocks.
Markdown 是线性的，但对比、时间线、仪表盘等需要空间布局的信息用 HTML 才能表达。本插件让你在笔记中用 html-effect 代码块直接渲染这些结构。
2. HTML files generated by html-effectiveness cannot be viewed in Obsidian / html-effectiveness 生成的 HTML 文件无法在 Obsidian 中查看
AI-generated HTML reports (industry digests, analysis reports, data dashboards, etc.) open fine in a browser, but Obsidian only shows their source code. The plugin provides a dedicated HTML file viewer that renders these files correctly, including images, styles, and interactive elements.
AI 生成的 HTML 报告（行业周报、分析报告、数据仪表盘等）在浏览器中打开正常，但在 Obsidian 中只能看到源码。插件提供了专用的 HTML 文件查看器，正确渲染这些文件，包括图片、样式、交互元素。
3. Relative-path images do not display in Obsidian / 相对路径图片在 Obsidian 中无法显示
Other HTML preview tools fail to load relative-path images such as src="images/foo.png" when opening HTML files inside Obsidian. This plugin automatically rewrites relative paths to Obsidian-recognized resource URLs so images display correctly.
其他 HTML 预览工具在 Obsidian 中打开 HTML 文件时，src="images/foo.png" 这类相对路径的图片会加载失败。插件自动将相对路径转换为 Obsidian 可识别的资源 URL，图片正常显示。
Features / 功能
html-effect code block (use directly in notes) / html-effect 代码块（在笔记中直接使用）
| Template / 模板 | Description / 说明 |
|---|---|
| Compare — side-by-side comparison / 双栏并排对比 | Left/right split, ideal for comparing options or parameters / 左右分栏，适合方案对比、参数对照 |
| Timeline — timeline view / 时间线视图 | Vertical timeline with date markers / 垂直时间线，带日期标记 |
| Diagram — ASCII diagram / ASCII 图示 | Monospace text box for simple architecture diagrams / 等宽字体文本框，可画简单架构图 |
| Report — KPI report / KPI 报告 | Data cards + body text, ideal for dashboards / 数据卡片 + 正文，适合仪表盘 |
| Slides — paged slides / 可翻页幻灯片 | Page up/down navigation, ideal for presentations / 上下翻页，适合演示 |
HTML file viewer / HTML 文件查看器
Open .html files directly in Obsidian with full rendering / 在 Obsidian 中直接打开 .html 文件，完美渲染：
- Open: right-click a
.htmlfile → "Open with HTML Effectiveness" / 打开方式：右键 .html 文件 → "Open with HTML Effectiveness" - Command palette: "Open current file in HTML viewer" (shown only for
.htmlfiles) / 命令面板："Open current file in HTML viewer"（仅 .html 文件显示） - Auto-association: clicking a
.htmlfile opens it with this plugin / 自动关联：点击 .html 文件自动用本插件打开 - Image support: relative-path images are rewritten to Obsidian resource URLs / 图片支持：相对路径图片自动转换为 Obsidian 资源 URL
- Live refresh: the view updates automatically when the
.htmlfile is edited / 实时刷新：编辑 .html 文件后视图自动更新 - Interactivity: the iframe sandbox includes
allow-scripts, so JavaScript interactions work / 交互支持：iframe sandbox 包含 allow-scripts，支持 JavaScript 交互
More / 其他
- Export note: the "Export note as HTML" command exports the current note to a standalone HTML file / 导出笔记："Export note as HTML" 命令将当前笔记导出为独立 HTML 文件
- Insert templates: 6 quick commands insert common template code blocks / 插入模板：6 个快捷命令插入常用模板代码块
- Theme adaptation: light/dark theme switching follows the Obsidian theme / 主题适配：浅色/深色主题切换，跟随 Obsidian 主题
Usage / 使用
Insert an html-effect code block in a note / 在笔记中插入 html-effect 代码块
```html-effect
compare
Left content / 左侧内容
---
Right content / 右侧内容
```
```html-effect
timeline
- [2026-01] Event one / 事件一
- [2026-03] Event two / 事件二
- [2026-06] Event three / 事件三
```
```html-effect
---
type: report
---
##
- 85%: completion rate / 完成率
- $2.5B: market size / 市场规模
# Report title / 报告标题
Body content... / 正文内容...
```
View an HTML file / 查看 HTML 文件
In the Obsidian file explorer / 在 Obsidian 文件管理器中：
- Right-click a
.htmlfile → "Open with HTML Effectiveness" / 右键.html文件 → "Open with HTML Effectiveness" - Or select the file and open the command palette → "Open current file in HTML viewer" / 或选中文件后打开命令面板 → "Open current file in HTML viewer"
Commands / 命令
| Command / 命令 | Description / 说明 |
|---|---|
| Open current file in HTML viewer | Open the current file in the HTML viewer / 在 HTML 查看器中打开当前文件 |
| Export note as HTML | Export the current note as a standalone HTML file / 导出当前笔记为独立 HTML |
| Compare | Insert the Compare template / 插入 Compare 模板 |
| Timeline | Insert the Timeline template / 插入 Timeline 模板 |
| Report | Insert the Report template / 插入 Report 模板 |
| Slides | Insert the Slides template / 插入 Slides 模板 |
| Diagram | Insert the Diagram template / 插入 Diagram 模板 |
Installation / 安装
From Obsidian Community Plugins / 从 Obsidian 社区插件安装
Settings → Community Plugins → Browse → Search "HTML Effectiveness"
设置 → 社区插件 → 浏览 → 搜索 "HTML Effectiveness"
Manual / BRAT / 手动安装 / BRAT
- Install BRAT / 安装 BRAT
- Add the repository:
yanqingwang/obsidian-html-effectiveness/ 添加仓库：yanqingwang/obsidian-html-effectiveness
Development / 开发
cd html-effectiveness-plugin
npm install
npm run dev # watch mode / 监听模式
npm run build # production build / 生产构建
License / 许可证
MIT
Copyright (c) 2026 rosswang (Heart and Road Ltd)