Quick start

Quick start

This page builds the smallest useful Custom View: notes with a type: movie property render with a simple card instead of default Markdown.

1. Create a matching note

Create a note with frontmatter like this:

---
type: movie
year: 2025
rating: 8.5
genres:
  - Drama
  - Thriller
cover:
  - cover.jpg
---

Your note body goes here.

Custom Views can read both file data and frontmatter properties. For example, {{file.basename}} reads the note name and {{year}} reads the year property.

2. Add a view

Open Settings → Custom Views and select Add new view.

Use a clear name, for example:

Movie Card

3. Add a rule

Add one rule that matches the note:

Field	Operator	Value
type	is	movie

The first enabled view whose rules match the active file is the one that renders. If two views match the same note, reorder them so the more specific view appears first.

4. Add HTML

Paste this into the view's HTML template field:

<article class="movie-card">
  <img class="movie-cover" src="{{cover[0]}}" alt="{{file.basename}}" />
  <div>
    <h1>{{file.basename}}</h1>
    <p>{{year}} · {{genres|join:", "}}</p>
    <p>Rating: {{rating}}/10</p>
    <div class="movie-body">{{file.content}}</div>
  </div>
</article>

5. Add CSS

Paste this into the view's CSS field:

.movie-card {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 20px;
  align-items: start;
  max-width: 760px;
  margin: 0 auto;
}

.movie-cover {
  width: 100%;
  border-radius: 8px;
}

.movie-card h1 {
  margin-top: 0;
}

6. Test the view

Open the note in reading mode. If Work in live preview is enabled, also try live preview.

If the page is blank, open Troubleshooting and check the sections for matching rules, JavaScript errors, and template errors.

Next steps

• Add logic with Template logic.
• Transform values with Filters and functions.
• Query related files with Bases in Custom Views.
• Study full examples in Movie view tutorial and Album view tutorial.

Wiki pages

• Home
• Quick start
• Settings and view rules
• Template syntax
• Template logic
• Filters and functions
• Bases in Custom Views
• CSS and JavaScript
• Movie view tutorial
• Album view tutorial
• Troubleshooting