はじめる

書くのは心地よく、開発は軽く。

スラッシュメニュー、Markdown、AIの提案、コメント、リアルタイム共同編集を備えたWebエディターです。本体は30 kBで、一緒に入ってくるパッケージはありません。すべてこの場で試せます。

npm install @yonailab/levit

「/」でブロック、文字を選ぶと書式メニュー。行頭に「# 」や「- [ ] 」と入力してみてください。

一つの文書、三つの形式

下に書いてみてください。LevitはJSONの文書を持ち、MarkdownとHTMLにも書き出します。

Levit

HTML

JSON

入っているもの

本体に付いてくるものはありません。

ランタイム依存0個：信頼すべきほかのパッケージなし · 本体30 kB（gzip） · AI 7.5 kB · Yjs連携5 kB（yjsは別途インストール）

$ npm install @yonailab/levit
added 1 package in 1s

$ npm ls --all
my-app@1.0.0
└── @yonailab/levit@0.7.2

長い文書でも速いままです。

2万ブロック · キー入力あたりのスクリプト約5 ms、通常のcontenteditableとほぼ同じ

このエディターには2万ブロックあります。どこでも入力してみてください。

メニューは三つの言語で。

英語・韓国語・日本語を標準搭載 · スクリーンリーダー用ラベル · Alt+F10でツールバーへ

  • Heading 1
  • Bulleted List
  • To-do List
  • Code Block
  • Image
  • 제목 1
  • 글머리표 목록
  • 체크리스트
  • 코드 블록
  • 이미지
  • 見出し1
  • 箇条書きリスト
  • ToDoリスト
  • コードブロック
  • 画像

貼り付けたHTMLはきれいに。

スクリプト、イベントハンドラー、javascript:リンクを除去 · サーバー用のvalidateDocument()

貼り付けたもの

残ったもの

        
      

      

        

          
古いブラウザでも動きます。

          
Chrome 87、Edge 88、Firefox 78、Safari 14以降 · Chrome・Firefox・WebKitで自動テスト

        

        
  • Chrome87+
  • Edge88+
  • Firefox78+
  • Safari14+
変更のたびに自動テスト

        
      

    


    

      
    
      
  1. 
        
    インストールからエディターまで
    
        
    npm install @yonailab/levit
    
        
    まずパッケージを一つ入れます。
    
      
    2. 
      
  2. 
        
        
    import { createLevitEditor } from '@yonailab/levit';
import '@yonailab/levit/levit.css';

const editor = createLevitEditor(
  document.querySelector('#editor'),
);
    
        
    どの要素にでも取り付けます。
    
      
    3. 
      
  3. 
        
        
    const editor = createLevitEditor(el, {
  onChange: (editor) =>
    save(editor.getJSON()),
});
    
        
    文書はJSONで保存します。
    
      
    4. 
      
  4. 
        
        
    createLevitEditor(el, {
  plugins: [
    commentsPlugin(),
    aiPlugin({ provider }),
  ],
});
bindYjs(editor, ydoc.getArray('blocks'));
    
        
    AI、コメント、Yjsは後から。
    
      
    5. 
      

    


    

      
パッケージと対応環境

      
      
パッケージ

      
      
さらに読む

      
    


    

      
よくある質問

      

        

          無料で使えますか？
          
はい。MITライセンスのオープンソースなので、個人・商用どちらのプロジェクトにも使えます。

        

        

          どのフレームワークで使えますか？
          
どれでも使えます。素のJavaScript、Svelte、Angularでは<levit-editor>要素かcreateLevitEditor()を使い、ReactとVueには専用パッケージがあります。

        

        

          HTMLとJSON、どちらを保存すべきですか？
          
JSONの文書を保存してください。バージョンがあり、検証もできます。HTMLとMarkdownは表示や書き出しに使い、読み込み直すこともできます。

        

        

          ユーザーが書いた内容をそのまま表示して安全ですか？
          
LevitはHTMLの読み込みや貼り付けの際に、スクリプト、イベントハンドラー、危険なリンクを取り除きます。それでもサーバーでvalidateDocument()による検証を行い、コンテンツセキュリティポリシー（CSP）も併用してください。

        

        

          AI機能は外部サービスを呼びますか？
          
いいえ。モデルの回答をMarkdownのストリームで返す関数（provider）を渡すので、モデルは自由に選べ、キーはサーバーに置けます。

        

        

          共同編集にはサーバーが必要ですか？
          
LevitはYjsにつながり、Yjsはy-websocket、y-webrtc、独自の接続など任意のプロバイダーで同期します。このページのデモはブラウザ内で二つのエディターをつないでいます。

        

        

          日本語や韓国語の入力は大丈夫ですか？
          
はい。IMEの変換入力を最初から最後まで扱い、変換中にほかの人の変更が届いても崩れません。

        

        

          本番で使えますか？
          
現在は0.6です。マイナーバージョン間でAPIが変わることがあり、変更点はすべてリリースノートに記載します。セキュリティ修正は最新の二つのマイナーバージョンに適用します。