mdxai
- Generate & Edit Markdown & MDX
mdxai generate 100 blog post titles about the future of work post-AGI
mdxdb
- Markdown/MDX Files as a Database
import { ai } from 'mdxai'
import { db } from 'mdxdb'
const count = 100
const topic = 'the future of work post-AGI'
const titles = await ai.list`${count} blog post titles about ${topic}`
for (const title of titles) {
const post = await ai`Write a blog post about ${title}`
await db.set(`blog/${title.replace(' ', '_')}`, post)
}
mdxld
- Linked Data for Markdown & MDX
MDXLD builds upon the foundations of Linked Data like (JSON-LD and YAML-LD) with ontologies like schema.org, to create a powerful integration between structured data and content.
---
$id: https://example.com
$type: https://schema.org/WebSite
title: Example Domain
description: This domain is for use in illustrative examples in documents
---
# Example Domain
This domain is for use in illustrative examples in documents. You may use this
domain in literature without prior coordination or asking for permission.
[More information...](https://www.iana.org/domains/example)
mdxe
- Build, Execute, Test, & Deploy Code in Markdown & MDX
MDXE is a zero-config CLI that allows you to build, execute, test, and deploy code in Markdown & MDX files. It uses MDX, ESBuild, ESLint, Next.js, React, Velite, and Vitest under the hood to rapidly develop apps and sites.
# Addition
Sometimes you need to `sum` two numbers:
```typescript
/**
* Returns the sum of two numbers.
* @param {number} a - The first number to add
* @param {number} b - The second number to add
* @returns {number} The sum of a and b
* @example
* sum(2, 3)
* // returns 5
*/
export function sum(a: number, b: number): number {
return a + b
}
```
and make sure it works:
```typescript
describe('sum', () => {
it('returns the sum of two positive numbers', () => {
expect(sum(2, 3)).toBe(5)
})
it('returns the sum of two negative numbers', () => {
expect(sum(-2, -3)).toBe(-5)
})
it('returns the sum when one number is zero', () => {
expect(sum(0, 4)).toBe(4)
expect(sum(7, 0)).toBe(7)
})
it('handles mixed positive and negative numbers', () => {
expect(sum(-2, 3)).toBe(1)
expect(sum(5, -8)).toBe(-3)
})
})
```
And you can execute the tests:
mdxe test
and run the app which uses:
mdxe dev
# next dev --turbopack --port 3000
# ▲ Next.js 15.3.0 (Turbopack)
# - Local: http://localhost:3000
# - Network: http://192.168.6.6:3000
# ✓ Starting...
# ✓ Ready in 1995ms
And you can develop and deploy entire projects with mdxe
:
// package.json
{
"scripts": {
"dev": "mdxe dev",
"build": "mdxe build",
"start": "mdxe start",
"test": "mdxe test",
"lint": "mdxe lint"
}
}
mdxui
- UI Component Library for MDX
All of the mdxui
components are available automatically in mdxe
<Hero
headline='Bring your ideas to life with MDX'
content='MDX combines unstructured content in Markdown, structured data in YAML, executable code, and UI components.'
/>
The components can also be used in any React/Next.js application:
// mdx-components.tsx
export { useMDXComponents } from 'mdxui'