Custom Views

Create custom HTML, CSS, and JavaScript views for Obsidian notes based on matching rules.

Custom Views lets structured notes render as purpose-built pages while keeping the data in normal Markdown files. Use it for movie pages, album pages, catalogs, dashboards, project views, reading lists, and any note type that benefits from a custom layout.

What it does

• Matches notes using file data, tags, folders, and frontmatter properties.
• Renders matching notes with HTML templates.
• Supports placeholders, filters, conditionals, loops, and expressions.
• Can render note content and wikilinks with Obsidian's Markdown renderer.
• Can query Obsidian Bases from inside a template.
• Supports scoped CSS and optional JavaScript for trusted templates.

Getting started

1. Enable the plugin in Settings -> Community plugins.
2. Enable Bases in Settings → Core plugins, then open Settings → Custom Views.
3. Add a view and choose its rules using the native Bases filter editor.
4. Add an HTML template, then optional CSS and JavaScript.
5. Open a matching note in reading mode or live preview.

The first matching view is used, so place more specific views above broader ones. Changes save automatically. If a save fails, a persistent notice offers a retry while your edits remain in memory.

The Rules editor uses Obsidian’s internal Bases controls, including property pickers, nested groups, and advanced formulas. Enable the Bases core plugin to edit rules; existing rules continue to work without automatic migration.

Previews, Canvas, and embedded notes

Enable Work in popover preview, Work in canvas, or Work in embedded notes in settings to use matching views outside the main note. Popovers and Canvas preserve Obsidian's reading/live preview controls. With Editable content in live preview enabled, {{file.content}} contains the native editor; source mode stays native. Full-note previews are supported; heading and block excerpts keep their original content.

In a view's editor, Template for selects Main note, Popover preview, Canvas, or Embedded note without adding more editor panels. Each context inherits the main HTML, CSS, and JavaScript independently. Turn off Use main CSS, for example, to make a compact popover while sharing the same HTML and JavaScript. Overrides replace that language's main value; an empty override intentionally supplies nothing. Turn inheritance back on to discard the override and follow future main-template changes.

Canvas cards keep their rendered view between background checks. Editable note bodies share the template's scrollbar, including Canvas iframe editors. Embeds created inside a custom template stay native to prevent recursive rendering. Older hosts without support for moving iframes without reloading them keep the native Canvas editor. These surfaces use Obsidian's internal Markdown embed integration and may need updates when Obsidian changes it.

Documentation

The detailed documentation lives in the GitHub Wiki:

• Wiki home
• Quick start
• Template syntax
• Filters and functions
• Bases in Custom Views
• Movie view tutorial
• Album view tutorial
• Troubleshooting

GitHub stores the wiki as a separate repository named obsidian-custom-views.wiki.git; each wiki page is a Markdown file in that repository.

JavaScript safety

Template JavaScript is powerful and runs inside Obsidian when the view renders. Only enable JavaScript for templates you trust, and avoid pasting scripts from unknown sources.

JavaScript template execution is powered by @silentvoid13/rusty_engine, the WASM engine created for Templater.

Development

npm install
npm run dev
npm run lint
npm run typecheck
npm test
npm run build

Release artifacts are generated at the plugin root for Obsidian: main.js, manifest.json, and styles.css.

Contributing

Issues and pull requests are welcome. If you are reporting a rendering problem, include the view rule, template, relevant frontmatter, and any console error.