my first post | tauri + svelte todo app

tauri heart svelte logo

hi guys welcome to my first post in my first blog i focus on writing about what i build or about tech and in this post i will write about the todo desktop app that i build with tauri and svelte. first this is not a guide or a tutorial it my experience and thought with tauri and svelte

1. what is tauri

Tauri is a framework for building tiny, fast binaries for all major desktop and mobile platforms. Developers can integrate any frontend framework that compiles to HTML, JavaScript, and CSS for building their user experience while leveraging languages such as Rust, Swift, and Kotlin for backend logic when needed.

docs


why i use tauri ? because i want a lighter cross-platform solution than electron for desktop app. beside it use rust under the hood so it fun, fast fun light so why not ?

2. what is svelte

Svelte is a UI framework that uses a compiler to let you write breathtakingly concise components that do minimal work in the browser, using languages you already know — HTML, CSS and JavaScript. It’s a love letter to web development

docs


why i use svelte ? light, no runtime needed and something new to learn

3. let start

  1. let’s start with creating a project
  • i follow the doc install tauri cli
  • then i run this pnpm create tauri-app@latest todoapp -- --template svelte and then now i have a project setup with svelte and tauri
  1. let add style now that i have the project setup and run i start with design the ui. wanted to use tailwind to style my ui. learned that folder src is the home of ui code and the template setup with svelte kit another new things i learned how to add tailwind to svelte kit it cost sometime with both tailwind and svelte kit doc but it worked and i learn something new. Now start designing this is the hard part. added daisyui to reuse their componentfor good look another new stuff
  2. next the backend using ai like deepseek or grok to fidgure out how to store and get data from sqlite in rust. and with it help the work is a brezze
  3. animation after the backend done i focus on the ui and now is adding animation for good looking . first trying gsap but it did’nt compartible with svelte transistion. then back to use pure css. from this i learned about svelte actions and svelte transistion it was fun to code with svelte it powerful.

    4. conclusion

    • working with svelte is fun and tauri can build good desktop app a great alternative to electron
    • tauri also can build mobile app tried it it still buggy so skip it for now.
    • working with ai is also fun ask the right question and get the answer i need . great at speedup learning new thing in my humble opinion it a boon for developer if one use it right not just for copy code but also for learning and validate new idea
  • full source code is here.
  • with this done let move the next idea to build i will create a post when i’m done, thank you for reading.