Markdown & MDX

EmberKit has built-in Markdown and MDX support. Write content in Markdown, render it as JSX components.

Basic Usage

 Copyimport { renderMarkdown } from '@emberkit/core';

const html = renderMarkdown('# Hello\n\nThis is **bold** and *italic*.');

Inline Markdown in Routes

The simplest approach — write Markdown as template literals:

 Copyimport type { RouteComponent } from '@emberkit/core';
import { renderMarkdown } from '@emberkit/core';

const content = `# My Page

This is a paragraph with **bold** and *italic* text.

## Section

- Item 1
- Item 2
- Item 3
`;

const MyPage: RouteComponent = () => {
  const html = renderMarkdown(content);
  return <div dangerouslySetInnerHTML={{ __html: html }} />;
};

Native Markdown Files

Place .md files in src/routes/ and they become routes automatically. The Vite plugin wraps them into components:

 Copy---
title: My Page
description: A page written in Markdown
---

# Hello World

This is a **Markdown** file that becomes a route.

- No TSX needed
- Auto-wrapped into a component
- Frontmatter exports available as named exports

Frontmatter

Extract metadata from Markdown:

 Copyimport { extractFrontmatter } from '@emberkit/core';

const result = extractFrontmatter(`---
title: My Post
date: 2025-01-15
tags: [emberkit, tutorial]
---

# Content here
`);

console.log(result.data); // { title: 'My Post', date: '2025-01-15', tags: [...] }

Markdown Features

MDX Compiler

For more complex use cases, use the MDX compiler. MDX files support all Markdown features plus JSX:

 Copyimport { compileMDX } from '@emberkit/core';

const component = await compileMDX(`
# Title

Some content with **markup**.

- [x] Task 1
- [ ] Task 2

| Column 1 | Column 2 |
|----------|----------|
| Cell 1   | Cell 2   |
`);

// component is a function that returns JSX
const element = component({});

Sync Compilation

 Copyimport { compileSync, useMDX } from '@emberkit/core';

const component = compileSync('# Hello World');
// or
const component = useMDX('# Hello World');

Custom Components

Override how Markdown elements render:

 Copyimport { renderMarkdown } from '@emberkit/core';

const html = renderMarkdown(content, {
  components: {
    h1: 'h2',    // Render h1 as h2
    table: 'div', // Wrap tables in div
  },
});

Reading Time

 Copyimport { getReadingTime } from '@emberkit/core';

const minutes = getReadingTime(content); // ~200 WPM

Word Count

 Copyimport { getWordCount, getCharacterCount } from '@emberkit/core';

const words = getWordCount(content);
const chars = getCharacterCount(content, false); // excluding spaces

Next Steps

• Components - Component rendering
• SEO & Meta - Frontmatter meta tags
• Routing - Route-level content