Note Shape

StickyElement (type: "sticky") is the sticky-note card: a fixed-size coloured square whose embedded label auto-fits its text, plus optional author strip, tags and emoji reactions.

import { isSticky, type StickyElement } from "@oh-just-another/scene";

const note: StickyElement = {
  id,
  layerId,
  order,
  type: "sticky",
  position: { x: 0, y: 0 },
  rotation: 0,
  scale: { x: 1, y: 1 },
  width: 160,
  height: 160,
  style: { fill: "#fff9b1" },
  label: { text: "Idea", fontFamily: "Inter", fontSize: 16, autoFit: true },
  tags: ["ux"],
  showAuthor: true,
  authorName: "Ann",
  reactions: [{ glyph: "👍", users: ["u1"] }],
};

Editor API

editor.createStickyAt(worldPoint); // default M-size yellow note, selected + editing
editor.setStickySize(ids, 220); // side from STICKY_SIZE_PRESETS (S / M / L)
editor.toggleStickyAuthor(ids);
editor.setStickyTags(ids, ["ux", "p1"]);
editor.toggleStickyReaction(id, "👍"); // toggles the local user's reaction
editor.convertSelection("sticky"); // shape / text ↔ sticky

Fill colours snap to STICKY_PALETTE (nearest entry) when converting, so notes keep the classic sticky look. Reactions and the "+" button are drawn by the canvas renderer at a constant on-screen size, and hide once the note's shorter side is under STICKY_REACTION_MIN_SCREEN_PX (80 px) on screen — a screen-size gate like the text LOD, so a large note keeps its reactions at a zoom where a small one already hides them. Hosts control what reaches exports through RenderSceneOptions.content (see Image export).

Editor API​

Editor API