stickies

stick an element on any part of the page

This package lets you pin an element to any position on any DOM node. The pinned element automatically follows its anchor as you scroll, resize the window, navigate between pages, or mutate the DOM. Useful for building annotations, comments, tooltips, or anything that needs to stick to dynamic content.

example

import {
  createSticker,
  createStickerAttachment,
  dragSticker,
  startRenderer,
} from "stickies";

const createBox = (color: string) => {
  const divElement = document.createElement("div");
  divElement.style.width = "30px";
  divElement.style.height = "30px";
  divElement.style.backgroundColor = color;
  document.body.appendChild(divElement);
  return divElement;
};

export const init = () => {
  startRenderer();

  const stickerElement = createBox("red");
  const stickerId = createSticker({
    attachments: [
      createStickerAttachment({
        autoLayout: true,
        element: createBox("blue"),
        offsetX: 0,
        offsetY: 10,
        side: "top",
      }),
      createStickerAttachment({
        autoLayout: true,
        element: createBox("green"),
        offsetX: 0,
        offsetY: 10,
        side: "bottom",
      }),
      createStickerAttachment({
        autoLayout: true,
        element: createBox("yellow"),
        offsetX: 10,
        offsetY: 0,
        side: "left",
      }),
    ],
    element: stickerElement,
    id: String(Math.random()),
    x: 100,
    y: 100,
  });

  dragSticker(stickerId, stickerElement);
};

init();