Default style

ModuloEditor provides minimal default styles.

These styles ensure the editor is usable out of the box while remaining unopinionated.

The default styles focus on:

• layout
• spacing
• readability
• toolbar alignment

Import default styles

import "@lakamark/modulo-editor/style.css";

This will apply the default editor styles.

Styled elements

The default stylesheet targets elements generated by the default DOM initializer.

These include:

• editor root
• header
• toolbar
• body
• input container
• preview container
• footer
• status

The styles are intentionally minimal and designed to be overridden.

Example

With default styles imported, the editor becomes usable immediately.

ModuloEditor
  .create('[data-mo-editor]')
  .usePreset(DefaultEditorPreset)
  .init();

Overriding default styles

You can override any default style using CSS.

[data-mo-editor-toolbar] {
  background: #f5f5f5;
}

Default styles are optional and fully customizable.