# Meteor.js 3 + Svelte

In this tutorial, we will create a simple To-Do app using [Svelte](https://svelte.dev/) and Meteor 3.0. Meteor works well with other frameworks like [React](https://react.dev/), [Vue 3](https://vuejs.org/), [Solid](https://www.solidjs.com/), and [Blaze](https://www.blazejs.org/).

Svelte is a modern UI framework that compiles your code to highly efficient vanilla JavaScript at build time, resulting in smaller bundles and faster runtime performance. Launched in 2016, it has gained popularity for its simplicity and reactivity without a virtual DOM. Compared to older approaches, Svelte eliminates much of the boilerplate and runtime overhead found in frameworks like React. It uses a declarative syntax with built-in state management, transitions, and stores that can be integrated with Meteor's reactive data sources like [Tracker](https://docs.meteor.com/api/tracker.html) and [Minimongo](https://docs.meteor.com/api/collections.html). This means your UI updates automatically as data changes, without manual DOM manipulation.

If you're new and not sure what UI framework to use, Svelte is a great place to start—it's easy to learn, performant, and has a growing community. You can still leverage Meteor packages designed for other frameworks, like [accounts-ui](https://docs.meteor.com/packages/accounts-ui), even in a Svelte app.

To start building your Svelte app, you'll need a code editor. If you're unsure which one to choose, [Visual Studio Code](https://code.visualstudio.com/) is a good option.

Let’s begin building your app!

# Table of Contents

[[toc]]

<!-- @include: ./1.creating-the-app.md-->
<!-- @include: ./2.collections.md-->
<!-- @include: ./3.forms-and-events.md-->
<!-- @include: ./4.update-and-remove.md-->
<!-- @include: ./5.styles.md-->
<!-- @include: ./6.filter-tasks.md-->
<!-- @include: ./7.adding-user-accounts.md-->
<!-- @include: ./8.deploying.md-->
<!-- @include: ./9.next-steps.md-->
