> ## Documentation Index
> Fetch the complete documentation index at: https://docs.sdk.fdo.alexvwan.me/llms.txt
> Use this file to discover all available pages before exploring further.

# QUICK REFERENCE

# Quick Reference: Injected Libraries

This is a quick reference for developers who want to quickly look up available libraries and their basic usage.

These helpers and libraries are for the iframe UI runtime. Do not assume they exist in backend/bootstrap/plugin-host failure paths.

## Window Helpers (Always Available)

```typescript theme={null}
// 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);
```

## CSS Libraries (Already Loaded)

### Pure CSS

```html theme={null}
<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>
```

## JavaScript Libraries

### Notyf (Notifications)

```javascript theme={null}
const notyf = new Notyf();
notyf.success('Success!');
notyf.error('Error!');
```

### Highlight.js (Syntax Highlighting)

```html theme={null}
<pre><code class="language-javascript">
const code = "example";
</code></pre>
<script>hljs.highlightAll();</script>
```

### FontAwesome (Icons)

```html theme={null}
<i class="fas fa-home"></i>        <!-- Solid -->
<i class="far fa-star"></i>        <!-- Regular -->
<i class="fab fa-github"></i>      <!-- Brands -->
```

### ACE Editor (Code Editor)

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

### Split Grid (Resizable Panels)

```javascript theme={null}
Split({
  columnGutters: [{ track: 1, element: document.querySelector('.gutter') }]
});
```

## Full Documentation

For complete documentation with examples, see [INJECTED\_LIBRARIES.md](./INJECTED_LIBRARIES.md)