{"id":92236,"date":"2026-04-23T09:50:57","date_gmt":"2026-04-23T14:50:57","guid":{"rendered":"https:\/\/www.bricktowntom.com\/blog\/?p=92236"},"modified":"2026-04-23T09:50:57","modified_gmt":"2026-04-23T14:50:57","slug":"build-a-reading-list-with-svelte","status":"publish","type":"post","link":"https:\/\/www.bricktowntom.com\/blog\/04\/build-a-reading-list-with-svelte.html","title":{"rendered":"Build a reading list with Svelte"},"content":{"rendered":"


\n \"Getting
\n <\/a><\/p>\n

Svelte is a relatively new JavaScript frontend framework for developing websites and web apps.<\/strong> <\/p>\n

The praise that Svelte has received over the last two years is testament to it not being \u201cjust another frontend framework\u201d. It won \u201cbreakthrough of the year\u201d on the State of JS survey 2019, followed by topping the satisfaction rating in 2020. It was also voted the most loved web framework in the Stack Overflow 2021 survey. <\/p>\n

Svelte appeals to developers with its combination of a small bundle size, very good performance, and ease of use. At the same time, it comes packed with a lot of goodies. A simple state management solution to build upon is already provided, as well as ready-to-use transitions and animations. This introductory tutorial will shed light on how does Svelte achieves this. The following tutorials in the series will go into more detail on how to implement applications with Svelte using the various possibilities Svelte provides.<\/p>\n

The Svelte Backstory<\/h2>\n

But first, a little back story on Svelte. Though it only entered the mainstream in the early 2020s, Svelte has been around for much longer. <\/p>\n

The first commit to GitHub was in late 2016. Its creator is Rich Harris, an open-source wizard whose most prominent other invention is Rollup, a modern bundler. Rich Harris worked at the news magazine The Guardian<\/em> as a graphics editor at the time. His daily routine was to create interactive visualizations for the website, and he wanted to have a tool that easily let him write these without compromising on bundle size or speed. At the same time, he wanted something approachable so other less tech-savvy colleagues would be able to create visualizations fast. <\/p>\n

Out of these needs, Svelte was born. Starting from the news room, Svelte quickly gathered a small following in the open-source community. But it wasn\u2019t until April 2019 where Svelte really got known to the world. This date marked the release of version 3, which was a complete rewrite with a focus on developer experience and approachability. Since then, Svelte\u2019s popularity has risen a lot, more maintainers have joined the team, and Rich Harris has even joined Vercel to work on Svelte full-time.<\/p>\n

Building a Simple Book List<\/h2>\n

Let\u2019s dive into Svelte! We\u2019ll build a small book list that allows us to add and remove books from our reading list. The final result will look something like the image below.<\/p>\n

\"Final<\/p>\n

We\u2019ll start by scaffolding our project from a project template. We\u2019ll use the official Svelte template<\/a>. Alternatives would be to use a Vite-powered template<\/a> or to use SvelteKit<\/a>, a framework on top of Svelte for building full-fledged apps with built-in routing\u2014but we\u2019ll keep it as barebones as possible for this tutorial. <\/p>\n

After downloading the template, switch to its folder and run npm install<\/code>, which downloads all packages we need to get going. Then we\u2019ll switch to App.svelte<\/code>, where we\u2019ll replace the contents with an HTML-only version to lay out the visuals we want:<\/p>\n

<h4>Add Book<\/h4>\r\n<input type=\"text\" \/>\r\n<h4>My Books<\/h4>\r\n<ul>\r\n  <li>A book<\/li>\r\n<\/ul>\r\n<\/code><\/pre>\n
We can write the above code directly at the top level of the Svelte file; we don\u2019t need to add any wrapper elements. Svelte\u2019s syntax is a superset of HTML, so anything that is valid inside an HTML file is valid inside a Svelte file. <\/p>\n
The question now is how to get the dynamic parts in there. We\u2019ll start by adding a static list to the script and render that through a loop:<\/p>\n
<script>\r\n  let books = ['Learning Svelte', 'The Zen of Cooking Tea'];\r\n<\/script>\r\n\r\n<label>\r\n  <h4>Add Book<\/h4>\r\n  <input type=\"text\" \/>\r\n<\/label>\r\n<h4>My Books<\/h4>\r\n<ul>\r\n  {#each books as book}\r\n    <li>{book}<\/li>\r\n  {\/each}\r\n<\/ul>\r\n<\/code><\/pre>\n
We added a script<\/code> tag in which we put our JavaScript logic related to the component. That logic is executed each time the component mounts. We also enhance the HTML with special Svelte syntax to create a loop and print the title of each book. As you can see, Svelte has distinct syntax for control flow blocks, unlike Vue or Angular, which add such functionality in the form of special attributes. This makes the code more readable, as you can more easily spot it. It also makes it unnecessary to create wrapper elements if you want to contain more than one top-level item within the control flow block. <\/p>\n
The title of a book is outputted by surrounding the variable with curly braces. In general, whenever you encounter a curly brace within the template, you know you are entering something Svelte-related. We\u2019ll look into the template syntax in more detail in Part 2 of this tutorial series.<\/p>\n
\n              Continue reading
\n              Build a reading list with Svelte<\/a>
\n              on SitePoint<\/a>.\n            <\/p>\n
Source: Site Point<\/p>\n
Republished by  Blog Post Promoter<\/a><\/small><\/p>","protected":false},"excerpt":{"rendered":"
Svelte is a relatively new JavaScript frontend framework for developing websites and web apps. The praise that Svelte has received over the last …<\/p>\n","protected":false},"author":1,"featured_media":92237,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[52],"tags":[128],"class_list":["post-92236","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-a-head-start","tag-advantage"],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.bricktowntom.com\/blog\/wp-content\/uploads\/2022\/02\/1643934928svelte-introduction.jpg?fit=1200%2C680&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/p3k0YU-nZG","jetpack-related-posts":[{"id":92080,"url":"https:\/\/www.bricktowntom.com\/blog\/04\/5-pitfalls-of-using-micro-frontends-and-how-to-avoid-them.html","url_meta":{"origin":92236,"position":0},"title":"5 Pitfalls of Using Micro Frontends and How to Avoid Them","author":"admin","date":"April 7, 2026","format":false,"excerpt":"I recently wrote about five reasons why it\u2019s worth adopting a micro frontend Architecture. Of course, there are pros and cons to everything. Micro frontends are a fresh architectural approach, and are likely to represent the future of web development. At the same time, they come with a few pitfalls,\u2026","rel":"","context":"In "E-business & E-marketing"","block_context":{"text":"E-business & E-marketing","link":"https:\/\/www.bricktowntom.com\/blog\/category\/ebusiness-emarketing"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.bricktowntom.com\/blog\/wp-content\/uploads\/2022\/01\/1643674637micro-frontend-pitfalls.jpg?fit=1200%2C680&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.bricktowntom.com\/blog\/wp-content\/uploads\/2022\/01\/1643674637micro-frontend-pitfalls.jpg?fit=1200%2C680&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.bricktowntom.com\/blog\/wp-content\/uploads\/2022\/01\/1643674637micro-frontend-pitfalls.jpg?fit=1200%2C680&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.bricktowntom.com\/blog\/wp-content\/uploads\/2022\/01\/1643674637micro-frontend-pitfalls.jpg?fit=1200%2C680&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.bricktowntom.com\/blog\/wp-content\/uploads\/2022\/01\/1643674637micro-frontend-pitfalls.jpg?fit=1200%2C680&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":92945,"url":"https:\/\/www.bricktowntom.com\/blog\/04\/weekly-news-for-designers-%e2%84%96-644.html","url_meta":{"origin":92236,"position":1},"title":"Weekly News for Designers \u2116 644","author":"admin","date":"April 25, 2026","format":false,"excerpt":"Optimize Images App \u2013 This online app features 9 image optimization tools, along with both free and premium options. Variable Fonts Support in Figma \u2013 Get the inside scoop on Figma\u2019s support for variable fonts. 10 Free Portfolio & Lookbook Templates for Adobe InDesign \u2013 Quickly build an amazing portfolio\u2026","rel":"","context":"In "Affiliate Marketing"","block_context":{"text":"Affiliate Marketing","link":"https:\/\/www.bricktowntom.com\/blog\/category\/affiliate-marketing"},"img":{"alt_text":"Envato Elements","src":"https:\/\/i0.wp.com\/speckyboy.com\/wp-content\/uploads\/2019\/08\/envato-elements-weekly-news.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":93006,"url":"https:\/\/www.bricktowntom.com\/blog\/05\/customize-your-frontend-experience-with-woocommerce-page-builders.html","url_meta":{"origin":92236,"position":2},"title":"Customize your frontend experience with WooCommerce page builders","author":"admin","date":"May 5, 2026","format":false,"excerpt":"It takes a lot to stand out in the competitive ecommerce marketplace. In addition to offering great products, store owners need to create attractive and functional websites to win over buyers. This takes considerable work, especially if you try to build these sites from scratch. With WooCommerce page builders, you\u2026","rel":"","context":"In "E-business & E-marketing"","block_context":{"text":"E-business & E-marketing","link":"https:\/\/www.bricktowntom.com\/blog\/category\/ebusiness-emarketing"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.bricktowntom.com\/blog\/wp-content\/uploads\/2022\/05\/student-ge1d350342_12801-300x200-1.jpg?fit=300%2C200&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":92052,"url":"https:\/\/www.bricktowntom.com\/blog\/04\/weekly-news-for-designers-%e2%84%96-628.html","url_meta":{"origin":92236,"position":3},"title":"Weekly News for Designers \u2116 628","author":"admin","date":"April 21, 2026","format":false,"excerpt":"Git Cheat Sheet (50 commands + Free PDF and poster) \u2013 This handy reference contains plenty of common Git commands spanning a variety of categories. Spatial Web Browsing \u2013 A look at browsing apps that arrange objects in space to create groupings, indicate relationships, and build hierarchies. Animate Anything Along\u2026","rel":"","context":"In "Affiliate Marketing"","block_context":{"text":"Affiliate Marketing","link":"https:\/\/www.bricktowntom.com\/blog\/category\/affiliate-marketing"},"img":{"alt_text":"Envato Elements","src":"https:\/\/i0.wp.com\/speckyboy.com\/wp-content\/uploads\/2019\/08\/envato-elements-weekly-news.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":92857,"url":"https:\/\/www.bricktowntom.com\/blog\/04\/9-steps-to-largest-contentful-paint-optimization.html","url_meta":{"origin":92236,"position":4},"title":"9 steps to Largest Contentful Paint optimization\u00a0","author":"admin","date":"April 23, 2026","format":false,"excerpt":"Largest Contentful Paint (LCP) isn\u2019t just about making Google happy. LCP optimization is key to providing better user experiences, as visitors are more quickly presented with useful content. This can give you quite a competitive advantage over sites where content displays little by little, tempting the frustrated visitor to bounce.\u2026","rel":"","context":"In "E-business & E-marketing"","block_context":{"text":"E-business & E-marketing","link":"https:\/\/www.bricktowntom.com\/blog\/category\/ebusiness-emarketing"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.bricktowntom.com\/blog\/wp-content\/uploads\/2022\/05\/clock-95330_12801-300x200-1.jpg?fit=300%2C200&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":93265,"url":"https:\/\/www.bricktowntom.com\/blog\/04\/weekly-news-for-designers-%e2%84%96-650.html","url_meta":{"origin":92236,"position":5},"title":"Weekly News for Designers \u2116 650","author":"admin","date":"April 17, 2026","format":false,"excerpt":"Areas Where AI Can (and Already Is) Benefitting Web Designers \u2013 Artificial intelligence has the potential to make a web designer\u2019s job easier. Avatarg Figma Plugin \u2013 This Figma plugin lets you generate avatar images. Single Element Loaders: The Bars \u2013 Learn how to create CSS animated loading bars with\u2026","rel":"","context":"In "Affiliate Marketing"","block_context":{"text":"Affiliate Marketing","link":"https:\/\/www.bricktowntom.com\/blog\/category\/affiliate-marketing"},"img":{"alt_text":"Envato Elements","src":"https:\/\/i0.wp.com\/speckyboy.com\/wp-content\/uploads\/2019\/08\/envato-elements-weekly-news.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.bricktowntom.com\/blog\/wp-json\/wp\/v2\/posts\/92236","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bricktowntom.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bricktowntom.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bricktowntom.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bricktowntom.com\/blog\/wp-json\/wp\/v2\/comments?post=92236"}],"version-history":[{"count":1,"href":"https:\/\/www.bricktowntom.com\/blog\/wp-json\/wp\/v2\/posts\/92236\/revisions"}],"predecessor-version":[{"id":92277,"href":"https:\/\/www.bricktowntom.com\/blog\/wp-json\/wp\/v2\/posts\/92236\/revisions\/92277"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bricktowntom.com\/blog\/wp-json\/wp\/v2\/media\/92237"}],"wp:attachment":[{"href":"https:\/\/www.bricktowntom.com\/blog\/wp-json\/wp\/v2\/media?parent=92236"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bricktowntom.com\/blog\/wp-json\/wp\/v2\/categories?post=92236"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bricktowntom.com\/blog\/wp-json\/wp\/v2\/tags?post=92236"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}