Skip to main content
Insert and manage images with perfect Word compatibility. Supports URLs, base64 data, and maintains positioning for Word export.

​
OOXML Structure

<w:drawing>
  <wp:inline distT="0" distB="0" distL="0" distR="0">
    <wp:extent cx="5715000" cy="3810000"/>
    <wp:docPr id="1" name="Picture 1"/>
    <a:graphic>
      <a:graphicData>
        <pic:pic>
          <pic:blipFill>
            <a:blip r:embed="rId7"/>
          </pic:blipFill>
        </pic:pic>
      </a:graphicData>
    </a:graphic>
  </wp:inline>
</w:drawing>

​
Use case

  • Document illustrations - Add diagrams, charts, and screenshots
  • Product documentation - Include product images and UI screenshots
  • Reports - Embed data visualizations and infographics
  • Branding - Insert logos and company graphics
  • Base64 support - Embed images directly without external files

​
Options

Configure the extension behavior:
​
allowBase64
boolean
default:"true"
Allow base64 encoded images
​
htmlAttributes
Object
Default HTML attributes for image elements

​
Attributes

Node attributes that can be set and retrieved:
​
src
string
Image source URL or path
​
alt
string
default:"Uploaded picture"
Alternative text for accessibility
​
title
string
Image title/tooltip text
​
size
Object
Image dimensions
​
size.width
number
Width in pixels
​
size.height
number
Height in pixels
​
padding
Object
Image padding/margins
​
padding.left
number
Left padding in pixels
​
padding.top
number
Top padding in pixels
​
padding.bottom
number
Bottom padding in pixels
​
padding.right
number
Right padding in pixels
​
marginOffset
Object
Margin offset for anchored images
​
marginOffset.horizontal
number
Left/right margin offset
​
marginOffset.top
number
Top margin offset
​
style
string
Custom inline CSS styles
​
wrap
Object
default:"{ type: 'Inline' }"
Text wrapping configuration. The type property controls wrapping mode (e.g., 'Inline', 'Square', 'Tight', 'TopAndBottom', 'None').
​
transformData
Object
default:"{}"
Transform data for rotation, flips, and size extension. Supports rotation (degrees), flipH (horizontal flip), flipV (vertical flip), and sizeExtension properties.

​
Commands

​
setImage

Insert an image at the current position
Supports URLs, relative paths, and base64 data URIs
Example: 
editor.commands.setImage({ src: 'https://example.com/image.jpg' })
editor.commands.setImage({
  src: 'data:image/png;base64,...',
  alt: 'Company logo',
  size: { width: 200 }
})

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

const superdoc = new SuperDoc({
  selector: '#editor',
  document: yourFile,
  onReady: (superdoc) => {
    const editor = superdoc.activeEditor;
    editor.commands.setImage({ src: 'https://example.com/image.jpg' })
    editor.commands.setImage({
      src: 'data:image/png;base64,...',
      alt: 'Company logo',
      size: { width: 200 }
    })
  },
});
Parameters:
​
options
ImageInsertOptions
required
Image insertion options

​
setWrapping

Set the wrapping mode and attributes for the selected image Example: 
// No wrapping, behind document
editor.commands.setWrapping({ type: 'None', attrs: {behindDoc: true} })

// Square wrapping on both sides with distances
editor.commands.setWrapping({
  type: 'Square',
  attrs: {
    wrapText: 'bothSides',
    distTop: 10,
    distBottom: 10,
    distLeft: 10,
    distRight: 10
  }
})

// Tight wrapping with polygon
editor.commands.setWrapping({
  type: 'Tight',
  attrs: {
    polygon: [[0, 0], [100, 0], [100, 100], [0, 100]]
  }
})

// Top and bottom wrapping
editor.commands.setWrapping({
  type: 'TopAndBottom',
  attrs: {
    distTop: 15,
    distBottom: 15
  }
})

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

const superdoc = new SuperDoc({
  selector: '#editor',
  document: yourFile,
  onReady: (superdoc) => {
    const editor = superdoc.activeEditor;
    // No wrapping, behind document
    editor.commands.setWrapping({ type: 'None', attrs: {behindDoc: true} })

    // Square wrapping on both sides with distances
    editor.commands.setWrapping({
      type: 'Square',
      attrs: {
        wrapText: 'bothSides',
        distTop: 10,
        distBottom: 10,
        distLeft: 10,
        distRight: 10
      }
    })

    // Tight wrapping with polygon
    editor.commands.setWrapping({
      type: 'Tight',
      attrs: {
        polygon: [[0, 0], [100, 0], [100, 100], [0, 100]]
      }
    })

    // Top and bottom wrapping
    editor.commands.setWrapping({
      type: 'TopAndBottom',
      attrs: {
        distTop: 15,
        distBottom: 15
      }
    })
  },
});
Parameters:
​
options
Object
required
Wrapping options

​
Types

​
ImageInsertOptions

Options for inserting an image

​
Source code