Styling

• Last updated on September 22, 2025
• •
• 3 minutes to read

The Handy Editor uses CSS variables to customize its appearance and integrate seamlessly with your product's design system. These variables define a "theme" for the editor, allowing you to override semantic elements such as colors, typography, and layout.

This article describes how to customize the Handy Editor using CSS variables, including best practices and examples.

Customizing the Editor with CSS Variables

To override the editor's default styles, add a <style> tag to your HTML or link an external stylesheet using <link>. Define your CSS variables in the :root selector.

:root {
  /* Colors */
  --he-color-primary: #2450ff; /* Brand color for buttons, grips, etc. */
  --he-color-primary-hover: #1d4ed8; /* Brand color on hover */
  --he-color-primary-active: #1e40af; /* Brand color when active */
  --he-color-primary-contrast: #ffffff; /* Contrast color for primary elements (e.g., button text) */
  --he-color-warning: #b45309; /* Warnings */
  --he-color-danger: #dc2626; /* Errors */
  --he-color-background: #ffffff; /* Background color for panels and elements */
  --he-color-shadow: #00000029; /* Shadow color */

  /* Typography */
  --he-font-family: Inter; /* Font for all text elements */

  /* Buttons */
  --he-buttons-border-radius: 24px; /* Border radius for buttons */

  /* Headings */
  --he-heading-1-font-size: 32px;
  --he-heading-1-font-weight: 600;
  --he-heading-1-line-height: 40px;

  /* Panels, Dialogs*/
  --he-heading-2-font-size: 18px;
  --he-heading-2-font-weight: 600;
  --he-heading-2-line-height: 24px;

  /* Drop-down menus in the properties panel */
  --he-heading-3-font-size: 16px;
  --he-heading-3-font-weight: 600;
  --he-heading-3-line-height: 24px;

  /* Body Text */
  --he-body-font-size: 14px;
  --he-body-line-height: 20px;
  --he-body-font-weight-regular: 400;
  --he-body-font-weight-medium: 500;
  --he-body-font-weight-bold: 600;

  /* Captions, Labels */
  --he-caption-font-size: 12px;
  --he-caption-line-height: 16px;
  --he-caption-font-weight-regular: 400;
  --he-caption-font-weight-medium: 500;

  /* Viewer Selection */
  --he-viewer-items-selection-border-width: 2px;
  --he-viewer-items-selection-grips-size: 12px;
  --he-viewer-items-selection-grips-background: #ffffff;
  --he-viewer-items-selection-rotate-grip-size: 24px;

  /* Interactive Zones */
  --he-viewer-interactive-zone-border-width: 2px;
  --he-viewer-interactive-zone-label-font-size: 11px;
  --he-viewer-interactive-zone-label-color: #ffffff;
  --he-viewer-interactive-zone-color-active: #00b400;
  --he-viewer-interactive-zone-color-hover: #0000ff;
}

Note

If a variable is not defined, the editor will use its default value. For Design Atoms Viewer, ensure variables are defined before the editor initializes. For best results, embed CSS variables directly in the <style> tag.

Available CSS Variables

Colors

Variable	Description	Default Value
--he-color-primary	Brand color for buttons, highlights, etc.	#2450ff
--he-color-primary-hover	Brand color on hover	#1d4ed8
--he-color-primary-active	Brand color when active	#1e40af
--he-color-primary-contrast	Contrast color for primary elements	#ffffff
--he-color-warning	Warning color	#b45309
--he-color-danger	Error color	#dc2626
--he-color-background	Background color for panels and elements	#ffffff
--he-color-shadow	Shadow color	#00000029

Typography

Variable	Description	Default Value
--he-font-family	Font for all text elements	Inter
--he-heading-1-font-size	Font size for H1	32px
--he-heading-1-font-weight	Font weight for H1	600
--he-heading-1-line-height	Line height for H1	40px
--he-body-font-size	Font size for body text	14px
--he-body-line-height	Line height for body text	20px

Buttons

Variable	Description	Default Value
--he-buttons-border-radius	Border radius for buttons	24px

Viewer Selection

Variable	Description	Default Value
--he-viewer-items-selection-border-width	Border width for selected items	2px
--he-viewer-items-selection-grips-size	Size of selection grips	12px

Interactive Zones

Variable	Description	Default Value
--he-viewer-interactive-zone-border-width	Border width for interactive zones	2px
--he-viewer-interactive-zone-label-font-size	Font size for zone labels	11px

How to Use CSS Variables

1. Embed in HTML

Add CSS variables directly in a <style> tag:

<style>
  :root {
    --he-color-primary: #3b82f6;
    --he-font-family: "Segoe UI";
  }
</style>

2. External CSS File

Link an external stylesheet:

<link rel="stylesheet" href="path/to/editor-theme.css">

3. Adaptive Design

Use media queries to adjust variables for different screen sizes:

@media (max-width: 768px) {
  :root {
    --he-heading-1-font-size: 24px;
  }
}

4. Dynamic Updates with JavaScript

Modify variables at runtime:

document.documentElement.style.setProperty(
  '--he-color-primary',
  '#10b981'
);

Best Practices

• Define variables before editor initialization to avoid default fallbacks.
• Use semantic names for variables (e.g., --he-color-primary instead of --color-blue).
• Test responsive behavior with media queries.
• Avoid overriding internal class names unless necessary, as they may change in future updates.

---

You can also add custom HTML code with using Slots. This will not only fit the appearance, but also change the functionality of the editor.