It’s relatively new, and compared to vue and react, documentation, community and libraries/plugins are all a bit limited.
Just like Vue and React, it helps you to re-use similar pieces of code. For example, every ‘mix-card’ uses the same layout and logic, but the data presented is different;
E.g. In that green square there, is the ‘mixCard’ component.
Your Svelte app structure might look something like this:
The app.js is the root, and it renders one of the pages, depending on the url you visit. Will get back to that in the Inertia part.
We have several pages, like the mixes, sources, about pages, several components, which are usually smaller elements on the page that we repeatedly use in various pages, and we have layouts: elements that we can use as wrappers, with things like menus and header bars. They all use the same file structure and logic, but are used a bit differently.
Svelte 5 has a legacy (old) and runes (new) mode. I’ll mostly discuss Runes mode below, but I figured out later what the difference was so I used them both throughout the project.. For more info, refer to Runes VS legacy mode. Largest difference is some import syntax, and that in runes mode you need to explicitly define which variables are state variables (will get to that below).
A very simple Svelte component might look like below (e.g. MixCard.Svelte)
It starts with a script tag, in which we can
Underneath, we find a HTML-like structure, that determines the structure as we see it in the browser. In this case, it’s a single div, that renders properties like the mix avatar and mix name.
In this html-structure, we can use conditional statements and Javascript variables, which I’ll get to in a minute.