What Makes Svelte Different?

Svelte compiles components to vanilla JavaScript. No runtime library needed. Faster, smaller bundles compared to React or Vue.

Basic Component

<!-- Counter.svelte -->
<script>
  let count = 0;
  
  function increment() {
    count += 1;
  }
  
  // Reactive declaration
  $: doubled = count * 2;
</script>

<button on:click={increment}>
  Count: {count} (Doubled: {doubled})
</button>

<style>
  button {
    padding: 10px 20px;
    font-size: 18px;
  }
</style>

Props and Events

<!-- Child.svelte -->
<script>
  export let name;
  import { createEventDispatcher } from 'svelte';
  const dispatch = createEventDispatcher();
</script>

<button on:click={() => dispatch('greet', name)}>
  Greet {name}
</button>

<!-- Parent.svelte -->
<Child name="John" on:greet={(e) => alert(`Hello ${e.detail}`)} />

Stores

// stores.js
import { writable } from 'svelte/store';
export const count = writable(0);

// In component
import { count } from './stores';
$count = 5; // Shorthand for subscription and update

Conclusion

Svelte is fast, simple, and powerful. Short learning curve for developers familiar with HTML, CSS, JavaScript.