---
title: "Keyboard Shortcuts"
framework: vue
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 {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgStudio } from "ag-studio-vue3";
import {
  AgDataEngine,
  AgDataSourcesDefinition,
  AgReportState,
  AgStudioApi,
  AgStudioApiReadyEvent,
  AgStudioMode,
  AgStudioProperties,
} from "ag-studio";

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div style="display: flex; flex-direction: column; height: 100%">
      <ag-studio
        style="width: 100%; height: 100%;"
        class="my-studio-container"
        @api-ready="onApiReady"
        :initialState="initialState"
        :mode="mode"
        :data="data"></ag-studio>
      </div>
        </div>
    `,
  components: {
    "ag-studio": AgStudio,
  },
  setup(props) {
    const studioApi = shallowRef<AgStudioApi | null>(null);
    const initialState = ref<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 mode = ref<AgStudioMode>("edit");
    const data = ref<AgDataSourcesDefinition | AgDataEngine>(null);

    const onApiReady = (params: AgStudioApiReadyEvent) => {
      studioApi.value = params.api;

      const getData = (data) => ({ sources: [{ id: "medals", data }] });

      fetch("https://www.ag-grid.com/studio/example-assets/olympic-winners.json")
        .then((resp) => resp.json())
        .then((respData) => (data.value = getData(respData)));
    };

    return {
      studioApi,
      initialState,
      mode,
      data,
      onApiReady,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

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

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