Repolode
Submit
panphora

panphora/overtype

A lightweight JavaScript markdown editor that overlays an invisible textarea on styled preview text, with optional toolbar and no framework dependency.

View on GitHub
Stars
3,703
Forks
92
Open issues
6
Last commit
13 days ago

What is it?

OverType is a markdown editor library that keeps the native textarea for input and draws a styled preview beneath it. Because the textarea is transparent and the preview uses the same monospace layout, the text you type lines up with the rendered output while the markdown syntax characters stay visible.

The library ships as a single bundle of roughly 134KB minified, with no runtime dependencies. It can be loaded via npm with ESM or CommonJS, through a CDN as an ES module or global script, or used as a native Web Component. It includes an optional formatting toolbar, global and per-instance Solar and Cave themes, smart list continuation, task list rendering, stats bar, and file upload hooks for paste and drop.

The editor exposes methods for getting and setting content, switching between edit, plain textarea and preview modes, and exporting clean HTML. A standalone markdown parser is available for server-side or extension use. Images are not rendered, and all text must use a monospace font at a single size to keep alignment.

Key features

  • 01Invisible textarea overlay keeps typed text aligned with the styled preview.
  • 02Optional toolbar with bold, italic, code, link, headings, lists, task lists and quote buttons.
  • 03Keyboard shortcuts such as Cmd/Ctrl+B and Cmd/Ctrl+K, plus GitHub-style list continuation.
  • 04Solar and Cave themes, with support for custom color themes.
  • 05Exports clean HTML or rendered HTML, and provides a standalone markdown parser.
  • 06Available as an npm package, CDN script, or Web Component.

Use cases

  • Adding a lightweight markdown input to a web form or comment box without a build step.
  • Building a note or document editor inside a single-file web app.
  • Embedding a markdown editor in a page where mobile keyboard support matters.
  • Rendering markdown to HTML on the server using the standalone parser.

Quick start

  1. 1

    Install the package from npm

    npm install overtype
  2. 2

    Import OverType and create an editor on a container element

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

Topics

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

FAQ

What is overtype?
A lightweight JavaScript markdown editor that overlays an invisible textarea on styled preview text, with optional toolbar and no framework dependency. OverType is a markdown editor library that keeps the native textarea for input and draws a styled preview beneath it. Because the textarea is transparent and the preview uses the same monospace layout, the text you type lines up with the rendered output while the markdown syntax characters stay visible.
Is overtype free to use? What license does it have?
overtype is open source under the MIT license. Check the license terms before using it in commercial products.
Is overtype still maintained?
Actively maintained. The last commit to overtype was on Oct 10, 2026.
What can I use overtype for?
Adding a lightweight markdown input to a web form or comment box without a build step. Building a note or document editor inside a single-file web app. Embedding a markdown editor in a page where mobile keyboard support matters. Rendering markdown to HTML on the server using the standalone parser.
How do I install overtype?
Install the package from npm: npm install overtype Import OverType and create an editor on a container element: import OverType from 'overtype'; const [editor] = new OverType('#editor', { value: '# Hello' });
Where can I get overtype?
The source code and installation instructions are on GitHub: https://github.com/panphora/overtype

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects