Skip to main content

Quick Start (React)

React

New Project​

The fastest way to get started is to hand it to your agent, or to run our project wizard yourself. Either way you get a new project with SheetXL pre-configured and ready to use.

Paste this into your agent (Claude Code, Codex, Cursor, …), in an empty folder or in your project:

I would like to build a full spreadsheet app.

Please use SheetXL:
npx -y skills add sheetxl/skills -g --all

Read the SheetXL skill, then ask me what I need before you build.

Only want the sheet, with your own buttons and design around it?

I would like to put a spreadsheet grid inside my app.

Please use SheetXL:
npx -y skills add sheetxl/skills -g --all

Read the SheetXL skill, then ask me what I need before you build.

...and answer the questions. The agent asks what you want to build; the wizard asks which template.

Existing Project​

If you want to add SheetXL to an existing React project, follow these installation steps.

Installation​

To start install the following packages:

@sheetxl/studio-mui

And additional peer dependencies unless you already have these in your project.

  • react, react-dom - React 19
  • @emotion/react, @emotion/styled, @emotion/cache - CSS-in-JS styling (Material UI dependency)
  • @mui/material, @mui/styled-engine, @mui/system, @mui/utils - Material UI 9
pnpm add @sheetxl/studio-mui @mui/material @mui/styled-engine @mui/system @mui/utils @emotion/react @emotion/styled @emotion/cache react react-dom

Once installed SheetXL components can be used as any React component.

First Component​

Copy below to your project