svelte

Reactive Declarations

Svelte allows you to write reactive statements using the $: syntax. When the state changes, the reactive statements automatically update to reflect the new state.

let count = 0;

$: doubled = count * 2;

Component Definition

Components in Svelte are defined using a combination of HTML, CSS, and JavaScript, which are encapsulated within a single file with a .svelte extension.

<script>
  export let name;
</script>

<h1>Hello {name}!</h1>

Store Management

Svelte provides a simple store mechanism to manage global state. The 'writable' store is a basic store that allows reading and writing values reactively.

import { writable } from 'svelte/store';

const count = writable(0);

Transitions and Animations

Svelte makes it easy to add transitions and animations to elements when they enter or leave the DOM.

import { fade } from 'svelte/transition';

<div in:fade={{ delay: 0, duration: 200 }}>Fade In</div>

Bindings

Svelte provides a concise syntax for two-way data binding to HTML elements, allowing for easy synchronization between the DOM and component state.

<script>
  let value = '';
</script>

<input bind:value={value} />