Svelte allows us to explicitly show an element if the array to be looped is found empty. It's a feature that's exclusively available to Svelte among other SPA frameworks. Let's…

Svelte allows us to loop through a list of data using the #each block. Let's have a look at this example to understand how it works. We're going to add…

Like any other SPA framework, Svelte allows us to show parts of HTML or components conditionally. If we compare it with React, in React we return a fragment/component for each…

More often than not, we'd need to bind CSS class names conditionally. One of the prime examples is form validation. We often like to highlight to show erroneous messages in…

By default, if we try to input some HTML value in a text input or a textarea input and display it directly, it won't parse it as HTML. That is,…

Earlier we saw how we can import one component into another in Svelte. But this is not of much use if we cannot pass some values to the components we…

Svelte has probably one of the most compact syntaxes to import components. All other SPA frameworks seem to demand more code lines. Let's have a look at an example. In…

In the previous example, we learned how we can do two-way data binding in Svelte by using the :on event listener. However, it required us two steps to bind a…

In the previous article, we saw how we can use reactive declaration $ in Svelte. In this article, we'll have a look at how we can automatically lowercase the user…