Skip to main content
Create hyperlinks with automatic formatting and Word compatibility. Links automatically get underline styling and proper color, with full export support.

​
OOXML Structure

<w:hyperlink r:id="rId7">
  <w:r>
    <w:rPr>
      <w:rStyle w:val="Hyperlink"/>
      <w:u w:val="none"/>
    </w:rPr>
    <w:t>Link text</w:t>
  </w:r>
</w:hyperlink>

​
Use case

  • External links - Connect to websites and online resources
  • Document navigation - Create internal anchor links
  • Email links - Add mailto: links for contact information
  • References - Link to sources and citations
  • Non-inclusive - Links don’t expand when typing at edges, preventing accidental link extension

​
Options

Configure the extension behavior:
​
protocols
Array<string>
default:"['http','https']"
Allowed URL protocols
​
htmlAttributes
Object
HTML attributes for link elements
​
htmlAttributes.target
string
default:"null"
Default link target
​
htmlAttributes.rel
string
default:"noopener noreferrer nofollow"
Default rel attribute
​
htmlAttributes.class
string
default:"null"
CSS class
​
htmlAttributes.title
string
default:"null"
Title attribute

​
Attributes

Node attributes that can be set and retrieved:
​
href
string
URL or anchor reference
​
target
TargetFrameOptions
default:"_blank"
Link target window
​
rel
string
default:"noopener noreferrer nofollow"
Relationship attributes
​
text
string
Display text for the link
​
name
string
Anchor name for internal references
​
history
boolean
default:"true"
Whether to add to viewed hyperlinks list
​
anchor
string
Bookmark target name (ignored if rId and href specified)
​
docLocation
string
Location in target hyperlink
​
tooltip
string
Tooltip for the link

​
Commands

Create or update a link
Automatically adds underline formatting and trims whitespace from link boundaries
Example: 
editor.commands.setLink({ href: 'https://example.com' })
editor.commands.setLink({
  href: 'https://example.com',
  text: 'Visit Example'
})

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

const superdoc = new SuperDoc({
  selector: '#editor',
  document: yourFile,
  onReady: (superdoc) => {
    const editor = superdoc.activeEditor;
    editor.commands.setLink({ href: 'https://example.com' })
    editor.commands.setLink({
      href: 'https://example.com',
      text: 'Visit Example'
    })
  },
});
Parameters:
​
options
SetLinkOptions
required
Link configuration
Remove link and associated formatting
Also removes underline and text color
Example: 
editor.commands.unsetLink()

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

const superdoc = new SuperDoc({
  selector: '#editor',
  document: yourFile,
  onReady: (superdoc) => {
    const editor = superdoc.activeEditor;
    editor.commands.unsetLink()
  },
});
Toggle link on selection Example: 
editor.commands.toggleLink({ href: 'https://example.com' })
editor.commands.toggleLink()

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

const superdoc = new SuperDoc({
  selector: '#editor',
  document: yourFile,
  onReady: (superdoc) => {
    const editor = superdoc.activeEditor;
    editor.commands.toggleLink({ href: 'https://example.com' })
    editor.commands.toggleLink()
  },
});
Parameters:
​
options
SetLinkOptions
required
Link configuration

​
Types

​
TargetFrameOptions

Target frame options

​
SetLinkOptions

Link options for setLink command

​
Source code