astro-loader-obsidian is a content loader for Astro that lets you treat your Obsidian vault as a native content collection. Easily integrate your markdown notes, assets, and internal links into your Astro site with minimal setup.
- π Load entire Obsidian vaults as Astro content collections.
- π Resolves Obsidian-style links (
[[Note Title]]
) into proper Astro/HTML links. - πΌοΈ Image path resolution for local media files (including support for
![[image.png]]
embeds). - π Reads frontmatter from your notes and exposes publishing metadata (like
publish
,tags
,date
, etc). - β‘ Supports Astro's Content Collections API, including types and schema validation.
- π‘ Lightweight and fast β ideal for digital gardens, knowledge bases, blogs, and more.
- Personal knowledge bases
- Digital gardens
- Developer blogs
- Collaborative wikis
Check out astro-theme-spaceship
β a ready-to-use theme built specifically for publishing Obsidian vaults with Astro. It includes:
- Preconfigured
astro-loader-obsidian
integration - Clean, responsive layout
- Built-in support for tags, backlinks, and note metadata
- Dark mode, tree view, and more
npm i astro-loader-obsidian
- Setup your Astro config to include the loader:
// content.config.mjs
import { ObsidianDocumentSchema, ObsidianMdLoader } from "astro-loader-obsidian";
import { defineCollection } from 'astro:content';
export const collections = {
documents: defineCollection({
loader: ObsidianMdLoader({
base: 'src/content/vault',
url: 'docs',
}),
schema: ({ image }) => ObsidianDocumentSchema.extend({
image: image().optional(),
// or
cover: image().optional(),
}),
}),
};
- Use your documents as content in Astro components or pages:
import { getCollection } from 'astro:content';
const documents = await getCollection('documents');
- Linking between notes works automatically:
<a href={document.data.permalink}>Read: {note.data.title}</a>
Astro Loader respects frontmatter metadata in your Obsidian notes. You can use:
---
title: "My Note"
date: 2025-04-06
tags: [astro, obsidian]
publish: true
---
These fields will be accessible via the data
object in your content collections.
Obsidian-style links like [[Another Note]]
or ![[image.png]]
are automatically resolved to valid Astro URLs and <img>
elements, so your content just works without rewriting everything.
Check out [[My Other Note]] for more info.
![[image.png]]
<p>Check out <a href="/docs/my-other-note">My Other Note</a> for more info.</p>
<img src="/images/image.png" alt="image.png" />
Example vault structure:
vault/
βββ My Note.md
βββ My Other Note.md
βββ images/
β βββ image.png
Will be available in Astro as:
/docs/my-note
/docs/my-other-note
/images/image.png
You can extend the schema for your frontmatter using Zodβs extend
features:
// content.config.mjs
import { defineCollection, z } from 'astro:content';
export const collections = {
documents: defineCollection({
loader: ObsidianMdLoader({
base: 'src/content/vault',
url: 'docs',
}),
schema: ({ image }) => ObsidianDocumentSchema.extend({
image: image().optional(),
// or
cover: image().optional(),
myCustomProperty: z.string().optional(),
}),
}),
};
Option | Type | Description |
---|---|---|
pattern |
string |
Glob pattern to match files. Defaults to **/*.md |
assetsPattern |
string |
Glob pattern to match assets. Defaults to **/*.{svg,png,jpg,jpeg,avif,webp,gif,tiff,ico} |
base |
string |
Base directory to resolve the glob pattern from. Relative to the root directory, or an absolute file URL. Defaults to . |
url |
string |
Base URL where this content should be served. Defaults to collection name. Used for autogenerated permalink |
i18n |
boolean |
Enables i18n routing |
author |
string |
Default author |
Contributions welcome! Feel free to open issues or PRs for bugs, features, or docs improvements.
MIT License Β© aitorllj93