This article will show you how to setup a new Svelte project to develop a custom tag, using esbuild, with live reloading.

Fisrt, why use esbuild ? Well, it's a very fast bundler that's easy to setup and I did not find a lot of tutorial about Svelte and esbuild.

Next, what is a custom tag ? It's an HTML tag, like <pre> or <input> but we are in charge to define its behavior and its look, thanks to some JavaScript code. In fact, thanks to Svelte, we can define both in a single component.

So, to do just that, in a new directory, we will create 4 files :

package.json : defines all javascript dependencies

esbuild.js : script to launch the local server, watch files and reload Svelte

index.html : our main web page

app.svelte : the Svelte custom tag component

package.json

This is where we declare our dependencies. We need esbuild and its svelte plugin.…