# Introduction

## Canvas

One of the key benefits of Spreadsheet 2 is its high-performance rendering using canvas. This approach enables all UI interactions to be built on top of canvas using DOM nodes, making it incredibly customizable.

With Spreadsheet 2, developers have the freedom to add additional behaviour, such as Drag n Drop, Overlays, Charts, and Embeds, all while leveraging the power of React.

## Declarative

Spreadsheet 2 takes the declarative approach to rendering, which means it renders exactly what you pass as props. This enables developers to effortlessly pick and choose the components they need and compose a spreadsheet that aligns with their vision.

Plus, you can easily add custom components like buttons, tabs, or any other UI element to enhance the appearance of your spreadsheet.

{% code overflow="wrap" %}

```tsx
import "@rowsncolumns/spreadsheet/dist/spreadsheet.min.css";
import { 
  SpreadsheetProvider, 
  Spreadsheet, 
  FormulaBar,
  FormulaInput,
  CanvasGrid,
  Toolbar,
  BottomBar,
  NewSheetButton,
  SheetSwitcher,
  SheetTabs
} from "@rowsncolumns/spreadsheet"

const App = () => {
  return (
    <SpreadsheetProvider>
      <Toolbar>
        <ButtonUndo onClick={undo} disabled={!canUndo} />
        <ButtonRedo onClick={redo} disabled={!canRedo} />
      </Toolbar>
      <FormulaBar>
        <FormulaInput />
      </FormulaBar>
      <CanvasGrid
        rowCount={1000}
        columnCount={1000}
        getCellData={(sheetId, rowIndex, columnIndex) => {
            return {
                formattedValue: 'Foobar'
            }
        })}
      />
      <BottomBar>
        <NewSheetButton />
        <SheetSwitcher />
        <SheetTabs />
      </BottomBar>
    <SpreadsheetProvider>
  )
}
```

{% endcode %}

## Performance

Performance is a top priority for us at Spreadsheet 2. With our advanced virtualization technique, the canvas only renders what is visible on the screen, resulting in quick rendering that targets a smooth 60 frames per second (FPS).

Additionally, our ScrollSnap feature makes scrolling buttery smooth, even for larger datasets, providing a seamless user experience.

## Accessibility

Accessibility is a crucial aspect of our development process. We offer support for keyboard shortcuts and navigation, and our platform is natively compatible with both light and dark modes.

We also provide the option for developers to customise themes, ensuring optimal accessibility for users with low/tunnel vision.

## Mobile/Touch devices

We understand the importance of mobile devices, which is why Spreadsheet 2 is compatible with most mobile browsers.

In the rare event that you encounter any issues with scrolling or selecting, please don't hesitate to contact us at <support@rowsncolumns.app>. We're always here to help!

{% content-ref url="getting-started/installation" %}
[installation](https://docs.rowsncolumns.app/getting-started/installation)
{% endcontent-ref %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.rowsncolumns.app/readme.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.