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 duas instâncias do Monaco Editor (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). Publicada no npm, é leve (~9 KB gzip), 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 trazem dependências pesadas de frameworks de UI.
A Solução
Desenvolvi o React HTML Content Editor sobre o Monaco Editor, oferecendo edição de código com preview ao vivo e 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, sem dependências de frameworks de UI.
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 com mais de 45 controles. Implementei testes com Vitest e fast-check, 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 (v1.2.1) 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), acessibilidade, temas e uma API compostável extensível — mantendo total retrocompatibilidade entre versões.
45+
Controles WYSIWYG
~9 KB
Tamanho do Bundle
120+
Testes
Principais Funcionalidades
Editor Duplo com Monaco
Instâncias separadas do Monaco para HTML e CSS, o mesmo editor do VS Code, com syntax highlighting completo.
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
~9 KB gzip, tree-shakeable, funciona com qualquer projeto React sem Tailwind ou bibliotecas de UI.
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
Editores Monaco para HTML e CSS com preview ao vivo e tela cheia
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 · Monaco Editor · WYSIWYG · React 18/19 · TypeScript · Composition API · Acessibilidade · npm