---
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: javascript
version: "3.1.0"
related:
    - title: "Modes & Layout"
      url: "https://www.ag-grid.com/studio/javascript/modes-layout/"
    - title: "Responsive Layout"
      url: "https://www.ag-grid.com/studio/javascript/responsive-layout/"
    - title: "Theming"
      url: "https://www.ag-grid.com/studio/javascript/theming/"
    - title: "Theme Builder"
      url: "https://www.ag-grid.com/studio/javascript/theme-builder/"
    - title: "Localisation"
      url: "https://www.ag-grid.com/studio/javascript/localisation/"
    - title: "Accessibility"
      url: "https://www.ag-grid.com/studio/javascript/accessibility/"
    - title: "State"
      url: "https://www.ag-grid.com/studio/javascript/state/"
    - title: "Figma Design System"
      url: "https://www.ag-grid.com/studio/javascript/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

```ts
import {
  AgReportState,
  AgStudioApi,
  AgStudioProperties,
  createStudio,
  enableStudioDevValidations,
  studioTheme,
} from "ag-studio";

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

const initialState: AgReportState = {
  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 studioProperties: AgStudioProperties = {
  mode: "edit",
  theme: studioTheme.withParams({ studioMinWidth: 0, studioMinHeight: 0 }),
  initialState,
};

let studioApi: AgStudioApi;

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

fetch("https://www.ag-grid.com/studio/example-assets/olympic-winners.json")
  .then((response) => response.json())
  .then((data) =>
    studioApi!.setProperty("data", { sources: [{ id: "medals", data }] }),
  );
```

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

## Setting a Standalone Layout

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

```js
const studioProperties = {
    initialState: {
        pages: [
            {
                id: 'medals',
                layout: {
                    type: 'standalone',
                },
                widgets: {
                    grid: {
                        type: 'grid',
                        dataMapping: {
                            cols: [{ id: 'medals.country' }, { id: 'medals.gold', aggregation: 'sum' }],
                        },
                    },
                },
            },
        ],
        selectedPageId: 'medals',
    },

    // other studio properties ...
}
```

To use a standalone layout for every page, set `type` in the Studio-wide [`layout`](https://www.ag-grid.com/studio/javascript/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/javascript/standalone-layout/#more-than-one-widget).

```js
const studioProperties = {
    layout: {
        type: 'standalone',
    },

    // other studio properties ...
}
```

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/javascript/studio-theme/#reference-AgStudioCoreThemeParams-studioMinWidth) and [Min Height](https://www.ag-grid.com/studio/javascript/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/javascript/studio-theme/#reference-AgStudioCoreThemeParams-studioCanvasMinWidth) and [Canvas Max Width](https://www.ag-grid.com/studio/javascript/studio-theme/#reference-AgStudioCoreThemeParams-studioCanvasMaxWidth) used by other pages:

- [Canvas Standalone Min Width](https://www.ag-grid.com/studio/javascript/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/javascript/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/javascript/state/#invalid-state) for how to handle state errors.