Develop

Develop MDXLD applications locally with hot reload, type checking, and instant feedback.

Development Server

Start a local development server with mdxe dev:

mdxe dev

This starts a server at http://localhost:3000 with:

• Hot Module Replacement: Changes appear instantly
• Type Checking: Real-time TypeScript validation
• MDX Compilation: Automatic MDX to JSX conversion
• Error Overlay: Clear error messages in the browser

File Watching

The development server watches for changes in:

• .mdx files - MDX documents
• .ts / .tsx files - TypeScript/React components
• .css files - Stylesheets
• meta.json - Navigation configuration

Development Workflow

1. Create MDX Document

---
$type: BlogPost
$context: https://schema.org
title: My First Post
author: Jane Doe
datePublished: 2024-01-15
---

# My First Post

This is my first MDXLD blog post with semantic metadata.

2. View in Browser

The dev server automatically compiles and renders your MDX:

mdxe dev
# Opens http://localhost:3000

3. Edit and See Changes

Make changes to your MDX files and see them reflected instantly in the browser.

Configuration

Custom Port

mdxe dev --port 8080

Custom Host

mdxe dev --host 0.0.0.0

Disable Auto-Open

mdxe dev --no-open

TypeScript Integration

MDXLD provides full TypeScript support with type-safe props and discriminated unions:

import type { BlogPost, Article } from 'mdxld'

function renderContent(doc: BlogPost | Article) {
  switch (doc.$type) {
    case 'BlogPost':
      return <BlogPost {...doc} />
    case 'Article':
      return <Article {...doc} />
  }
}

AI-Assisted Development

Use mdxai to generate and edit documents during development:

# Generate new content
mdxai generate "Create a blog post about TypeScript"

# Edit existing content
mdxai edit blog-post.mdx "Make the tone more professional"

# Enrich with metadata
mdxai enrich blog-post.mdx --add-metadata --add-seo

Database Integration

Access your MDX files as a database during development:

import { list, search, get } from 'mdxdb'

// List all blog posts
const posts = await list({ type: 'BlogPost' })

// Search content
const results = await search('TypeScript')

// Get specific document
const post = await get('/blog/my-first-post')

Zero Configuration

mdxe requires no bundler configuration. It works out of the box with:

• MDX compilation
• TypeScript support
• React integration
• CSS modules
• Asset handling