Svelte

Svelte offers remarkable flexibility for creating dynamic components. In this tutorial, we’ll explore how to instantiate components on the fly and pass properties to them in an elegant and efficient manner.

I often need to code some way to have multiple pages rendered in the same location : think about a configuration panel with several sub panels. The natural way to code this is using tabs.

Tags input

I want to code a simple tags input component in Svelte like the animation above.

  • An input text where I can type words.
  • As soon as I type a comma or Enter, the input turns into a “tag”.
  • The tag appears next to the input text with a small cross to delete it.

I can retrieve the list of tags in an easy-to-use data structure: for example, an array of string.