// Backend Communication through a registered backend handler
const response = await window.createBackendReq("UI_MESSAGE", {
  handler: "plugin.handlerName",
  content: { data },
});

// If handler returns a privileged-action envelope:
const requestPayload =
  response?.result?.request ??
  response?.request ??
  response;
const privileged = await window.createBackendReq("requestPrivilegedAction", requestPayload);
// For non-ok responses, prefer SDK formatPrivilegedActionError(...) in plugin code.

// DOM Utilities
window.waitForElement('#my-element', (el) => { /* ... */ });
window.applyClassToSelector('my-class', '#target');
window.executeInjectedScript('console.log("hello")');

// Event Management
window.addGlobalEventListener('click', handler);
window.removeGlobalEventListener('click', handler);

<div class="pure-g">
  <div class="pure-u-1-2">Column 1</div>
  <div class="pure-u-1-2">Column 2</div>
</div>
<button class="pure-button pure-button-primary">Click</button>

const notyf = new Notyf();
notyf.success('Success!');
notyf.error('Error!');

<pre><code class="language-javascript">
const code = "example";
</code></pre>
<script>hljs.highlightAll();</script>

<i class="fas fa-home"></i>        <!-- Solid -->
<i class="far fa-star"></i>        <!-- Regular -->
<i class="fab fa-github"></i>      <!-- Brands -->

const editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.session.setMode("ace/mode/javascript");
editor.setValue("const x = 1;");

Split({
  columnGutters: [{ track: 1, element: document.querySelector('.gutter') }]
});