Building an XMD Parser in TypeScript

Have you ever wanted to create your own document format? In this post, I'll walk through how I built XMD (eXtensible Markdown), a custom document format for my portfolio site.

What is XMD?

XMD is a markdown-like format that adds structured metadata and enhanced content blocks. It's designed to be:

• Simple to parse
• Type-safe with TypeScript
• Extensible for custom blocks
• Compatible with modern React components

The Building Blocks

Let's start with the core types that define our format:

01export type XMDMetadata = {
02  title: string
03  description: string
04  date: string
05  tags?: string[]
06  image?: string
07  featured?: boolean
08}
09
10export type XMDBlock = {
11  type: 'paragraph' | 'heading' | 'code' | 'quote'
12  content: string
13  level?: number // For headings
14  language?: string // For code blocks
15}

Parsing Strategy

The parser works in two main phases:

1. Parse metadata between <code>---</code> markers
2. Parse content blocks line by line

Here's a simple example:

01function parseXMD(content: string) {
02  const lines = content.split('\n')
03  // Parse metadata...
04  // Parse blocks...
05  return { metadata, blocks }
06}

Using with React

The XMD format really shines when paired with React components:

01function XMDRenderer({ blocks }) {
02  return (
03    <article>
04      {blocks.map(block => {
05        switch (block.type) {
06          case 'heading':
07            return <h1>{block.content}</h1>
08          // Handle other blocks...
09        }
10      })}
11    </article>
12  )
13}

Why Not Just Use Markdown?

While Markdown is great, sometimes you need more structure and type safety.

XMD provides that while staying simple and extensible.

Key Features

1. First-class TypeScript support
2. Structured metadata
3. Custom block types
4. React component mapping

What's Next?

I'm planning to add more features to XMD:

• Nested blocks
• Custom components
• Better error handling
• Performance optimizations

Stay tuned for more updates!