---
title: "Keyboard Shortcuts"
framework: react
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

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

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>(() => {
    return {
      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 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"}
          onApiReady={onApiReady}
        />
      </div>
    </div>
  );
};

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

[Live example: Layout Keyboard Shortcuts](https://www.ag-grid.com/studio/examples/keyboard-shortcuts/layout-keyboard-shortcuts/reactFunctionalTs/)

## 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.