---
title: "Keyboard Shortcuts"
framework: javascript
version: "2.1.2"
---

# Keyboard Shortcuts

Keyboard shortcuts let you interact with Studio without the mouse.

## Layout Interactions

The following interactions are possible within the layout:

- `⇥ Tab` / `⇧ Shift`+`⇥ Tab` - Move focus between widgets on the canvas.
- `↵ Enter` - Move focus into the focused widget if there is focusable content (e.g. into the cells of a grid).
- `⎋ Esc` - When focus is within a widget, move focus back to the widget container.
- `␣ Space` - Select the focused widget (e.g. display the widget details in the Edit Panel).
- `Delete` / `⌫ Backspace` - Delete the focused widget (Edit Mode only).
- `⇧ Shift` + `↑`/`↓`/`←`/`→` - move the focused widget (Edit Mode only).
- `⌥ Alt` + `↑`/`↓`/`←`/`→` - resize the focused widget (Edit Mode only).

When dragging a widget with the pointer (Edit Mode only), hold a modifier key to change the action:

- `⇧ Shift` + drag - Duplicate the widget at the drop location.
- `⌥ Alt` + drag - Swap the widget with the one at the drop location.

When focus is within a widget, `⇥ Tab` / `⇧ Shift`+`⇥ Tab` will keep cycling focus within the widget until `⎋ Esc` is pressed.

Try using the interactions in the example below.

#### Layout Keyboard Shortcuts

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

const initialState: AgReportState = {
  pages: [
    {
      id: "a",
      widgets: {
        a: {
          type: "value",
          dataMapping: {
            value: [{ id: "medals.gold", aggregation: "sum" }],
          },
          format: {
            caption: {
              enabled: true,
              text: "Gold Medals",
            },
          },
        },
        b: {
          type: "column-chart-grouped",
          dataMapping: {
            categoryKey: [{ id: "medals.year" }],
            valueKey: [{ id: "medals.silver", aggregation: "sum" }],
          },
        },
        c: {
          type: "grid",
          dataMapping: {
            cols: [
              { id: "medals.country" },
              { id: "medals.bronze", aggregation: "sum" },
            ],
          },
        },
      },
      widgetLayout: {
        a: {
          xTrack: 0,
          yTrack: 0,
          xSpan: 8,
          ySpan: 8,
        },
        b: {
          xTrack: 12,
          yTrack: 0,
          xSpan: 8,
          ySpan: 16,
        },
        c: {
          xTrack: 0,
          yTrack: 16,
          xSpan: 8,
          ySpan: 16,
        },
      },
    },
  ],
  selectedPageId: "a",
  panels: {
    filters: {
      collapsed: true,
    },
    data: {
      collapsed: true,
    },
  },
};

const studioProperties: AgStudioProperties = {
  mode: "edit",
  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: Layout Keyboard Shortcuts](https://www.ag-grid.com/studio/examples/keyboard-shortcuts/layout-keyboard-shortcuts/typescript/)

## Field Configuration

When you configure a widget, each field is shown as a pill with action buttons. With a field pill focused:

- `↑` / `↓` - Move focus between field pills.
- `⇧ Shift` + `↑`/`↓` - Reorder the focused pill within its group.
- `↵ Enter` - Move focus to the pill's action buttons (such as aggregation and remove).
- `⇥ Tab` / `⇧ Shift`+`⇥ Tab` - Move between a pill's action buttons.
- `⎋ Esc` - Return focus from an action button to the pill.

## Filters

With a filter card focused in the filters panel:

- `↑` / `↓` - Move focus between filter cards.
- `⇧ Shift` + `↑`/`↓` - Reorder the focused filter.
- `↵ Enter` - Move focus into the focused filter.
- `←` / `→` - Collapse or expand the focused filter.
- `⎋ Esc` - Return focus from within a filter to its card.