--- title: "Studio Properties Reference" framework: react version: "2.1.2" --- # 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/react/studio-interface#updating-studio-properties). ## 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/react/data/). | ## Interactivity | Property | Type | Default | Description | | --- | --- | --- | --- | | `localeText` ([Initial](https://www.ag-grid.com/studio/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/react/localisation/). | | `getLocaleText` ([Initial](https://www.ag-grid.com/studio/react/studio-interface#initial-studio-properties)) | `Function` | | A callback for localising text within Studio. See [Localisation](https://www.ag-grid.com/studio/react/localisation/). | | `enableRtl` ([Initial](https://www.ag-grid.com/studio/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/react/localisation#rtl-text-direction-right-to-left). | | `suppressTouch` ([Initial](https://www.ag-grid.com/studio/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). | ## Layout and Widgets | Property | Type | Default | Description | | --- | --- | --- | --- | | `mode` | `AgStudioMode` | `'view'` | Which mode Studio is in. See [Mode](https://www.ag-grid.com/studio/react/modes-layout/). | | `layout` | `Partial` | | Default layout styling. See [Layout Properties](https://www.ag-grid.com/studio/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/react/modes-layout#configuring-panels). | | `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/react/widget-configuration/). | | `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/react/modes-layout#customising-panel-content). | ## Lifecycle | Property | Type | Default | Description | | --- | --- | --- | --- | | `studioId` ([Initial](https://www.ag-grid.com/studio/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/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/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/react/studio-interface#initial-studio-properties)) | [`AgReportState`](https://www.ag-grid.com/studio/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/react/state/). | ## Theme | Property | Type | Default | Description | | --- | --- | --- | --- | | `theme` | `AgStudioTheme` | `studioTheme` | Theme to apply to Studio. See [Theming](https://www.ag-grid.com/studio/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/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/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/react/theming/). | | `themeStyleContainer` ([Initial](https://www.ag-grid.com/studio/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/react/theming/). | ## Studio Properties | Property | Type | Default | Description | | --- | --- | --- | --- | | `studioProperties` ([Initial](https://www.ag-grid.com/studio/react/studio-interface#initial-studio-properties)) | [`AgStudioProperties`](https://www.ag-grid.com/studio/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. |