Svelte Forms: The Missing Manual
Become a Svelte and forms expert in one weekend
Svelte is a simple framework compared to React, Vue or Angular, but its simplicity can be deceiving. There are a lot of nuances and quirks you need to know about and learn how to navigate around. Features that are not documented. Concepts that you learn the hard way after hours of googling.
This is what the current situation looks like because Svelte is a young framework. There is not a lot of information available yet. It becomes especially evident when there are forms involved.
The forms examples in Svelte's official documentation are trivial, but I bet your needs are much more complex. Mine sure were.
When I first discovered Svelte I became an instant fan. Svelte was like a breath of fresh crisp air compared to all the complexity and ceremony of React. It made me enjoy writing JavaScript again.
I was hooked and started using Svelte for both professional and hobby projects. This was two years ago and documentation back then was scarce.
My learning journey was fun but rough. I often had to learn things the hard way and on my own. By experiments and by looking at compiler generated code to understand how everything hangs together.
I fact, the path was so rough that I was an inch from throwing in the towel because of my frustration. I am glad I never did.
After a handful of successful Svelte-based and form-heavy projects under my belt I can title myself as a Svelte forms expert.
But words mean nothing. To prove my worth, but most of all to help others avoid my mistakes, I wrote a book on the subject. A book in which I collected and distilled all my learnings and knowledge into one massive package.
Want to learn everything about Svelte forms?
Actually it’s not only a book, but a reference, a missing manual. I still refer to it myself daily on how to do things the best way. This book has become my trusted guide and I am sure it will become yours too, saving you many hours of frustration.
The book contains many clear and simple educational and practical explanations. Every code example stands on its own but all the concepts build upon each other.
In fact, it’s structured in a way that lets you jump straight to the specific forms use case, copy and paste the code and quickly adjust it to your own needs.
Want to learn how to think in Svelte?
The book is also a great teaching companion. Although its primary focus is on forms you will learn so much more. Maybe a good way to explain is that it’s a book that teaches you Svelte using forms.
You will have solid knowledge of how Svelte works internally. That includes Svelte's stores, context, components and actions.
Want to understand how every Svelte form library works?
It doesn’t matter if you are a Svelte newbie or a seasoned front-end veteran. The book starts with very basic examples and gradually builds upon the earlier concepts. It ends with creating a complete forms library in just 100 lines of code.
Want to know how to create simple abstractions in Svelte that are easy to understand and maintain?
Svelte is a simple framework and works well with other JS libraries. In fact, I tend not to use any external Svelte forms libraries in my projects. Instead, I create smart abstractions. Why? It’s all about trust and maintenance. I want to reduce my dependence on third party code. Especially when it’s so easy to create your own abstractions if you know how! It’s easy to craft smart abstractions to exactly fit your needs. No more, no less.
Want to learn why there is no need to use external libraries and why it can be dangerous?
You will learn how to validate your forms using the popular Vest or Yup validation libraries. You will learn how to mask your inputs using nothing by plain JavaScript. You will learn to write code that you understand, even after a year.
Learn the core concepts and go beyond basics
Forms are complex and it’s impossible to cover every use case. However, I am confident that I managed to cover 99% of the common cases.
For the cases I missed, you will have the knowledge to solve them yourself in record time! Because you have learned and understand the underlying concepts and principles.
Learn the difference between Svelte forms and SvelteKit forms
It doesn’t matter if you use Svelte or SvelteKit, the principles and code are the same. The core concepts covered in the book are timeless (unless Svelte decides to change its whole architecture and API in the next major version).
SSR requires a little more from you and your code. There is a dedicated chapter on SSR forms in the book if you need it!
Become an expert
After spending a couple of days with the book you will start connecting the dots and develop new thinking patterns.
People will start seeing you as an expert, because you will be able to show how to tackle specific challenges, how to structure the code, and how to create abstractions at the right level. You will be able to explain the how and the why. All this with your newly won confidence!
Invest in yourself
170 pages, 11 chapters and 55 examples + 5 bonus examples. All this for incredibly low $29 (or less than a price of an hour of your work).
If your hourly rate is lower that that then buy this book, learn the concepts and increase your hourly rate!
How you now choose to view it you can’t go wrong. At this price, it’s a steal, packed with massive value!
Money back, no questions asked
If this book doesn’t save you at least 4 hours of frustration when working with Svelte and forms, or if you feel that you got zero value from it, I will give you your money back. No questions asked. I am here to help you, not to scam you.
Book Sections
Working with Forms in Svelte
Learn the basics of HTML forms, HTML5 validation, form extraction and the different ways to submit a form.
Form Bindings
Learn how to bind to variables and objects and why you might not need stores. Discover the magic of unidirectional (one-way) bindings made popular by React.
Form Components
Learn how to work with different input types, how to upload and preview files and why Svelte component bindings are not only about strings and numbers.
Intermediate Forms
Learn how to create dynamic forms, how to create a loading indicator, how to work with interdependent form fields, how to paste images into a textarea, how to do input formatting (masking), how to correctly work with parent-child selects, how to create a Select All checkbox with Svelte actions and Svelte components, how to integrate external libraries (Editor.js) into your forms using actions or custom components.
Advanced Form Validation
Learn how to validate your forms using Yup and Vest validation libraries. We go through basic, advanced, instant and async validation scenarios. You learn how to validate forms by calling an API to check username availability and if the chosen password has been compromised. You will learn the difference between Yup and Vest and their trade-offs.
Build Your Own Forms Library
Learn how to build a complete forms library in 100 LOC using nothing, but Svelte. The forms library is validation library agnostic, supports calculator fields, has initial (optional) form validation, processing indicator, and comes with a custom set of form components that will help you reduce the boilerplate code.
You will learn how Svelte's context, stores and slots work, how to create smart abstractions and also why using a forms library might not solve all your problems.
SSR forms
SvelteKit is the new kid on the block of SSR web frameworks, but SSR comes with a price and imposes its own set of constraints. Learn how to make your forms work in SvelteKit even when JavaScript is disabled or broken on the page.
Bonus Examples
Blog Post Editor
Example of a full-blown blog post editor using Editor.js
Registration Form
Example of an advanced registration form with validation errors and warnings
Table Edit
Example of how to edit a table
Wizard Form
Example of a multi-step form using Robot FSM library and nested objects
Auto-Populate a Form
Example of form population based on a form field value
Sample Chapter
Take a look at the sample chapter and TOC if you are still unsure this book is for you.
Questions
Q: Do examples work in SvelteKit?
Yes. Examples are targeting the Svelte compiler and don't use any framework dependent code or libraries, or have code that use browser specific globals such as the window object.
Q: Will you keep the book and examples up to date with new Svelte releases?
Yes. I work daily with Svelte and keep track of new updates and changes. If and when a new major version of Svelte comes out that is not backward compatible, I will update both the book and the examples.
What People Are Saying
Forms have always been a difficult issue to deal with on the web. But with wit and charm Ilia takes you through the ideas of building forms from a very simple level to more advanced ideas. Reading this book, I learned a lot about forms, and especially about forms in Svelte, and I believe any developer at any level would too!
- Conner Aldrich, Creator of JungleJS
If you have ever looked for a book to understand Svelte with a real-life examples, this is the one. Thanks to a friendly tone, a book like this one is the best form of learning. Pun intended.
- Paweł Słomka, Full-Stack Developer and Svelte Convert
Form validation in JavaScript is tricky to get right. I loved how Ilia approaches validations balancing flexibility and ease of use. The book has ample amount of reference points for almost any scenario you would face working with forms, some apply even outside the world of Svelte.
- Evyatar Alush, Creator of Vest validation library
So happy you created this Ilia, page 51 loving it!
- Donovan, A Happy Customer
Very intuitive, clear and gives you an idea on how to include all possible types of input-controls, from simple input to editors, even for beginners like me.
- @taffit
As a backend Typescript developer learning frontend Svelte forms, I could not stress how comprehensive and useful Ilia's Svelte Forms book was - one can easily get stuck in an endless sea of tutorial hell or Github spelunking. Ilia's blog is impossible to miss when setting up a sane project environment for Svelte, so it's no surprise that his Forms book does the same with succinct prose and clear examples.