> ## Documentation Index
> Fetch the complete documentation index at: https://docs.metabind.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Update Component

> Update an existing component

## Path Parameters

<ParamField path="organizationId" type="string" required>
  Organization ID
</ParamField>

<ParamField path="projectId" type="string" required>
  Project ID
</ParamField>

<ParamField path="id" type="string" required>
  Component ID
</ParamField>

## Request Body

All fields are optional. Only provided fields will be updated.

<ParamField body="name" type="string">
  Updated component name
</ParamField>

<ParamField body="content" type="string">
  Updated component source code (TypeScript)
</ParamField>

<ParamField body="collectionId" type="string">
  Move to different collection (null for root)
</ParamField>

<ParamField body="metadata" type="object">
  <Expandable title="properties">
    <ParamField body="metadata.tags" type="string[]">
      Updated tags
    </ParamField>
  </Expandable>
</ParamField>

### Example Request

```json theme={null}
{
  "content": "const metadata = () => ({\n  title: 'Product Card',\n  description: 'Updated description'\n});\n\nconst body = (props: ComponentProps) => {...};",
  "metadata": {
    "tags": ["product", "card", "updated"]
  }
}
```

<Note>
  When updating a published component, its status changes to `modified`. The TypeScript code in `content` is automatically recompiled.
</Note>

## Response

Returns the updated Component object.

```json theme={null}
{
  "id": "c123",
  "name": "ProductCard",
  "title": "Product Card",
  "description": "Updated description",
  "type": "view",
  "status": "modified",
  "version": null,
  "lastPublishedVersion": 2,
  "content": "...",
  "compiled": "...",
  "schema": {...},
  "metadata": {
    "tags": ["product", "card", "updated"]
  },
  "createdAt": "2024-03-20T10:00:00Z",
  "updatedAt": "2024-03-22T09:15:00Z"
}
```

## Error Responses

### Not Found

```json theme={null}
{
  "error": {
    "code": "NOT_FOUND",
    "message": "Component c123 was not found"
  }
}
```

### Validation Failed

```json theme={null}
{
  "error": {
    "code": "BAD_REQUEST",
    "message": "Validation failed",
    "details": {}
  }
}
```

## Code Examples

<CodeGroup>
  ```bash cURL theme={null}
  curl -X PUT "https://api.metabind.ai/app/v1/organizations/org123/projects/proj456/components/c123" \
    -H "Authorization: Bearer YOUR_JWT" \
    -H "Content-Type: application/json" \
    -d '{
      "metadata": {
        "tags": ["product", "card", "featured"]
      }
    }'
  ```

  ```javascript JavaScript theme={null}
  const response = await fetch(
    'https://api.metabind.ai/app/v1/organizations/org123/projects/proj456/components/c123',
    {
      method: 'PUT',
      headers: {
        'Authorization': 'Bearer YOUR_JWT',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        content: `
          const metadata = () => ({ title: 'Updated Card' });
          const body = (props) => Text(props.title);
        `
      })
    }
  );

  const component = await response.json();
  ```
</CodeGroup>