AG Grid Studio

Embedded analytics.
Built to perform.

AG Grid Studio adds dashboards, charts, grids, and filters to your app without building analytics from scratch. Drag, drop, and ship self-service reporting your users can drive themselves.

Full features during the trial. No watermarks. Engineering support included.

Everything you need to build dashboards

Studio is a complete toolkit for embedded analytics, powered by AG Grid and AG Charts under the hood.

Drag & drop widgets

Rearrange and resize charts, grids, and KPI tiles in real time. Build a dashboard by moving pieces, not writing layout code.

Edit and view modes

Configure everything in edit mode, then hand a clean, read-only reporting view to stakeholders.

High-performance data

Process hundreds of thousands of rows in the browser with joins, aggregations, and computed columns.

Widget gallery

Pre-built bar, line, area, pie, and scatter charts, plus grids and KPI tiles, ready to drop into any dashboard.

AI assistant

Explore your data in natural language and generate whole dashboards from a prompt.

Shared theming

Studio shares a theming engine with AG Grid, so your dashboards and grids look like one product out of the box.

A natural fit for TanStack apps

Studio is a client-side React component, so it drops into the apps you already build with TanStack.

  • Embed dashboards inside a TanStack Start or Router app as a client-side React component
  • Feed widgets from a TanStack Query-backed API, then let Studio handle joins and aggregations
  • Reuse your AG Grid theme so embedded analytics match the rest of your product
  • Give non-technical users self-service reporting without building analytics infrastructure

Render a dashboard in React

Install ag-studio-react, hand AgStudio your data sources, and switch on edit mode so users can build reports.

Dashboard.tsx
import { AgStudio } from 'ag-studio-react'

// Each source is an id plus an array of plain row objects.
const sources = [
  {
    id: 'sales',
    data: [
      { region: 'EMEA', product: 'Grid', revenue: 128000 },
      { region: 'AMER', product: 'Charts', revenue: 96500 },
      { region: 'APAC', product: 'Studio', revenue: 71200 },
    ],
  },
]

export function Dashboard() {
  // Render inside a sized parent; "edit" mode lets users build reports.
  return (
    <div style={{ height: '100vh', width: '100%' }}>
      <AgStudio data={{ sources }} mode="edit" />
    </div>
  )
}

AG Grid Studio FAQ

AG Grid Studio requires a commercial license for production use. You can start with a 45-day free trial that includes full features with no watermarks or restrictions, plus direct engineering support during the trial.

AG Grid Enterprise is the data grid component with features like pivoting and the server-side row model. AG Grid Studio is a higher-level toolkit for building complete drag-and-drop analytics dashboards — charts, grids, filters, and KPI tiles — on top of AG Grid and AG Charts.

Studio is built for performance and processes hundreds of thousands of rows in the browser, with joins, aggregations, and computed columns. For very large datasets you can pre-aggregate on your backend and feed the results into Studio.

Yes. Studio supports React, Angular, Vue, and vanilla JavaScript, so it embeds inside a TanStack Start or Router app as a standard client-side component.

Ship analytics without the infrastructure

Try AG Grid Studio free for 45 days with full features and no watermarks.

Explore more