문서, 화이트보드 캔버스, 표를 하나의 워크스페이스에 통합한 오픈소스 로컬 우선 지식 베이스로, Notion과 Miro의 대안입니다.
toeverything/blocksuite
블록 편집기와 협업 앱을 만들기 위한 웹 컴포넌트 UI와 CRDT 기반 데이터 계층을 제공하는 TypeScript 툴킷입니다.
대체할 수 있는 제품:Notion
- 스타
- 6,083
- 포크
- 565
- 열린 이슈
- 196
- 마지막 커밋
- 3일 전
어떤 프로젝트인가요?
BlockSuite는 편집기와 협업 애플리케이션을 만들기 위한 툴킷입니다. 문서 상태를 모델링하는 헤드리스 프레임워크와 함께, 블록 기반 문서 편집기(PageEditor)와 그래픽 스타일의 캔버스 편집기(EdgelessEditor) 같은 사전 제작 편집 컴포넌트를 제공합니다. 두 편집기 모두 동일한 서식 있는 텍스트 기능을 지원합니다.
데이터 계층은 Yjs CRDT 라이브러리를 기반으로 하며, 문서의 실시간 공동 편집과 시간 되돌리기를 지원합니다. 컴포넌트는 네이티브 웹 컴포넌트이므로 React를 비롯한 다양한 프레임워크에서 사용할 수 있습니다. 개발자는 사용자 정의 블록을 정의하고, 여러 편집기에서 하나의 문서를 재사용하며, 스냅샷과 변환기를 통해 Markdown 및 HTML 같은 형식으로 콘텐츠를 변환할 수 있습니다.
이 프로젝트는 AFFiNE 지식 베이스에서 시작되었으며, 현재는 독립 라이브러리로 관리되고 있습니다. 아직 초기 단계로, 컴포넌트 API와 확장 API를 다듬고 있습니다.
핵심 기능
- 01사전 제작된 편집기 두 가지: 블록 기반 페이지 편집기와 캔버스 스타일의 에들리스 편집기.
- 02Yjs CRDT를 기반으로 한 실시간 공동 편집 및 문서 이력 관리.
- 03사용자 정의 블록 및 인라인 임베드 정의.
- 04React 및 기타 프레임워크에서 사용할 수 있는 네이티브 웹 컴포넌트.
- 05Markdown 및 HTML 변환을 위한 스냅샷과 변환기 지원.
활용 사례
- 웹 애플리케이션에 Notion 스타일의 블록 편집기 구축.
- 기존 제품에 협업 기능이 있는 서식 있는 텍스트 편집 기능 추가.
- BlockSuite의 바닐라 프레임워크와 컴포넌트를 재사용해 사용자 정의 편집기 제작.
- 여러 편집기 뷰에서 하나의 문서 공유.
빠른 시작
- 1
BlockSuite 패키지 설치 방법은 빠른 시작 가이드를 참고하세요
- 2
presets 패키지의 프리셋 에디터부터 시작하세요
사용 전 알아둘 점
- README에 따르면 BlockSuite는 아직 초기 단계이므로 컴포넌트와 확장 API가 변경될 수 있습니다.
- 소스에서 빌드하려면 별도의 BUILDING.md 가이드를 따라야 합니다.
- 라이선스는 MPL 2.0이며, 약한 카피레프트 라이선스로 수정한 MPL 라이선스 적용 파일의 변경 사항을 공유해야 합니다.
포함된 컬렉션
토픽
자주 묻는 질문
- blocksuite은(는) 무엇인가요?
- 블록 편집기와 협업 앱을 만들기 위한 웹 컴포넌트 UI와 CRDT 기반 데이터 계층을 제공하는 TypeScript 툴킷입니다. BlockSuite는 편집기와 협업 애플리케이션을 만들기 위한 툴킷입니다. 문서 상태를 모델링하는 헤드리스 프레임워크와 함께, 블록 기반 문서 편집기(PageEditor)와 그래픽 스타일의 캔버스 편집기(EdgelessEditor) 같은 사전 제작 편집 컴포넌트를 제공합니다. 두 편집기 모두 동일한 서식 있는 텍스트 기능을 지원합니다.
- blocksuite은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?
- blocksuite은(는) MPL-2.0 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.
- blocksuite은(는) 아직 유지보수되고 있나요?
- 활발히 유지보수 중. blocksuite의 마지막 커밋은 2026년 11월 3일입니다.
- blocksuite은(는) 어디에 사용할 수 있나요?
- 웹 애플리케이션에 Notion 스타일의 블록 편집기 구축. 기존 제품에 협업 기능이 있는 서식 있는 텍스트 편집 기능 추가. BlockSuite의 바닐라 프레임워크와 컴포넌트를 재사용해 사용자 정의 편집기 제작. 여러 편집기 뷰에서 하나의 문서 공유.
- blocksuite는 어떻게 설치하나요?
- BlockSuite 패키지 설치 방법은 빠른 시작 가이드를 참고하세요 presets 패키지의 프리셋 에디터부터 시작하세요
- blocksuite은(는) 어디서 받을 수 있나요?
- 소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/toeverything/blocksuite
요약은 프로젝트 README를 바탕으로 AI가 작성했습니다. GitHub 통계는 매일 갱신됩니다.
관련 프로젝트
HTML 대신 깔끔한 JSON으로 콘텐츠를 저장하고 플러그인 도구로 확장하는 웹용 블록 기반 텍스트 에디터입니다.
Fluent UI 디자인 시스템으로 웹 앱을 만드는 데 필요한 React 컴포넌트, 웹 컴포넌트, 유틸리티를 제공하는 Microsoft의 모노레포입니다.
Omi는 재사용 가능한 커스텀 요소를 만들기 위한 JSX, signal 기반 반응성, 라우터, Tailwind 지원을 갖춘 Web Components 프레임워크입니다.
모든 편집의 작성자를 기록하고 전체 수정 이력을 보존하는 자체 호스팅형 실시간 공동 문서 편집기입니다.
Atomic Data 사양을 기반으로 문서, 테이블, 채팅, 파일, 앱을 위한 셀프 호스팅·로컬 우선 워크스페이스이자 헤드리스 실시간 데이터베이스입니다.