Guides

Content & Events

AlpineEditor.init(options) returns a promise resolving to an array of Editor instances, one per element matched by selector. Everything below is a method on one of those instances.

Init options

Option	Type	Description
`selector`	string	CSS selector matched against `document.querySelectorAll`.
`height`	number \| string	Edit area height, e.g. `300` or `'50vh'`. Ignored in `inline` mode.
`theme`	string	`'default'` or `'simple'` — see Themes & Toolbar.
`inline`	boolean	Mount in place instead of replacing the target — see Themes & Toolbar.
`toolbar`	string \| string[]	Overrides the theme's default toolbar config.
`branding`	boolean	Show/hide the status bar's "Powered by" mark. Default `true`.
`onChange`	(editor) => void	Called after every content-changing edit, with the `Editor` instance.

AlpineEditor.init({
  selector: '#editor',
  height: 400,
  onChange: (editor) => {
    console.log(editor.getContent());
  },
}).then((editors) => {
  const [editor] = editors;
  editor.focus();
});

Reading & writing content

Method	Description
`editor.getContent()`	Returns the current HTML as a string, stripped of transient editor-only state (active-table outline, drag-selection highlight).
`editor.setContent(html)`	Replaces the content and resets undo history.
`editor.focus()`	Focuses the edit area / inline root.

const [editor] = await AlpineEditor.init({ selector: '#editor' });

editor.setContent('<p>Loaded from your own API</p>');

document.getElementById('save').addEventListener('click', () => {
  fetch('/api/documents/1', {
    method: 'PUT',
    body: JSON.stringify({ html: editor.getContent() }),
  });
});

Running commands programmatically

editor.execCommand(name, value) runs the same command a toolbar button would — useful for building your own controls.

editor.execCommand('bold');
editor.execCommand('formatBlock', 'h2');
editor.execCommand('foreColor', '#e11d48');
editor.execCommand('insertTable', { rows: 3, cols: 3 });

Tearing down

editor.destroy() removes the editor and restores the original element (the hidden <textarea> for boxed themes, or the plain non-editable element for inline mode).

editor.destroy();

Note: in inline mode, a session is also ended automatically when the tab closes or the page is hidden — you don't need to call destroy() just to stop being tracked.