https://github.com/notebox/nb-editor

A block based editor which is powered by nb-crdt
https://github.com/notebox/nb-editor

crdt nb-crdt nbfm notebox react typescript

Last synced: 5 months ago
JSON representation

A block based editor which is powered by nb-crdt

• Host: GitHub
• URL: https://github.com/notebox/nb-editor
• Owner: notebox
• License: agpl-3.0
• Created: 2024-04-24T06:51:07.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2024-04-26T13:24:28.000Z (about 2 years ago)
• Last Synced: 2025-10-21T12:14:53.854Z (8 months ago)
• Topics: crdt, nb-crdt, nbfm, notebox, react, typescript
• Language: TypeScript
• Homepage: https://notebox.cloud
• Size: 490 KB
• Stars: 13
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# nb-editor

[![codecov](https://codecov.io/gh/notebox/nb-editor/graph/badge.svg?token=65QQDKPEPV)](https://codecov.io/gh/notebox/nb-editor)

[![sponsor](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub&color=%23fe8e86)](https://github.com/sponsors/notebox)

A block based editor which is powered by [nb-crdt](https://github.com/notebox/nb-crdt) that enables collaborative editing across multiple participants allowing for flexible data sharing across spreadsheets, boards, rich text, and more.

Web-based multi-platform support (primarily focusing on macOS and iOS). Support for Composition input, such as Korean and Japanese, suggestion input, and iPad Pencil scribble.

## Development

### Prerequisites

```

npm install

```

### Run

```bash

npm start

```

## Usage

### for iframe

```

...

// set "./static/app.css" to "node_modules/@notebox/nb-editor/iframe/app.css"

...

```

### for component (react)

```

import {NBEditor, NBEditorWithToolbar} from "@notebox/nb-editor/main.component.tsx"

...

...

```

## Checkout Points

as a component

  - `main.component.tsx`

  - `iframe/app.css`

as a iframe resource

  - `iframe/index.html`

  - `iframe/static/app.js`

  - `iframe/static/app.css`

## Demo Screenshots