1# mdx
2
3sublimated compiles `.mdx` files into live pages. push via [git](../git/), get a rendered page at `run.sublimated.com/{space}/{path}.mdx`.
4
5`.mdx` is markdown + JSX. you can write plain prose, or embed any React component. imports from npm resolve at push time via `@cloudflare/worker-bundler`.
6
7- [layout](layout.md) — `.sbl/layout.tsx`, folder-scoped React wrappers
8- [theme](theme.md) — `.sbl/theme.css`, global stylesheet per folder
9- [frontmatter](frontmatter.md) — title, description, per-page options
10- [routing](routing.md) — how URLs map to files and folders
11
12## .mdx vs .md
13
14- `.md` — plain markdown, rendered without layout or JSX support
15- `.mdx` — markdown + JSX, wrapped in `.sbl/layout.tsx`, supports npm imports
16
17only `.mdx` files trigger layout and theme wrapping. if you want a header, footer, or custom styling, use `.mdx`.
18
19## minimal example
20
21```mdx
22---
23title: Hello
24---
25
26# hello world
27
28this is a page. the layout from `.sbl/layout.tsx` wraps this content in `<article class="prose">`.
29```
30
31push it, browse to `run.sublimated.com/{space}/{path}/hello.mdx`.