HTML Effectiveness

approved

by rosswang

边对比 / 流程图 / 幻灯片 / 报告 / 时间线 — 在 Obsidian 中直接渲染空间化 HTML 内容。基于 html-effectiveness 方法论。 - This plugin has not been manually reviewed by Obsidian staff.

↓ 367 downloadsUpdated 1mo agoMIT
Install in ObsidianView on GitHub

HTML 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 .html file → "Open with HTML Effectiveness" / 打开方式：右键 .html 文件 → "Open with HTML Effectiveness"
  • Command palette: "Open current file in HTML viewer" (shown only for .html files) / 命令面板："Open current file in HTML viewer"（仅 .html 文件显示）
  • Auto-association: clicking a .html file 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 .html file is edited / 实时刷新：编辑 .html 文件后视图自动更新
  • Interactivity: the iframe sandbox includes allow-scripts, so JavaScript interactions work / 交互支持：iframe sandbox 包含 allow-scripts，支持 JavaScript 交互
  • In-app editing: click "✏️ Edit" in the toolbar to edit the raw HTML text, then save with Ctrl/Cmd+S or the "💾 Save" button (overwrites the original file); "👁 Preview" switches back to rendering. Unsaved changes are confirmed before discard / 应用内编辑：点击工具栏 "✏️ Edit" 直接编辑 HTML 源文本，Ctrl/Cmd+S 或 "💾 Save" 按钮覆盖保存原文件；"👁 Preview" 切回渲染视图。有未保存修改时切换预览会先确认
  • Edit commands: "Toggle edit/preview mode for HTML viewer" and "Save HTML file (edit mode)" in the command palette / 命令面板提供 "Toggle edit/preview mode for HTML viewer" 与 "Save HTML file (edit mode)"

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 文件管理器中：

  1. Right-click a .html file → "Open with HTML Effectiveness" / 右键 .html 文件 → "Open with HTML Effectiveness"
  2. 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 viewerOpen the current file in the HTML viewer / 在 HTML 查看器中打开当前文件
Toggle edit/preview mode for HTML viewerSwitch the HTML viewer between editing and preview / 在 HTML 查看器的编辑与预览之间切换
Save HTML file (edit mode)Overwrite-save the file being edited / 覆盖保存正在编辑的文件
Export note as HTMLExport the current note as a standalone HTML file / 导出当前笔记为独立 HTML
CompareInsert the Compare template / 插入 Compare 模板
TimelineInsert the Timeline template / 插入 Timeline 模板
ReportInsert the Report template / 插入 Report 模板
SlidesInsert the Slides template / 插入 Slides 模板
DiagramInsert the Diagram template / 插入 Diagram 模板

Changelog / 更新日志

1.1.0

  • In-app editing / 应用内编辑: edit raw HTML text directly in the viewer via a toolbar toggle; Ctrl/Cmd+S or the Save button overwrites the original file / 通过工具栏在查看器中直接编辑 HTML 源文本，Ctrl/Cmd+S 或保存按钮覆盖保存原文件
  • Unsaved changes are confirmed before switching back to preview / 切回预览前如有未保存修改会先确认

1.0.24

  • Adaptive fit-to-width zoom on open; removed stale localStorage zoom / 打开时自适应宽度缩放，移除旧的缩放持久化
  • Robust flex-based view container layout / 更稳健的 flex 视图容器布局

1.0.23

  • Bilingual README, English UI copy / 双语 README，英文界面文案

Installation / 安装

From Obsidian Community Plugins / 从 Obsidian 社区插件安装

Settings → Community Plugins → Browse → Search "HTML Effectiveness"

设置 → 社区插件 → 浏览 → 搜索 "HTML Effectiveness"

Manual / BRAT / 手动安装 / BRAT

  1. Install BRAT / 安装 BRAT
  2. 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)

For plugin developers

Search results and similarity scores are powered by semantic analysis of your plugin's README. If your plugin isn't appearing for searches you'd expect, try updating your README to clearly describe your plugin's purpose, features, and use cases.