Mini Spreadsheet‑Style Workspace with Univer

Phase 1: Scaffold the project

Create a Vite + React + TypeScript starter; this gives us a fast dev server and hot reload.

npm create vite@latest my-univer -- --template react-ts
cd my-univer
npm install @univerjs/core @univerjs/ui @univerjs/sheets

Phase 2: Add a basic sheet component

We’ll import Univer core, UI and sheet packages, instantiate a workbook, and mount it into a React ref.

src/Sheet.tsx

import React, { useEffect, useRef } from 'react';
import { Univer, UniverInstanceType } from '@univerjs/core';
import { defaultTheme } from '@univerjs/ui';
import { SheetPlugin } from '@univerjs/sheets';
import { RegisterOtherFormulaPlugin } from '@univerjs/engine-formula';

const univer = new Univer({ theme: defaultTheme });
univer.registerPlugin(SheetPlugin);
univer.registerPlugin(RegisterOtherFormulaPlugin);

export const Sheet: React.FC = () => {
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (containerRef.current) {
      const workbook = univer.createUnit(UniverInstanceType.UNIVER_SHEET, { name: 'Demo Sheet' });
      univer.createUnit(UniverInstanceType.UNIVER_SHEET, { name: 'Demo Sheet' });
      univer.focusUnit(workbook.getUnitId());
      univer.render(containerRef.current);
    }
  }, []);

  return <div ref={containerRef} style={{ width: '100%', height: '100vh' }} />;
};

Phase 3: Wire the component into the app

Now that we have a standalone Sheet component, we need to let the Vite entry point render it. By replacing the default Vite App markup with our sheet, the whole page becomes the spreadsheet UI. This keeps the project minimal – only one component is mounted, and Univer takes care of the rest.

We also import the required CSS from Univer so the grid looks correct. The App component itself stays tiny, just a wrapper that returns <Sheet />.

src/App.tsx

import React from 'react';
import './index.css'; // Vite default styles
import '@univerjs/ui/dist/style.css'; // Univer UI styles
import Sheet from './Sheet';

const App: React.FC = () => {
  return <Sheet />;
};

export default App;

Phase 4: Run locally

With the component wired, start the development server to see Univer in action. Vite will bundle the TypeScript, launch a local HTTP server, and hot‑reload on changes. Open the provided URL and you should see a blank spreadsheet ready for input.

If you encounter any errors, double‑check that the dependencies were installed (npm i) and that the src/App.tsx file matches the code above.

npm run dev

Phase 5: Verify and extend

Navigate to http://localhost:5173, click any cell, type some text and press Enter – the value should stay visible, proving the sheet is functional. Univer keeps the data in memory while the page lives, so you can experiment with editing, selecting, and navigating cells.

When you’re comfortable, you can add more power by installing the formula engine. The plugin adds support for basic Excel‑like formulas, and you can later hook it into a toolbar or custom UI.

npm i @univerjs/formula