Skip to main content
DOMText generates HTML text elements as strings. All content you pass to DOMText methods is automatically XSS-escaped — angle brackets, ampersands, curly braces, and quotes are converted to safe HTML entities before insertion.

​
Import

import { DOMText } from "@anikitenko/fdo-sdk";

​
Constructor

new DOMText()
No parameters. DOMText extends DOM and inherits all base styling and attribute utilities.

​
Common options shape

Every method accepts an optional options parameter: 
{
  classes?: string[];              // Additional CSS class names
  style?: Record<string, string>;  // Inline styles compiled to a goober atomic class
  disableDefaultClass?: boolean;   // Remove the built-in default class
}
And an optional id string that sets the element’s id attribute. If omitted, a random id is generated.

​
Methods

​
createText

Creates a <span> element. This is the generic single-line text primitive. 
createText(
  content: string,
  options?: Partial<typeof DOM.DEFAULT_OPTIONS>,
  id?: string
): string

const text = new DOMText();

text.createText("Hello world");
text.createText("Muted label", { style: { color: "#667085", fontSize: "13px" } });

​
createHText

Creates a heading element at level 1–6 (<h1> through <h6>). Throws if level is not an integer between 1 and 6. 
createHText(
  level: number,
  content: string,
  options?: Partial<typeof DOM.DEFAULT_OPTIONS>,
  id?: string
): string
​
level
number
required
Heading level. Must be an integer between 1 and 6 (inclusive).
​
content
string
required
Text content. Automatically escaped.
​
options
object
Style options — classes, style, disableDefaultClass.
​
id
string
Element id. Auto-generated if omitted.
const text = new DOMText();

text.createHText(1, "Plugin Title");
text.createHText(2, "Section", { style: { marginTop: "16px" } });
text.createHText(3, "Subsection", {}, "my-subsection");
Passing a non-integer or out-of-range level throws Error: Heading level must be an integer between 1 and 6.

​
createPText

Creates a <p> paragraph element. 
createPText(
  content: string,
  options?: Partial<typeof DOM.DEFAULT_OPTIONS>,
  id?: string
): string

text.createPText("This is a paragraph.");
text.createPText("Muted note.", { style: { color: "#667085" } });

​
createSpanText

Creates a <span> inline element. 
createSpanText(
  content: string,
  options?: Partial<typeof DOM.DEFAULT_OPTIONS>,
  id?: string
): string

text.createSpanText("Healthy", { style: { color: "#1f8a3d", fontWeight: "600" } });

​
createDivText

Creates a <div> block element wrapping a single text string. 
createDivText(
  content: string,
  options?: Partial<typeof DOM.DEFAULT_OPTIONS>,
  id?: string
): string

text.createDivText("Container text", { style: { padding: "8px" } });

​
createStrongText

Creates a <strong> (bold, semantic importance) element. 
createStrongText(
  content: string,
  options?: Partial<typeof DOM.DEFAULT_OPTIONS>,
  id?: string
): string

text.createStrongText("Important notice");

​
createEmText

Creates an <em> (italic, semantic emphasis) element. 
createEmText(
  content: string,
  options?: Partial<typeof DOM.DEFAULT_OPTIONS>,
  id?: string
): string

​
createBText

Creates a <b> (bold, presentational) element. 
createBText(
  content: string,
  options?: Partial<typeof DOM.DEFAULT_OPTIONS>,
  id?: string
): string

​
createIText

Creates an <i> (italic, presentational) element. 
createIText(
  content: string,
  options?: Partial<typeof DOM.DEFAULT_OPTIONS>,
  id?: string
): string

​
createUText

Creates a <u> (underline) element. 
createUText(
  content: string,
  options?: Partial<typeof DOM.DEFAULT_OPTIONS>,
  id?: string
): string

​
createSText

Creates an <s> (strikethrough) element. 
createSText(
  content: string,
  options?: Partial<typeof DOM.DEFAULT_OPTIONS>,
  id?: string
): string

​
createMarkText

Creates a <mark> (highlighted text) element. 
createMarkText(
  content: string,
  options?: Partial<typeof DOM.DEFAULT_OPTIONS>,
  id?: string
): string

​
createSmallText

Creates a <small> element. 
createSmallText(
  content: string,
  options?: Partial<typeof DOM.DEFAULT_OPTIONS>,
  id?: string
): string

​
createInsText

Creates an <ins> (inserted text) element. 
createInsText(
  content: string,
  options?: Partial<typeof DOM.DEFAULT_OPTIONS>,
  id?: string
): string

​
createCodeText

Creates a <code> element. Default class is disabled — no Blueprint styling is applied. 
createCodeText(
  content: string,
  options?: Partial<typeof DOM.DEFAULT_OPTIONS>,
  id?: string
): string

text.createCodeText("npm install @anikitenko/fdo-sdk");

​
createPreText

Creates a <pre> (preformatted text) element. 
createPreText(
  content: string,
  options?: Partial<typeof DOM.DEFAULT_OPTIONS>,
  id?: string
): string

​
createKbdText

Creates a <kbd> (keyboard input) element. 
createKbdText(
  content: string,
  options?: Partial<typeof DOM.DEFAULT_OPTIONS>,
  id?: string
): string

text.createKbdText("Ctrl+K");

​
createBlockQuoteText

Creates a <blockquote> element. Default class is disabled. 
createBlockQuoteText(
  content: string,
  options?: Partial<typeof DOM.DEFAULT_OPTIONS>,
  id?: string
): string

​
createCiteText

Creates a <cite> (citation) element. 
createCiteText(
  content: string,
  options?: Partial<typeof DOM.DEFAULT_OPTIONS>,
  id?: string
): string

​
createAbbrText

Creates an <abbr> (abbreviation) element. The title attribute is required and renders as a tooltip on hover. 
createAbbrText(
  content: string,
  title: string,
  options?: Partial<typeof DOM.DEFAULT_OPTIONS>,
  id?: string
): string
​
content
string
required
The abbreviated text shown in the UI.
​
title
string
required
The full expanded form, shown as a browser tooltip via the title attribute.
text.createAbbrText("SDK", "Software Development Kit");

​
createLabelText

Creates a <label> element associated with a form control via htmlFor. 
createLabelText(
  content: string,
  htmlFor: string,
  options?: Partial<typeof DOM.DEFAULT_OPTIONS>,
  id?: string
): string
​
htmlFor
string
required
The id of the form control this label is associated with. Rendered as the htmlFor prop.
text.createLabelText("Username", "username-input", {
  style: { display: "block", marginBottom: "6px", fontWeight: "600" },
});

​
Full example

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

const text = new DOMText();
const semantic = new DOMSemantic();

const view = semantic.createMain([
  text.createHText(1, "Plugin Dashboard"),
  text.createPText("Monitor your environments below.", { style: { color: "#667085" } }),
  text.createLabelText("Environment", "env-select", { style: { fontWeight: "600" } }),
  text.createSpanText("Production", { style: { color: "#1f8a3d" } }),
  text.createCodeText("kubectl get pods -n default"),
  text.createAbbrText("K8s", "Kubernetes"),
  text.createSmallText("Last updated: just now"),
]);