I have worked with a few JavaScript rich text editors and have come to prefer Quill over others, both for writing in the browser and integration in code. It is open source, the out of the box design already looks good, is customizable, it is easily extended, and integrates nicely with various frameworks. Here is how to integrate with SvelteKit.

Prerequisites

- You need a SvelteKit app installed, their documentation here explains how to create a new project

- To follow along you need an understanding of how SvelteKit routing works, specifically the +page.svelte file, read about that here on their documentation

1. Install Quill in Your Project

Quill is a simple to install npm package aptly named quill, we can find the package here. Run this in the root of our SvelteKit directory:

2. Choose a Theme

Next, we need to include one of the supported themes (or create our own), the one I like is Snow and you can read about themes for quill in their documentation. The theme file is included in the Quill npm package at the path "node_modules/quill/dist/quill.snow.css". For this example I will include this file path without "node_modules" because Vite knows to look at it automatically, assuming this is in a new project, the svelte file we need to edit is located at "src/routes/+page.svelte". Remove anything in the file and add these lines at the top of the file:

3. Create a Quill Editor

Now we need to create the editor, update the "src/routes/+page.svelte" file to include the following "content" variable and effect block. In subsequent steps, we will bind "content" to a hidden input and also create the necessary HTML elements for the toolbar and editor. Update the code to look like this:

And there are a few things above that need explanation. On line 11 we are using a dynamic import for Quill in the $effect block. By default SvelteKit uses server-side rendering (SSR) and Quill uses DOM manipulation browser APIs that Node.js doesn't have. Using this approach we load the library in the client on the browser, this is unnecessary if you disable SSR and are building a SvelteKit single-page app, you can read about that here. On line 20, we set the value of "content" on a handy event provided by Quill called "text-change" (you can read about that here). This is just a simple method of getting the output of the rich text editor, but it enables adding the editor to a form and sending a POST request to save the content.

4. Use a Hidden HTML Input Element For Content

As stated above, we need to add an input element with the type "hidden". Add this code at the end of the "src/routes/+page.svelte" file (outside of the script tag):

We won't implement a form in this article, but you can learn about using forms in SvelteKit in the documentation here.

5. Add a Container for the Editor UI

The next element we need to add is a div with the id "editor", Quill will use this element as the UI container. This element will be where the user writes, add this to the end of the "src/routes/+page.svelte" file:

I also added some CSS style for the editor, that is optional but helps make the container an even width, height and includes some nice round corners on the bottom of the container.

6. Create the Toolbar

The final task here is to add the toolbar. There are a few different ways to do this but I opted for the HTML option because I often customize things, you can read about the options available for the toolbar in the documentation here. We need to update the code by adding a div with the id "toolbar" above the editor container element we created in step 5, again there is some optional CSS for the toolbar. Update the file to include a toolbar above the editor element and after the content input:

Note: The contents of the toolbar element are just copied from the documentation in this section.

Conclusion

We've created a rich text editor that works, here is the code you should have ended up with in "src/routes/+page.svelte":

Happy coding! 🧑‍💻

Code With Ben Knox