Get started

1. Create an account

Register and you'll land on your dashboard. A Default embed token (200 sessions/month) is created for you automatically the first time it loads — there's nothing to set up first.

2. Copy your embed snippet

Your dashboard shows a personalized two-part snippet:

<!-- 1. loads the editor, tracked to your account -->
<script src="https://your-app.test/embed/YOUR_TOKEN.js"></script>

<!-- 2. mounts it once the loader is ready -->
<script>
  AlpineEditor.init({ selector: '#editor', theme: 'default' });
</script>

The token in the URL is what scopes usage and limits to your account — there's no separate API key or auth header to configure.

3. Add a container to your page

What selector should point at depends on how you want to mount:

<!-- boxed (default/simple themes): a hidden <textarea> holds the initial content -->
<textarea id="editor"><p>Hello, World!</p></textarea>

<!-- inline mode: any existing element becomes the editor in place -->
<div id="editor"><p>Hello, World!</p></div>

4. Initialize it

AlpineEditor.init(options) only runs once the loader has fetched the shared editor bundle, so wait for the alpine-editor:ready event before calling it:

document.addEventListener('alpine-editor:ready', () => {
  AlpineEditor.init({
    selector: '#editor',
    theme: 'default',
    height: 400,
  });
});

That's a fully working editor. init() resolves to an array of Editor instances, one per matched element.

5. Save what your users write

Pass onChange to react to edits, and call editor.getContent() whenever you need the current HTML — on your own save button, for example:

AlpineEditor.init({
  selector: '#editor',
  onChange: (editor) => console.log(editor.getContent()),
});

Full API in Content & Events.

6. Pick a look

theme: 'default' gives you a full menu bar and toolbar, 'simple' is a compact toolbar-only editor, and inline: true turns existing page content into an editor in place with a floating toolbar — see the dedicated Inline Editor guide for a full walkthrough, or Themes & Toolbar for the toolbar config-string syntax.

7. Watch your usage

Your dashboard shows sessions used this month against your limit, and a log of recent sessions (theme, origin, duration — never document content). If a token's monthly limit is reached, new init() calls show a small message in place of the editor instead of mounting, until the next period starts.

Where to go next