--- product: "AG Studio" title: "Studio Properties Reference" description: "Implements the AgStudioProperties interface." framework: react version: "3.0.0" related: - title: "Overview" url: "https://www.ag-grid.com/studio/archive/3.0.0/react/studio-interface/" - title: "Events Reference" url: "https://www.ag-grid.com/studio/archive/3.0.0/react/studio-events/" - title: "API Reference" url: "https://www.ag-grid.com/studio/archive/3.0.0/react/studio-api/" - title: "Theme Reference" url: "https://www.ag-grid.com/studio/archive/3.0.0/react/studio-theme/" - title: "State Reference" url: "https://www.ag-grid.com/studio/archive/3.0.0/react/studio-state/" - title: "Studio Lifecycle" url: "https://www.ag-grid.com/studio/archive/3.0.0/react/studio-lifecycle/" - title: "Registry Type" url: "https://www.ag-grid.com/studio/archive/3.0.0/react/registry-type/" llms: "https://www.ag-grid.com/studio/archive/3.0.0/llms.txt" --- # Studio Properties Reference Implements the `AgStudioProperties` interface. Studio will respond to property updates unless they are marked as `Initial`. See [Updating Studio Properties](https://www.ag-grid.com/studio/archive/3.0.0/react/studio-interface/#updating-studio-properties). ## AI | Property | Type | Default | Description | | --- | --- | --- | --- | | `ai` ([Initial](https://www.ag-grid.com/studio/archive/3.0.0/react/studio-interface/#initial-studio-properties)) | `AgAiHarnessSetup` | | The agent harness powering the AI Assistant panel: either a harness, or a function building one from the Studio API. Results vary with the LLM you supply. See [Harness Overview](https://www.ag-grid.com/studio/archive/3.0.0/react/ai-harness/). | | `aiText` ([Initial](https://www.ag-grid.com/studio/archive/3.0.0/react/studio-interface/#initial-studio-properties)) | `Partial` | | Override any AI-facing prose strings. Merged over AG defaults at initialisation time. Keys use dotted notation, e.g. `'tools.view_schema.description'`. See [Chat UI](https://www.ag-grid.com/studio/archive/3.0.0/react/ai-chat-ui/#localisation). | | `aiToolDisplay` | `Record` | | How each tool's calls are presented in the AI Assistant panel, keyed by tool name: the words on the step, an optional component for the body that opens beneath it, or `hidden` to leave the tool out of the transcript. Studio's own tools come pre-declared; an entry here overrides them, and any tool of your own needs one to render as more than its name. Keyed by name because a call replayed from history no longer carries the tool that ran it, only the name it was called by. Applies whichever harness is driving the panel. `detail` is checked against the component type of the framework you are using. See [Tool Components](https://www.ag-grid.com/studio/archive/3.0.0/react/ai-tool-components/). | ## Data | Property | Type | Default | Description | | --- | --- | --- | --- | | `data` | `AgDataSourcesDefinition \| AgDataEngine` | | Defines the data sources used by Studio. If updated after initially being set, only changes to synchronous data will be processed. Any other changes will be ignored (e.g. adding/removing data sources, updating fields, etc.) See [Data](https://www.ag-grid.com/studio/archive/3.0.0/react/data/). | | `dataOptions` | `AgDataOptions` | | Data-layer configuration. Controls behaviours such as export row limits. See [CSV Export](https://www.ag-grid.com/studio/archive/3.0.0/react/widget-configuration/#csv-export). | ## Interactivity | Property | Type | Default | Description | | --- | --- | --- | --- | | `localeText` ([Initial](https://www.ag-grid.com/studio/archive/3.0.0/react/studio-interface/#initial-studio-properties)) | `AgStudioLocaleText` | | A map of key->value pairs for localising text within Studio. See [Localisation](https://www.ag-grid.com/studio/archive/3.0.0/react/localisation/). | | `getLocaleText` ([Initial](https://www.ag-grid.com/studio/archive/3.0.0/react/studio-interface/#initial-studio-properties)) | `Function` | | A callback for localising text within Studio. See [Localisation](https://www.ag-grid.com/studio/archive/3.0.0/react/localisation/). | | `enableRtl` ([Initial](https://www.ag-grid.com/studio/archive/3.0.0/react/studio-interface/#initial-studio-properties)) | `boolean` | `false` | Set to `true` to operate Studio in RTL (Right to Left) mode. See [RTL](https://www.ag-grid.com/studio/archive/3.0.0/react/localisation/#rtl-text-direction). | | `suppressTouch` ([Initial](https://www.ag-grid.com/studio/archive/3.0.0/react/studio-interface/#initial-studio-properties)) | `boolean` | `false` | Disables touch support (but does not remove the browser's efforts to simulate mouse events on touch). | | `suppressKeyboard` | `AgSuppressKeyboard` | | Keyboard shortcuts Studio should not handle, so an application can bind them itself. Each shortcut is suppressed independently, e.g. `{ redo: true }` keeps undo on ctrl/cmd+Z and leaves ctrl/cmd+shift+Z to the application. See [Undo & Redo](https://www.ag-grid.com/studio/archive/3.0.0/react/undo-redo/#suppressing-the-shortcuts). | ## Layout and Widgets | Property | Type | Default | Description | | --- | --- | --- | --- | | `mode` | `AgStudioMode` | `'view'` | Which mode Studio is in. Changing this only changes what is shown and what is editable: the active state is neither saved nor restored on a mode change, and carries across the switch unchanged. The undo and redo history also carries across by default; set `history.onModeChange` to discard it instead. See [Mode](https://www.ag-grid.com/studio/archive/3.0.0/react/modes-layout/). | | `layout` | `Partial` | | Default layout styling. See [Layout Properties](https://www.ag-grid.com/studio/archive/3.0.0/react/modes-layout/#layout-properties). | | `panels` | `AgPanelConfig` | | Configure which panels are displayed and on which side. See [Configuring Panels](https://www.ag-grid.com/studio/archive/3.0.0/react/modes-layout/#panel-configuration). | | `enableFilterEditingInViewMode` | `boolean` | `false` | Allows filters to be added to, and removed from, the filters panel while in view mode. When `false`, filters can only be added and removed in edit mode. Studio does not store filters added this way. Listen to `onStateUpdated` and persist the state yourself if it needs to survive a reload. See [Filters Panel](https://www.ag-grid.com/studio/archive/3.0.0/react/filters/#filters-panel). | | `widgets` | `AgWidgetsConfig \| ((widgets: AgWidgetsConfig) => AgWidgetsConfig)` | | Configure widgets: - Add custom widgets - Override provided widgets - Change displayed widgets - Change default widget type when dragging fields See [Widget Configuration](https://www.ag-grid.com/studio/archive/3.0.0/react/widget-overview/). | | `page` | `AgPageConfig \| ((config: AgPageConfig) => AgPageConfig)` | | Configure page (e.g. page setup form in page tab of edit panel). See [Customising Panel Content](https://www.ag-grid.com/studio/archive/3.0.0/react/modes-layout/#panel-content). | | `components` | `TRegistry["components"]` | | Custom components (e.g. custom widget components) keyed by ID. Used to share components which can then be referenced directly by key in the definitions. | ## Lifecycle | Property | Type | Default | Description | | --- | --- | --- | --- | | `studioId` ([Initial](https://www.ag-grid.com/studio/archive/3.0.0/react/studio-interface/#initial-studio-properties)) | `string` | | Provide a custom `studioId` for this instance of Studio. Value will be set on the root DOM node using the attribute `studio-id` as well as being accessible via the `api.getStudioId()` method. | | `context` ([Initial](https://www.ag-grid.com/studio/archive/3.0.0/react/studio-interface/#initial-studio-properties)) | `any` | | Provides a context object that is provided to different callbacks Studio uses. Used for passing additional information to the callbacks used by your application. | ## Rendering | Property | Type | Default | Description | | --- | --- | --- | --- | | `tabIndex` ([Initial](https://www.ag-grid.com/studio/archive/3.0.0/react/studio-interface/#initial-studio-properties)) | `number` | `0` | Change this value to set the tabIndex order of Studio within your application. | | `popupParent` | [`HTMLElement \| null`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement) | | DOM element to use as the popup parent for Studio popups (context menus, etc.). | | `getDocument` | `Function` | | Allows overriding what `document` is used. Use this when you want Studio to use a different `document` than the one available on the global scope. This can happen if docking out components (something which Electron supports). | ## State | Property | Type | Default | Description | | --- | --- | --- | --- | | `initialState` ([Initial](https://www.ag-grid.com/studio/archive/3.0.0/react/studio-interface/#initial-studio-properties)) | [`AgReportState`](https://www.ag-grid.com/studio/archive/3.0.0/react/studio-state/#agreportstate) | | Initial state for Studio. Only read once on initialization. Can be used in conjunction with `api.getState()` to save and restore Studio state. See [State](https://www.ag-grid.com/studio/archive/3.0.0/react/state/). | | `history` | `AgHistoryOptions` | | How Studio's undo and redo history behaves. See [Undo & Redo](https://www.ag-grid.com/studio/archive/3.0.0/react/undo-redo/). | ## Theme | Property | Type | Default | Description | | --- | --- | --- | --- | | `theme` | `AgStudioTheme` | `studioTheme` | Theme to apply to Studio. See [Theming](https://www.ag-grid.com/studio/archive/3.0.0/react/theming/). | | `loadThemeGoogleFonts` | `boolean` | | If your theme uses a font that is available on Google Fonts, pass true to load it from Google's CDN. See [Theming](https://www.ag-grid.com/studio/archive/3.0.0/react/theming/). | | `themeCssLayer` | `string` | | The CSS layer that this theme should be rendered onto. When specified, Studio CSS will be wrapped in a `@layer ${themeCssLayer} { ... }` block. NOTE: when specifying `themeCssLayer` we recommend setting `themeStyleContainer` to `document.body` to ensure that Studio CSS comes after your application CSS, allowing your application to set the order of layers. See [Theming](https://www.ag-grid.com/studio/archive/3.0.0/react/theming/). | | `styleNonce` | `string` | | The nonce attribute to set on style elements added to the document by themes. If "foo" is passed to this property, Studio can use the Content Security Policy `style-src 'nonce-foo'`, instead of the less secure `style-src 'unsafe-inline'`. Note: CSP nonces are global to a page, where a page has multiple Studio components, every one must have the same styleNonce set. See [Theming](https://www.ag-grid.com/studio/archive/3.0.0/react/theming/). | | `themeStyleContainer` ([Initial](https://www.ag-grid.com/studio/archive/3.0.0/react/studio-interface/#initial-studio-properties)) | [`HTMLElement \| (() => void \| HTMLElement)`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement) | | An element to insert style elements into when injecting styles into the Studio. Styles are inserted at the start of the element. If undefined, styles will be added to the document head for Studio components rendered in the main document fragment, or to Studio wrapper element for other Studio components (e.g. those rendered in a shadow DOM or detached from the document). See [Theming](https://www.ag-grid.com/studio/archive/3.0.0/react/theming/). | ## Studio Properties | Property | Type | Default | Description | | --- | --- | --- | --- | | `studioProperties` ([Initial](https://www.ag-grid.com/studio/archive/3.0.0/react/studio-interface/#initial-studio-properties)) | [`AgStudioProperties`](https://www.ag-grid.com/studio/archive/3.0.0/react/studio-properties/) | | All the above properties can also be specified on a single `studioProperties` object. If a property is set via `studioProperties`, as well as directly on the component, then the component value will take precedence. `studioProperties` is only read during initialisation, if you change it afterwards it will not impact Studio. |