A React component library that converts markdown files into rendered blog posts for @san-siva/blogkit.
blogkit-md exposes a BlogPost server component you can drop into any Next.js project.
npm install @san-siva/blogkit-mdimport { BlogPost } from '@san-siva/blogkit-md';
export default function Page() {
return (
<BlogPost
filePath="content/my-post.md"
jsonLd={{
'@context': 'https://schema.org',
'@type': 'BlogPosting',
headline: 'My Post',
description: 'Post description',
datePublished: '2026-01-01',
author: { '@type': 'Person', name: 'Your Name' },
}}
/>
);
}filePathstringPath to the markdown file. Relative paths are resolved from process.cwd().
jsonLdWithContext<Thing>Optional JSON-LD schema passed to <Blog> for structured data / SEO.
Set the page title and description via a YAML frontmatter block at the top of your markdown file:
---
title: My Post Title
description: A short description shown below the title
---titleRenders as the BlogHeader page title
descriptionRenders as the BlogHeader description
--- YAML block — sets title, description
# H1 ## H2 — top-level section
### H3 — nested section
#### H4 ##### H5 ###### H6
**bold**_italic_`code`[text](url)1. item- item- [ ] item / - [x] item
| col | col | — headers and rows only
```lang```mermaid---> text or > [!TYPE] — renders as callout
If you're looking for a strictly standard, 1:1 markdown renderer, blogkit-md might not be what you expect.
Instead of building just another plain document viewer, intentional design liberties have been taken to render markdown as beautiful, engaging blog posts.
Documentation shouldn't be a wall of boring text. The goal of this tool is to make reading technical docs, articles, and guides an exciting and visually pleasing experience.
The markdown file is parsed into an AST using remark-parse + remark-gfm, then transformed into React components from @san-siva/blogkit.
flowchart LR
A[Markdown file] --> B[Parse AST]
B --> C[Group sections]
C --> D[Render to React]
D --> E[Blog page]In blogkit-md, headings aren't just for changing font sizes — they are the architectural blueprint for your post.
# H1 & ## H2
Top-level section. Creates a new BlogSection.
### H3Subsection. Nests within the active H1/H2 section. Promoted to top-level if none exists.
#### H4 ##### H5 ###### H6
Bold line. Rendered as styled text inside the current section — no layout effect.
Standard content — paragraphs, lists, code blocks — flows into the most recently opened section or subsection.
The layout is determined entirely by heading level (depth):
### H3 after ## H2), it creates a nested subsection inside the current section.## H2 after another ## H2), it closes the current section and starts a new one at the appropriate level.Here is how a standard markdown document maps to blog layout:
Intro content
## The Setup
Some content goes here.
### Prerequisites
Nested content belongs here.
## The Execution
Some more content.
### The Results
Result content.
# A Note
### A Subsection
## Also NestedHere is how the parser breaks the above document down into isolated React components:
Intro section
Intro contentSection 1
## The Setup
Some content goes here.
### Prerequisites
Nested content belongs here.Section 2
## The Execution
Some more content.
### The Results
Result content.Section 3
# A Note
### A Subsection
## Also Nested## Also Nested does not start a new top-level section. Because it appears after a ### H3 inside an # H1, the parser backtracks to the H1 and nests the H2 beneath it.
Blockquotes are rendered as styled callout banners. Plain blockquotes render as info callouts. Use GitHub-style alert syntax to control the type:
[!NOTE][!TIP][!IMPORTANT][!WARNING][!CAUTION]> [!WARNING]
>
> Do not clone this repository into system folders.The [!TYPE] line is stripped from the rendered output.
blogkit-md is just one piece of the puzzle. If you want to customize the underlying React components, tweak the UI, or take full control over your blog's layout, dive into the official Blogkit documentation.
blogkit-md is open source software licensed under the MIT license.
Contributions are welcome!
A React component library that converts markdown files into rendered blog posts for @san-siva/blogkit.
blogkit-md exposes a BlogPost server component you can drop into any Next.js project.
npm install @san-siva/blogkit-mdimport { BlogPost } from '@san-siva/blogkit-md';
export default function Page() {
return (
<BlogPost
filePath="content/my-post.md"
jsonLd={{
'@context': 'https://schema.org',
'@type': 'BlogPosting',
headline: 'My Post',
description: 'Post description',
datePublished: '2026-01-01',
author: { '@type': 'Person', name: 'Your Name' },
}}
/>
);
}filePathstringPath to the markdown file. Relative paths are resolved from process.cwd().
jsonLdWithContext<Thing>Optional JSON-LD schema passed to <Blog> for structured data / SEO.
Set the page title and description via a YAML frontmatter block at the top of your markdown file:
---
title: My Post Title
description: A short description shown below the title
---titleRenders as the BlogHeader page title
descriptionRenders as the BlogHeader description
--- YAML block — sets title, description
# H1 ## H2 — top-level section
### H3 — nested section
#### H4 ##### H5 ###### H6
**bold**_italic_`code`[text](url)1. item- item- [ ] item / - [x] item
| col | col | — headers and rows only
```lang```mermaid---> text or > [!TYPE] — renders as callout
If you're looking for a strictly standard, 1:1 markdown renderer, blogkit-md might not be what you expect.
Instead of building just another plain document viewer, intentional design liberties have been taken to render markdown as beautiful, engaging blog posts.
Documentation shouldn't be a wall of boring text. The goal of this tool is to make reading technical docs, articles, and guides an exciting and visually pleasing experience.
The markdown file is parsed into an AST using remark-parse + remark-gfm, then transformed into React components from @san-siva/blogkit.
flowchart LR
A[Markdown file] --> B[Parse AST]
B --> C[Group sections]
C --> D[Render to React]
D --> E[Blog page]In blogkit-md, headings aren't just for changing font sizes — they are the architectural blueprint for your post.
# H1 & ## H2
Top-level section. Creates a new BlogSection.
### H3Subsection. Nests within the active H1/H2 section. Promoted to top-level if none exists.
#### H4 ##### H5 ###### H6
Bold line. Rendered as styled text inside the current section — no layout effect.
Standard content — paragraphs, lists, code blocks — flows into the most recently opened section or subsection.
The layout is determined entirely by heading level (depth):
### H3 after ## H2), it creates a nested subsection inside the current section.## H2 after another ## H2), it closes the current section and starts a new one at the appropriate level.Here is how a standard markdown document maps to blog layout:
Intro content
## The Setup
Some content goes here.
### Prerequisites
Nested content belongs here.
## The Execution
Some more content.
### The Results
Result content.
# A Note
### A Subsection
## Also NestedHere is how the parser breaks the above document down into isolated React components:
Intro section
Intro contentSection 1
## The Setup
Some content goes here.
### Prerequisites
Nested content belongs here.Section 2
## The Execution
Some more content.
### The Results
Result content.Section 3
# A Note
### A Subsection
## Also Nested## Also Nested does not start a new top-level section. Because it appears after a ### H3 inside an # H1, the parser backtracks to the H1 and nests the H2 beneath it.
Blockquotes are rendered as styled callout banners. Plain blockquotes render as info callouts. Use GitHub-style alert syntax to control the type:
[!NOTE][!TIP][!IMPORTANT][!WARNING][!CAUTION]> [!WARNING]
>
> Do not clone this repository into system folders.The [!TYPE] line is stripped from the rendered output.
blogkit-md is just one piece of the puzzle. If you want to customize the underlying React components, tweak the UI, or take full control over your blog's layout, dive into the official Blogkit documentation.
blogkit-md is open source software licensed under the MIT license.
Contributions are welcome!
blogkit-md exposes a BlogPost server component you can drop into any Next.js project.
1npm install @san-siva/blogkit-mdimport { BlogPost } from '@san-siva/blogkit-md';
export default function Page() {
return (
<BlogPost
filePath="content/my-post.md"
jsonLd={{
'@context': 'https://schema.org',
'@type': 'BlogPosting',
headline: 'My Post',
description: 'Post description',
datePublished: '2026-01-01',
author: { '@type': 'Person', name: 'Your Name' },
}}
/>
);
}filePathstringPath to the markdown file. Relative paths are resolved from process.cwd().
jsonLdWithContext<Thing>Optional JSON-LD schema passed to <Blog> for structured data / SEO.
Set the page title and description via a YAML frontmatter block at the top of your markdown file:
---
title: My Post Title
description: A short description shown below the title
---titleRenders as the BlogHeader page title
descriptionRenders as the BlogHeader description
1npm install @san-siva/blogkit-md1npm install @san-siva/blogkit-mdimport { BlogPost } from '@san-siva/blogkit-md';
export default function Page() {
return (
<BlogPost
filePath="content/my-post.md"
jsonLd={{
'@context': 'https://schema.org',
'@type': 'BlogPosting',
headline: 'My Post',
description: 'Post description',
datePublished: '2026-01-01',
author: { '@type': 'Person', name: 'Your Name' },
}}
/>
);
}1import { BlogPost } from '@san-siva/blogkit-md';
2
3export default function Page() {
4 return (
5 <BlogPost
6 filePath="content/my-post.md"
7 jsonLd={{
8 '@context': 'https://schema.org',
9 '@type': 'BlogPosting',
10 headline: 'My Post',
11 description: 'Post description',
12 datePublished: '2026-01-01',
13 author: { '@type': 'Person', name: 'Your Name' },
14 }}
15 />
16 );
17}filePathstringPath to the markdown file. Relative paths are resolved from process.cwd().
jsonLdWithContext<Thing>Optional JSON-LD schema passed to <Blog> for structured data / SEO.
filePathstringPath to the markdown file. Relative paths are resolved from process.cwd().
jsonLdWithContext<Thing>Optional JSON-LD schema passed to <Blog> for structured data / SEO.
Set the page title and description via a YAML frontmatter block at the top of your markdown file:
1---
2title: My Post Title
3description: A short description shown below the title
4---titleRenders as the BlogHeader page title
descriptionRenders as the BlogHeader description
1---
2title: My Post Title
3description: A short description shown below the title
4---titleRenders as the BlogHeader page title
descriptionRenders as the BlogHeader description
--- YAML block — sets title, description
# H1 ## H2 — top-level section
### H3 — nested section
#### H4 ##### H5 ###### H6
**bold**_italic_`code`[text](url)1. item- item- [ ] item / - [x] item
| col | col | — headers and rows only
```lang```mermaid---> text or > [!TYPE] — renders as callout
--- YAML block — sets title, description
# H1 ## H2 — top-level section
### H3 — nested section
#### H4 ##### H5 ###### H6
**bold**_italic_`code`[text](url)1. item- item- [ ] item / - [x] item
| col | col | — headers and rows only
```lang```mermaid---> text or > [!TYPE] — renders as callout
If you're looking for a strictly standard, 1:1 markdown renderer, blogkit-md might not be what you expect.
Instead of building just another plain document viewer, intentional design liberties have been taken to render markdown as beautiful, engaging blog posts.
Documentation shouldn't be a wall of boring text. The goal of this tool is to make reading technical docs, articles, and guides an exciting and visually pleasing experience.
If you're looking for a strictly standard, 1:1 markdown renderer, blogkit-md might not be what you expect.
Instead of building just another plain document viewer, intentional design liberties have been taken to render markdown as beautiful, engaging blog posts.
Documentation shouldn't be a wall of boring text. The goal of this tool is to make reading technical docs, articles, and guides an exciting and visually pleasing experience.
The markdown file is parsed into an AST using remark-parse + remark-gfm, then transformed into React components from @san-siva/blogkit.
Rendering diagram...
Rendering diagram...
In blogkit-md, headings aren't just for changing font sizes — they are the architectural blueprint for your post.
# H1 & ## H2
Top-level section. Creates a new BlogSection.
### H3Subsection. Nests within the active H1/H2 section. Promoted to top-level if none exists.
#### H4 ##### H5 ###### H6
Bold line. Rendered as styled text inside the current section — no layout effect.
Standard content — paragraphs, lists, code blocks — flows into the most recently opened section or subsection.
The layout is determined entirely by heading level (depth):
### H3 after ## H2), it creates a nested subsection inside the current section.## H2 after another ## H2), it closes the current section and starts a new one at the appropriate level.Here is how a standard markdown document maps to blog layout:
Intro content
## The Setup
Some content goes here.
### Prerequisites
Nested content belongs here.
## The Execution
Some more content.
### The Results
Result content.
# A Note
### A Subsection
## Also NestedHere is how the parser breaks the above document down into isolated React components:
Intro section
Intro contentSection 1
## The Setup
Some content goes here.
### Prerequisites
Nested content belongs here.Section 2
## The Execution
Some more content.
### The Results
Result content.Section 3
# A Note
### A Subsection
## Also Nested## Also Nested does not start a new top-level section. Because it appears after a ### H3 inside an # H1, the parser backtracks to the H1 and nests the H2 beneath it.
Blockquotes are rendered as styled callout banners. Plain blockquotes render as info callouts. Use GitHub-style alert syntax to control the type:
[!NOTE][!TIP][!IMPORTANT][!WARNING][!CAUTION]> [!WARNING]
>
> Do not clone this repository into system folders.The [!TYPE] line is stripped from the rendered output.
In blogkit-md, headings aren't just for changing font sizes — they are the architectural blueprint for your post.
# H1 & ## H2
Top-level section. Creates a new BlogSection.
### H3Subsection. Nests within the active H1/H2 section. Promoted to top-level if none exists.
#### H4 ##### H5 ###### H6
Bold line. Rendered as styled text inside the current section — no layout effect.
Standard content — paragraphs, lists, code blocks — flows into the most recently opened section or subsection.
# H1 & ## H2
Top-level section. Creates a new BlogSection.
### H3Subsection. Nests within the active H1/H2 section. Promoted to top-level if none exists.
#### H4 ##### H5 ###### H6
Bold line. Rendered as styled text inside the current section — no layout effect.
The layout is determined entirely by heading level (depth):
### H3 after ## H2), it creates a nested subsection inside the current section.## H2 after another ## H2), it closes the current section and starts a new one at the appropriate level.Here is how a standard markdown document maps to blog layout:
1Intro content
2
3## The Setup
4
5Some content goes here.
6
7### Prerequisites
8
9Nested content belongs here.
10
11## The Execution
12
13Some more content.
14
15### The Results
16
17Result content.
18
19# A Note
20
21### A Subsection
22
23## Also NestedHere is how the parser breaks the above document down into isolated React components:
Intro section
Intro contentSection 1
## The Setup
Some content goes here.
### Prerequisites
Nested content belongs here.Section 2
## The Execution
Some more content.
### The Results
Result content.Section 3
# A Note
### A Subsection
## Also Nested## Also Nested does not start a new top-level section. Because it appears after a ### H3 inside an # H1, the parser backtracks to the H1 and nests the H2 beneath it.
1Intro content
2
3## The Setup
4
5Some content goes here.
6
7### Prerequisites
8
9Nested content belongs here.
10
11## The Execution
12
13Some more content.
14
15### The Results
16
17Result content.
18
19# A Note
20
21### A Subsection
22
23## Also Nested1Intro content1## The Setup
2
3Some content goes here.
4
5### Prerequisites
6
7Nested content belongs here.1## The Execution
2
3Some more content.
4
5### The Results
6
7Result content.1# A Note
2
3### A Subsection
4
5## Also NestedBlockquotes are rendered as styled callout banners. Plain blockquotes render as info callouts. Use GitHub-style alert syntax to control the type:
[!NOTE][!TIP][!IMPORTANT][!WARNING][!CAUTION]1> [!WARNING]
2>
3> Do not clone this repository into system folders.The [!TYPE] line is stripped from the rendered output.
[!NOTE][!TIP][!IMPORTANT][!WARNING][!CAUTION]1> [!WARNING]
2>
3> Do not clone this repository into system folders.blogkit-md is just one piece of the puzzle. If you want to customize the underlying React components, tweak the UI, or take full control over your blog's layout, dive into the official Blogkit documentation.
blogkit-md is open source software licensed under the MIT license.
Contributions are welcome!
blogkit-md is open source software licensed under the MIT license.
Contributions are welcome!
blogkit-md exposes a BlogPost server component you can drop into any Next.js project.
1npm install @san-siva/blogkit-mdimport { BlogPost } from '@san-siva/blogkit-md';
export default function Page() {
return (
<BlogPost
filePath="content/my-post.md"
jsonLd={{
'@context': 'https://schema.org',
'@type': 'BlogPosting',
headline: 'My Post',
description: 'Post description',
datePublished: '2026-01-01',
author: { '@type': 'Person', name: 'Your Name' },
}}
/>
);
}filePathstringPath to the markdown file. Relative paths are resolved from process.cwd().
jsonLdWithContext<Thing>Optional JSON-LD schema passed to <Blog> for structured data / SEO.
Set the page title and description via a YAML frontmatter block at the top of your markdown file:
---
title: My Post Title
description: A short description shown below the title
---titleRenders as the BlogHeader page title
descriptionRenders as the BlogHeader description
1npm install @san-siva/blogkit-md1npm install @san-siva/blogkit-mdimport { BlogPost } from '@san-siva/blogkit-md';
export default function Page() {
return (
<BlogPost
filePath="content/my-post.md"
jsonLd={{
'@context': 'https://schema.org',
'@type': 'BlogPosting',
headline: 'My Post',
description: 'Post description',
datePublished: '2026-01-01',
author: { '@type': 'Person', name: 'Your Name' },
}}
/>
);
}1import { BlogPost } from '@san-siva/blogkit-md';
2
3export default function Page() {
4 return (
5 <BlogPost
6 filePath="content/my-post.md"
7 jsonLd={{
8 '@context': 'https://schema.org',
9 '@type': 'BlogPosting',
10 headline: 'My Post',
11 description: 'Post description',
12 datePublished: '2026-01-01',
13 author: { '@type': 'Person', name: 'Your Name' },
14 }}
15 />
16 );
17}filePathstringPath to the markdown file. Relative paths are resolved from process.cwd().
jsonLdWithContext<Thing>Optional JSON-LD schema passed to <Blog> for structured data / SEO.
filePathstringPath to the markdown file. Relative paths are resolved from process.cwd().
jsonLdWithContext<Thing>Optional JSON-LD schema passed to <Blog> for structured data / SEO.
Set the page title and description via a YAML frontmatter block at the top of your markdown file:
1---
2title: My Post Title
3description: A short description shown below the title
4---titleRenders as the BlogHeader page title
descriptionRenders as the BlogHeader description
1---
2title: My Post Title
3description: A short description shown below the title
4---titleRenders as the BlogHeader page title
descriptionRenders as the BlogHeader description
--- YAML block — sets title, description
# H1 ## H2 — top-level section
### H3 — nested section
#### H4 ##### H5 ###### H6
**bold**_italic_`code`[text](url)1. item- item- [ ] item / - [x] item
| col | col | — headers and rows only
```lang```mermaid---> text or > [!TYPE] — renders as callout
--- YAML block — sets title, description
# H1 ## H2 — top-level section
### H3 — nested section
#### H4 ##### H5 ###### H6
**bold**_italic_`code`[text](url)1. item- item- [ ] item / - [x] item
| col | col | — headers and rows only
```lang```mermaid---> text or > [!TYPE] — renders as callout
If you're looking for a strictly standard, 1:1 markdown renderer, blogkit-md might not be what you expect.
Instead of building just another plain document viewer, intentional design liberties have been taken to render markdown as beautiful, engaging blog posts.
Documentation shouldn't be a wall of boring text. The goal of this tool is to make reading technical docs, articles, and guides an exciting and visually pleasing experience.
If you're looking for a strictly standard, 1:1 markdown renderer, blogkit-md might not be what you expect.
Instead of building just another plain document viewer, intentional design liberties have been taken to render markdown as beautiful, engaging blog posts.
Documentation shouldn't be a wall of boring text. The goal of this tool is to make reading technical docs, articles, and guides an exciting and visually pleasing experience.
The markdown file is parsed into an AST using remark-parse + remark-gfm, then transformed into React components from @san-siva/blogkit.
Rendering diagram...
Rendering diagram...
In blogkit-md, headings aren't just for changing font sizes — they are the architectural blueprint for your post.
# H1 & ## H2
Top-level section. Creates a new BlogSection.
### H3Subsection. Nests within the active H1/H2 section. Promoted to top-level if none exists.
#### H4 ##### H5 ###### H6
Bold line. Rendered as styled text inside the current section — no layout effect.
Standard content — paragraphs, lists, code blocks — flows into the most recently opened section or subsection.
The layout is determined entirely by heading level (depth):
### H3 after ## H2), it creates a nested subsection inside the current section.## H2 after another ## H2), it closes the current section and starts a new one at the appropriate level.Here is how a standard markdown document maps to blog layout:
Intro content
## The Setup
Some content goes here.
### Prerequisites
Nested content belongs here.
## The Execution
Some more content.
### The Results
Result content.
# A Note
### A Subsection
## Also NestedHere is how the parser breaks the above document down into isolated React components:
Intro section
Intro contentSection 1
## The Setup
Some content goes here.
### Prerequisites
Nested content belongs here.Section 2
## The Execution
Some more content.
### The Results
Result content.Section 3
# A Note
### A Subsection
## Also Nested## Also Nested does not start a new top-level section. Because it appears after a ### H3 inside an # H1, the parser backtracks to the H1 and nests the H2 beneath it.
Blockquotes are rendered as styled callout banners. Plain blockquotes render as info callouts. Use GitHub-style alert syntax to control the type:
[!NOTE][!TIP][!IMPORTANT][!WARNING][!CAUTION]> [!WARNING]
>
> Do not clone this repository into system folders.The [!TYPE] line is stripped from the rendered output.
In blogkit-md, headings aren't just for changing font sizes — they are the architectural blueprint for your post.
# H1 & ## H2
Top-level section. Creates a new BlogSection.
### H3Subsection. Nests within the active H1/H2 section. Promoted to top-level if none exists.
#### H4 ##### H5 ###### H6
Bold line. Rendered as styled text inside the current section — no layout effect.
Standard content — paragraphs, lists, code blocks — flows into the most recently opened section or subsection.
# H1 & ## H2
Top-level section. Creates a new BlogSection.
### H3Subsection. Nests within the active H1/H2 section. Promoted to top-level if none exists.
#### H4 ##### H5 ###### H6
Bold line. Rendered as styled text inside the current section — no layout effect.
The layout is determined entirely by heading level (depth):
### H3 after ## H2), it creates a nested subsection inside the current section.## H2 after another ## H2), it closes the current section and starts a new one at the appropriate level.Here is how a standard markdown document maps to blog layout:
1Intro content
2
3## The Setup
4
5Some content goes here.
6
7### Prerequisites
8
9Nested content belongs here.
10
11## The Execution
12
13Some more content.
14
15### The Results
16
17Result content.
18
19# A Note
20
21### A Subsection
22
23## Also NestedHere is how the parser breaks the above document down into isolated React components:
Intro section
Intro contentSection 1
## The Setup
Some content goes here.
### Prerequisites
Nested content belongs here.Section 2
## The Execution
Some more content.
### The Results
Result content.Section 3
# A Note
### A Subsection
## Also Nested## Also Nested does not start a new top-level section. Because it appears after a ### H3 inside an # H1, the parser backtracks to the H1 and nests the H2 beneath it.
1Intro content
2
3## The Setup
4
5Some content goes here.
6
7### Prerequisites
8
9Nested content belongs here.
10
11## The Execution
12
13Some more content.
14
15### The Results
16
17Result content.
18
19# A Note
20
21### A Subsection
22
23## Also Nested1Intro content1## The Setup
2
3Some content goes here.
4
5### Prerequisites
6
7Nested content belongs here.1## The Execution
2
3Some more content.
4
5### The Results
6
7Result content.1# A Note
2
3### A Subsection
4
5## Also NestedBlockquotes are rendered as styled callout banners. Plain blockquotes render as info callouts. Use GitHub-style alert syntax to control the type:
[!NOTE][!TIP][!IMPORTANT][!WARNING][!CAUTION]1> [!WARNING]
2>
3> Do not clone this repository into system folders.The [!TYPE] line is stripped from the rendered output.
[!NOTE][!TIP][!IMPORTANT][!WARNING][!CAUTION]1> [!WARNING]
2>
3> Do not clone this repository into system folders.blogkit-md is just one piece of the puzzle. If you want to customize the underlying React components, tweak the UI, or take full control over your blog's layout, dive into the official Blogkit documentation.
blogkit-md is open source software licensed under the MIT license.
Contributions are welcome!
blogkit-md is open source software licensed under the MIT license.
Contributions are welcome!
1import { BlogPost } from '@san-siva/blogkit-md';
2
3export default function Page() {
4 return (
5 <BlogPost
6 filePath="content/my-post.md"
7 jsonLd={{
8 '@context': 'https://schema.org',
9 '@type': 'BlogPosting',
10 headline: 'My Post',
11 description: 'Post description',
12 datePublished: '2026-01-01',
13 author: { '@type': 'Person', name: 'Your Name' },
14 }}
15 />
16 );
17}Set the page title and description via a YAML frontmatter block at the top of your markdown file:
1---
2title: My Post Title
3description: A short description shown below the title
4---titleRenders as the BlogHeader page title
descriptionRenders as the BlogHeader description
1---
2title: My Post Title
3description: A short description shown below the title
4---titleRenders as the BlogHeader page title
descriptionRenders as the BlogHeader description
1import { BlogPost } from '@san-siva/blogkit-md';
2
3export default function Page() {
4 return (
5 <BlogPost
6 filePath="content/my-post.md"
7 jsonLd={{
8 '@context': 'https://schema.org',
9 '@type': 'BlogPosting',
10 headline: 'My Post',
11 description: 'Post description',
12 datePublished: '2026-01-01',
13 author: { '@type': 'Person', name: 'Your Name' },
14 }}
15 />
16 );
17}# H1 & ## H2
Top-level section. Creates a new BlogSection.
### H3Subsection. Nests within the active H1/H2 section. Promoted to top-level if none exists.
#### H4 ##### H5 ###### H6
Bold line. Rendered as styled text inside the current section — no layout effect.
Here is how a standard markdown document maps to blog layout:
1Intro content
2
3## The Setup
4
5Some content goes here.
6
7### Prerequisites
8
9Nested content belongs here.
10
11## The Execution
12
13Some more content.
14
15### The Results
16
17Result content.
18
19# A Note
20
21### A Subsection
22
23## Also NestedHere is how the parser breaks the above document down into isolated React components:
Intro section
Intro contentSection 1
## The Setup
Some content goes here.
### Prerequisites
Nested content belongs here.Section 2
## The Execution
Some more content.
### The Results
Result content.Section 3
# A Note
### A Subsection
## Also Nested## Also Nested does not start a new top-level section. Because it appears after a ### H3 inside an # H1, the parser backtracks to the H1 and nests the H2 beneath it.
1Intro content
2
3## The Setup
4
5Some content goes here.
6
7### Prerequisites
8
9Nested content belongs here.
10
11## The Execution
12
13Some more content.
14
15### The Results
16
17Result content.
18
19# A Note
20
21### A Subsection
22
23## Also Nested1Intro content1## The Setup
2
3Some content goes here.
4
5### Prerequisites
6
7Nested content belongs here.1## The Execution
2
3Some more content.
4
5### The Results
6
7Result content.1# A Note
2
3### A Subsection
4
5## Also NestedBlockquotes are rendered as styled callout banners. Plain blockquotes render as info callouts. Use GitHub-style alert syntax to control the type:
[!NOTE][!TIP][!IMPORTANT][!WARNING][!CAUTION]1> [!WARNING]
2>
3> Do not clone this repository into system folders.The [!TYPE] line is stripped from the rendered output.
[!NOTE][!TIP][!IMPORTANT][!WARNING][!CAUTION]1> [!WARNING]
2>
3> Do not clone this repository into system folders.1Intro content1## The Setup
2
3Some content goes here.
4
5### Prerequisites
6
7Nested content belongs here.1## The Execution
2
3Some more content.
4
5### The Results
6
7Result content.1# A Note
2
3### A Subsection
4
5## Also Nested1import { BlogPost } from '@san-siva/blogkit-md';
2
3export default function Page() {
4 return (
5 <BlogPost
6 filePath="content/my-post.md"
7 jsonLd={{
8 '@context': 'https://schema.org',
9 '@type': 'BlogPosting',
10 headline: 'My Post',
11 description: 'Post description',
12 datePublished: '2026-01-01',
13 author: { '@type': 'Person', name: 'Your Name' },
14 }}
15 />
16 );
17}Set the page title and description via a YAML frontmatter block at the top of your markdown file:
1---
2title: My Post Title
3description: A short description shown below the title
4---titleRenders as the BlogHeader page title
descriptionRenders as the BlogHeader description
1---
2title: My Post Title
3description: A short description shown below the title
4---titleRenders as the BlogHeader page title
descriptionRenders as the BlogHeader description
1import { BlogPost } from '@san-siva/blogkit-md';
2
3export default function Page() {
4 return (
5 <BlogPost
6 filePath="content/my-post.md"
7 jsonLd={{
8 '@context': 'https://schema.org',
9 '@type': 'BlogPosting',
10 headline: 'My Post',
11 description: 'Post description',
12 datePublished: '2026-01-01',
13 author: { '@type': 'Person', name: 'Your Name' },
14 }}
15 />
16 );
17}# H1 & ## H2
Top-level section. Creates a new BlogSection.
### H3Subsection. Nests within the active H1/H2 section. Promoted to top-level if none exists.
#### H4 ##### H5 ###### H6
Bold line. Rendered as styled text inside the current section — no layout effect.
Here is how a standard markdown document maps to blog layout:
1Intro content
2
3## The Setup
4
5Some content goes here.
6
7### Prerequisites
8
9Nested content belongs here.
10
11## The Execution
12
13Some more content.
14
15### The Results
16
17Result content.
18
19# A Note
20
21### A Subsection
22
23## Also NestedHere is how the parser breaks the above document down into isolated React components:
Intro section
Intro contentSection 1
## The Setup
Some content goes here.
### Prerequisites
Nested content belongs here.Section 2
## The Execution
Some more content.
### The Results
Result content.Section 3
# A Note
### A Subsection
## Also Nested## Also Nested does not start a new top-level section. Because it appears after a ### H3 inside an # H1, the parser backtracks to the H1 and nests the H2 beneath it.
1Intro content
2
3## The Setup
4
5Some content goes here.
6
7### Prerequisites
8
9Nested content belongs here.
10
11## The Execution
12
13Some more content.
14
15### The Results
16
17Result content.
18
19# A Note
20
21### A Subsection
22
23## Also Nested1Intro content1## The Setup
2
3Some content goes here.
4
5### Prerequisites
6
7Nested content belongs here.1## The Execution
2
3Some more content.
4
5### The Results
6
7Result content.1# A Note
2
3### A Subsection
4
5## Also NestedBlockquotes are rendered as styled callout banners. Plain blockquotes render as info callouts. Use GitHub-style alert syntax to control the type:
[!NOTE][!TIP][!IMPORTANT][!WARNING][!CAUTION]1> [!WARNING]
2>
3> Do not clone this repository into system folders.The [!TYPE] line is stripped from the rendered output.
[!NOTE][!TIP][!IMPORTANT][!WARNING][!CAUTION]1> [!WARNING]
2>
3> Do not clone this repository into system folders.1Intro content1## The Setup
2
3Some content goes here.
4
5### Prerequisites
6
7Nested content belongs here.1## The Execution
2
3Some more content.
4
5### The Results
6
7Result content.1# A Note
2
3### A Subsection
4
5## Also Nested1Intro content1## The Setup
2
3Some content goes here.
4
5### Prerequisites
6
7Nested content belongs here.1## The Execution
2
3Some more content.
4
5### The Results
6
7Result content.1# A Note
2
3### A Subsection
4
5## Also Nested1Intro content1## The Setup
2
3Some content goes here.
4
5### Prerequisites
6
7Nested content belongs here.1## The Execution
2
3Some more content.
4
5### The Results
6
7Result content.1# A Note
2
3### A Subsection
4
5## Also Nested