Home

Edit Source

Usage

Edit source links are small inline utilities. Start with:

  • --edit-source-font-size and --edit-source-icon-size for scale

  • --edit-source-color and --edit-source-color-hover for link states

Tokens

TokenDescriptionDefault Value
--edit-source-font-familyFont familyvar(--layout-font-family)
--edit-source-icon-sizeIcon size1em
--edit-source-font-sizeText font sizevar(--font-size-2xs)
--edit-source-gapGap between icon and textvar(--space-2)
--edit-source-colorLink colorvar(--text-color-secondary)
--edit-source-color-hoverLink hover colorvar(--text-color-primary)

Examples

Quiet Utility Link

:root {
  --edit-source-color: var(--text-color-muted);
  --edit-source-color-hover: var(--text-color-secondary);
}

Prominent Edit Link

:root {
  --edit-source-font-size: var(--font-size-xs);
  --edit-source-color-hover: var(--color-accent);
}

Tips

Match utility links: Keep edit-source tokens aligned with edit-on and copy-markdown for cohesion.

Icon scaling: Use --edit-source-icon-size to align with your icon set.
Edit on GitHub
© 2026 Stencila