svelte-trix

Svelte 5 wrapper around the Trix WYSIWYG editor from Basecamp. For use in Svelte or Sveltekit projects using Svelte 5.x.x or later.

Getting Started

Install via npm

npm install svelte-trix --save-dev

This will install svelte-trix as well as the base Trix dependency.

Simple Usage

Using Two-Way Binding

<script lang='ts'>
  import { TrixEditor } from 'svelte-trix';

  let value = $state('');
</script>

<TrixEditor
  bind:value
/>

Using the onChange listener

<script lang='ts'>
  import { TrixEditor } from 'svelte-trix';

  let value = $state('');

  const handleChange = (html: string) => {
    // html is a string of HTML that TrixEditor sends back.
    value = html
  }
</script>

<TrixEditor
  onChange={handleChange}
/>

Both of the above examples will produce a simple rich text editor with buttons on the top that looks like this:

Props

svelte-trix has typesafe support for all customizations and event listeners that the original Trix library supports, as well as a bindable value prop for svelte-ishness.

Props for Behavior/Appearance

| Prop | Type | Description | Bindable | | ---- | ---- | ----------- | ---- | | value | string | A string of HTML generated by the editor. This is a bindable prop that can also be used to set the initial value in the editor. | Yes | | editor | Element | Bindable prop that exposes the instance of the TrixEditor directly, should you want to perform any customizations or actions that aren't available through props. | Yes | | label | string | Optional label for the form. | No | | disabled | boolean | Disabled editors are not editable and cannot receive focus. | No | | config | ITrixConfig | Learn more about Config | No |

Event Listeners

| Prop | Type | Description | | ---- | ---- | ----------- | | onChange | (html: string) => | Fires when anything changes inside the TrixEditor component. | | onFocus | (e: Event) => | Fires when the editor comes into focus. | | onBlur | (e: Event) => | Fires when the editor loses focus. | | onPaste | (e: Event) => | Fires whenever text is pasted into the editor. The paste property on the event contains the pasted string or html, and the range of the inserted text. | | onSelectionChange | (e: Event) => | Fires any time the selected range changes in the editor. | | onFileAccept | (e: Event) => | Fires when a file is dropped or inserted into the editor. You can access the DOM File object through the file property on the event. Call preventDefault on the event to prevent attaching the file to the document. | | onAttachmentAdd | (e: Event) => | Fires after an attachment is added to the document. You can access the Trix attachment object through the attachment property on the event. If the attachment object has a file property, you should store this file remotely and set the attachment’s URL attribute. | | onAttachmentRemove | (e: Event) => | Fires when an attachment is removed from the document. You can access the Trix attachment object through the attachment property on the event. You may wish to use this event to clean up remotely stored files. |

Config

Until this documentation is more robust, you can look in the types.ts file for all supported Config options.

The Basecamp Trix library supports a lot of Config options, most of which aren't documented in the original library.

In an attempt to keep this Svelte-friendly and prop-based, every config option is completely optional in one large config object which then gets applied to the Trix config.

Let's use HTML Sanitization as an example.

In the original Trix library, you would set the DOMPurify config like this:

Trix.config.dompurify.ADD_TAGS = [ "my-custom-tag" ]

With svelte-trix, you would set it like this:

<TrixEditor
  ...
  config={{
    dompurify: {
      ADD_TAGS: [ "my-custom-tag" ]
    }
  }}
/>

Please note: Since these values are used when the Trix editor is initialized, they are non-reactive.

Contribution

Feel free to open issues or PRs as needed. I'll do my best to be responsive and actively maintain this library, or answer any questions you might have.