update_element
Modify Excalidraw elements such as shapes, text, and lines by updating properties like position, size, color, stroke, and opacity using MCP Server's structured API.
Instructions
Update an existing Excalidraw element
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| backgroundColor | No | ||
| fontFamily | No | ||
| fontSize | No | ||
| height | No | ||
| id | Yes | ||
| opacity | No | ||
| roughness | No | ||
| strokeColor | No | ||
| strokeWidth | No | ||
| text | No | ||
| type | No | ||
| width | No | ||
| x | No | ||
| y | No |
Implementation Reference
- src/index.js:367-404 (handler)The main handler for the 'update_element' tool. It validates input using Zod schemas, retrieves the existing element, applies updates (handling fontFamily and opacity specially), increments version and nonce, cleans up properties, stores the updated element, and returns a success response.case 'update_element': { const rawParams = ElementSchema.partial().extend({ id: ElementIdSchema.shape.id }).passthrough().parse(args); const { id, ...updates } = rawParams; if (!id) throw new Error('Element ID is required'); const existingElement = elements.get(id); if (!existingElement) throw new Error(`Element with ID ${id} not found`); if (typeof updates.fontFamily === 'string') { const fontMap = { "virgil": 1, "helvetica": 2, "cascadia": 3 }; updates.fontFamily = fontMap[updates.fontFamily.toLowerCase()] ?? existingElement.fontFamily; } if (updates.opacity !== undefined) { updates.opacity = Math.max(0, Math.min(100, updates.opacity * 100)); } const potentialNewElement = { ...existingElement, ...updates, version: (existingElement.version || 0) + 1, versionNonce: Math.floor(Math.random() * 2 ** 31), updated: Date.now() }; Object.keys(potentialNewElement).forEach(key => { if (key === 'createdAt' || key === 'updatedAt') delete potentialNewElement[key]; }); elements.set(id, potentialNewElement); logger.info(`Element ${id} updated.`); logger.debug('Stored element data after update:', potentialNewElement); return { content: [{ type: 'text', text: JSON.stringify({ id: potentialNewElement.id, updated: true, version: potentialNewElement.version }, null, 2) }] }; }
- src/index.js:119-144 (registration)Registration of the 'update_element' tool in the MCP server capabilities, defining its description and JSON input schema.update_element: { description: 'Update an existing Excalidraw element', inputSchema: { type: 'object', properties: { id: { type: 'string' }, type: { type: 'string', enum: Object.values(EXCALIDRAW_ELEMENT_TYPES) }, x: { type: 'number' }, y: { type: 'number' }, width: { type: 'number' }, height: { type: 'number' }, backgroundColor: { type: 'string' }, strokeColor: { type: 'string' }, strokeWidth: { type: 'number' }, roughness: { type: 'number' }, opacity: { type: 'number' }, text: { type: 'string' }, fontSize: { type: 'number' }, fontFamily: { type: 'string' } }, required: ['id'] } },
- src/index.js:30-50 (schema)Zod schemas (ElementSchema and ElementIdSchema) used for input validation in the update_element handler.const ElementSchema = z.object({ type: z.enum(Object.values(EXCALIDRAW_ELEMENT_TYPES)), x: z.number(), y: z.number(), width: z.number().optional(), height: z.number().optional(), points: z.array(z.object({ x: z.number(), y: z.number() })).optional(), backgroundColor: z.string().optional(), strokeColor: z.string().optional(), strokeWidth: z.number().optional(), roughness: z.number().optional(), opacity: z.number().optional(), text: z.string().optional(), fontSize: z.number().optional(), fontFamily: z.number().optional(), locked: z.boolean().optional() // ADDED: Make sure locked status is saved }); const ElementIdSchema = z.object({ id: z.string() });