update_element
Modify existing diagram elements in Excalidraw by updating properties like position, size, colors, or text content using element IDs.
Instructions
Update an existing Excalidraw element by ID
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| id | Yes | ||
| type | No | ||
| x | No | ||
| y | No | ||
| width | No | ||
| height | No | ||
| points | No | ||
| backgroundColor | No | ||
| strokeColor | No | ||
| strokeWidth | No | ||
| roughness | No | ||
| opacity | No | ||
| text | No | ||
| fontSize | No | ||
| fontFamily | No | ||
| groupIds | No | ||
| locked | No | ||
| angle | No |
Implementation Reference
- src/mcp/index.ts:121-137 (handler)Main tool registration and handler for update_element. This is the MCP server tool definition that processes incoming requests, validates inputs, filters undefined values, calls the client.updateElement method, and returns the updated element as JSON.
// --- Tool: update_element --- server.tool( 'update_element', 'Update an existing Excalidraw element by ID', { id: IdZ, ...partialElementFields }, async ({ id, ...data }) => { try { const clean = Object.fromEntries( Object.entries(data).filter(([_, v]) => v !== undefined) ); const element = await client.updateElement(id, clean); return { content: [{ type: 'text', text: JSON.stringify(element, null, 2) }] }; } catch (err) { return { content: [{ type: 'text', text: `Error: ${(err as Error).message}` }], isError: true }; } } ); - src/mcp/schemas/element.ts:95-100 (schema)Schema definition for UpdateElementSchema that validates the tool input. It combines a required id field with all element fields from CreateElementSchema made partial (optional).
export const UpdateElementSchema = z .object({ id: z.string().max(LIMITS.MAX_ID_LENGTH), }) .merge(CreateElementSchema.partial()) .strict(); - src/mcp/tools/update-element.ts:4-11 (helper)Reusable tool function that encapsulates the update logic. Parses args with UpdateElementSchema, extracts id and data, calls client.updateElement, and returns a success response with the updated element.
export async function updateElementTool( args: unknown, client: CanvasClient ) { const { id, ...data } = UpdateElementSchema.parse(args); const element = await client.updateElement(id, data as Record<string, unknown>); return { success: true, element }; } - src/mcp/canvas-client.ts:67-87 (helper)CanvasClient.updateElement method that makes a PUT request to the canvas API endpoint (/api/elements/:id) to update an existing element. Handles error responses and returns the updated element.
async updateElement( id: string, data: Record<string, unknown> ): Promise<ServerElement> { const res = await fetch( `${this.baseUrl}/api/elements/${this.safePath(id)}`, { method: 'PUT', headers: this.headers(), body: JSON.stringify(data), } ); if (!res.ok) { const body = await res.json().catch(() => ({})) as ApiResponse; throw new Error(body.error ?? `Canvas error: ${res.status}`); } const body = await res.json() as { element?: ServerElement }; return body.element!; } - CanvasClientAdapter.updateElement method for standalone mode. Retrieves existing element from in-memory store, merges with new data while preserving id, createdAt, and incrementing version, then stores the updated element.
async updateElement( id: string, data: Record<string, unknown> ): Promise<ServerElement> { const existing = await this.store.get(id); if (!existing) throw new Error(`Element ${id} not found`); const updated: ServerElement = { ...existing, ...stripUndefined(data), id: existing.id, createdAt: existing.createdAt, updatedAt: new Date().toISOString(), version: existing.version + 1, }; await this.store.set(id, updated); logger.debug({ id }, 'Element updated'); return updated;