Source: https://app-studio-6167b.web.app/docs/EditComponent

Repository module

# EditComponent

Attach an editing toolbar to a selected DOM element in the repository editor. Choose a target element and handle tool actions explicitly.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/EditComponent/EditComponent.tsx)

> This module is available in the repository and is not exported from the published package. The example uses its repository import path.

## Import

```ts
import { EditComponent } from 'src/components/EditComponent/EditComponent';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React, { useState } from 'react';
import { EditComponent } from 'src/components/EditComponent/EditComponent';
import { Vertical } from 'app-studio';

export function EditComponentExample() {
  const [target, setTarget] = useState<HTMLElement | null>(null);
  return (
    <Vertical gap={16}>
      <button type="button" onClick={(event) => setTarget(event.currentTarget)}>
        Select this element to edit it
      </button>
      {target && (
        <EditComponent targetElement={target} onClose={() => setTarget(null)} />
      )}
    </Vertical>
  );
}
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**EditComponent**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `targetElement` Required | `HTMLElement \| null` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/EditComponent/EditComponent.tsx#L18) |
| `defaultToolId` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/EditComponent/EditComponent.tsx#L19) |
| `onClose` | `(() => void)` | `—` | Called when the user requests dismissal.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/EditComponent/EditComponent.tsx#L20) |
| `side` | `"bottom" \| "left" \| "right" \| "top"` `"bottom"``"left"``"right"``"top"` | `'right'` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/EditComponent/EditComponent.tsx#L21) |
| `sideOffset` | `number` | `12` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/EditComponent/EditComponent.tsx#L22) |
| `variant` | `"overlay" \| "floating"` `"overlay"``"floating"` | `'floating'` | Visual treatment of the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/EditComponent/EditComponent.tsx#L23) |
| `items` | `ToolbarItem[]` | `—` | Items displayed by the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/EditComponent/EditComponent.tsx#L24) |
| `onToolAction` | `((id: string) => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/EditComponent/EditComponent.tsx#L25) |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.