Skip to main content

​
Overview

api.boardEl is the #board DOM element — the full-viewport canvas where all plugins render their UI. 
const box = document.createElement('div');
box.textContent = 'Hello!';
api.boardEl.appendChild(box);

​
Type

HTMLElement

​
Usage

This is where your plugin creates and appends UI elements. 
export function setup(api) {
  const widget = document.createElement('div');
  widget.className = 'plugin-box';
  widget.style.cssText = `
    position: absolute;
    left: 100px;
    top: 100px;
    width: 300px;
    padding: 20px;
    background: white;
    border-radius: 12px;
  `;
  widget.innerHTML = '<p>My plugin UI</p>';

  api.boardEl.appendChild(widget);
}

​
CSS Grid Background

The board has a built-in CSS grid pattern: 
#board {
  width: 100vw;
  height: 100vh;
  background-image:
    linear-gradient(#ddd 1px, transparent 1px),
    linear-gradient(90deg, #ddd 1px, transparent 1px);
  background-size: 40px 40px;
}

​
The plugin-box Class

Use the plugin-box class for standard card styling: 
.plugin-box {
  position: absolute;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  border-radius: 8px;
  background: white;
  cursor: move;
  user-select: none;
}
The plugin-box class is defined in index.html. It gives you rounded corners, a shadow, and cursor: move.

​
Removing Elements

Always clean up when your plugin is unloaded. Export a teardown() function: 
export function teardown() {
  myElement.remove();
}
Or listen for the event: 
api.bus.on('plugin:unload', (id) => {
  if (id === meta.id) myElement.remove();
});

​
Version

The API exposes a version string: 
console.log(api.version);  // → "4.0.0"