Helios Editor

Importing CSS

Learn how to import and customize the editor styles.

Standard Import (Recommended)

The easiest way to import the CSS is directly in your JavaScript/TypeScript file:

import HeliosEditor from "helios-editor";
import "helios-editor/dist/editor.css";

Alternative Import Methods

In HTML File

You can also import the CSS file directly in your HTML:

<link
  rel="stylesheet"
  href="node_modules/helios-editor/dist/editor.css"
/>

Using CSS/SASS Imports

Import in your CSS or SASS file:

@import "~helios-editor/dist/editor.css";

Webpack Configuration

For webpack configurations, you might need to use:

import "helios-editor/dist/editor.css";

CSS Features

The standalone CSS includes:

  • Proper button styling for formatting options (B, I, U, S)
  • Enhanced dropdown components with wide layouts and selected value display
  • Visual feedback for active dropdown selections
  • Responsive design for mobile devices
  • Properly aligned button groups and separators
  • Support for theme customization
  • Improved z-index management for dropdown menus

Customization

You can override the default styles using the customClasses prop. Learn more in the Custom Classes documentation.