---
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: angular
version: "3.1.0"
related:
    - title: "Modes & Layout"
      url: "https://www.ag-grid.com/studio/angular/modes-layout/"
    - title: "Responsive Layout"
      url: "https://www.ag-grid.com/studio/angular/responsive-layout/"
    - title: "Theming"
      url: "https://www.ag-grid.com/studio/angular/theming/"
    - title: "Theme Builder"
      url: "https://www.ag-grid.com/studio/angular/theme-builder/"
    - title: "Localisation"
      url: "https://www.ag-grid.com/studio/angular/localisation/"
    - title: "Accessibility"
      url: "https://www.ag-grid.com/studio/angular/accessibility/"
    - title: "State"
      url: "https://www.ag-grid.com/studio/angular/state/"
    - title: "Figma Design System"
      url: "https://www.ag-grid.com/studio/angular/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 '@angular/compiler';
import { provideHttpClient } from '@angular/common/http';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component.ts';

const app = bootstrapApplication(AppComponent, {
    providers: [provideHttpClient()],
});
```

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

## Setting a Standalone Layout

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

```ts
<ag-studio
    [initialState]="initialState"
    /* other studio properties ... */ />

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

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

```ts
<ag-studio
    [layout]="layout"
    /* other studio properties ... */ />

this.layout = {
    type: 'standalone',
};
```

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

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