--- title: Svelte pros and cons, ecosystem overview and top resources | daily.dev description: Many devs are interested in learning about building with Svelte and we’d love to help you kick start! Explore practical developer news, tutorials, and tools read by millions of developers worldwide. canonical: https://daily.dev/blog/building-with-svelte-all-you-need-to-know-before-you-start/ og:type: article og:url: https://daily.dev/blog/building-with-svelte-all-you-need-to-know-before-you-start/ og:title: Svelte pros and cons, ecosystem overview and top resources | daily.dev og:description: Many devs are interested in learning about building with Svelte and we’d love to help you kick start! Explore practical developer news, tutorials, and tools read by millions of developers worldwide. og:image: https://media.daily.dev/image/upload/s--y01io3IF--/f_auto,q_auto/v1/recruiter-landing/5f30ece8ddb423c686746906_49phd6knqcruuuotl46k_855deb74bc?_a=BAMAMiB80 og:site_name: daily.dev og:locale: en_US article:published_time: 2020-08-10 article:modified_time: 2026-05-15T14:26:52.783Z article:author: Nimrod Kramer twitter:card: summary_large_image twitter:site: @dailydotdev twitter:creator: @dailydotdev twitter:title: Svelte pros and cons, ecosystem overview and top resources | daily.dev twitter:description: Many devs are interested in learning about building with Svelte and we’d love to help you kick start! Explore practical developer news, tutorials, and tools read by millions of developers worldwide. twitter:image: https://media.daily.dev/image/upload/s--y01io3IF--/f_auto,q_auto/v1/recruiter-landing/5f30ece8ddb423c686746906_49phd6knqcruuuotl46k_855deb74bc?_a=BAMAMiB80 --- _TL;DR - unlike established component-based frameworks such as React, Angular, or Vue, with Svelte you can take building user interfaces to the next level. Many devs are interested in learning about building with Svelte and we’d love to help you kick start! Here is a hand-picked list of some valuable resources to assist you to get started with Svelte._ ## Why Svelte? There's a good reason why Svelte is gaining popularity among frontend developers lately. I made a brief of the major advantages that are agreed by many developers who tried building with Svelte and lived to tell their story. ### What’s the benefit? - Instead of doing most of the work in the browser, Svelte does its work when you build the app and it **compiles it to efficient vanilla JavaScript**. - **Reduces the overhead** of the JavaScript framework you’re using. By compiling Svelte to vanilla JavaScript improves the code readability, enables re-use and it produces a much faster web app. - Svelte does not require declarative, state-driven code, which the browser has to convert into DOM operations. That means **you don’t need to use virtual DOM anymore**. ### What’s the downside? - **IDE support** is not yet comparable to the commonly-used frameworks. It still has a lot of room for improvement. Although there are some good resources online to solve some of the issues, it can be considered as a major disadvantage as of today. - **Not many Svelte dev tools** exist at the moment. It is still a young and growing ecosystem. Keep that in mind. However, that’s a great opportunity to develop some for the Svelte community. - **Small open-source ecosystem**. Like many other frameworks, it takes time to build a large community around a specific framework. Although Svelte has gone a pretty decent way already, there are still not enough open-source contributors. Same here, you can look at it as an opportunity as well. Want to read more about the pros and cons of building with Svelte? - [CTO’s guide to Svelte – what can the rising frontend framework do for you?](https://tsh.io/blog/svelte-framework/) - [Same but different: Introduction to Svelte](https://blog.codecentric.de/en/2020/02/same-but-different-introduction-to-svelte/) - [Svelte: comparison with other frameworks](https://codeburst.io/svelte-comparison-with-other-frameworks-e895c45567de) - [A quick example that emphasis the pros and cons of Svelte](https://dev.to/geeksrishti/building-a-dashboard-in-svelte-2fkp) ## Resources to get you started ### Svelte ecosystem 101 👋🏼 - [Svelte’s Homepage](https://svelte.dev/) - [The official Selvte community](https://svelte-community.netlify.app/) - [Svelte GitHub repository](https://github.com/sveltejs/svelte) - [Svelte Discord server](https://svelte.dev/chat) - [Svelte sub-reddit](https://www.reddit.com/r/sveltejs/) ### Tutorials 🤓 We don’t want to overwhelm you with tutorials. There are tons of tutorials out there and we picked only the ones that are both **practical, comprehensive and user-friendly**: - [The official tutorial](https://svelte.dev/tutorial/basics) by Svelte developers. - [Building My First Svelte App: Thoughts and Impressions](https://scotch.io/tutorials/building-my-first-svelte-app-thoughts-and-impressions) by [Chris on Code](https://twitter.com/chrisoncode) ### Use Cases and Demos 🚀 Like anything, inspiration is important when starting with something new. Check out some cool projects that are using Svelte. Some of them are in production and some are demo apps: - [OmniaWrite](https://omniawrite.com/) - A text editor engineered for creative writing. Also on [GitHub](https://github.com/TorstenDittmann/OmniaWrite) - [TypeRunner.js](https://tsh.io/typerunner) - A simple typing game, which has 2-4 human players compete against each other. The one to first type out the entire block of text wins. - [Hacker News clone](https://hn.svelte.dev/) built with Svelte. Also on [GitHub](https://github.com/sveltejs/hn.svelte.dev). - [Nomie](https://nomie.app/) - Mood and Life Tracker built with Svelte. Also on [GitHub](https://github.com/open-nomie/nomie). - Cool showcase of many other apps [made with Svelte](https://madewithsvelte.com/) ### Useful code repositories 💻 - [svelte-grid](https://github.com/vaheqelyan/svelte-grid) - A responsive, draggable and resizable grid layout, for Svelte - [Vime](https://github.com/vime-js/vime) - Focused on making embedding and using media elements for the web simple - [svelte-mui](https://github.com/vikignt/svelte-mui) - A set of Svelte UI components inspired by [Google's Material Design](https://material.io/design) - [svelte-component-template](https://github.com/YogliB/svelte-component-template) - A base for building shareable Svelte 3 components - [svelte-loader](https://github.com/sveltejs/svelte-loader) - Webpack loader for Svelte components - [svelte-routing](https://github.com/EmilTholin/svelte-routing) - A declarative Svelte routing library with SSR support - [svelte-inetllij](https://github.com/tomblachut/svelte-intellij) - Provides syntax highlighting of Svelte components in WebStorm and friends - [@testing-library/svelte](https://github.com/testing-library/svelte-testing-library) - Simple and complete DOM testing utilities that encourage good practices - [svelte-apollo](https://github.com/timhall/svelte-apollo) - Svelte integration for Apollo GraphQL - Search repos more [here](https://svelte-community.netlify.app/code/) - Explore some basic [code examples](https://svelte.dev/examples#hello-world) ### Developer Tools 🔧 As we said… not many field-tested developer tools available at the moment. However, this one is quite useful: Svelte DevTools browser extension for [Chrome](https://chrome.google.com/webstore/detail/svelte-devtools/ckolcbmkjpjmangdbmnkpjigpkddpogn) and [Firefox](https://addons.mozilla.org/en-US/firefox/addon/svelte-devtools/) ### Stay updated about Svelte news 🏄🏻 - [The official Svelte blog](https://svelte.dev/blog) - [Why Svelte](https://why-svelte-js.web.app/) - a news aggregator built especially for Svelte news - [daily.dev](https://daily.dev/blog) - Never miss an update about Svelte. Let daily.dev collect and rank the latest tech news for you every new tab - [Svelte newsletter](https://shershen08.github.io/sveltejsnews/) - get the latest Svelte news to your inbox bi-weekly ‍ ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/og-image.png?v=a830cdf1","width":1200,"height":630},"sameAs":["https://twitter.com/dailydotdev","https://www.linkedin.com/company/dailydotdev","https://github.com/dailydotdev","https://www.instagram.com/dailydotdev"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","description":"Free, personalized developer news aggregator. Stay on top of software development news, AI coding tools, and web dev - curated daily from trusted sources.","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}},{"@type":"WebPage","@id":"https://daily.dev/blog/building-with-svelte-all-you-need-to-know-before-you-start/","url":"https://daily.dev/blog/building-with-svelte-all-you-need-to-know-before-you-start/","name":"Svelte pros and cons, ecosystem overview and top resources | daily.dev","description":"Many devs are interested in learning about building with Svelte and we’d love to help you kick start! Explore practical developer news, tutorials, and tools read by millions of developers worldwide.","inLanguage":"en-US","isPartOf":{"@id":"https://daily.dev/#website"}},{"@type":"Article","@id":"https://daily.dev/blog/building-with-svelte-all-you-need-to-know-before-you-start/#article","headline":"Svelte pros and cons, ecosystem overview and top resources","url":"https://daily.dev/blog/building-with-svelte-all-you-need-to-know-before-you-start/","datePublished":"2020-08-10","dateModified":"2026-05-15T14:26:52.783Z","isPartOf":{"@id":"https://daily.dev/#website"},"publisher":{"@id":"https://daily.dev/#organization"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/blog/building-with-svelte-all-you-need-to-know-before-you-start/"},"description":"Many devs are interested in learning about building with Svelte and we’d love to help you kick start! Explore practical developer news, tutorials, and tools read by millions of developers worldwide.","image":{"@type":"ImageObject","url":"https://media.daily.dev/image/upload/s--y01io3IF--/f_auto,q_auto/v1/recruiter-landing/5f30ece8ddb423c686746906_49phd6knqcruuuotl46k_855deb74bc?_a=BAMAMiB80"},"author":{"@type":"Person","name":"Nimrod Kramer","url":"https://app.daily.dev/kramer"},"potentialAction":{"@type":"ReadAction","target":"https://daily.dev/blog/building-with-svelte-all-you-need-to-know-before-you-start/"}},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev/"},{"@type":"ListItem","position":2,"name":"Blog","item":"https://daily.dev/blog/"},{"@type":"ListItem","position":3,"name":"Svelte","item":"https://daily.dev/categories/svelte/"},{"@type":"ListItem","position":4,"name":"Svelte pros and cons, ecosystem overview and top resources","item":"https://daily.dev/blog/building-with-svelte-all-you-need-to-know-before-you-start/"}]}]} ```