시작하기

쓰기는 편하게, 개발은 가볍게

슬래시 메뉴, Markdown, AI 제안, 댓글, 실시간 공동 편집을 갖춘 웹 에디터입니다. 본체는 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가 바뀔 수 있고, 바뀐 점은 릴리스 노트에 모두 적습니다. 보안 수정은 최신 두 마이너 버전에 적용합니다.