Learn Svelte - Web Developer
Learn Svelte - Web Developer — Learn Svelte and SvelteKit with a live editor and the compiled output beside it
Learn Svelte - Web Developer is a free iOS and Android app to learn Svelte and SvelteKit on your phone. Write components in a live editor with a preview, see the JavaScript the compiler turns them into, and work through 41 courses from your first reactive value to a deployed full-stack app, with an AI Mentor beside you.
- Price
- Free, Pro upgrade
- Platforms
- iOS and Android
- Languages
- 22
- Age rating
- 4+
- Requires
- iOS 15.1 or later
Nothing on that screen is running Svelte. It is running what Svelte wrote.
The app's first lesson shows a nine-line component next to the JavaScript the compiler generated for it. Tap +1 and the lines that fire light up: one invalidation, one recomputed value, two text nodes changed, nothing else touched. That is the idea behind the framework, shown before it is explained.
What it is
Learn Svelte - Web Developer is a free iOS and Android app that teaches Svelte and SvelteKit through 41 courses and 163 lessons, graded from beginner to advanced. It opens with a demo that shows a component beside its compiled JavaScript, then covers reactivity, props, stores, transitions, Svelte 5 runes and SvelteKit routing, data loading, form actions and deployment. A live editor with a preview and an AI Mentor are built in.
Inside the app
What it looks like
The course
What the Svelte course covers
41 courses and 163 lessons from the app's own course list, graded A1 to C1 and ending with a full-stack SvelteKit project.
First Components
What Svelte is and why it takes a different approach, setting up a project, and writing your first component with reactive variables.
Props, Templates, Events and Binding
Passing props, conditionals and each loops in markup, DOM events and custom events, and two-way binding with bind: directives.
Lifecycle, Stores and Context
onMount and onDestroy, writable, readable, derived and custom stores, slots and composition, and the Context API.
Transitions, Animations and Actions
Transition directives, the animate directive, actions for reusable DOM behaviour, custom transitions, and the spring and tweened motion stores.
SvelteKit Foundations
File-based routing and pages, load functions, advanced layouts, form actions, API routes, server hooks and error pages.
Svelte 5 Runes
An introduction to runes, props and snippets, advanced runes, and a deeper look at how Svelte's reactivity works.
SvelteKit in Production
SSR and prerendering, streaming, performance, SEO and meta tags, security, auth patterns, adapters and deployment.
Testing and Full-Stack
Unit tests with Vitest, end-to-end tests with Playwright, third-party libraries, state management at scale and a full-stack SvelteKit app.
How it works
How a session works
The app is organised around a path from one reactive value to a deployable app, and each stop mixes reading with something to run.
See the compiler's output first
The opening demo puts a small component next to the JavaScript it compiles to. The compiled half was generated ahead of time and ships inside the app, so the demo runs without a connection.
Edit a component and preview it
Lessons open an editor with HTML, CSS and JavaScript tabs and a run button that renders the component in a preview. The preview loads the Svelte compiler over the network, so it needs a connection.
Check it stuck
A quiz and coding challenges follow each topic, and the AI Mentor can explain a concept, suggest a roadmap or quiz you on a course. The Weekly Code Challenge adds a competitive round.
What's inside
What comes with the app
41
Courses, A1 to C1
163 lessons across 41 courses, from Svelte setup and your first component through stores, transitions, SvelteKit routing and hooks, Svelte 5 runes, testing and a full-stack capstone.
Compiled
Component beside its compiled code
The first-run demo shows the source and the generated JavaScript together and counts text nodes updated against elements re-created, so the cost of an update is something you read off the screen.
Preview
Live editor with a preview
Write markup, styles and script in separate tabs and render the component on the phone. The preview uses the Svelte 4.2.19 compiler, so code written with Svelte 5 runes may not preview and is better read and followed along.
AI
AI Mentor
Ask for the key concepts of a course, tips to learn faster, a quiz or a personal roadmap from the chat tab, or ask about an error you cannot read.
Weekly
Weekly Code Challenge
A regular challenge round to compete in alongside the lessons, with streaks, progress tracking and reminders to keep a routine going.
Exam
Certificate of completion
Pass the final exam and the certificate carries your name, which is evidence of the work rather than an accredited qualification.
Background
What is Svelte, and how is it different from other ways of building a web interface?
Svelte is a framework for building user interfaces in which components are compiled ahead of time into plain JavaScript that updates the page directly, instead of shipping a large runtime that works out the changes in the browser. A component is a single file with markup, styles and script, and an assignment such as count += 1 is enough to update the screen. SvelteKit is the application framework built on top of it, adding file-based routing, server-side data loading, form handling and adapters for deployment. The practical effect for a learner is less boilerplate and a smaller distance between the code and what appears on the page.
Compile-time reactivityan assignment is the state
In Svelte the compiler rewrites an ordinary assignment into the code that updates the affected parts of the page. A labelled statement starting with $: recomputes a value whenever the values it reads change, so derived data needs no helper functions.
Storesshared state across components
A writable store holds a value that many components can subscribe to, and prefixing its name with $ gives automatic subscription. Derived and custom stores build on that when state needs to be computed or wrapped.
Runesthe Svelte 5 syntax
Svelte 5 replaces much of the earlier compiler magic with explicit functions such as $state, $derived and $props, along with snippets for reusable markup. Both styles are in use in real projects, which is why the app teaches the original model and the runes model as separate courses.
SvelteKitrouting, data and deployment
A file such as +page.svelte becomes a route, a load function fetches data before the page renders, form actions handle submissions on the server, and an adapter packages the result for a static host, a Node server or a serverless platform.
Fit
Who it's for — and who it isn't
A good fit if you
- Want to learn Svelte or SvelteKit in short sessions instead of long video courses
- Know some HTML and JavaScript and want to see what a compiler-first framework changes
- Are curious how reactive updates work and prefer to read the generated code than take it on trust
- Want a path that reaches routing, data loading, auth and deployment, not only components
- Like to ask an AI Mentor why a piece of code behaves the way it does
Not the right tool if you
- Want to run Svelte 5 runes code in the preview, which uses the Svelte 4.2.19 compiler
- Need to build and deploy a whole SvelteKit project from the phone, which still takes a laptop
- Expect everything free: the first course is free and Pro unlocks the rest
- Have never seen HTML or JavaScript and want a general programming course before a framework
Questions
Frequently asked questions
How can I learn Svelte on a phone?
Pick a path that mixes reading with running code, because Svelte is easiest to understand when you change a value and watch the page respond. Learn Svelte - Web Developer opens with a compiled-output demo, then gives you lessons with an HTML, CSS and JavaScript editor, a preview and an AI Mentor. It is free to start on iOS and Android.
Is Svelte hard to learn for a beginner?
Svelte is often considered approachable because components look like ordinary HTML, CSS and JavaScript and an assignment updates the screen. The hard parts come later, with stores, lifecycle, SvelteKit's server and client split, and the move to Svelte 5 runes. Learn Svelte - Web Developer grades its 41 courses from A1 to C1 so those topics arrive in order.
What is SvelteKit and does the app teach it?
SvelteKit is the application framework for Svelte, adding file-based routing, data loading on the server, form actions, hooks and deployment adapters. Learn Svelte - Web Developer has dedicated courses for SvelteKit routing and pages, data loading, form actions, API routes, hooks, error handling, SSR and prerendering, streaming, security and adapters.
Does the app cover Svelte 5 runes?
Yes. Learn Svelte - Web Developer includes courses on an introduction to runes, props and snippets, and advanced runes. The editor's preview currently compiles with Svelte 4.2.19, so runes code may not preview and is best followed in the lesson text.
Can I run Svelte code on my phone?
You can write a component in the editor and render it in a preview. Learn Svelte - Web Developer's preview loads the Svelte compiler to build the component, so it needs a connection. The opening compiled-output demo is different: its compiled code ships inside the app and runs without a network.
Is Learn Svelte - Web Developer free?
The app is free to download. The first course is free, with a daily AI Mentor allowance, and Pro unlocks every course, removes ads and gives unlimited AI Mentor. You can work through real lessons before deciding whether to upgrade.
Do I need to know JavaScript first?
Some HTML and JavaScript will make the early courses easier, because a Svelte component is just those languages in one file. Learn Svelte - Web Developer starts with what Svelte is and how to set it up, and explains each concept in plain language, but it is a framework course rather than a first programming course.
Which platforms and languages does it support?
Learn Svelte - Web Developer runs on iOS through the App Store and on Android through Google Play, and the interface is available in 22 languages. It is rated 4+, so nothing in the material is age-restricted.
Get started
Compile your first component today
Free to start on iOS and Android, in 22 languages.
More from CoddyKit
Available on iOS and Android.