Skip to main content

Quick Start (React)

React

New Project​

The fastest way to get started with SheetXL is using our project wizard. It will create a new project with SheetXL pre-configured and ready to use.

pnpm create sheetxl

...and follow the interactive prompts.

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
  • @emotion/react, @emotion/styled - CSS-in-JSS Styling (Material UI dependency)
  • @mui/material, @mui/styled-engine, @mui/system, @mui/utils - Material UI
pnpm add @sheetxl/studio-mui @mui/material @mui/styled-engine @mui/system @mui/utils @emotion/react @emotion/styled react react-dom

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

First Component​

Copy below to your project

Studio Example​

Sometimes starting with an example is the simplest way to start.

The following code sandbox shows a React application with a Studio component:

CodeSandbox-Studio

tip

Sandboxes can also be forked or downloaded to be run locally.