---
title: "Quick Start"
framework: javascript
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` package from `npm`:

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

## 2. Create Studio

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

Render Studio inside a sized container (it automatically fills the available space) and set `mode` to `'edit'` so users can build and modify reports:

```html
<div id="myStudio" style="height: 100%; width: 100%"></div>
```

```ts
import { createStudio } from 'ag-studio';

// 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 studioApi = createStudio(document.getElementById('myStudio')!, {
    data: {
        sources: [{
            id: 'products',
            data: productData,
        }],
    },
    mode: 'edit',
});
```

## 3. Run your app

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

#### Quick Start Example

```ts
import { AgStudioApi, AgStudioProperties, createStudio } 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
];

// Define one or more data sources
const data = {
  sources: [
    {
      id: "products",
      data: productData,
    },
  ],
};

// Create properties definition
const studioProperties: AgStudioProperties = {
  data,
  mode: "edit",
};

// Store reference to studio API for use in event handlers, etc.
let studioApi: AgStudioApi;

// Setup Studio after the page has finished loading
const studioDiv = document.querySelector<HTMLElement>("#myStudio")!;
studioApi = createStudio(studioDiv, studioProperties);
```

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

## Next Steps

**[Tutorial](https://www.ag-grid.com/studio/javascript/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/javascript/data/)**

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