Lightweight text editor built with svelte, typescript

View the Project on GitHub

Basic Example

Includes all available actions and default height.

const editor = new Editor({
    target: document.getElementById('editor1')

Custom action example

Example of custom copy action.

const editor2 = new Editor({
    target: document.getElementById('editor2'),
    data: {
      actions: [
        'b', 'i', 'u', 'strike', 'h1', 'h2', 'p',
            name: 'copy', 
            icon: '📋',
            title: 'Copy',
            result: () => {
              const selection = window.getSelection();
              if (!selection.toString().length) {
                const range = document.createRange();
      html: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a odio neque. Duis ac laoreet lacus.',
      height: '150px'

Example using blur event

You can use editor blur event to inline edit text.

<div id="inlineEdit">
  Edit this line of <b>text</b>
let inlineEditor;
const inlineEdit = document.getElementById('inlineEdit');
inlineEdit.addEventListener('click', showEditor);

function showEditor() {
  let html = inlineEdit.innerHTML;
  inlineEdit.innerHTML = '';
  inlineEditor = new Editor({
    target: inlineEdit,
    data: {
      actions: ['b', 'i', 'u', 'strike', 'removeFormat'],
      height: 'auto',
      html: html

  inlineEdit.removeEventListener('click', showEditor);

  inlineEditor.on('blur', () => {
    html = inlineEditor.getHtml();
    inlineEdit.innerHTML = html;
    inlineEdit.addEventListener('click', showEditor);

Edit this line of text