panphora/overtype

これは何？

主な機能

• 01透明なtextareaを重ねることで、入力したテキストをスタイル付きプレビューに揃えます。
• 02太字、斜体、コード、リンク、見出し、リスト、タスクリスト、引用のボタンを備えたオプションのツールバー。
• 03Cmd/Ctrl+BやCmd/Ctrl+Kなどのキーボードショートカットと、GitHub形式のリスト継続に対応。
• 04SolarテーマとCaveテーマを利用でき、カスタムカラーテーマにも対応。
• 05クリーンなHTMLまたはレンダリング済みHTMLをエクスポートでき、単独で利用可能なMarkdownパーサーも提供。
• 06npmパッケージ、CDNスクリプト、またはWeb Componentとして利用可能。

ユースケース

• ビルド手順を追加せずに、Webフォームやコメント欄へ軽量なMarkdown入力機能を追加する。
• 単一ファイルのWebアプリ内に、ノートやドキュメントのエディターを構築する。
• モバイルキーボードへの対応が重要なページに、Markdownエディターを埋め込む。
• 単独で利用可能なパーサーを使って、サーバー上でMarkdownをHTMLにレンダリングする。

クイックスタート

1. 1

   npmからパッケージをインストールする

   npm install overtype
2. 2

   OverTypeをインポートし、コンテナ要素にエディターを作成する

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

トピック

よくある質問

overtype とは？

スタイル付きプレビューに透明な textarea を重ねる、オプションのツールバー付きでフレームワーク依存のない軽量な JavaScript製Markdownエディター。 OverType は、入力にネイティブの textarea を使い、その下にスタイル付きプレビューを描画する Markdown エディターライブラリです。textarea は透明で、プレビューも同じ等幅フォントのレイアウトを使うため、入力したテキストがレンダリング結果と揃い、Markdown の構文文字も見える状態に保たれます。

overtype は無料で使えますか？ライセンスは？

overtype は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

overtype は今もメンテナンスされていますか？

活発にメンテナンス中。overtype の最終コミットは 2026年10月10日 です。

overtype は何に使えますか？

ビルド手順を追加せずに、Webフォームやコメント欄へ軽量なMarkdown入力機能を追加する。 単一ファイルのWebアプリ内に、ノートやドキュメントのエディターを構築する。 モバイルキーボードへの対応が重要なページに、Markdownエディターを埋め込む。 単独で利用可能なパーサーを使って、サーバー上でMarkdownをHTMLにレンダリングする。

overtype のインストール方法は？

npmからパッケージをインストールする: npm install overtype OverTypeをインポートし、コンテナ要素にエディターを作成する: import OverType from 'overtype'; const [editor] = new OverType('#editor', { value: '# Hello' });

overtype はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/panphora/overtype