Best of Svelte — 2024
- 1
- 2
Community Picks·2y
I Built a Study Timer to Improve My Focus
Tomatillo Timer is a free, ad-free Pomodoro app built to enhance study focus. It utilizes configurable Pomodoro sessions combined with other techniques to improve concentration. Developed using technologies like Svelte 5, Valibot, Pico CSS, and Tiptap, the app aims to help users stay on task despite distractions. The developer also introduces Flotes, a Markdown note-taking app, and plans to create a productivity-focused Discord channel.
- 3
DEV·1y
I love Rust/Tauri & Svelte
NeoHtop is a modern task manager for macOS combining terminal-based system monitors with a clean UI. Built with Rust and Tauri for the backend and Svelte for the frontend, its features include real-time process monitoring, CPU/memory tracking, and process management. Challenges included maintaining performance and navigating Apple's certification process. Future plans involve Linux support, additional process management features, and network usage monitoring.
- 4
- 5
- 6
- 7
Hacker News·2y
Building the Same App Using Various Web Frameworks
The author explores migrating from a current web app stack (FastAPI, HTML, CSS, and JavaScript) to modern web frameworks like FastHTML, Next.js, and Svelte by building the same web app using each one. The app allows users to upload a CSV file, view and update the table in the browser, and download the updated data. While the author found the FastAPI implementation straightforward, they learned various tricks and optimizations while building with FastHTML, Next.js, and Svelte. The experiment also highlighted how coding assistants might favor established frameworks over newer ones due to training data biases, impacting their effectiveness.
- 8
Syncfusion·1y
Svelte vs React: Which Framework to Choose?
In 2025, the choice between Svelte and React remains crucial for frontend developers focused on performance, user experience, and scalable app development. While React, a mature library with a vast ecosystem, is optimal for large-scale, complex applications, Svelte offers a lightweight and performance-optimized alternative suitable for small to medium-sized projects. This comparison highlights their key differences in performance, developer experience, and architecture to help developers choose the most appropriate framework based on project needs.
- 9
- 10
DEV·2y
Are Sync Engines The Future of Web Applications?
The post explores the concept of sync engines as a solution to common challenges in web application development, such as offline functionality, real-time collaboration, and handling multiple tabs or devices. It focuses on Replicache, a library that provides a client-side sync engine, highlighting its features, including handling mutations, optimizing performance, and providing real-time updates. The author shares insights from porting a TodoMVC demo app to SvelteKit, discussing the strengths and weaknesses of both Replicache and SvelteKit. Overall, the post emphasizes the potential of sync engines to improve developer experience and web app reliability.
- 11
Svelte Blog·2y
What's new in Svelte: September 2024
Svelte introduced several updates in September 2024, including enhancements to `svelte:options` and `:global`, as well as the deprecation of `<svelte:component>` in Svelte 5. Key highlights also feature community projects built using Svelte, educational resources, and new tools and libraries. Performance improvements in CSS and JavaScript compilation were also noted.
- 12
freeCodeCamp·2y
Learn SvelteKit in 2 hours
SvelteKit is a modern JavaScript framework for building highly efficient web applications. It compiles code to vanilla JavaScript at build time. TailwindCSS is a utility-first CSS framework that allows developers to style sites directly within HTML markup. The course on the freeCodeCamp.org YouTube channel teaches how to use SvelteKit and TailwindCSS to build a landing page from scratch, covering setup, design, features, and deployment. Watching the course provides a practical, project-based approach to learning SvelteKit and TailwindCSS.
- 13
Laravel News·2y
Maska is a Simple Zero-dependency Input Mask Library
Maska is a straightforward, zero-dependency input mask library compatible with JS, Vue, Svelte, and Alpine.js. It offers easy formatting for inputs like phone numbers with a small size of around 3 Kb gzipped. Maska supports custom tokens, number masks for easy money formatting, and can be integrated with various frameworks. Its source code is available on GitHub.
- 14
- 15
- 16
Community Picks·2y
10 game-changing tools that level up Svelte developers in 2025 💪
The post highlights ten game-changing tools for Svelte developers in 2025, each tailored to enhance productivity and maintain simplicity. From Warp's modern terminal to Skeleton's comprehensive design system, these tools are aligned with Svelte's core philosophy. Other notable mentions include Manifest for backend integration, Superforms for streamlined form management, and Svelte Headless UI for flexible, unstyled components. Tools like Layer Cake, Hoppscotch, Svelte Heros, Carta, and Elder.js also make the list, each contributing to a more efficient and streamlined development workflow.
- 17
Trendyol Tech·2y
From Monolith to Micro Frontends: The Power of Vite and Svelte
The post details the transition of Trendyol's Ad Management application from a monolithic to a micro frontend architecture using Svelte and Vite. It explains the reasons behind the change, the challenges faced, and how these were overcome. The team focused on improving scalability, velocity, flexibility, and CI/CD processes. They implemented Module Federation with Vite and ensured shared components were manageable through npm packages. The post also addresses caching issues and communication between microapps using Svelte stores.
- 18
Svelte Blog·2y
What's new in Svelte: August 2024
Significant updates are coming with Svelte 5, including improved performance with single-pass hydration, customizable warnings, and new APIs like `createRawSnippet`. Notable changes include updated helper names and improved DOM boundary handling. Updates in SvelteKit include better handling of HTML attributes and dependency-free `svelte-preprocess`. Community showcases feature exciting new Svelte-built apps and learning resources. Several Svelte libraries and tools also saw updates, like Storybook's prerelease support for Svelte v5.
- 19
Svelte Blog·2y
What's new in Svelte: October 2024
The latest updates in Svelte include significant improvements such as better SSR support for 'each' blocks, a callstack for debugging infinite loops, smaller bundle sizes for projects using '@sveltejs/enhanced-img', and new a11y warnings for certain elements. Additionally, Svelte 5 introduces the ability to manually instantiate legacy components asynchronously and deprecates the '<svelte:self>' in runes mode. SvelteKit also adds support for typed arrays in 'load' functions and improves intellisense through the 'Component' interface.
- 20
Storybook·1y
Storybook 8.4
Storybook 8.4 introduces significant improvements for developers working with UI components. Key features include one-click component testing in the browser through Vitest, a bundle size reduction of over 50%, and enhanced support for Svelte 5 and React Native. Additionally, the update includes a tagging and filtering mechanism for stories, numerous bug fixes, and other improvements.
- 21
- 22
Svelte Blog·2y
The Omnisite
The launch of Svelte 5 and the new sv CLI comes with a redesigned, unified website under the svelte.dev domain. This consolidation resolves issues such as inconsistent navigation, broken links, and isolated preferences across different sites. The updated site features a calm, cohesive layout, with a simplified color palette, improved button styles, and a new typographic approach using serif fonts to enhance readability and distinctiveness. The site is now open source, inviting community contributions.
- 23
- 24
Community Picks·1y
Web Software Development
The free online course covers the development and testing of web applications with a comprehensive introduction to both server-side and client-side technologies. Key technologies include Deno, Hono, Deno KV, PostgreSQL, Svelte, Playwright, TailwindCSS, HTML, CSS, and JavaScript. The course platform improves continuously using data gathered from user interactions for better learning experiences.
- 25
