Styling

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;

  /* Print Area */
  --he-viewer-print-area-color-default: #ff00ff; /* Color control */
  --he-viewer-print-area-step-default: 8px; /* Dashed line step */
  --he-viewer-print-area-width-default: 1px; /* Line width */
  --he-viewer-print-area-alt-color-default: #00000000; /* Alternative color */
  --he-viewer-print-area-visible: visible; /* Visibility control */

  /* Max Artwork Frame */
  --he-viewer-artwork-frame-color: #FBCA4C;
  --he-viewer-inner-artwork-frame-dash: 5px 2px;
  --he-viewer-artwork-frame-label: visible;
  --he-viewer-artwork-oversize-frame-color: #DC2626;
}

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

Print Area

Variable	Description	Default Value
--he-viewer-print-area-color-default	Color for the print area border	#ff00ff
--he-viewer-print-area-step-default	Step size for the dashed line	8px
--he-viewer-print-area-width-default	Thickness of the print area border	1px
--he-viewer-print-area-alt-color-default	Alternative color for the border	#00000000
--he-viewer-print-area-visible	Visibility of the print area	visible

Max Artwork Frame

Variable	Description	Default Value
--he-viewer-artwork-frame-color	Color for the max artwork frame	#FBCA4C
--he-viewer-inner-artwork-frame-dash	Dash pattern for the inner artwork frame	5px 2px
--he-viewer-artwork-frame-label	Visibility of the artwork frame label	visible
--he-viewer-artwork-oversize-frame-color	Color for the oversize artwork frame	#DC2626

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.

tip

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