Repolode
Enviar
panphora

panphora/overtype

Editor Markdown leve em JavaScript que sobrepõe uma textarea invisível ao texto de pré-visualização estilizado, com barra de ferramentas opcional e sem dependência de framework.

Ver no GitHub
Estrelas
3,703
Forks
92
Issues abertas
6
Último commit
há 13 dias

O que é?

OverType é uma biblioteca de edição Markdown que mantém a textarea nativa para entrada de texto e desenha uma pré-visualização estilizada por baixo. Como a textarea é transparente e a pré-visualização usa o mesmo layout monoespaçado, o texto digitado fica alinhado à saída renderizada, enquanto os caracteres da sintaxe Markdown continuam visíveis.

A biblioteca é distribuída em um único bundle de cerca de 134 KB minificado, sem dependências em tempo de execução. Pode ser carregada pelo npm com ESM ou CommonJS, por CDN como módulo ES ou script global, ou usada como Web Component nativo. Inclui uma barra de formatação opcional, temas Solar e Cave globais e por instância, continuação inteligente de listas, renderização de listas de tarefas, barra de estatísticas e hooks para upload de arquivos via colagem ou arrastar e soltar.

O editor oferece métodos para obter e definir o conteúdo, alternar entre os modos de edição, textarea simples e pré-visualização, além de exportar HTML limpo. Há um parser Markdown independente disponível para uso no servidor ou em extensões. Imagens não são renderizadas, e todo o texto deve usar uma fonte monoespaçada em um único tamanho para manter o alinhamento.

Recursos principais

  • 01A sobreposição de uma textarea invisível mantém o texto digitado alinhado à pré-visualização estilizada.
  • 02Barra de ferramentas opcional com botões para negrito, itálico, código, links, títulos, listas, listas de tarefas e citações.
  • 03Atalhos de teclado como Cmd/Ctrl+B e Cmd/Ctrl+K, além de continuação de listas no estilo GitHub.
  • 04Temas Solar e Cave, com suporte a temas de cores personalizados.
  • 05Exporta HTML limpo ou HTML renderizado e oferece um parser Markdown independente.
  • 06Disponível como pacote npm, script de CDN ou Web Component.

Casos de uso

  • Adicionar entrada Markdown leve a um formulário web ou campo de comentários sem etapa de build.
  • Criar um editor de notas ou documentos dentro de um app web de arquivo único.
  • Incorporar um editor Markdown a uma página em que o suporte ao teclado móvel seja importante.
  • Renderizar Markdown para HTML no servidor usando o parser independente.

Início rápido

  1. 1

    Instale o pacote pelo npm

    npm install overtype
  2. 2

    Importe OverType e crie um editor em um elemento contêiner

    import OverType from 'overtype'; const [editor] = new OverType('#editor', { value: '# Hello' });

Tópicos

#markdown#editor#javascript#wysiwyg#textarea#web-component#frontend-library

Perguntas frequentes

O que é overtype?
Editor Markdown leve em JavaScript que sobrepõe uma textarea invisível ao texto de pré-visualização estilizado, com barra de ferramentas opcional e sem dependência de framework. OverType é uma biblioteca de edição Markdown que mantém a textarea nativa para entrada de texto e desenha uma pré-visualização estilizada por baixo. Como a textarea é transparente e a pré-visualização usa o mesmo layout monoespaçado, o texto digitado fica alinhado à saída renderizada, enquanto os caracteres da sintaxe Markdown continuam visíveis.
overtype é gratuito? Qual é a licença?
overtype é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.
overtype ainda é mantido?
Manutenção ativa. O último commit de overtype foi em 10 de out. de 2026.
Para que posso usar overtype?
Adicionar entrada Markdown leve a um formulário web ou campo de comentários sem etapa de build. Criar um editor de notas ou documentos dentro de um app web de arquivo único. Incorporar um editor Markdown a uma página em que o suporte ao teclado móvel seja importante. Renderizar Markdown para HTML no servidor usando o parser independente.
Como instalar overtype?
Instale o pacote pelo npm: npm install overtype Importe OverType e crie um editor em um elemento contêiner: import OverType from 'overtype'; const [editor] = new OverType('#editor', { value: '# Hello' });
Onde consigo overtype?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/panphora/overtype

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados