Carregando...
Carregando projeto...
library · Projeto Open Source
React HTML Content Editor é uma biblioteca React sofisticada para edição de conteúdo HTML e CSS. Combina painéis de código para HTML e CSS com preview em tempo real, sincronização de scroll, atalhos de teclado e auto-save. A versão 1.2 introduziu uma API de composição — o editor pode ser montado a partir de partes reutilizáveis — e um modo WYSIWYG rich-text integrado, com mais de 45 controles compostáveis (negrito, títulos, listas, tabelas, imagens, cores, exportação para Markdown e muito mais). A versão 2.0 tornou o editor de código plugável: por padrão renderiza um editor próprio, sem dependências, com numeração de linhas, indentação por Tab/Shift+Tab e paletas clara e escura; o Monaco passou a viver em um entry point dedicado (`react-html-content-editor/monaco`) e é ativado por uma prop. Qualquer componente que implemente o contrato `CodeEditorProps` — CodeMirror, Ace ou uma superfície própria — entra no lugar. Publicada no npm, é tree-shakeable, com zero dependências de frameworks de UI e um arquivo llms.txt otimizado para agentes de IA.
A História do Projeto
O Desafio
Aplicações React frequentemente precisam de um campo de edição de HTML/CSS que seja poderoso para desenvolvedores e amigável para autores de conteúdo. Soluções prontas normalmente forçam uma única abordagem — só código ou só WYSIWYG — e ainda arrastam dependências pesadas: um editor completo como o Monaco custa megabytes de assets mesmo quando tudo o que se precisa é um campo de HTML dentro de um formulário.
A Solução
Desenvolvi o React HTML Content Editor com edição de código e preview ao vivo mais um modo WYSIWYG rico integrado, ambos editando o mesmo valor. A API de composição permite montar exatamente o editor necessário, incluindo apenas os controles desejados. Na v2.0, o painel de código virou plugável: instala e funciona sem nenhuma dependência de editor, e quem quiser syntax highlighting e formatação liga o Monaco com uma prop.
O Processo
O projeto começou como um editor de código HTML/CSS “baterias incluídas” (v1.1) e evoluiu para uma arquitetura compostável (v1.2): partes do ContentEditor (Toolbar, Body, Code, Preview, Wysiwyg) e um editor Wysiwyg autônomo, que chegou a mais de 45 controles ao longo da v1.3. A v2.0 fechou o ciclo separando o editor de código do resto: um contrato `CodeEditorProps`/`CodeEditorHandle` agnóstico de implementação, um `TextareaCodeEditor` próprio como padrão e o Monaco isolado em `react-html-content-editor/monaco`. Implementei testes com Vitest e fast-check (280 passando), CI/CD com GitHub Actions, versionamento com Changesets, documentação com demo em GitHub Pages e um llms.txt para agentes de IA.
Os Resultados
A biblioteca está publicada no npm (v2.0.0) com demo pública e documentação. Entrega uma solução prática e leve para edição de conteúdo em React, com dupla experiência (código e visual), editor de código plugável, acessibilidade, temas e uma API compostável extensível. A v2.0 é a única major até aqui — a mudança de dependências veio documentada com caminho de migração em uma linha para quem quiser manter o Monaco.
45+
Controles WYSIWYG
0
Dependências de Editor
280
Testes
Principais Funcionalidades
Editor de Código Plugável
Painéis de HTML e CSS servidos por um editor próprio sem dependências — ou pelo Monaco, CodeMirror, Ace ou uma superfície sua, via contrato `CodeEditorProps`.
Monaco Opcional
Uma prop liga o mesmo editor do VS Code, com syntax highlighting e formatação. Fica em entry point separado: quem não usa, não baixa.
WYSIWYG Integrado
Alterne entre código e um editor visual rich-text — ambos editam o mesmo valor e o CSS é aplicado à superfície.
API de Composição
Monte o editor a partir de partes (Toolbar, Body, Code, Preview, Wysiwyg) ou use o layout padrão pronto.
45+ Controles WYSIWYG
Negrito, títulos, listas, tabelas, callouts, imagens, cores, emoji, find/replace, print e exportação para Markdown.
Preview ao Vivo
Renderização em tempo real de HTML+CSS com sincronização de scroll e modos edit/preview/split.
Auto-Save e Atalhos
Detecção de mudanças com indicadores de status e atalhos (Ctrl/⌘+S salvar, +Shift+F formatar, +Shift+M tela cheia).
TypeScript First
Tipagem completa com definições exportadas para todos os componentes, props e hooks.
Leve e sem Dependências de UI
Tree-shakeable, funciona com qualquer projeto React sem Tailwind, bibliotecas de UI ou dependência de editor.
Capturas de Tela
Site de documentação com guia de início rápido e instalação
Editor rich-text WYSIWYG montado por composição de controles
Todos os 45+ controles WYSIWYG reunidos em uma única barra de ferramentas
Composition API: alternância Code/Visual editando o mesmo valor
Painéis de código HTML e CSS com preview ao vivo e tela cheia — aqui com o Monaco opcional ligado
Suporte a temas claro e escuro via variáveis CSS
Stack
React 18/19 · TypeScript · Monaco Editor · lucide-react · Vite · Vitest · fast-check · Testing Library · ESLint · Changesets · pnpm Workspaces · GitHub Actions · GitHub Pages
Open Source · Editor de Conteúdo · Editor Plugável · Monaco Editor · WYSIWYG · React 18/19 · TypeScript · Composition API · Acessibilidade · npm