StackShareStackShare
Follow on
StackShare

Discover and share technology stacks from companies around the world.

Product

  • Stacks
  • Tools
  • Companies
  • Feed

Company

  • About
  • Blog
  • Contact

Legal

  • Privacy Policy
  • Terms of Service

© 2025 StackShare. All rights reserved.

API StatusChangelog
  1. Stackups
  2. Stackups
  3. Preact vs Svelte

Preact vs Svelte

OverviewDecisionsComparisonAlternatives

Overview

Preact
Preact
Stacks444
Followers291
Votes28
Svelte
Svelte
Stacks1.7K
Followers1.6K
Votes502
GitHub Stars84.6K
Forks4.7K

Preact vs Svelte: What are the differences?

Introduction

This markdown code provides a comparison between Preact and Svelte, highlighting the key differences between the two JavaScript frameworks.

  1. Component Structure and Reactivity: Preact follows a virtual DOM approach, where components are built with a hierarchical structure, allowing for reusable and composable code. On the other hand, Svelte takes a compile-time approach, where components are compiled into highly efficient imperative code that runs directly in the browser. This results in faster rendering and reduced overhead compared to a virtual DOM.

  2. Bundle Size and Performance: Preact has a small footprint (3KB gzipped) and is designed to be lightweight, enabling faster initial load times and better performance on low-bandwidth networks. In contrast, Svelte generates highly optimized code during build time, resulting in even smaller bundle sizes and faster runtime performance compared to Preact.

  3. Reactivity and Reactive Statements: Preact relies on manual data binding through props and state management libraries like Redux or MobX for reactive behavior. On the other hand, Svelte includes built-in reactivity where variables can be directly assigned to DOM properties or used in reactive statements, reducing the need for additional state management libraries.

  4. Build and Compilation: Preact requires a build step with a bundler like Webpack or Rollup to compile the code and generate a production-ready bundle. Svelte, on the other hand, provides a compiler that directly compiles the Svelte files into optimized JavaScript, HTML, and CSS, which can then be served statically without the need for an additional build step.

  5. Learning Curve and Ecosystem: Preact has a very similar API to React, making it easier for experienced React developers to learn and use. It also has a well-established and mature ecosystem with a wide range of libraries and community support. Svelte, while having a simpler API, may have a steeper learning curve for developers new to the framework. It also has a smaller but growing ecosystem with a more limited number of libraries and resources compared to Preact.

  6. Tooling and IDE Support: Preact has good tooling support with IDE plugins available for popular editors like Visual Studio Code, Sublime Text, and Atom. It also has good integration with development tools like Redux DevTools for state management. Svelte, although growing in popularity, may have more limited support in terms of IDE plugins and tooling compared to Preact.

In Summary, Preact and Svelte offer different approaches to building JavaScript-based web applications. Preact focuses on a lightweight virtual DOM with a familiar React-like API, while Svelte takes a compile-time approach with highly optimized output and built-in reactivity. Ultimately, the choice between the two would depend on the specific requirements and preferences of the project.

Advice on Preact, Svelte

Máté
Máté

Senior developer at Self-employed

May 28, 2020

Decided

