So for today I wanted to implement a search bar similar to the design from yesterday for the web.

Because I wanted to include the search bar directly into this post, I needed some kind of component that I can directly include into my website. For that purpose I wanted to use web components.

Try it out at the bottom of this post

Web components, when included in a website, act similar to html tags and have their own css.

Building a web component from scratch can be a little bit annoying so I went with the Svelte framework (compiler to be exact). Svelte is similar to other Javascript frameworks like React or Vue, but compiles to minimal Javascript code in production. So you don’t have to ship the complete framework to every client.

And you don’t have to write that much boilerplate code: https://svelte.dev/blog/write-less-code

With svelte you can also build vanilla web components (called custom components), what I have done in this example. (A template, if you are interested: https://github.com/gojutin/svelte-custom-element)

With a simple npm run build or similar, you can build a web component and include the resulting script file (like build.js) into your HTML file.

Then you can use your component just like any other html element.

<script src="/search-bar.js"></script>
<search-bar></search-bar>

Now of course, here it is. The search bar included as web component into this post.
Try searching for any word on this post below:

Please update your browser, to use this search bar.