{"id":35162426,"url":"https://github.com/anuwup/obsidian-custom-views","last_synced_at":"2026-01-13T22:03:02.100Z","repository":{"id":331155655,"uuid":"1123776560","full_name":"anuwup/obsidian-custom-views","owner":"anuwup","description":"An Obsidian Plugin to create custom HTML views for your notes based on filter rules. Transform how your notes are displayed with custom templates.","archived":false,"fork":false,"pushed_at":"2026-01-02T10:18:06.000Z","size":217,"stargazers_count":12,"open_issues_count":0,"forks_count":2,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-01-03T19:44:18.560Z","etag":null,"topics":["html","javascript","obsidian","obsidian-md","obsidian-plugin"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/anuwup.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":"AGENTS.md","dco":null,"cla":null}},"created_at":"2025-12-27T15:45:24.000Z","updated_at":"2026-01-03T07:33:55.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/anuwup/obsidian-custom-views","commit_stats":null,"previous_names":["anuwup/obsidian-custom-views"],"tags_count":9,"template":false,"template_full_name":null,"purl":"pkg:github/anuwup/obsidian-custom-views","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anuwup%2Fobsidian-custom-views","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anuwup%2Fobsidian-custom-views/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anuwup%2Fobsidian-custom-views/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anuwup%2Fobsidian-custom-views/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/anuwup","download_url":"https://codeload.github.com/anuwup/obsidian-custom-views/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anuwup%2Fobsidian-custom-views/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28400778,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-13T14:36:09.778Z","status":"ssl_error","status_checked_at":"2026-01-13T14:35:19.697Z","response_time":56,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["html","javascript","obsidian","obsidian-md","obsidian-plugin"],"created_at":"2025-12-28T18:45:44.872Z","updated_at":"2026-01-13T22:03:02.092Z","avatar_url":"https://github.com/anuwup.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Obsidian Custom Views \u003cimg src=\"https://img.shields.io/github/manifest-json/v/anuwup/obsidian-custom-views\"\u003e \u003cimg src=\"https://img.shields.io/github/downloads/anuwup/obsidian-custom-views/total\"\u003e\n\nA plugin for Obsidian that lets you create custom HTML views for your notes based on filter rules. Transform how your notes are displayed by defining custom templates that match specific files.\n\n![output](https://github.com/user-attachments/assets/f94e92b6-93a0-42eb-a9c7-bad6bc3aa7e2)\n\n\u003c!-- *[GIF: Show a note with frontmatter (e.g., a movie note with title, year, rating) being displayed in a custom card view instead of the default markdown view. Show the transition from default view to custom view.]* --\u003e\n\nThe plugin's main feature is **custom views**, which allow you to:\n- Create beautiful, custom HTML templates for specific notes\n- Match files using powerful filter rules (file properties, frontmatter, tags, etc.)\n- Transform data using filter chains (date formatting, text transformations, etc.)\n- Render note content as markdown within your custom templates\n\nPerfect for creating card views, dashboards, or any custom presentation of your notes!\n\n## Usage\n\n### Getting Started\n\n\u003c!-- 1. **Enable the plugin** in **Settings → Community plugins**.\n2. Go to **Settings → Custom Views** to configure your views.\n3. Click **\"Add New View\"** to create your first custom view.\n4. Define **filter rules** to match which files should use this view.\n5. Write an **HTML template** to customize how those files are displayed. --\u003e\n\n### Basic Example\n\nLet's create a simple view for movie notes. First, add a filter rule:\n- **Property**: `file.folder`\n- **Operator**: `contains`\n- **Value**: `Movies`\n\nThen, create a template like this:\n\n```html\n\u003cdiv class=\"movie-card\"\u003e\n  \u003ch1\u003e{{title}}\u003c/h1\u003e\n  \u003cp\u003eYear: {{year}}\u003c/p\u003e\n  \u003cp\u003eRating: {{rating}}/10\u003c/p\u003e\n  \u003cdiv\u003e{{file.content}}\u003c/div\u003e\n\u003c/div\u003e\n```\n\nNow, any note in a folder containing \"Movies\" will be displayed using this custom template instead of the default markdown view!\n\n## Features\n\n### Filter Rules\n\nMatch files using powerful filter rules based on file properties or frontmatter. You can combine multiple conditions using AND, OR, or NOR logic.\n\n**Available Properties:**\n- **File properties**: `file.name`, `file.path`, `file.folder`, `file.size`, `file.ctime`, `file.mtime`, `file.extension`\n- **Frontmatter**: Any property from your note's frontmatter (e.g., `title`, `tags`, `status`, `date`)\n- **Tags**: The `tags` property (automatically detected as a list)\n\n**Operators:**\n- **Text**: `contains`, `does not contain`, `is`, `is not`, `starts with`, `ends with`, `is empty`, `is not empty`\n- **Numbers**: `=`, `≠`, `\u003c`, `≤`, `\u003e`, `≥`, `is empty`, `is not empty`\n- **Dates**: `on`, `not on`, `before`, `on or before`, `after`, `on or after`, `is empty`, `is not empty`\n- **Lists/Tags**: `contains`, `does not contain`, `is empty`, `is not empty`\n- **Checkboxes**: `is` (true/false)\n\n### HTML Templates\n\nWrite custom HTML templates using a simple placeholder syntax. Access file properties using `{{file.property}}` and frontmatter properties using `{{property}}`.\n\n**Basic Placeholders:**\n- `{{file.name}}` - The full filename (e.g., \"My Note.md\")\n- `{{file.basename}}` - The filename without extension (e.g., \"My Note\")\n- `{{file.path}}` - The full file path\n- `{{file.folder}}` - The folder path\n- `{{file.size}}` - File size in bytes\n- `{{file.ctime}}` - Creation timestamp\n- `{{file.mtime}}` - Modification timestamp\n- `{{file.content}}` - The note body rendered as markdown\n- `{{file.tags}}` - File tags (from both body and frontmatter)\n- `{{property}}` - Any frontmatter property (e.g., `{{title}}`, `{{cover}}`, `{{rating}}`)\n\n**Array Access:**\n- `{{file.tags[0]}}` - First tag\n- `{{file.tags[1]}}` - Second tag\n- etc.\n\n### Filter Chains\n\nTransform values using filter chains. Chain multiple filters together using the pipe (`|`) operator.\n\n**Example:**\n```html\n\u003ch1\u003e{{title | capitalize}}\u003c/h1\u003e\n\u003cp\u003ePublished: {{date | date:\"MMMM DD, YYYY\"}}\u003c/p\u003e\n\u003cp\u003eTags: {{file.tags | join:\", \" | wikilink}}\u003c/p\u003e\n```\n\n**Available Filters:**\n\n#### Date Filters\n- `date:\"FORMAT\"` - Format a date (e.g., `date:\"YYYY-MM-DD\"`, `date:\"MMMM DD, YYYY\"`)\n- `date:\"FORMAT\":\"INPUT_FORMAT\"` - Parse and format a date with custom input format\n- `date_modify:\"+1 year\"` - Modify a date (e.g., `\"+1 year\"`, `\"-2 months\"`)\n\n#### Text Transformation\n- `capitalize` - Capitalize first letter\n- `upper` - Convert to uppercase\n- `lower` - Convert to lowercase\n- `title` - Title case\n- `camel` - Convert to camelCase\n- `kebab` - Convert to kebab-case\n- `snake` - Convert to snake_case\n- `trim` - Remove leading/trailing whitespace\n- `replace:\"search\":\"replace\"` - Replace text (supports regex: `replace:\"/pattern/flags\":\"replace\"`)\n\n#### Markdown Formatting\n- `wikilink:\"alias\"` - Convert to wikilink `[[value|alias]]`\n- `link:\"text\"` - Convert to markdown link `[text](value)`\n- `image:\"alt\"` - Convert to markdown image `![alt](value)`\n- `blockquote` - Convert each line to blockquote\n\n#### Array Operations\n- `split:\",\"` - Split string into array\n- `join:\", \"` - Join array into string\n- `first` - Get first element\n- `last` - Get last element\n- `slice:0:5` - Slice array or string\n- `count` - Get length of array or string\n\n#### HTML Processing\n- `strip_tags` - Remove HTML tags\n\n#### Math\n- `calc:\"+10\"` - Perform calculation (`+`, `-`, `*`, `/`, `^`)\n\n### View Modes\n\nThe plugin works in different view modes based on your settings:\n\n- **Reading Mode**: Custom views always work in reading mode (preview mode).\n- **Live Preview**: Optionally enable custom views in live preview mode via **Settings → Custom Views → Work in Live Preview**.\n- **Source Mode**: Custom views are disabled in pure source mode (true editor mode).\n\n### Multiple Views\n\nYou can create multiple custom views. The plugin will use the first matching view for each file. This allows you to have different templates for different types of notes.\n\n**Example:**\n- View 1: Movie cards (matches `file.folder contains \"Movies\"`)\n- View 2: Book cards (matches `file.folder contains \"Books\"`)\n- View 3: Project dashboards (matches `file.status is \"active\"`)\n\n### Script Support\n\nYou can include `\u003cscript\u003e` tags in your templates for dynamic behavior. Scripts are executed when the template is rendered, allowing you to add interactivity to your custom views.\n\n```html\n\u003cdiv class=\"interactive-card\"\u003e\n  \u003ch2\u003e{{title}}\u003c/h2\u003e\n  \u003cbutton onclick=\"toggleDetails()\"\u003eShow Details\u003c/button\u003e\n  \u003cdiv id=\"details\" style=\"display: none;\"\u003e{{file.content}}\u003c/div\u003e\n\u003c/div\u003e\n\n\u003cscript\u003e\nfunction toggleDetails() {\n  const details = document.getElementById('details');\n  details.style.display = details.style.display === 'none' ? 'block' : 'none';\n}\n\u003c/script\u003e\n```\n\n\u003e [!WARNING]\n\u003e Scripts in templates are executed when the view is rendered. Be careful with scripts from untrusted sources.\n\n## Examples\n\n### Movie Card View\n\n**Filter Rule:**\n- `file.folder` contains `Movies`\n\n**Template:**\n```html\n\u003cdiv class=\"movie-card\" style=\"max-width: 600px; margin: 0 auto; padding: 20px; border: 1px solid var(--background-modifier-border); border-radius: 8px;\"\u003e\n  \u003ch1 style=\"margin-top: 0;\"\u003e{{title}}\u003c/h1\u003e\n  \u003cdiv style=\"display: flex; gap: 20px; margin-bottom: 20px;\"\u003e\n    \u003cdiv\u003e\n      \u003cstrong\u003eYear:\u003c/strong\u003e {{year}}\n    \u003c/div\u003e\n    \u003cdiv\u003e\n      \u003cstrong\u003eRating:\u003c/strong\u003e {{rating}}/10\n    \u003c/div\u003e\n    \u003cdiv\u003e\n      \u003cstrong\u003eGenre:\u003c/strong\u003e {{genre | join:\", \"}}\n    \u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv style=\"margin-top: 20px;\"\u003e\n    {{file.content}}\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n### Project Dashboard\n\n**Filter Rule:**\n- `file.status` is `active`\n\n**Template:**\n```html\n\u003cdiv class=\"project-dashboard\"\u003e\n  \u003ch1\u003e{{file.name | replace:\".md\":\"\" | title}}\u003c/h1\u003e\n  \u003cdiv class=\"metadata\"\u003e\n    \u003cp\u003e\u003cstrong\u003eStatus:\u003c/strong\u003e {{status | capitalize}}\u003c/p\u003e\n    \u003cp\u003e\u003cstrong\u003eDue Date:\u003c/strong\u003e {{due_date | date:\"MMMM DD, YYYY\"}}\u003c/p\u003e\n    \u003cp\u003e\u003cstrong\u003eProgress:\u003c/strong\u003e {{progress}}%\u003c/p\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"tags\"\u003e\n    Tags: {{file.tags | join:\", \" | wikilink}}\n  \u003c/div\u003e\n  \u003chr\u003e\n  \u003cdiv class=\"content\"\u003e\n    {{file.content}}\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n### Book Review Card\n\n**Filter Rule:**\n- `file.tags` contains `book`\n\n**Template:**\n```html\n\u003cdiv style=\"display: grid; grid-template-columns: 200px 1fr; gap: 20px; padding: 20px;\"\u003e\n  \u003cdiv\u003e\n    \u003cimg src=\"{{cover_image}}\" alt=\"{{title}}\" style=\"width: 100%; border-radius: 4px;\"\u003e\n  \u003c/div\u003e\n  \u003cdiv\u003e\n    \u003ch1\u003e{{title}}\u003c/h1\u003e\n    \u003cp\u003e\u003cstrong\u003eAuthor:\u003c/strong\u003e {{author}}\u003c/p\u003e\n    \u003cp\u003e\u003cstrong\u003ePublished:\u003c/strong\u003e {{published | date:\"YYYY\"}}\u003c/p\u003e\n    \u003cp\u003e\u003cstrong\u003eRating:\u003c/strong\u003e {{rating}}/5 ⭐\u003c/p\u003e\n    \u003cdiv style=\"margin-top: 20px;\"\u003e\n      {{file.content}}\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n## Commands\n\nThe plugin adds the following commands to the Command palette:\n\n- **Enable Custom Views** - Enable the plugin (only shown when disabled)\n- **Disable Custom Views** - Disable the plugin (only shown when enabled)\n\n## Settings\n\nAccess settings via **Settings → Custom Views**.\n\n### Global Settings\n\n- **Work in Live Preview** - If enabled, custom views work in both reading mode and live preview mode. If disabled, custom views only work in reading mode.\n\n### View Configuration\n\nEach view has:\n- **Name** - A descriptive name for the view\n- **Filter Rules** - Conditions that determine which files match this view\n- **HTML Template** - The custom HTML template to render for matching files\n\n## Template Reference\n\n### Placeholder Syntax\n\nFor file properties:\n```\n{{file.PROPERTY[INDEX] | FILTER1:ARG1,ARG2 | FILTER2:ARG3}}\n```\n\nFor frontmatter properties:\n```\n{{PROPERTY[INDEX] | FILTER1:ARG1,ARG2 | FILTER2:ARG3}}\n```\n\n- `PROPERTY` - The property name (file property with `file.` prefix, or frontmatter key without prefix)\n- `[INDEX]` - Optional array index (e.g., `[0]` for first element)\n- `| FILTER:ARGS` - Optional filter chain\n\n### Special Placeholders\n\n- `{{file.content}}` - Renders the note body as markdown. This is always rendered as markdown, regardless of context.\n\n### Context-Aware Rendering\n\nPlaceholders are rendered differently based on context:\n- **Inside HTML attributes** (e.g., `href=\"{{file.path}}\"` or `src=\"{{cover}}\"`): Returns raw string value\n- **In HTML body**: Renders as markdown if the value contains markdown syntax (like `[[links]]`)\n\n### Filter Chain Syntax\n\nFilters are chained using the pipe (`|`) operator:\n\n```\n{{date | date:\"YYYY-MM-DD\" | upper}}\n```\n\nFilter arguments can be:\n- **Simple values**: `date:\"YYYY-MM-DD\"`\n- **Multiple arguments**: `replace:\"old\":\"new\"` (comma-separated, or use quotes for strings with commas)\n- **Regex patterns**: `replace:\"/pattern/flags\":\"replace\"`\n\n## Contributing\n\nAny contributions and PRs are welcome! Feel free to open an issue or submit a pull request.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanuwup%2Fobsidian-custom-views","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fanuwup%2Fobsidian-custom-views","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanuwup%2Fobsidian-custom-views/lists"}