Svelte is everything a developer could ever want for flexible, scalable frontend development. I feel like React has reached a maturity level where there needs to be new syntactic sugar added (I'm looking at you, hooks!). I love how Svelte sets out to rebuild a new language to write interfaces in from the ground up.

311k views311k
Comments
David
David

VP Product at loveholidays

Oct 10, 2020

Review

Generally I would advise you pick Node.js for your backend if you want to run a GraphQL service. The main reason for this is the tooling and support you get from the language around GraphQL and the native feel due to the spec being initially written in JavaScrip for JavaScript. However that isn't to say that you couldn't use Go for a service underneath your GrahpQL layer - but I would say that's probably complicating it too much to begin with.

Node.js has great support for reading from databases and using a server such as Koa will give you great performance (we operate several Node.js services in Koa with over 1000req/s). Additionally it keeps your initial simple stack in the same language so it will be easier for you to jump backwards and forwards.

If you were not to use GraphQL then I'd say it's really up to you whether you want Go in your ecosystem or not. It's a fantastic language and super performant, along with being more memory efficient than Node (if you are worried about costs at large scale).

If you're at infancy stages and haven't picked certain parts - and this is a customer facing application - then I would recommend you look at Preact instead of React and URQL (instead of Apollo Client). Both are great libraries that are very performant and don't need much advanced learning. Additional swap out MySQL for PostgresSQL (they are interop primarily, but offers you more features as you grow) for its ACID compliance, better performance at scale and support for NoSQL if you were to go that way.

3.55k views3.55k
Comments
Raj
Raj

Oct 10, 2020

Review

It purely depends on your app needs. Does it need to be scalable, do you have lots of features, OR it is a simple project with very simple needs - many of those parameters clarify which technologies will fit.

If you are looking for a quick solution, that reduces lot of development time, take a look at postgraphile (https://www.graphile.org/postgraphile/). You have to just define the schema and you get the entire graph-ql apis built for you and you can just focus on your frontend.

On frontend, React is good, but also need to remember that it is popular because it introduced one way data writes and in-built virtual dom + diffing to determine which dom to modify. Though personally I liked it, am recently more inclined to Svelte because its lightweightedness and absence of virtual dom and its simplicity compared to the huge ecosystem that React has surrounded itself with.

In all situations, frameworks keep changing over time. What is best today is not considered even good few years from now. What is important is to have the logic in a separate, clean manner void of too many framework related dependencies - that way you can switch one framework with another very easily.

3.75k views3.75k
Comments

Detailed Comparison

Preact
Preact
Svelte
Svelte

Preact is an attempt to recreate the core value proposition of React (or similar libraries like Mithril) using as little code as possible, with first-class support for ES2015. Currently the library is around 3kb (minified & gzipped).

If you've ever built a JavaScript application, the chances are you've encountered – or at least heard of – frameworks like React, Angular, Vue and Ractive. Like Svelte, these tools all share a goal of making it easy to build slick interactive user interfaces. Rather than interpreting your application code at run time, your app is converted into ideal JavaScript at build time. That means you don't pay the performance cost of the framework's abstractions, or incur a penalty when your app first loads.

-
Write less code; No virtual DOM; Truly reactive
Statistics
GitHub Stars
-
GitHub Stars
84.6K
GitHub Forks
-
GitHub Forks
4.7K
Stacks
444
Stacks
1.7K
Followers
291
Followers
1.6K
Votes
28
Votes
502
Pros & Cons
Pros
  • 15
    Lightweight
  • 5
    Drop-in replacement for React
  • 4
    Performance
  • 3
    Props/state passed to render
  • 1
    ES6 class components
Pros
  • 59
    Performance
  • 41
    Reactivity
  • 36
    Components
  • 35
    Simplicity
  • 34
    Javascript compiler (do that browsers don't have to)
Cons
  • 3
    Event Listener Overload
  • 2
    Hard to learn
  • 2
    Learning Curve
  • 2
    Complex
  • 2
    Little to no libraries
Integrations
React
React
No integrations available

What are some alternatives to Preact, Svelte?

jQuery

jQuery

jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML.

AngularJS

AngularJS

AngularJS lets you write client-side web applications as if you had a smarter browser. It lets you use good old HTML (or HAML, Jade and friends!) as your template language and lets you extend HTML’s syntax to express your application’s components clearly and succinctly. It automatically synchronizes data from your UI (view) with your JavaScript objects (model) through 2-way data binding.

React

React

Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project.

Vue.js

Vue.js

It is a library for building interactive web interfaces. It provides data-reactive components with a simple and flexible API.

jQuery UI

jQuery UI

Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice.

Flux

Flux

Flux is the application architecture that Facebook uses for building client-side web applications. It complements React's composable view components by utilizing a unidirectional data flow. It's more of a pattern rather than a formal framework, and you can start using Flux immediately without a lot of new code.

Famo.us

Famo.us

Famo.us is a free and open source JavaScript platform for building mobile apps and desktop experiences. What makes Famo.us unique is its JavaScript rendering engine and 3D physics engine that gives developers the power and tools to build native quality apps and animations using pure JavaScript.

Riot

Riot

Riot brings custom tags to all browsers. Think React + Polymer but with enjoyable syntax and a small learning curve.

Marko

Marko

Marko is a really fast and lightweight HTML-based templating engine that compiles templates to readable Node.js-compatible JavaScript modules, and it works on the server and in the browser. It supports streaming, async rendering and custom tags.

Kendo UI

Kendo UI

Fast, light, complete: 70+ jQuery-based UI widgets in one powerful toolset. AngularJS integration, Bootstrap support, mobile controls, offline data solution.

Related Comparisons

Bootstrap
Materialize

Bootstrap vs Materialize

Laravel
Django

Django vs Laravel vs Node.js

Bootstrap
Foundation

Bootstrap vs Foundation vs Material UI

Node.js
Spring Boot

Node.js vs Spring-Boot

Liquibase
Flyway

Flyway vs Liquibase