Skip to main content
The FDO SDK provides a suite of DOM helper classes that generate HTML source strings for plugin UI. You use these classes to compose plugin views — they do not manipulate a live browser DOM. All output is a serialized HTML string that the FDO host renders inside the plugin iframe.
DOM classes produce static HTML strings, not live DOM nodes. Call renderHTML() on the base DOM instance to finalize output with injected styles before returning from your plugin’s render() method.

​
Why DOM helpers exist

FDO plugins execute in a sandboxed iframe context. Your render() method must return a single HTML string. The DOM helper classes give you:
  • Type-safe element construction — no raw string concatenation needed
  • Scoped CSS via goober — atomic class names generated from style objects, with no global leakage
  • Automatic XSS escaping — all text content passed through DOMText is escaped before insertion
  • Consistent options API — every class accepts the same options shape for classes, styles, and custom attributes

​
Shared options shape

Every DOM method that accepts an options parameter uses the following shape (inherited from DOM.DEFAULT_OPTIONS): 
{
  classes?: string[];                    // Extra CSS class names to apply
  style?: Record<string, string>;        // Inline style object — compiled to a goober atomic class
  disableDefaultClass?: boolean;         // Strip the built-in Blueprint default class
}
Most methods also accept an optional customAttributes field: 
{
  customAttributes?: Record<string, string>; // Arbitrary HTML attributes (e.g. data-*, aria-*)
}

​
Base class: DOM

All helper classes extend the DOM base class. Key methods on DOM you will use directly:
MethodDescription
createClassFromStyle(styleObj)Generates a goober atomic class name from a CSS property map
createStyleKeyframe(keyframe)Generates a goober @keyframes animation class name
renderHTML(element)Wraps element HTML with extracted goober styles — call this as the final step in render()
createElement(tag, props, ...children)Low-level element factory used by all subclasses
combineProperties(defaultClass, options, id?)Merges classes and styles into a props object

​
DOM class reference

DOMText

Inline and block text elements: headings, paragraphs, spans, code, labels, abbreviations, and more.

DOMButton

Button elements with click-handler attachment and full style control.

DOMTable

Full table hierarchy: table, thead, tbody, tfoot, tr, th, td, and caption.

DOMInput

Form inputs, textareas, and select dropdowns with option and optgroup support.

DOMMedia

Self-closing media elements: img with src, alt, and extra attributes.

DOMLink

Anchor elements with configurable href, classes, and inline styles.

​
Supporting classes (no dedicated reference page)

ClassElements generatedTypical use
DOMSemanticarticle, section, nav, header, footer, aside, mainPage-level layout
DOMNesteddiv, ul, ol, li, dl, dt, dd, form, fieldset, legendComposite layouts and forms
DOMMischrVisual dividers

​
Import paths

import {
  DOM,
  DOMText,
  DOMButton,
  DOMTable,
  DOMInput,
  DOMMedia,
  DOMLink,
  DOMSemantic,
  DOMNested,
  DOMMisc,
} from "@anikitenko/fdo-sdk";

​
Minimal render example

import { FDO_SDK, FDOInterface, DOMText, DOMSemantic } from "@anikitenko/fdo-sdk";

export default class MyPlugin extends FDO_SDK implements FDOInterface {
  render(): string {
    const text = new DOMText();
    const semantic = new DOMSemantic();

    return semantic.createMain([
      text.createHText(1, "Hello, FDO"),
      text.createPText("This is my plugin UI."),
    ]);
  }
}
You do not need to call renderHTML() yourself in most cases — the FDO host wraps your render() return value automatically. Call renderHTML() only if you need to embed the goober style block inline for testing or SSR scenarios.
DOMLink differs slightly from the other classes — you configure it at construction time rather than per-method call. 
import { DOMLink } from "@anikitenko/fdo-sdk";

const link = new DOMLink(
  "my-link-id",                          // Element id
  { style: { color: "#0b65d8" } },       // Style options
  { target: "_blank", rel: "noopener" }  // Extra HTML attributes
);

const anchor = link.createLink("Open docs", "https://example.com");
Constructor 
new DOMLink(
  id: string,
  styleOptions?: Partial<typeof DOM.DEFAULT_OPTIONS>,
  props?: Record<string, any>
)
Method 
createLink(label: string, href: string): string