Skip to main content
Flexible inline blocks for horizontal rules, spacers, and custom dividers. Preserves special Word content like shapes and drawings through import/export.

​
OOXML Structure

<!-- Horizontal Rule -->
<w:p>
  <w:r>
    <w:pict>
      <v:rect style="width:100%;height:2px" 
              fillcolor="#e5e7eb"
              stroked="f"/>
    </w:pict>
  </w:r>
</w:p>

​
Use case

  • Section Breaks - Visually separate different parts of your document
  • Horizontal Rules - Classic divider between content sections
  • Spacers - Add precise vertical spacing without empty paragraphs
  • Custom Dividers - Brand-colored separators for professional documents
  • Shape Preservation - Maintains Word shapes and drawings through import/export
  • Layout Control - Fine-tune document appearance with inline blocks

​
Options

Configure the extension behavior:
​
htmlAttributes
Object
HTML attributes for the block element

​
Attributes

Node attributes that can be set and retrieved:
​
horizontalRule
boolean
default:"false"
Whether this block is a horizontal rule
​
size
ContentBlockSize
Size and position of the content block
​
background
string
Background color for the block

​
Commands

​
insertHorizontalRule

Insert a horizontal rule
Creates a visual separator between content sections
Example: 
editor.commands.insertHorizontalRule()

import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';

const superdoc = new SuperDoc({
  selector: '#editor',
  document: yourFile,
  onReady: (superdoc) => {
    const editor = superdoc.activeEditor;
    editor.commands.insertHorizontalRule()
  },
});

​
insertContentBlock

Insert a content block
Used for spacing, dividers, and special inline content
Example: 
// Insert a spacer block
editor.commands.insertContentBlock({ size: { height: 20 } })

import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';

const superdoc = new SuperDoc({
  selector: '#editor',
  document: yourFile,
  onReady: (superdoc) => {
    const editor = superdoc.activeEditor;
    // Insert a spacer block
    editor.commands.insertContentBlock({ size: { height: 20 } })
  },
});
Parameters:
​
config
ContentBlockConfig
required
Block configuration

​
Types

​
ContentBlockSize

Size configuration for content blocks

​
ContentBlockConfig

Content block configuration

​
Source code