---
product: "AG Studio"
title: "Standalone Layout"
description: "Use a standalone layout for a page that holds exactly one widget, which fills the page canvas."
framework: react
version: "3.1.0"
related:
    - title: "Modes & Layout"
      url: "https://www.ag-grid.com/studio/react/modes-layout/"
    - title: "Responsive Layout"
      url: "https://www.ag-grid.com/studio/react/responsive-layout/"
    - title: "Theming"
      url: "https://www.ag-grid.com/studio/react/theming/"
    - title: "Theme Builder"
      url: "https://www.ag-grid.com/studio/react/theme-builder/"
    - title: "Localisation"
      url: "https://www.ag-grid.com/studio/react/localisation/"
    - title: "Accessibility"
      url: "https://www.ag-grid.com/studio/react/accessibility/"
    - title: "State"
      url: "https://www.ag-grid.com/studio/react/state/"
    - title: "Figma Design System"
      url: "https://www.ag-grid.com/studio/react/figma-design-system/"
llms: "https://www.ag-grid.com/studio/llms.txt"
---

# Standalone Layout

A standalone layout is a page layout for a page that holds exactly one widget. The widget fills the width and height of the page canvas, so it suits pages such as a full-page grid or a single detail chart.

#### Standalone Layout

```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,
  AgReportHistory,
  AgReportState,
  AgStudioApi,
  AgStudioApiReadyEvent,
  AgStudioMode,
  AgStudioProperties,
  AgStudioTheme,
  enableStudioDevValidations,
  studioTheme,
} from "ag-studio";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableStudioDevValidations();
}

const StudioExample = () => {
  const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
  const studioStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);
  const [data, setData] = useState<AgDataSourcesDefinition | AgDataEngine>();
  const initialState = useMemo<AgReportState | AgReportHistory>(() => {
    return {
      pages: [
        {
          id: "a",
          layout: {
            type: "standalone",
          },
          widgets: {
            grid: {
              type: "grid",
              dataMapping: {
                cols: [
                  { id: "medals.country" },
                  { id: "medals.gold", aggregation: "sum" },
                  { id: "medals.silver", aggregation: "sum" },
                  { id: "medals.bronze", aggregation: "sum" },
                  { id: "medals.total", aggregation: "sum" },
                ],
              },
              sort: [
                {
                  field: { id: "medals.total", aggregation: "sum" },
                  direction: "desc",
                },
              ],
            },
          },
        },
      ],
      selectedPageId: "a",
      panels: {
        filters: { collapsed: true },
        edit: { collapsed: true },
        data: { collapsed: true },
      },
    };
  }, []);
  const theme = useMemo<AgStudioTheme>(() => {
    return studioTheme.withParams({ studioMinWidth: 0, studioMinHeight: 0 });
  }, []);

  const onApiReady = useCallback((params: AgStudioApiReadyEvent) => {
    fetch("https://www.ag-grid.com/studio/example-assets/olympic-winners.json")
      .then((resp) => resp.json())
      .then((data: any[]) => setData({ sources: [{ id: "medals", data }] }));
  }, []);

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

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

[Live example: Standalone Layout](https://www.ag-grid.com/studio/examples/standalone-layout/standalone-layout/reactFunctionalTs/)

## Setting a Standalone Layout

Set `type` to `'standalone'` in the `layout` of a page in the report state:

```jsx
const initialState = useMemo(() => { 
	return {
        pages: [
            {
                id: 'medals',
                layout: {
                    type: 'standalone',
                },
                widgets: {
                    grid: {
                        type: 'grid',
                        dataMapping: {
                            cols: [{ id: 'medals.country' }, { id: 'medals.gold', aggregation: 'sum' }],
                        },
                    },
                },
            },
        ],
        selectedPageId: 'medals',
    };
}, []);

<AgStudio initialState={initialState} />
```

To use a standalone layout for every page, set `type` in the Studio-wide [`layout`](https://www.ag-grid.com/studio/react/modes-layout/#layout) property instead. A page's own `layout` takes precedence over the Studio-wide value. For a page that holds more than one widget, see [More Than One Widget](https://www.ag-grid.com/studio/react/standalone-layout/#more-than-one-widget).

```jsx
const layout = {
    type: 'standalone',
};

<AgStudio layout={layout} />
```

In a standalone layout:

- The widget cannot be moved or resized.
- The page's `widgetLayout` is not used, so it can be left out.
- The `columns` and `rowHeight` properties have no effect, because the widget is not placed on a grid.

## Width and Height

The outer Studio component has a default [Min Width](https://www.ag-grid.com/studio/react/studio-theme/#reference-AgStudioCoreThemeParams-studioMinWidth) and [Min Height](https://www.ag-grid.com/studio/react/studio-theme/#reference-AgStudioCoreThemeParams-studioMinHeight) of 600px. In a standalone layout, consider overriding the `studioMinWidth` and `studioMinHeight` theme parameters (for example, setting them to `0`) to avoid double scrollbars when the widget fills the page.

### Canvas Width

A standalone layout takes its default canvas width from two theme parameters, in place of the [Canvas Min Width](https://www.ag-grid.com/studio/react/studio-theme/#reference-AgStudioCoreThemeParams-studioCanvasMinWidth) and [Canvas Max Width](https://www.ag-grid.com/studio/react/studio-theme/#reference-AgStudioCoreThemeParams-studioCanvasMaxWidth) used by other pages:

- [Canvas Standalone Min Width](https://www.ag-grid.com/studio/react/studio-theme/#reference-AgStudioCoreThemeParams-studioCanvasStandaloneMinWidth) (`studioCanvasStandaloneMinWidth`) defaults to `0`, so there is no minimum width.
- [Canvas Standalone Max Width](https://www.ag-grid.com/studio/react/studio-theme/#reference-AgStudioCoreThemeParams-studioCanvasStandaloneMaxWidth) (`studioCanvasStandaloneMaxWidth`) defaults to the value of `studioCanvasMaxWidth`, which has no maximum unless set.

The `minWidth` and `maxWidth` layout properties override these theme parameters. A value set on the page is used first, then a value set in the Studio-wide `layout` property, then the theme parameter.

## More Than One Widget

A page with a standalone layout must hold exactly one widget. This applies whether the page sets the layout in its own `layout` or inherits it from the Studio-wide `layout` property.

When such a page holds more than one widget, Studio reports a state error and shows only the first widget. What happens to the other widgets in the report state depends on the mode:

- In edit mode, they are removed from the report state.
- In view mode, they are kept in the report state but are not shown, and the state error is fatal.

See [Invalid State](https://www.ag-grid.com/studio/react/state/#invalid-state) for how to handle state errors.