---
title: "Quick Start"
framework: react
version: "2.1.2"
---

# Quick Start

AG Studio is an embedded analytics component for building interactive dashboards. This guide covers the minimum code required to render a working dashboard with a single data source and a blank canvas.

## 1. Install

Install the `ag-studio-react` package from `npm`:

```bash
npm install ag-studio-react
```

## 2. Create Studio

Studio works with arrays of plain objects, where each array becomes a data source.

Render the `AgStudio` component inside a sized parent (it automatically fills the available space) and set `mode` to `"edit"` so users can build and modify reports:

```jsx
import { AgStudio } from 'ag-studio-react';

// Data to display in Studio (can also be loaded asynchronously)
const productData = [
    {
        productName: 'Printer',
        category: 'Printing & Imaging',
        brand: 'CleanSlate Office',
        listPrice: 109.09,
        unitCost: 92.26,
    },
    {
        productName: 'Notebook',
        category: 'Paper & Notebooks',
        brand: 'PaperLine',
        listPrice: 24.70,
        unitCost: 14.19,
    },
    {
        productName: 'Highlighters',
        category: 'Writing Instruments',
        brand: 'PaperLine',
        listPrice: 10.34,
        unitCost: 5.03,
    },
    // ... more rows
];

const App = () => {
    const data = {
        sources: [{
            id: 'products',
            data: productData,
        }],
    };

    return (
        <div style={{ height: '100%', width: '100%' }}>
            <AgStudio data={data} mode="edit" />
        </div>
    );
};
```

## 3. Run your app

The result is an empty AG Studio component that users can begin building reports with:

#### Quick Start Example

```tsx
"use client";

import React, {
  useCallback,
  useMemo,
  useRef,
  useState,
  StrictMode,
} from "react";
import { createRoot } from "react-dom/client";
import { AgStudio, AgStudioRef } from "ag-studio-react";
import {
  AgDataEngine,
  AgDataSourcesDefinition,
  AgStudioApi,
  AgStudioMode,
  AgStudioProperties,
} from "ag-studio";

const productData = [
  {
    productName: "Printer",
    category: "Printing & Imaging",
    brand: "CleanSlate Office",
    listPrice: 109.09,
    unitCost: 92.26,
  },
  {
    productName: "Notebook",
    category: "Paper & Notebooks",
    brand: "PaperLine",
    listPrice: 24.7,
    unitCost: 14.19,
  },
  {
    productName: "Highlighters",
    category: "Writing Instruments",
    brand: "PaperLine",
    listPrice: 10.34,
    unitCost: 5.03,
  },
  // ... more rows
];

const StudioExample = () => {
  const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
  const studioStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);
  const [data, setData] = useState<AgDataSource>({
    sources: [
      {
        id: "products",
        data: productData,
      },
    ],
  });

  return (
    <div style={containerStyle}>
      <div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
        <AgStudio
          style={studioStyle}
          className="my-studio-container"
          data={data}
          mode={"edit"}
        />
      </div>
    </div>
  );
};

const root = createRoot(document.getElementById("root")!);
root.render(
  <StrictMode>
    <StudioExample />
  </StrictMode>,
);
```

[Live example: Quick Start Example](https://www.ag-grid.com/studio/examples/quick-start/quick-start-example/reactFunctionalTs/)

## Next Steps

**[Tutorial](https://www.ag-grid.com/studio/react/tutorial/)**

New to AG Studio? Follow a step-by-step guide to build a complete multi-page dashboard from scratch.

**[Configuring Data](https://www.ag-grid.com/studio/react/data/)**

Already familiar with dashboard tooling? Learn more about how to configure data.