Repolode
Enviar
panphora

panphora/overtype

Editor Markdown ligero en JavaScript que superpone un textarea invisible al texto de vista previa con estilo; incluye una barra de herramientas opcional y no depende de frameworks.

Ver en GitHub
Estrellas
3,703
Forks
92
Issues abiertos
6
Último commit
hace 13 días

¿Qué es?

OverType es una biblioteca de edición Markdown que conserva el textarea nativo para la entrada y dibuja debajo una vista previa con estilo. Como el textarea es transparente y la vista previa usa la misma disposición monoespaciada, el texto que escribes queda alineado con el resultado renderizado, mientras los caracteres de sintaxis de Markdown siguen visibles.

La biblioteca se distribuye en un único bundle de aproximadamente 134 KB minificado y no tiene dependencias de runtime. Se puede cargar mediante npm con ESM o CommonJS, desde un CDN como módulo ES o script global, o usar como Web Component nativo. Incluye una barra de herramientas de formato opcional, temas Solar y Cave globales y por instancia, continuación inteligente de listas, renderizado de listas de tareas, una barra de estadísticas y hooks para subir archivos al pegar y arrastrar y soltar.

El editor ofrece métodos para obtener y establecer el contenido, cambiar entre los modos de edición, textarea simple y vista previa, y exportar HTML limpio. Hay disponible un parser Markdown independiente para usar en el servidor o en extensiones. No se renderizan imágenes y todo el texto debe usar una fuente monoespaciada de tamaño único para mantener la alineación.

Funciones clave

  • 01La superposición de un textarea invisible mantiene el texto escrito alineado con la vista previa con estilo.
  • 02Barra de herramientas opcional con botones para negrita, cursiva, código, enlaces, encabezados, listas, listas de tareas y citas.
  • 03Atajos de teclado como Cmd/Ctrl+B y Cmd/Ctrl+K, además de continuación de listas al estilo de GitHub.
  • 04Temas Solar y Cave, con compatibilidad para temas de color personalizados.
  • 05Exporta HTML limpio o HTML renderizado y ofrece un parser Markdown independiente.
  • 06Disponible como paquete npm, script de CDN o Web Component.

Casos de uso

  • Añadir entrada Markdown ligera a un formulario web o cuadro de comentarios sin un paso de compilación.
  • Crear un editor de notas o documentos dentro de una aplicación web de un solo archivo.
  • Incrustar un editor Markdown en una página donde sea importante la compatibilidad con el teclado móvil.
  • Renderizar Markdown a HTML en el servidor mediante el parser independiente.

Inicio rápido

  1. 1

    Instala el paquete desde npm

    npm install overtype
  2. 2

    Importa OverType y crea un editor en un elemento contenedor

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

Temas

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

Preguntas frecuentes

¿Qué es overtype?
Editor Markdown ligero en JavaScript que superpone un textarea invisible al texto de vista previa con estilo; incluye una barra de herramientas opcional y no depende de frameworks. OverType es una biblioteca de edición Markdown que conserva el textarea nativo para la entrada y dibuja debajo una vista previa con estilo. Como el textarea es transparente y la vista previa usa la misma disposición monoespaciada, el texto que escribes queda alineado con el resultado renderizado, mientras los caracteres de sintaxis de Markdown siguen visibles.
¿overtype es gratuito? ¿Qué licencia tiene?
overtype es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿overtype sigue mantenido?
Mantenimiento activo. El último commit de overtype fue el 10 oct 2026.
¿Para qué puedo usar overtype?
Añadir entrada Markdown ligera a un formulario web o cuadro de comentarios sin un paso de compilación. Crear un editor de notas o documentos dentro de una aplicación web de un solo archivo. Incrustar un editor Markdown en una página donde sea importante la compatibilidad con el teclado móvil. Renderizar Markdown a HTML en el servidor mediante el parser independiente.
¿Cómo se instala overtype?
Instala el paquete desde npm: npm install overtype Importa OverType y crea un editor en un elemento contenedor: import OverType from 'overtype'; const [editor] = new OverType('#editor', { value: '# Hello' });
¿Dónde consigo overtype?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/panphora/overtype

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados