### Install canary release of Pimcore Studio UI

Source: https://github.com/pimcore/studio-ui-bundle/blob/2026.x/doc/04_Extending/01_Getting_Started_with_Your_First_Plugin.md

Installs the canary release of the Pimcore Studio UI package, which includes typings for the most recent .x-branch updates.

```bash
npm install @pimcore/studio-ui-bundle@canary react@18.3.x react-dom@18.3.x
```

--------------------------------

### Install dependencies

Source: https://github.com/pimcore/studio-ui-bundle/blob/2026.x/tests/README.md

Installs project dependencies using Composer.

```bash
composer install
```

--------------------------------

### Build commands

Source: https://github.com/pimcore/studio-ui-bundle/blob/2026.x/doc/04_Extending/01_Getting_Started_with_Your_First_Plugin.md

Commands to build the application for production or development with watch or live reloading.

```bash
npm run build        # production
npm run dev          # development with watch
npm run dev-server   # development with live reloading
```

--------------------------------

### Spin up Docker container

Source: https://github.com/pimcore/studio-ui-bundle/blob/2026.x/tests/README.md

Starts the Docker container for the test environment.

```bash
docker-compose up -d
```

--------------------------------

### Install Pimcore Studio UI npm package

Source: https://github.com/pimcore/studio-ui-bundle/blob/2026.x/doc/04_Extending/01_Getting_Started_with_Your_First_Plugin.md

Installs the necessary package for Pimcore Studio UI development, including TypeScript support for the Pimcore SDK, and specifies React versions.

```bash
npm install @pimcore/studio-ui-bundle react@18.3.x react-dom@18.3.x
```

--------------------------------

### Install Studio UI Bundle

Source: https://github.com/pimcore/studio-ui-bundle/blob/2026.x/doc/02_Installation.md

Installs the Studio UI Bundle using the Pimcore console command.

```bash
bin/console pimcore:bundle:install PimcoreStudioUiBundle
```

--------------------------------

### Add Rsbuild dependencies

Source: https://github.com/pimcore/studio-ui-bundle/blob/2026.x/doc/04_Extending/01_Getting_Started_with_Your_First_Plugin.md

Adds the necessary Rsbuild dependencies to bundle the application.

```bash
npm add @rsbuild/core @rsbuild/plugin-react @module-federation/rsbuild-plugin -D
```

--------------------------------

### Install Studio UI Bundle via Composer

Source: https://github.com/pimcore/studio-ui-bundle/blob/2026.x/doc/02_Installation.md

Installs the Studio UI Bundle using Composer.

```bash
composer require pimcore/studio-ui-bundle
```

--------------------------------

### onInit Method Example

Source: https://github.com/pimcore/studio-ui-bundle/blob/2026.x/doc/01_Architecture_Overview/01_SDK_Overview/02_Plugin_Architecture_Plugins_Modules.md

Example of using the onInit method to rebind a service, specifically replacing the default tab manager for folder assets.

```typescript
onInit: ({ container }): void => {
    container.rebind(serviceIds['Asset/Editor/FolderTabManager']).to(ExtendedFolderTabManager).inSingletonScope()
},
```

--------------------------------

### Multi-Bundle Configuration Example - Bundle A

Source: https://github.com/pimcore/studio-ui-bundle/blob/2026.x/doc/03_Configuration_and_Administration/01_Configuration/04_Additional_CSS_or_JS_Files.md

Example of static resource configuration for Bundle A, demonstrating how it contributes to the overall configuration.

```yaml
pimcore_studio_ui:
   static_resources:
      css:
         - bundle-a-styles.css
      editmode:
         css:
            - bundle-a-editmode.css
```

--------------------------------

### onStartup Method Example

Source: https://github.com/pimcore/studio-ui-bundle/blob/2026.x/doc/01_Architecture_Overview/01_SDK_Overview/02_Plugin_Architecture_Plugins_Modules.md

Example of using the onStartup method to register a custom module.

```typescript
onStartup: ({ moduleSystem }): void => {
  moduleSystem.registerModule(FolderTabExtension)
}
```

--------------------------------

### Example: Creating a New Tab

Source: https://github.com/pimcore/studio-ui-bundle/blob/2026.x/doc/01_Architecture_Overview/01_SDK_Overview/03_Services_and_Dependency_Injection.md

This example demonstrates how to create and register a new tab using the service container.

```typescript
import { container } from '@pimcore/studio-ui-bundle'
import { serviceIds } from '@pimcore/studio-ui-bundle/app'
import { FolderTabManager } from '@pimcore/studio-ui-bundle/modules/asset'

// Retrieve the FolderTabManager service from the container
const tabManager = container.get<FolderTabManager>(serviceIds['Asset/Editor/FolderTabManager'])

// Register a new tab with custom properties
tabManager.register({
  children: <ImageGallery />,
  icon: <Icon name={'camera'} />,
  key: 'image-gallery',
  label: 'Image Gallery'
})
```

--------------------------------

### Multi-Bundle Configuration Example - Bundle B

Source: https://github.com/pimcore/studio-ui-bundle/blob/2026.x/doc/03_Configuration_and_Administration/01_Configuration/04_Additional_CSS_or_JS_Files.md

Example of static resource configuration for Bundle B, demonstrating how it contributes to the overall configuration.

```yaml
pimcore_studio_ui:
   static_resources:
      css:
         - bundle-b-styles.css
      editmode:
         css:
            - bundle-b-editmode.css
```

--------------------------------

### Register Studio UI Bundle

Source: https://github.com/pimcore/studio-ui-bundle/blob/2026.x/doc/02_Installation.md

Registers the Studio UI Bundle in the config/bundles.php file.

```php
use Pimcore\Bundle\StudioUiBundle\PimcoreStudioUiBundle;
// ...
return [
    // ...
    PimcoreStudioUiBundle::class => ['all' => true],
    // ...
];  
```

--------------------------------

### Run tests

Source: https://github.com/pimcore/studio-ui-bundle/blob/2026.x/tests/README.md

Executes all tests using the Codeception test runner with verbose output.

```bash
./vendor/bin/codecept run -vvv
```

--------------------------------

### SDK Imports Examples

Source: https://github.com/pimcore/studio-ui-bundle/blob/2026.x/doc/01_Architecture_Overview/01_SDK_Overview/08_RTK_Query_API.md

Examples demonstrating how to import generated API slices for various operations like fetching asset details, adding data objects, and submitting workflow actions.

```typescript
import { useAssetGetByIdQuery } from '@pimcore/studio-ui-bundle/api/asset';

// Add a new data object to the system
import { useDataObjectAddMutation } from '@pimcore/studio-ui-bundle/api/data-object';

// Submit a workflow action for a specific element
import { useWorkflowActionSubmitMutation } from '@pimcore/studio-ui-bundle/api/workflow';
```

--------------------------------

### Registering Custom Context Menu Items

Source: https://github.com/pimcore/studio-ui-bundle/blob/2026.x/doc/01_Architecture_Overview/01_SDK_Overview/06_Context_Menu_Registry.md

This example demonstrates how to register a custom menu item to the 'dataObjectTree' slot using the `registerToSlot` method. It includes importing necessary modules, getting the registry instance, and defining the menu item with its label, icon, and click handler.

```typescript
import { container } from '@pimcore/studio-ui-bundle'
import { serviceIds } from '@pimcore/studio-ui-bundle/app'
import { contextMenuConfig, type ContextMenuRegistryInterface, type DataObjectTreeContextMenuProps } from '@pimcore/studio-ui-bundle/modules/app'

const contextMenuRegistry = container.get<ContextMenuRegistryInterface>(
  serviceIds['App/ContextMenuRegistry/ContextMenuRegistry']
)

contextMenuRegistry.registerToSlot(contextMenuConfig.dataObjectTree.name, {
  name: 'customAction',
  priority: contextMenuConfig.dataObjectTree.priority.addObject + 1,
  useMenuItem: (context: DataObjectTreeContextMenuProps) => {
    const { t } = useTranslation()


    return {
      label: t('custom.action.label'),
      key: 'customAction',
      icon: <Icon value='custom-icon' />,
      onClick: () => {
        // Perform custom action
      }
    }
  }
})
```

--------------------------------

### Navigate to working directory

Source: https://github.com/pimcore/studio-ui-bundle/blob/2026.x/tests/README.md

Changes the current directory to the project's working directory within the container.

```bash
cd /var/cli
```

--------------------------------

### Using a UI component

Source: https://github.com/pimcore/studio-ui-bundle/blob/2026.x/doc/01_Architecture_Overview/01_SDK_Overview/09_SDK_Imports.md

Example demonstrating how to import and use the Alert component from the SDK.

```typescript
// Import and use the Alert component
import { Alert } from '@pimcore/studio-ui-bundle/components';

const App = () => (
    <div>
        <Alert message="This is an alert message!" type="info" />
    </div>
);

export default App;
```

--------------------------------

### Example: Using `useInjection` in Functional Components

Source: https://github.com/pimcore/studio-ui-bundle/blob/2026.x/doc/01_Architecture_Overview/01_SDK_Overview/03_Services_and_Dependency_Injection.md

This example shows how to use the `useInjection` hook to simplify dependency injection in functional components.

```typescript
import React from 'react'
import { useInjection } from '@pimcore/studio-ui-bundle/app'
import { serviceIds } from '@pimcore/studio-ui-bundle/app'
import { FolderTabManager } from '@pimcore/studio-ui-bundle/modules/asset'

const MyComponent = (): React.JSX.Element => {
  // Inject the FolderTabManager service
  const tabManager = useInjection<FolderTabManager>(serviceIds['Asset/Editor/FolderTabManager'])

  // Use the injected service
  const handleAddTab = () => {
    tabManager.register({
      children: <CustomTabContent />,
      icon: <Icon name={'custom-icon'} />,
      key: 'custom-tab',
      label: 'Custom Tab'
    })
  }

  return <button onClick={handleAddTab}>Add Tab</button>
}
```

--------------------------------

### Custom Conditional Logic Example

Source: https://github.com/pimcore/studio-ui-bundle/blob/2026.x/doc/01_Architecture_Overview/01_SDK_Overview/05_Widget_Manager.md

This example demonstrates how to use BorderTitleView and TabTitleView directly for advanced use cases with different behavior for sidebar buttons versus tabs. It shows how widgets can appear as border buttons in sidebars and as tabs in the main content area.

```typescript
import { BorderNode } from 'flexlayout-react'
import {
  BorderTitleView,
  TabTitleView,
  type TabTitleContainerProps,
  useWidgetManager
} from '@pimcore/studio-ui-bundle/modules/widget-manager'

const MyAdvancedTitle = ({ node, modified }: TabTitleContainerProps) => {
  const { closeWidget } = useWidgetManager()
  const config = node.getConfig()
  const isBorderNode = node.getParent() instanceof BorderNode
  const icon = config.icon ?? { value: 'widget-default', type: 'name' }
  const title = `Custom ${config.elementType ?? 'Widget'}`

  const onClose = () => closeWidget(node.getId())

  if (isBorderNode) {
    return (
      <BorderTitleView
        icon={icon}
        title={title}
      />
    )
  }

  return (
    <TabTitleView
      icon={icon}
      title={title + (modified ? ' *' : '')}
      onClose={node.isEnableClose() ? onClose : undefined}
      onConfirm={modified ? onClose : undefined}
    />
  )
}

widgetRegistry.registerWidget({
  name: 'my-advanced-widget',
  component: MyWidgetComponent,
  titleComponent: MyAdvancedTitle
})
```

--------------------------------

### Open PHP container bash

Source: https://github.com/pimcore/studio-ui-bundle/blob/2026.x/tests/README.md

Opens an interactive bash session inside the PHP container.

```bash
docker-compose exec php bash
```

--------------------------------

### Utility Classes for Padding and Margin

Source: https://github.com/pimcore/studio-ui-bundle/blob/2026.x/assets/js/src/core/__stories__/spacing/overview.mdx

Examples of using utility classes for applying padding and margin. It is recommended to use the box component if possible.

```html
<div class="p-small p-x-small p-y-large p-t-small p-r-small p-b-small p-l-small">Padding</div>
<div class="m-small m-x-small m-y-large m-t-small m-r-small m-b-small m-l-small">Margin</div>
```

--------------------------------

### Opening the Element Selector

Source: https://github.com/pimcore/studio-ui-bundle/blob/2026.x/doc/01_Architecture_Overview/02_PimcoreStudio_Window_API.md

Example of opening the element selector dialog with specific configuration options.

```typescript
import { getPimcoreStudioApi } from '@pimcore/studio-ui-bundle/app'
import { 
  type ElementSelectorConfig,
  SelectionType
} from '@pimcore/studio-ui-bundle/modules/element'

const studioApi = getPimcoreStudioApi()

const selectorConfig: ElementSelectorConfig = {
  selectionType: SelectionType.Single,
  areas: {
    asset: true,
    document: false,
    object: false
  },
  onFinish: (event) => {
    console.log('Selected items:', event.items)
  }
}
studioApi.element.openElementSelector(selectorConfig)
```

--------------------------------

### Importing a UI Component

Source: https://github.com/pimcore/studio-ui-bundle/blob/2026.x/doc/01_Architecture_Overview/01_SDK_Overview/01_UI_Components_and_Storybook.md

Example of how to import a specific UI component from the Pimcore Studio UI bundle into a React project.

```typescript
import { ComponentName } from '@pimcore/studio-ui-bundle/components'
```

--------------------------------

### Importing an API hook

Source: https://github.com/pimcore/studio-ui-bundle/blob/2026.x/doc/01_Architecture_Overview/01_SDK_Overview/09_SDK_Imports.md

Example of importing an RTK Query hook for fetching asset data.

```typescript
import { useAssetGetByIdQuery } from '@pimcore/studio-ui-bundle/api/asset';
```

--------------------------------

### Registering a New Tab for Folder Assets Module

Source: https://github.com/pimcore/studio-ui-bundle/blob/2026.x/doc/01_Architecture_Overview/01_SDK_Overview/02_Plugin_Architecture_Plugins_Modules.md

Example of a module that registers a new tab for folder assets by interacting with the tab manager.

```typescript
export const ImageSliderModule: AbstractModule = {
  onInit: (): void => {
    const tabManager = container.get<FolderTabManager>(serviceIds['Asset/Editor/FolderTabManager'])

    tabManager.register({
      children: <ImageGallery />,
      icon: <Icon name={'camera'} />,
      key: 'image-gallery',
      label: 'Image Gallery'
    })
  }
}
```

--------------------------------

### Extending the Component Configuration

Source: https://github.com/pimcore/studio-ui-bundle/blob/2026.x/doc/01_Architecture_Overview/01_SDK_Overview/04_Component_Registry.md

This example demonstrates how to extend the default component configuration by dynamically registering new slots. It adds a `customSlot` to the toolbar of a `customModule`.

```typescript
componentRegistry.registerConfig({
  customModule: {
    editor: {
      toolbar: {
        slots: {
          customSlot: {
            type: ComponentType.SLOT,
            name: 'customModule.editor.toolbar.slots.customSlot'
          }
        }
      }
    }
  }
})
```

--------------------------------

### Tabpanel Component Example

Source: https://github.com/pimcore/studio-ui-bundle/blob/2026.x/assets/js/src/core/components/tabpanel/README.md

A basic example demonstrating how to use the Tabpanel component with an array of items, each having a label and children content.

```tsx
const items = [
  {
    label: 'Tab 1',
    children: <div>Content 1</div>
  },
  {
    label: 'Tab 2',
    children: <div>Content 2</div>
  }
]

<Tabpanel 
  items={items}
  title="My Tabs"
  border
/>
```

--------------------------------

### Storybook Commands

Source: https://github.com/pimcore/studio-ui-bundle/blob/2026.x/doc/05_Development_Details/01_Studio_UI_Core_Development.md

Commands to run and build Storybook for component documentation.

```bash
npm run storybook # run storybook with live reloading
npm run build-storybook # for building storybook for a static hosting
```

--------------------------------

### Local Package Testing Commands

Source: https://github.com/pimcore/studio-ui-bundle/blob/2026.x/doc/05_Development_Details/01_Studio_UI_Core_Development.md

Commands to build, link, and test the package locally.

```bash
npm run build-app
npm run build-rsbuild-plugins
npm run generate-types
npm link

# in your bundle
npm link @pimcore/studio-ui-bundle
```

--------------------------------

### Getting Iframe API for a Document

Source: https://github.com/pimcore/studio-ui-bundle/blob/2026.x/doc/01_Architecture_Overview/02_PimcoreStudio_Window_API.md

Retrieves the iframe API for a specific document to access its editable values.

```typescript
const iframeApi = studioApi.document.getIframeApi(documentId)
const editableData = iframeApi.documentEditable.getValues()
```

--------------------------------

### Opening the File Upload Modal

Source: https://github.com/pimcore/studio-ui-bundle/blob/2026.x/doc/01_Architecture_Overview/02_PimcoreStudio_Window_API.md

Example of opening the file upload modal with configuration for target folder, item limits, and accepted file types.

```typescript
import { getPimcoreStudioApi } from '@pimcore/studio-ui-bundle/app'
import type { ModalUploadProps } from '@pimcore/studio-ui-bundle/components'

const studioApi = getPimcoreStudioApi()

const uploadProps: ModalUploadProps = {
  targetFolderId: 1,
  maxItems: 10,
  multiple: true,
  accept: 'image/*',
  onSuccess: async (assets) => {
    console.log('Uploaded assets:', assets)
  }
}
studioApi.element.openUploadModal(uploadProps)
```

--------------------------------

### WYSIWYG Editor Global Configuration

Source: https://github.com/pimcore/studio-ui-bundle/blob/2026.x/doc/03_Configuration_and_Administration/01_Configuration/03_Global_Configuration/01_WYSIWYG_Editor_Config.md

Example configuration for WYSIWYG editors in Pimcore Studio UI, specifically for data objects.

```yaml
pimcore_studio_ui:
    wysiwyg:
        defaultEditorConfig:
            dataObject: # Replace this with 'document' for documents
                modules: 
                    toolbar:
                        container:
                          - [{ header: [1, 2, 3, 4, 5, 6, false] }]
```