Skip to main content
Canvas Editor provides comprehensive text formatting capabilities to style your content. All formatting can be applied programmatically through the command API.

​
Font Styles

Bold Text

Apply bold weight to selected text

Italic Text

Apply italic styling to selected text

Underline

Add underline decoration to text

Strikeout

Add strikethrough decoration to text

​
Applying Font Styles

import Editor from '@hufe921/canvas-editor'

const editor = new Editor(container, {
  main: [{ value: 'Hello World' }]
})

// Select text range (start index, length)
editor.command.executeSetRange(0, 11)

// Apply bold
editor.command.executeBold()

// Apply italic
editor.command.executeItalic()

// Apply underline
editor.command.executeUnderline()

// Apply strikeout
editor.command.executeStrikeout()

​
Superscript and Subscript

Create mathematical formulas or chemical notations with superscript and subscript text. 
// Apply superscript (e.g., x²)
editor.command.executeSetRange(0, 5)
editor.command.executeSuperscript()
Superscript and subscript automatically adjust font size to maintain readability.

​
Font Family and Size

​
Setting Font Family

Change the font family for selected text: 
// Set font family
editor.command.executeSetRange(0, 11)
editor.command.executeFont('Arial')

// Available fonts depend on your system
// Common options: 'Arial', 'Times New Roman', 'Courier New', etc.

​
Setting Font Size

// Set specific font size
editor.command.executeSetRange(0, 11)
editor.command.executeSize(16)

​
Text Colors

​
Font Color

Apply color to text: 
// Set text color
editor.command.executeSetRange(0, 11)
editor.command.executeColor('#FF0000')

// Using color names
editor.command.executeColor('red')

// Using RGB
editor.command.executeColor('rgb(255, 0, 0)')

​
Highlight Color

Add background highlight to text: 
// Set highlight color
editor.command.executeSetRange(0, 11)
editor.command.executeHighlight('#FFFF00')

// Using color names
editor.command.executeHighlight('yellow')

// Remove highlight
editor.command.executeHighlight('')
Both color and highlight support standard CSS color formats: hex, rgb, rgba, and named colors.

​
Inserting Formatted Text

You can insert text with formatting already applied: 
editor.command.executeInsertElementList([
  {
    value: 'Bold and Red',
    bold: true,
    color: '#FF0000'
  },
  {
    value: ' Normal ',
  },
  {
    value: 'Italic and Blue',
    italic: true,
    color: '#0000FF',
    size: 18
  }
])

​
Format Painter

Copy formatting from one text selection to another:
1

Select Source Text

Select the text with the formatting you want to copy.
2

Activate Painter

editor.command.executePainter()
3

Apply to Target

Select the target text to apply the formatting.
Alternatively, apply formatting programmatically: 
// Apply specific style object
const style = {
  bold: true,
  italic: true,
  color: '#FF0000',
  size: 16
}
editor.command.executeApplyPainterStyle(style)

​
Clear Formatting

Remove all formatting from selected text: 
// Select text
editor.command.executeSetRange(0, 11)

// Clear all formatting
editor.command.executeFormat()
Clearing format removes all styling (bold, italic, color, etc.) and reverts to default formatting.

​
Complete Example

Here’s a comprehensive example combining multiple formatting features: 
import Editor from '@hufe921/canvas-editor'

const container = document.querySelector('.editor')
const editor = new Editor(container, {
  main: [
    {
      value: 'Canvas Editor',
      bold: true,
      size: 24,
      color: '#333333'
    },
    {
      value: '\n\nA powerful rich text editor with '  
    },
    {
      value: 'extensive formatting',
      bold: true,
      italic: true,
      underline: true,
      color: '#0066CC'
    },
    {
      value: ' capabilities.'
    }
  ]
})

// Apply formatting to existing text
function formatText() {
  // Make first line bold and large
  editor.command.executeSetRange(0, 13)
  editor.command.executeBold()
  editor.command.executeSize(24)
  
  // Highlight important text
  const data = editor.command.getValue().data.main
  // Find and highlight specific text
  editor.command.executeSetRange(15, 10)
  editor.command.executeHighlight('#FFFF00')
}

​
Best Practices

  • Batch formatting operations when possible
  • Use executeInsertElementList with pre-formatted elements rather than formatting after insertion
  • Avoid excessive color changes that might impact readability
  • Ensure sufficient contrast between text color and background
  • Don’t rely solely on color to convey information
  • Use semantic formatting (bold for emphasis) rather than just visual styling
  • Define a style guide for your application
  • Use format painter to maintain consistent styling
  • Consider creating reusable style presets

Build docs developers (and LLMs) love

Get started for freeTalk to us