By Kevin Åberg Kultalahti
2020-06-06

External Libraries in Svelte Using Actions


This is the second article about using actions in svelte. I recommend that you read the first one if you haven’t done that already.

There are many ways to integrate external libraries in Svelte. Most often it just works out of the box but if you’re using Sapper it can be a bit more complicated. Today we’ll take a look at how to do it using Actions. This solution avoids many of the common problems you might run into if you do this in other ways.

The basics

This technique of adding libraries works well when they attach directly on nodes. In other instances it might be better to use other methods. Anyway, let’s get started.

The return of the Typewriter example

For this first example we’ll be continuing on with our Typewriter examples from last week but instead of writing the functionality ourselves, we’ll be importing a package called TypewriterJS. It gives us more controls on how the effect works. Have a look:

As you can see, all the logic that is needed to instantiate the library is hidden away in our action function - and it’s reusable. Very neat. In this example I’ve opted to pass in only the text but this particular library can be configured further if it is desirable.

Svelte and GridJS

Recently there was a thread on hackernews about a new Grid library called Grid.js. Scouting the documentation reveals that there are no instructions for Svelte, but fear not, implementing it is very straight forward. Just like in the earlier example just instantiate it by passing in some data. Simple, and re-usable.

Using Quill and Svelte

Quill is a popular Rich Text editor that is commonly used when you want to provide a simple yet rich editing experience to your end users.

A couple of months ago when I was experimenting with actions I built a small library that integrates just this library, called svelte-quill. It just consists of a single action that helps you use Quilljs in Svelte. We’ll examine how this is built. Here’s the REPL:

Let’s start by taking a look at the App.svelte file. If you focus on the div where we attach the action to (line 15) you’ll see that in addition to the action we’re also listening to an event called text-change. When this event is picked up by our component we’re updating a content variable and displaying the contents of that variable further down using the @html directive.

In the action we’re importing the actuall Quill library and instantiating it much like we’ve seen in the earlier two examples. What differs here compared to the other examples is how we’re also listening to an event from this same instance that we just instantiated. And when this event comes in, we handle the data and dispatch an event, text-change.

Liking this content?
Sign up to the newsletter!

Summary And Notes

As shown, integrating libraries like this is very easy and it makes a lot of sense. Much like in our typewriter examples from last week it really shows how clean and re-usable actions are. One way of interacting with these libraries is by dispatching and listening to events.

One thing I haven’t touched on is how some of these libraries require CSS and here I’ve been importing them using the <svelte:head> tag but in a more permanent situation you would probably import them in some other way.

In the third and final (for now!) part of our actions series we’ll dive deep into the internals of actions and how they work on the inside! If you’ve enjoyed this content, sign up to the newsletter! That way I can make sure that you’re notified when a new one is out. Cheers!

profile image

I'm Kevin. A (mostly) front-end web developer focusing only on Svelte. I write articles, create videos and make courses. I run the Svelte Radio podcast. Oh, and I like to build stuff; websites, packages, anything really. If you want to get in contact with me, hit me up on Twitter or send me an email.

Svelte School is a company that develops courses and trains developers on how to use the framework Svelte.