install the library

yarn add @fortune-sheet/react

or using npm:

npm install @fortune-sheet/react

Create an HTML placeholder

  html, body, #root {
    width: 100%;
    height: 100%;
<div id="root"></div>

Render the sheet

import React from 'react';
import ReactDOM from 'react-dom';
import { Workbook } from "@fortune-sheet/react";
import "@fortune-sheet/react/dist/index.css"


Backend storage and collabration

Each time a user operates on the sheet, an array of Op will be emiited through onOp callback. An op describes how to modify the current data to reach the new data after the user's operation. For example, here is an op when user sets the cell font to be bold on cell A2.

        "op": "replace",
        "index": "0",
        "path": ["data", 1, 0, "bl"],
        "value": 1

The op is useful for database modification and syncing state in online collabration.

FortuneSheet github

keywords: typescript