Summary  
Reactive variables trigger automatic UI updates when their values change, leveraging a built-in reactivity system to keep interfaces in sync without manual DOM manipulation.

General domain of usage  
Interactive user interfaces in web applications.



One of the most powerful features of Svelte is its built-in reactivity system. Reactive variables allow the user interface to update automatically whenever data changes.

Instead of manually updating the page, Svelte keeps the interface synchronized with your application data automatically.



## What Is Reactivity?



Reactivity means the interface responds to data changes automatically.

For example, if a variable changes from:

```js id="g4m9zu"
let count = 0;
```

to:

```js id="a8x1qp"
count = 1;
```

the displayed content updates immediately without manually changing the HTML.

This behavior is one of the core ideas behind modern frontend frameworks.


Definition




## Creating a Reactive Variable

Open `App.svelte` and add the following code:

```svelte id="z1w5nt"
<script>
  let count = 0;

  function increaseCount() {
    count += 1;
  }
</script>

<h1>Counter: {count}</h1>

<button on:click={increaseCount}>
  Increase
</button>
```

Every time the button is clicked, the value of `count` changes and the interface updates automatically.



## Automatic UI Updates

In traditional JavaScript applications, developers often need to manually update elements in the DOM after changing data.

Svelte removes much of this complexity. When a reactive variable changes, Svelte automatically updates only the parts of the interface that depend on that value.

This makes frontend development feel more natural and efficient.



## Reactive State in Real Applications

Reactive variables are used constantly in frontend applications.

For example:

* Counters;
* Theme toggles;
* Form inputs;
* Search systems;
* Shopping carts;
* Dynamic dashboards.

Most interactive UI behavior relies on reactive state updates.

Learn how to build modern reactive frontend applications with Svelte. Work with components, props, state, events, template logic, stores, and API data while creating fast and interactive user interfaces using modern frontend development patterns.

Learn the foundations of Svelte while setting up your first frontend application with Vite. Explore the Svelte project structure, understand how `.svelte` components work, and build your first reactive user interfaces using modern frontend development workflows.

Learn how to build reusable Svelte components while working with props, dynamic data, scoped styles, and component-based UI development. Explore how modern frontend applications organize interfaces into flexible and reusable building blocks.

Learn how Svelte reactivity powers dynamic frontend applications. Work with reactive variables, bindings, conditional rendering, lists, and event handling while building interactive user interfaces that respond automatically to user actions and data changes.


Learn how Svelte stores help manage and share reactive state across applications. Work with writable and derived stores, automatic subscriptions, and shared component data while building scalable frontend state management patterns.

Work with real API data inside Svelte applications while handling asynchronous requests, loading states, error handling, search systems, and dynamic filtering. Build reactive interfaces that respond automatically to changing external data.


Build more flexible and interactive Svelte applications using transitions, component composition, parent-child relationships, and slots. Organize interfaces into reusable UI structures while adding smoother user interactions and animations.


Build interactive frontend features with forms, validation, responsive layouts, and project organization techniques while combining the main Svelte concepts into a complete real-world frontend application.


Reactive Variables

What Is Reactivity?

Creating a Reactive Variable

Automatic UI Updates

Reactive State in Real Applications