A developer’s guide to ONLYOFFICE style and color APIs

Developing ONLYOFFICE plugins often means improving how users interact with documents, whether by adding highlighters, format cleaners, or themed UI elements.

To help you work more efficiently, we’ve compiled key style and color API methods that let developers easily control their plugins’ look and feel.

This blog post offers clear explanations, practical examples, and tips for a smoother development experience.

Understanding the styling context

ONLYOFFICE plugin APIs provide flexible ways to customize document appearance through objects such as ApiRange, ApiParagraph, and ApiTextPr.

These interfaces allow developers to modify font attributes, paragraph alignment, colors, and other visual properties directly from plugin scripts.

A simple example of applying text styles:

const oDocument = Api.GetDocument();

const oRange = oDocument.GetRangeBySelect();

const oTextPr = oRange.GetTextPr();

oTextPr.Bold(true);

oTextPr.Italic(true);

oTextPr.SetColor(255, 0, 0); // RGB red

This snippet demonstrates how multiple styles can be combined to achieve dynamic formatting.

Commonly used style and color methods

When developing ONLYOFFICE plugins that work with document styling such as highlighters, format cleaners, or theme-based UI elements, developers often need clear, ready-to-use methods for handling colors, fonts, and text attributes.

To simplify this process, we’ve gathered the most practical style and color APIs here, along with tips and examples for smooth integration.

Method	Description	Example
SetColor(r, g, b)	Sets the text color using RGB values.	oTextPr.SetColor(0, 102, 204)
SetHighlight(sColor)	Applies a highlight or background color to text.	oRange.SetHighlight("lightGray")
SetBackgroundColor(r, g, b)	Applies a background color to a paragraph.	oParagraph.SetBackColor(230, 230, 230)
SetBold(true/false)	Toggles bold styling.	oTextPr.SetBold(true)
SetItalic(true/false)	Toggles italic styling.	oTextPr.SetItalic(true)
SetUnderline(true/false)	Adds or removes underline.	oTextPr.SetUnderline(true)
SetFontSize(nSize)	Changes font size in points.	oTextPr.SetFontSize(14)
SetFontName(name)	Sets the font family.	oTextPr.SetFontName("Calibri")
ApiCell	Represents a spreadsheet cell for styling.	const cell = sheet.GetRange("A1");
SetCellColor(r, g, b)	Sets a spreadsheet cell’s background color.	cell.SetCellColor(255, 230, 191)

For paragraph styling, you can use analogous methods via the ApiParagraph interface:

const oParagraph = oRange.GetParagraph(0);

oParagraph.SetBackColor(230, 230, 230); // Light gray background

oParagraph.SetAlign("center");

These methods form the foundation of text and paragraph formatting in ONLYOFFICE plugins. Spreadsheet cells use conceptually similar APIs such as ApiCell and SetCellColor, following the same styling logic.

Working with color objects

ONLYOFFICE uses RGB-based color definitions for its style methods. If your project uses HEX color codes (common in design systems or brand themes), you can easily convert them using a small helper function:

function hexToRGB(hex) {

const bigint = parseInt(hex.replace("#", ""), 16);

const r = (bigint >> 16) & 255;

const g = (bigint >> 8) & 255;

const b = bigint & 255;

return [r, g, b];

}

// Example use:

const [r, g, b] = hexToRGB("#3498db");

oTextPr.SetColor(r, g, b);
This allows seamless integration between design resources and plugin functionality.

Tips and tricks for reliable styling

• Reselect the document range before applying changes to ensure accuracy after UI actions.
• Use separate function calls for each style operation rather than chaining too many methods at once.
• Always perform validation checks for example, confirm that GetRangeBySelect() returns a valid object.
• Support theme modes by adjusting color values dynamically with Asc.plugin.getTheme().

These small adjustments help create more stable and theme-consistent plugin behavior.

Conclusion

The styling APIs in ONLYOFFICE maintain a consistent approach across different editors, whether you’re working with documents, presentations, or spreadsheets.

By reusing the same concepts (color application, font adjustments, paragraph alignment), developers can adapt their code across editors while keeping the styling logic unified.

By gathering this information in one place, we aim to make plugin development faster, smoother, and more intuitive for everyone building with ONLYOFFICE.

If you have any questions or suggestions, feel free to reach out to us.  Together we can keep improving ONLYOFFICE documentation.