Themes & Toolbar

theme: 'default' | 'simple'

Controls the boxed editor's chrome — menu bar, toolbar position, and status bar. Defaults to 'default' when omitted.

AlpineEditor.init({
  selector: '#editor',
  theme: 'simple', // or 'default'
});

inline: true

Instead of replacing a <textarea>, the matched element itself becomes the editable surface in place — no wrapping container, menu bar or status bar at all. Hovering shows a light outline; focusing it shows a solid one and raises a floating toolbar positioned above (or below, if there isn't room) the element, left-aligned to it.

<div data-inline><p>Click to edit me.</p></div>
<script>
  AlpineEditor.init({ selector: '[data-inline]', inline: true });
</script>

selector can match multiple elements — each one becomes its own independent inline editor instance, exactly like a CMS wiring up separately editable regions on one page.

Full setup-to-teardown walkthrough: Inline Editor.

toolbar: config string

A TinyMCE-style string: space-separated button tokens, grouped with | as a visual separator. Overrides the current theme's own default toolbar.

AlpineEditor.init({
  selector: '#editor',
  toolbar: 'undo redo | bold italic underline | alignleft aligncenter alignright | bullist numlist | link image',
});

Each theme has its own default toolbar string used when you don't pass one:

// default theme
'undo redo | blocks | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image table'

// simple theme
'blocks | bold italic underline strikethrough | bullist | link | code'

// inline mode — an array of strings renders as separate toolbar rows
[
  'undo redo | bold italic underline | fontfamily fontsize',
  'forecolor backcolor | alignleft aligncenter alignright | bullist numlist | outdent indent',
]

borderRadius: number | string

Controls how rounded the editor's corners are — the outer container, dialogs, menus, buttons and inputs all scale together. Defaults to 14 (pixels), which is the rounded look shown throughout these docs. Pass 0 for square corners, or any other value for something in between.

AlpineEditor.init({
  selector: '#editor',
  borderRadius: 0, // square corners
});

AlpineEditor.init({
  selector: '#editor',
  borderRadius: 6, // numbers are treated as pixels
});

AlpineEditor.init({
  selector: '#editor',
  borderRadius: '0.5rem', // strings are used as-is
});

Branding

The default theme's status bar shows a small "Powered by Alpine Editor" mark, centered. Pass branding: false to hide it.