Components

Mix.install([
  {:kino_excalidraw, "< 1.0.0"}
])

KinoExcalidraw.SmartCell

You can edit canvas freely.

Click Settings from main menu to setting height and modes.

excalidraw =
  KinoExcalidraw.SmartCell.new(
    data:
      "{\n  \"type\": \"excalidraw\",\n  \"version\": 2,\n  \"source\": \"http://localhost:8081\",\n  \"elements\": [\n    {\n      \"type\": \"rectangle\",\n      \"version\": 185,\n      \"versionNonce\": 1772767576,\n      \"isDeleted\": false,\n      \"id\": \"ZngWkK05S_c4g_6khcZ1c\",\n      \"fillStyle\": \"solid\",\n      \"strokeWidth\": 4,\n      \"strokeStyle\": \"solid\",\n      \"roughness\": 2,\n      \"opacity\": 100,\n      \"angle\": 0,\n      \"x\": 340.7367814734578,\n      \"y\": 232,\n      \"strokeColor\": \"transparent\",\n      \"backgroundColor\": \"#ffd8a8\",\n      \"width\": 220.00000000000009,\n      \"height\": 61,\n      \"seed\": 462914392,\n      \"groupIds\": [],\n      \"frameId\": null,\n      \"roundness\": {\n        \"type\": 3\n      },\n      \"boundElements\": [\n        {\n          \"type\": \"text\",\n          \"id\": \"r8LbIyYFMa_nt29an2i2d\"\n        }\n      ],\n      \"updated\": 1736864331689,\n      \"link\": null,\n      \"locked\": false\n    },\n    {\n      \"type\": \"text\",\n      \"version\": 163,\n      \"versionNonce\": 335255592,\n      \"isDeleted\": false,\n      \"id\": \"r8LbIyYFMa_nt29an2i2d\",\n      \"fillStyle\": \"solid\",\n      \"strokeWidth\": 2,\n      \"strokeStyle\": \"solid\",\n      \"roughness\": 1,\n      \"opacity\": 100,\n      \"angle\": 0,\n      \"x\": 357.82078110724694,\n      \"y\": 240,\n      \"strokeColor\": \"#1e1e1e\",\n      \"backgroundColor\": \"transparent\",\n      \"width\": 185.83200073242188,\n      \"height\": 45,\n      \"seed\": 1848202584,\n      \"groupIds\": [],\n      \"frameId\": null,\n      \"roundness\": null,\n      \"boundElements\": [],\n      \"updated\": 1736864331689,\n      \"link\": null,\n      \"locked\": false,\n      \"fontSize\": 36,\n      \"fontFamily\": 1,\n      \"text\": \"Excalidraw\",\n      \"textAlign\": \"center\",\n      \"verticalAlign\": \"middle\",\n      \"containerId\": \"ZngWkK05S_c4g_6khcZ1c\",\n      \"originalText\": \"Excalidraw\",\n      \"lineHeight\": 1.25,\n      \"baseline\": 32\n    },\n    {\n      \"type\": \"text\",\n      \"version\": 111,\n      \"versionNonce\": 1833393752,\n      \"isDeleted\": false,\n      \"id\": \"synO07qaOM1g2d0X4J2t-\",\n      \"fillStyle\": \"solid\",\n      \"strokeWidth\": 4,\n      \"strokeStyle\": \"solid\",\n      \"roughness\": 2,\n      \"opacity\": 100,\n      \"angle\": 0,\n      \"x\": 255.73678147345782,\n      \"y\": 240,\n      \"strokeColor\": \"#e8590c\",\n      \"backgroundColor\": \"#fcc2d7\",\n      \"width\": 66.70800018310547,\n      \"height\": 45,\n      \"seed\": 523434024,\n      \"groupIds\": [],\n      \"frameId\": null,\n      \"roundness\": null,\n      \"boundElements\": [],\n      \"updated\": 1736864331689,\n      \"link\": null,\n      \"locked\": false,\n      \"fontSize\": 36,\n      \"fontFamily\": 1,\n      \"text\": \"Kino\",\n      \"textAlign\": \"left\",\n      \"verticalAlign\": \"top\",\n      \"containerId\": null,\n      \"originalText\": \"Kino\",\n      \"lineHeight\": 1.25,\n      \"baseline\": 32\n    }\n  ],\n  \"appState\": {\n    \"gridSize\": null,\n    \"viewBackgroundColor\": \"#ffffff\"\n  },\n  \"files\": {}\n}",
    options: %{variable: "excalidraw", zen_mode_enabled: false}
  )

Kino.Excalidraw.Embedded

Set excalidraw data manually.

Kino.Excalidraw.Embedded.new(
  data: excalidraw.data,
  options: excalidraw.options
)

Kino.Excalidraw.Remote

Read excalidraw data from a remote url.

Kino.Excalidraw.Remote.new(
  url: "https://raw.githubusercontent.com/fahchen/kino_excalidraw/refs/heads/main/images/kino-excalidraw.excalidraw",
  options: %{
    height: 500,
    scroll_to_content: true,
    view_mode_enabled: true,
    zen_mode_enabled: true
  }
)