Best of Svelte — 2024

  1. 1
    Article
    Avatar of communityCommunity Picks·1y

    Melt UI

    Melt UI is an open-source Svelte library designed for creating high-quality, accessible design systems and web applications. It provides various functionalities to streamline the process of managing account changes, including updating passwords and settings.

  2. 2
    Article
    Avatar of communityCommunity 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. 3
    Article
    Avatar of devtoDEV·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. 4
    Article
    Avatar of communityCommunity Picks·2y

    wandb/openui: OpenUI let's you describe UI using your imagination, then see it rendered live.

    OpenUI allows users to describe UI using their imagination and see it rendered live. It can convert HTML to various languages like React, Svelte, and Web Components.

  5. 5
    Article
    Avatar of svelte_developersSvelte Developers·2y

    Svelte 🫡

  6. 6
    Article
    Avatar of communityCommunity Picks·2y

    Write components once, run everywhere.

    Code examples demonstrate how to write components that can run natively in multiple frameworks.

  7. 7
    Article
    Avatar of hnHacker 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. 8
    Article
    Avatar of syncfusionSyncfusion·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. 9
    Article
    Avatar of phProduct Hunt·2y

    GitButler - Next generation Git client, written in Rust/Svelte

    Simpler and more powerful Git client for modern workflows

  10. 10
    Article
    Avatar of devtoDEV·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. 11
    Article
    Avatar of svelteSvelte 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. 12
    Article
    Avatar of freecodecampfreeCodeCamp·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. 13
    Article
    Avatar of lnLaravel 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. 14
    Article
    Avatar of allshadcnAll ShadCN·1y

    Create your own shadcn-style library with jsrepo

    jsrepo is a versatile tool designed to help you build libraries in frameworks like React, Svelte, Vue, and TypeScript. It simplifies the process by resolving both local and remote dependencies, making code reuse easier.

  15. 15
    Article
    Avatar of svelteSvelte Blog·2y

    What's new in Svelte: June 2024

    Svelte 5 has new features like improved 'bind' functionality, a migration tool, MathML support, the Svelte Inspector, and the '$state.is' rune. The community showcase includes apps, learning resources, and libraries/tools/components built with Svelte.

  16. 16
    Article
    Avatar of communityCommunity 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. 17
    Article
    Avatar of trendyoltechTrendyol 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. 18
    Article
    Avatar of svelteSvelte 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. 19
    Article
    Avatar of svelteSvelte 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. 20
    Article
    Avatar of storybookStorybook·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. 21
    Article
    Avatar of hnHacker News·2y

    Data Visualization Framework

    Flitter is a high-performance data visualization framework for JavaScript that seamlessly integrates with React, Svelte, and more. It offers an elegant and efficient API inspired by Flutter, with 50+ widgets available for creating charts effortlessly.

  22. 22
    Article
    Avatar of svelteSvelte 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. 23
    Video
    Avatar of awesome-codingAwesome·2y

    Svelte 5 Crash Course

    Svelte is a framework that offers simplicity and feels like building apps in plain HTML and JavaScript. It uses components to track state and update the DOM. Reactive state can be declared using runes. Svelte offers native TypeScript support.

  24. 24
    Article
    Avatar of communityCommunity 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. 25
    Article
    Avatar of collectionsCollections·2y

    Svelte 5: New Features, Release Candidate Phase, and Community Showcase

    Svelte 5, the release candidate for the reactive UI framework, brings reactivity improvements, enhanced event handling, easier component composition, and native TypeScript support.