Documentation | Codiris

Common Properties

All objects share these base properties:

Property	Type	Description
type	BoardObjectType	Object type (required)
x	number	X position (required)
y	number	Y position (required)
width	number	Width in pixels
height	number	Height in pixels
rotation	number	Rotation in degrees
opacity	number	Opacity (0-1)
isLocked	boolean	Prevent editing

Sticky Notes

Colorful notes for brainstorming and ideation.

await client.createObject(boardId, {
  type: 'sticky',
  x: 100,
  y: 100,
  width: 200,
  height: 200,
  text: 'User needs faster checkout',
  fill: '#ffeb3b',  // Yellow
  fontSize: 16,
  textAlign: 'center',
});

// Color presets
const colors = {
  yellow: '#ffeb3b',
  pink: '#f48fb1',
  blue: '#90caf9',
  green: '#a5d6a7',
  orange: '#ffcc80',
  purple: '#ce93d8',
};

Text

Free-form text blocks.

// Heading
await client.createObject(boardId, {
  type: 'text',
  x: 100,
  y: 50,
  text: 'Project Overview',
  fontSize: 32,
  fontWeight: 'bold',
  fill: '#1a1a1a',
});

// Body text
await client.createObject(boardId, {
  type: 'text',
  x: 100,
  y: 100,
  text: 'This document outlines our Q1 goals.',
  fontSize: 16,
  fill: '#666666',
  textAlign: 'left',  // 'left' | 'center' | 'right'
});

Shapes

Geometric shapes for diagrams. Types: rectangle, circle, triangle, diamond, star, hexagon, pentagon, octagon.

// Rectangle with rounded corners
await client.createObject(boardId, {
  type: 'shape',
  shapeType: 'rectangle',
  x: 100,
  y: 100,
  width: 200,
  height: 100,
  fill: '#3b82f6',
  stroke: '#1d4ed8',
  strokeWidth: 2,
  cornerRadius: 8,
  text: 'Process Step',
});

// Circle
await client.createObject(boardId, {
  type: 'shape',
  shapeType: 'circle',
  x: 350,
  y: 100,
  width: 100,
  height: 100,
  fill: '#22c55e',
});

// Diamond (decision node)
await client.createObject(boardId, {
  type: 'shape',
  shapeType: 'diamond',
  x: 500,
  y: 100,
  width: 120,
  height: 120,
  fill: '#f59e0b',
  text: 'Decision?',
});

Lines & Arrows

Connectors for linking elements. Line styles: solid, dashed, dotted. Shapes: straight, curved, elbow.

// Simple arrow with points
await client.createObject(boardId, {
  type: 'arrow',
  x: 100,
  y: 100,
  points: [
    { x: 0, y: 0 },
    { x: 200, y: 0 },
  ],
  stroke: '#000000',
  lineStyle: 'solid',  // 'solid' | 'dashed' | 'dotted'
});

// Connected arrow (links two shapes)
await client.createObject(boardId, {
  type: 'arrow',
  startConnection: {
    objectId: 'shape1_id',
    position: 'right',  // 'top' | 'bottom' | 'left' | 'right' | 'center'
  },
  endConnection: {
    objectId: 'shape2_id',
    position: 'left',
  },
  stroke: '#666666',
  lineShape: 'elbow',  // 'straight' | 'curved' | 'elbow'
});

Tables

Data tables with rows and columns.

await client.createObject(boardId, {
  type: 'table',
  x: 100,
  y: 100,
  width: 500,
  height: 200,
  tableData: {
    columns: ['Feature', 'Priority', 'Status', 'Owner'],
    rows: [
      ['Dark mode', 'High', 'In Progress', 'Alice'],
      ['Export PDF', 'Medium', 'Planned', 'Bob'],
      ['API v2', 'High', 'Done', 'Carol'],
    ],
  },
});

Kanban Boards

Kanban-style task boards with columns and cards.

await client.createObject(boardId, {
  type: 'kanban',
  x: 100,
  y: 100,
  width: 800,
  height: 400,
  kanbanData: {
    columns: [
      {
        id: 'todo',
        title: 'To Do',
        cards: [
          { id: '1', title: 'Design mockups', color: '#ffeb3b' },
          { id: '2', title: 'Write specs', color: '#90caf9' },
        ],
      },
      {
        id: 'progress',
        title: 'In Progress',
        cards: [
          { id: '3', title: 'Implement API', color: '#a5d6a7' },
        ],
      },
      {
        id: 'done',
        title: 'Done',
        cards: [],
      },
    ],
  },
});

Code Blocks

Syntax-highlighted code snippets. Supports: javascript, typescript, python, java, go, rust, and more.

await client.createObject(boardId, {
  type: 'code',
  x: 100,
  y: 100,
  width: 500,
  height: 200,
  codeData: {
    language: 'typescript',
    code: `interface User {
  id: string;
  name: string;
  email: string;
}

function getUser(id: string): Promise<User> {
  return fetch(\`/api/users/\${id}\`).then(r => r.json());
}`,
  },
});

Charts

Data visualizations. Types: line, bar, pie, donut, area.

// Bar chart
await client.createObject(boardId, {
  type: 'chart',
  x: 100,
  y: 100,
  width: 500,
  height: 300,
  chartData: {
    type: 'bar',
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
    datasets: [
      {
        label: 'Revenue',
        data: [12000, 19000, 15000, 25000, 22000],
        color: '#3b82f6',
      },
      {
        label: 'Expenses',
        data: [8000, 12000, 10000, 15000, 14000],
        color: '#ef4444',
      },
    ],
  },
});

// Pie chart
await client.createObject(boardId, {
  type: 'chart',
  x: 700,
  y: 100,
  width: 300,
  height: 300,
  chartData: {
    type: 'pie',
    labels: ['Desktop', 'Mobile', 'Tablet'],
    datasets: [{ label: 'Traffic', data: [55, 35, 10] }],
  },
});

Embeds

External content embeds. Supports: YouTube, Vimeo, Loom, Figma, Google Docs, Miro, Notion, and more.

// YouTube video
await client.createObject(boardId, {
  type: 'embed',
  x: 100,
  y: 100,
  width: 560,
  height: 315,
  embedUrl: 'https://www.youtube.com/watch?v=xxxxx',
});

// Figma design
await client.createObject(boardId, {
  type: 'embed',
  x: 100,
  y: 500,
  width: 800,
  height: 600,
  embedUrl: 'https://www.figma.com/file/xxxxx',
});

Object Types