Repolode
ianstormtaylor

ianstormtaylor/slate

플러그인 우선의 스키마 없는 코어를 갖춘, React 기반 리치 텍스트 에디터 구축용 커스터마이징 가능한 TypeScript 프레임워크입니다.

스타
31,743
포크
3,304
열린 이슈
6
마지막 커밋
6시간 전

어떤 프로젝트인가요?

Slate는 브라우저에서 리치 텍스트 에디터를 구축하기 위한 프레임워크입니다. contenteditable 위에 얹는 플러그형 계층으로 설계되었으며, 렌더링에는 React를 사용합니다. 코어는 문서 구조에 대한 가정을 최소화하므로, 고정된 스키마에 맞추는 대신 개발자가 댓글, 임베드, 멘션, 표와 같은 블록 및 인라인 유형을 직접 정의할 수 있습니다.

문서는 DOM과 유사한 중첩 트리로 표현되며, 상위 수준의 명령과 연산을 통해 변경됩니다. 데이터 모델은 나중에 협업 편집 기능을 추가할 수 있도록 설계되었습니다. 실행 취소/다시 실행, HTML 스타일 직렬화, JSX 기반 문서 작성 기능은 별도 패키지로 제공됩니다.

프로젝트는 여러 패키지로 구성된 모노레포로 관리됩니다. slate는 코어 모델, slate-react는 렌더링, slate-history는 실행 취소/다시 실행, slate-hyperscript는 JSX를 이용한 문서 작성을 담당합니다. 현재 베타 단계이며 일부 API는 변경될 수 있습니다.

핵심 기능

  • 01플러그인을 통해 편집 동작을 커스터마이징하는 플러그인 기반 아키텍처입니다.
  • 02직접 블록 및 인라인 노드 유형을 정의할 수 있는 스키마 없는 코어입니다.
  • 03표나 중첩 인용문 같은 구조를 지원하는, DOM을 본뜬 중첩 문서 트리입니다.
  • 04slate-react를 통해 에디터를 렌더링하는 React 컴포넌트입니다.
  • 05slate-history 플러그인으로 실행 취소/다시 실행 기록을 사용할 수 있습니다.
  • 06slate-hyperscript를 통해 JSX로 문서를 작성할 수 있습니다.

활용 사례

  • 임베드나 댓글 같은 커스텀 블록을 사용하는 Medium 또는 Google Docs 스타일 에디터 구축.
  • 사용자가 입력하는 동안 내용을 변환하는 Markdown 단축키 에디터 제작.
  • 텍스트 편집 인터페이스에 @-멘션이나 인라인 데이터 노드 추가.
  • 평면적이지 않은 문서 모델을 갖춘 리치 텍스트 입력 기능이 필요한 React 애플리케이션 구축.

빠른 시작

  1. 1

    공식 문서에서 Getting Started 설치 안내를 엽니다

사용 전 알아둘 점

  • Slate는 베타 버전이며, 일부 API는 아직 확정되지 않아 호환성을 깨뜨리는 변경이 있을 수 있습니다.
  • 대기업이 아니라 자원봉사 기여자들이 유지 관리하므로, 직접 수정 사항을 제공해야 할 수도 있습니다.

토픽

자주 묻는 질문

slate은(는) 무엇인가요?
플러그인 우선의 스키마 없는 코어를 갖춘, React 기반 리치 텍스트 에디터 구축용 커스터마이징 가능한 TypeScript 프레임워크입니다. Slate는 브라우저에서 리치 텍스트 에디터를 구축하기 위한 프레임워크입니다. contenteditable 위에 얹는 플러그형 계층으로 설계되었으며, 렌더링에는 React를 사용합니다. 코어는 문서 구조에 대한 가정을 최소화하므로, 고정된 스키마에 맞추는 대신 개발자가 댓글, 임베드, 멘션, 표와 같은 블록 및 인라인 유형을 직접 정의할 수 있습니다.
slate은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?
slate은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.
slate은(는) 아직 유지보수되고 있나요?
활발히 유지보수 중. slate의 마지막 커밋은 2026년 10월 21일입니다.
slate은(는) 어디에 사용할 수 있나요?
임베드나 댓글 같은 커스텀 블록을 사용하는 Medium 또는 Google Docs 스타일 에디터 구축. 사용자가 입력하는 동안 내용을 변환하는 Markdown 단축키 에디터 제작. 텍스트 편집 인터페이스에 @-멘션이나 인라인 데이터 노드 추가. 평면적이지 않은 문서 모델을 갖춘 리치 텍스트 입력 기능이 필요한 React 애플리케이션 구축.
slate는 어떻게 설치하나요?
공식 문서에서 Getting Started 설치 안내를 엽니다
slate은(는) 어디서 받을 수 있나요?
소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/ianstormtaylor/slate

요약은 프로젝트 README를 바탕으로 AI가 작성했습니다. GitHub 통계는 매일 갱신됩니다.

관련 프로젝트