O que é MDX?

MDX é um formato que permite escrever JSX diretamente dentro de documentos Markdown. Ele combina a simplicidade do Markdown para criação de conteúdo com o poder dos componentes React, tornando-o popular para sites de documentação, blogs e aplicações com muito conteúdo construídas com frameworks como Next.js, Gatsby e Docusaurus. Um arquivo MDX pode conter sintaxe Markdown padrão junto com instruções de importação, variáveis exportadas e componentes JSX inline — tudo em um único arquivo.

Ao contrário do Markdown simples, o MDX é compilado em JavaScript, o que significa que erros de sintaxe no seu JSX ou nas instruções de importação podem quebrar o documento inteiro. Isso torna a validação e a formatação adequada especialmente importantes ao trabalhar com conteúdo MDX.

Descrição da ferramenta

O Editor MDX oferece um ambiente baseado no navegador para escrever, validar e formatar conteúdo MDX. Ele conta com realce de sintaxe tanto para Markdown quanto para JSX, um validador integrado que verifica erros de compilação no seu MDX, e um formatador que organiza espaçamentos e estrutura para documentos consistentes e legíveis.

Exemplos

Antes da formatação:

import {Chart} from './components'
# Dashboard
Some intro text.


Extra blank lines here.
## Section
<Chart data={stats} />

Após a formatação:

import {Chart} from './components'

# Dashboard

Some intro text.

Extra blank lines here.

## Section

<Chart data={stats} />

Funcionalidades

  • Realce de sintaxe para Markdown e JSX em um único editor
  • Validação MDX que verifica erros de compilação em tempo real
  • Formatação automática que normaliza linhas em branco e espaçamentos
  • Botão de limpeza para redefinir o editor rapidamente
  • Suporte a cópia para fácil exportação do seu conteúdo formatado

Como funciona

  • Validar: Compila seu conteúdo MDX usando o compilador @mdx-js/mdx. Se o documento contiver erros de sintaxe — como JSX malformado, tags não fechadas ou importações inválidas — o validador exibe a mensagem de erro para que você possa corrigi-lo.
  • Formatar: Normaliza os espaços em branco ao recolher múltiplas linhas em branco consecutivas em uma só, garantindo linhas em branco antes de títulos e ao redor de blocos de importação/exportação, além de remover espaços em branco no final das linhas. O resultado é um documento limpo e com estrutura consistente.

Casos de uso

  • Escrever documentação para projetos baseados em React que utilizam MDX para páginas de conteúdo
  • Depurar erros de compilação MDX antes de publicar um site estático
  • Organizar arquivos MDX com espaçamento inconsistente contribuídos por múltiplos autores