It's a JavaScript tool for building UI components, just like React, Angular, or Vue.

But unlike its peers, which ship a JavaScript runtime to the browser to make your code work, Svelte is a compiler.

It converts the declarative code that you love to write as a developer into imperative code that works with native browser APIs.

As a result, you get highly performant code in a very small package.

But most importantly, it's the only JavaScript framework that's actually enjoyable to use.

We create components in .svelte files.

Which contain three main parts.

A script for your JavaScript code, which can also be TypeScript.

A style tag for your CSS, which can also use a preprocessor like Sass.

And the main template represented as regular HTML.

But it's no ordinary HTML.

It's been empowered with all kinds of extra syntax for writing declarative code.

Need reactive state?

Simply define a variable with the let keyword.

Then reference it dynamically in the HTML using braces.

If we want to change the state, we can do that by defining a function, then listen to an event in the DOM with on, and bind the function to it as the handler.

Now when the value of that variable changes, the component will automatically re-render to show the updated state.

In many cases, you'll need to run conditional logic or loops in your template.

Instead of fighting against JavaScript functions, it empowers you with a syntax where you can clearly create an if-else statement or a for-each loop when working with a list.

Now when it comes to cross-component communication, Svelte provides multiple different strategies for sharing data between components.

To pass data from a parent to child, you can use props by adding the export keyword to a variable.

And now you can pass data into this component.

And if you have a ton of props, you can use the spread syntax to keep your code looking fit and healthy.

Now for more complex component trees, you have a context API just like React.

And if that wasn't enough, Svelte also has a really nice mechanism called stores, which are like observables that can be shared anywhere in the a dollar sign in front of them.

After you've built an awesome UI, you can then use the compiler to convert it to vanilla JavaScript.

And if you're building a full-blown web application, you can use SvelteKit to quickly implement server-side rendering, routing, and code splitting.

This has been Svelte in 100 seconds.

Hit the like button if you want to see more.

Thanks for watching, and I will see you in the next one.