Loca Zone

What's New in Quartz 5

Properties1
aliaseschangelog, v5

3 min read

summary:

  • Quartz 5: rearchitected for extensibility, performance, Obsidian compatibility.
  • Upgrade path: Migrating to Quartz 5 from v4.

Plugin Ecosystem

distribution:

  • Standalone packages maintained in the quartz-community GitHub organization.
  • Installed via git:
npx quartz plugin add github:quartz-community/explorer

capabilities:

  • independent_versioning:
    • Update plugins without upgrading Quartz.
  • community_contributions:
    • Anyone can publish a Quartz plugin.
  • smaller_core:
    • Features move into 40+ official plugins.
  • registry:

YAML Configuration

migration:

  • From: quartz.config.ts
  • To: quartz.config.yaml
quartz.config.yaml
configuration:
  pageTitle: My Digital Garden
  enableSPA: true
  enablePopovers: true
  locale: en-US
  baseUrl: mysite.github.io
  theme:
    typography:
      header: Schibsted Grotesk
      body: Source Sans Pro
      code: IBM Plex Mono
plugins:
  - source: github:quartz-community/obsidian-flavored-markdown
    enabled: true
    order: 30
  - source: github:quartz-community/explorer
    enabled: true
    layout:
      position: left
      priority: 50

benefits:

  • No TypeScript required.
  • JSON Schema validation.
  • Per-plugin layouts.
  • npx quartz create templates:
    • default
    • obsidian
    • ttrpg
    • blog

overrides:

  • quartz.ts: programmatic control for callbacks and custom components.

Improved Obsidian Compatibility

scope:

features:

  • wikilinks:
    • Aliases.
    • Headings.
    • Block references.
    • Escaped pipes in tables.
  • callouts:
    • Built-in.
    • Collapsible.
    • Nested.
  • highlights:
    • ==highlighted text==
  • comments:
    • %%hidden comments%%
    • Inline and block.
  • tags:
    • #tag
    • #nested/tag
    • Tag pages.
  • custom_task_characters:
    • [?], [!], etc.
    • Preserved as data-task attributes.
  • mermaid:
    • Diagrams render with an expand button.
  • embeds:
    • YouTube/Tweet via image syntax.
    • Video/audio:
      • mp4
      • webm
      • ogv
      • mov
      • mkv
      • avi
      • flac
      • aac
      • etc.
  • block_references:
    • ^block-id
    • Broad character support.
  • canvas_files:
    • Interactive, pannable pages via the canvas-page plugin.
  • obsidian_uri_links:
    • Marked with CSS class for styling.
  • footnotes:
    • Via GitHub Flavored Markdown plugin.

Page Type System

model:

  • Plugins define page rendering.
  • Each page type can use a distinct page frame:
    • Three-column.
    • Full-width.
    • Minimal.
    • etc.

types:

  • content_pages:
    • Regular Markdown notes.
  • folder_pages:
    • Directory listings.
  • tag_pages:
    • Notes listed by tag.
  • canvas_pages:
    • Interactive JSON Canvas renderings.
  • bases_pages:
    • Database-style views.

Layout System

model:

  • Declarative layout.
  • Plugins declare:
    • position: left, right, beforeBody, afterBody
    • priority
plugins:
  - source: github:quartz-community/explorer
    layout:
      position: left
      priority: 50
  - source: github:quartz-community/graph
    layout:
      position: right
      priority: 10

features:

  • groups:
    • Combine components into flex rows/columns.
  • conditional_rendering:
    • Show/hide via condition: not-index or condition: has-tags.
  • display_modifiers:
    • display: mobile-only
    • display: desktop-only
  • per_page_type_overrides:
    • Separate layouts for content, folder, tag, and 404 pages.

Performance

optimizations:

  • parallel_processing:
    • Worker pool across all CPU cores for Markdown parsing.
  • incremental_rebuilds:
    • Watch mode re-processes changed files only.
  • prebuilt_plugins:
    • Community plugins ship compiled dist/ directories.
    • Build-from-source skipped.
  • spa_routing:
    • Client-side navigation via micromorph.
    • Instant page transitions.
  • cdn_cached_fonts:
    • Google Fonts with aggressive caching.
    • Self-hosted fonts via fontOrigin: local.

CLI Improvements

CommandDescription
npx quartz createInteractive setup wizard with templates
npx quartz build --serveBuild and serve with hot reload
npx quartz syncCommit and push to GitHub
npx quartz upgradePull latest Quartz updates
npx quartz plugin installInstall plugins from lockfile
npx quartz plugin add <source>Add a new plugin
npx quartz plugin listList installed plugins
npx quartz plugin pruneRemove unused plugins

features:

  • node_version_check:
    • Errors on Node < 22.
  • port_conflict_handling:
    • Reports port-in-use guidance.
  • plugin_lockfile:
    • quartz.lock.json pins versions.
  • concurrency_control:
    • --concurrency for memory-constrained environments.

Internationalization

localization:

  • Set locale: ja-JP or another locale in config.
  • Translates UI strings:
    • Search placeholders.
    • “Table of contents”.
    • Dates.
    • etc.

New Plugins

scope:

  • Plugins new to v5.
  • Not available in v4.
Showing 8 of 8 entries
PluginRepositoryDescription
BasesPagequartz-community/bases-pageRenders Obsidian Bases files as database-style views.
CanvasPagequartz-community/canvas-pageRenders JSON Canvas files as interactive, pannable pages.
EncryptedPagesquartz-community/encrypted-pagesPassword-protected encrypted pages with shadow content index.
NotePropertiesquartz-community/note-propertiesDisplays frontmatter properties in a collapsible panel.
ReaderModequartz-community/reader-modeDistraction-free reading mode toggle.
Spacerquartz-community/spacerFlexible spacer for layout groups.
StackedPagesquartz-community/stacked-pagesAndy Matuschak-style stacked sliding panes.
UnlistedPagesquartz-community/unlisted-pagesHides pages from navigation and indexes while still publishing them.

For Plugin Developers

reference:

  • Development model changed significantly.
  • Full guide: making plugins.

changes:

  • standalone_npm_packages:
    • Include package.json, tsconfig.json, build system.
  • factory_function_pattern:
    • Replaces class-based plugins.
    • Astro-inspired.
  • type_safety:
    • @quartz-community/types
    • No Quartz core dependency.
  • shared_utilities:
    • @quartz-community/utils
    • Path, DOM, language utilities.
  • runtime_utilities:
    • @quartz-community/runtime
    • Browser runtime utilities.
  • extensibility:
    • Plugins can ship:
      • Components.
      • Frames.
      • Stylesheets.
      • Client scripts.
  • template:

Graph View

Backlinks