{"id":1546,"date":"2026-08-19T11:34:30","date_gmt":"2026-08-19T11:34:30","guid":{"rendered":"https:\/\/www.projectimmerse.com\/blog\/?p=1546"},"modified":"2026-08-19T11:49:03","modified_gmt":"2026-08-19T11:49:03","slug":"6-svelte-5-runes-fundamentals-that-trip-up-even-experienced-developers","status":"publish","type":"post","link":"https:\/\/www.projectimmerse.com\/blog\/6-svelte-5-runes-fundamentals-that-trip-up-even-experienced-developers\/","title":{"rendered":"6 Svelte 5 Runes Fundamentals That Trip Up Even Experienced Developers"},"content":{"rendered":"\n
\"Retro<\/a>
Six Svelte 5 fundamentals that clarify how runes, state, expressions, data attributes, raw state, and debugging work.<\/figcaption><\/figure>\n\n\n\n

Svelte 5’s runes \u2014 $state<\/code>, $derived<\/code>, $effect<\/code>, $inspect<\/code> \u2014 are a genuinely elegant reactivity model. They’re also just quirky enough that if your mental model is slightly off, you’ll end up with a perfectly “correct-looking” component that just… doesn’t do the thing. No crash, no red squiggly line, just a button that refuses to rotate and a developer quietly questioning their life choices. None of what follows is about typos or broken syntax \u2014 it’s about the underlying concepts that, once they click, make Svelte 5 feel predictable instead of moody.<\/p>\n\n\n\n\n\n\n\n

1. The class<\/code> Directive Wants an Expression, Not a String<\/h2>\n\n\n\n

Svelte 5 lets you pass an array or object straight into class<\/code>, and it intelligently turns it into a class string for you:<\/p>\n\n\n

\n<span class={['trigger', { open }]}>\ud83d\udc48<\/span>\n<\/pre><\/div>\n\n\n
When open<\/code> is true<\/code>, this renders as class=\"trigger open\"<\/code>. The key thing to understand is why<\/em> this works: class={...}<\/code> hands Svelte a single JavaScript expression that it evaluates and processes with its own class-name logic.<\/p>\n\n\n\n
The moment you wrap that same expression in quotes, you’ve changed what you’re asking for. A quoted attribute is a string template, and Svelte just calls .toString()<\/code> on whatever’s inside it \u2014 an array becomes a comma-joined string, an object becomes [object Object]<\/code>. None of that matches your CSS selectors.<\/p>\n\n\n\n
The underlying rule: quotes mean “build a string,” curly braces alone mean “evaluate this expression and let Svelte interpret it.” For the class shorthand specifically, you always want the latter.<\/p>\n\n\n\n
2. Data Attributes Reflect State \u2014 They Don’t Create It<\/h2>\n\n\n\n
It’s tempting to look at this and assume the data attribute itself is doing double duty:<\/p>\n\n\n
\n<button class="btn">\n  <span class="trigger" data-status={status}>\ud83d\udc48<\/span>\n<\/button>\n\n.trigger[data-status='open'] {\n  rotate: -90deg;\n}\n<\/pre><\/div>\n\n\n
The binding is correct, the selector is correct \u2014 and it still won’t animate, because a data attribute is a one-way mirror. It reflects whatever status<\/code> currently holds into the DOM so CSS or other code can read it. It has no mechanism to write back to status<\/code> on its own.<\/p>\n\n\n\n
Something else \u2014 a click handler, a keyboard event, a form submission \u2014 has to be the thing that actually reassigns status<\/code>. Once that happens, the data attribute updates automatically and your CSS kicks in. The fundamental split to internalize: events change state, attributes display state.<\/strong> They’re not interchangeable, and skipping one leaves the other with nothing to show.<\/p>\n\n\n\n
3. $state.raw<\/code> Trades Deep Reactivity for Performance<\/h2>\n\n\n\n
At first glance, $state.raw()<\/code> looks like a drop-in replacement for $state()<\/code>. It isn’t \u2014 and understanding the difference matters:<\/p>\n\n\n
\nlet editor = $state.raw({\n  theme: 'dark',\n  content: '<h1>Svelte<\/h1>'\n})\n\n\/\/ This has no reactive effect:\neditor.content = e.target.value\n<\/pre><\/div>\n\n\n
Regular $state<\/code> wraps your object in a Proxy, so mutating any property \u2014 even a deeply nested one \u2014 is automatically tracked and triggers updates. $state.raw<\/code> skips that wrapping entirely. You get back a plain object, and Svelte only tracks reassignment of the variable itself<\/strong>, never changes to what’s inside it.<\/p>\n\n\n\n
That means with raw state, you always replace rather than mutate:<\/p>\n\n\n
\neditor = {\n  ...editor,\n  content: e.target.value\n}\n<\/pre><\/div>\n\n\n
The tradeoff exists for a reason: deep-proxying large or deeply nested objects has real overhead. $state.raw<\/code> is Svelte handing you a performance escape hatch \u2014 you just have to remember its one rule: swap the whole object, don’t poke at its insides.<\/p>\n\n\n\n
4. Destructuring $state<\/code> Keeps Each Piece Independently Reactive<\/h2>\n\n\n\n
\"Retro
Svelte 5 reactivity becomes easier to reason about once you understand how state, expressions, attributes, raw state, and debugging fit together.<\/figcaption><\/figure>\n\n\n\n
This is one of the more pleasant surprises once you understand it. You can destructure directly off a $state()<\/code> call:<\/p>\n\n\n
\nlet { theme, content } = $state({\n  theme: 'dark',\n  content: '<h1>Svelte<\/h1>'\n})\n<\/pre><\/div>\n\n\n
You might expect this to just grab a snapshot of the initial values \u2014 after all, that’s what destructuring a plain object does everywhere else in JavaScript. Svelte’s compiler special-cases this pattern, though: each destructured variable becomes its own<\/em> independently reactive binding, not a frozen copy. So content = 'new value'<\/code> later still triggers updates across your component, even though there’s no wrapping object holding the two together anymore.<\/p>\n\n\n\n
The tradeoff is grouping. Once destructured, you lose the ability to pass “the whole thing” around as a single object \u2014 to a function, a prop, or an effect that wants everything at once. If the pieces genuinely need to travel together, keep them as one $state<\/code> object. If they’re used independently throughout the component, destructuring keeps things cleaner.<\/p>\n\n\n\n
5. {@html}<\/code> Renders Exactly the String You Give It \u2014 Nothing More<\/h2>\n\n\n\n
A subtle one that likes to hide behind other bugs. {@html}<\/code> doesn’t know or care about the shape of your data \u2014 it renders whatever string expression you hand it, literally:<\/p>\n\n\n
\n{@html editor.content}\n<\/pre><\/div>\n\n\n
If you pass it something that isn’t a string \u2014 the whole editor<\/code> object, for instance \u2014 you won’t get an error. You’ll get [object Object]<\/code> rendered silently into the page, because that’s the string representation of an object in JavaScript. The fundamental to hold onto: {@html}<\/code> is a rendering instruction, not a smart lookup \u2014 it’s on you to pass the exact string you mean.<\/p>\n\n\n\n
Worth saying plainly since it’s easy to lose track of: {@html}<\/code> renders raw, unescaped HTML. If that content ever comes from anywhere other than a user editing their own local, trusted preview \u2014 shared documents, server-saved data, another user’s input \u2014 sanitize it first. This is a textbook XSS vector otherwise.<\/p>\n\n\n\n
6. $inspect<\/code> Watches Signals \u2014 It Isn’t One Itself<\/h2>\n\n\n\n
Easy to conflate, worth separating clearly:<\/p>\n\n\n
\nlet count = $state(0)\nlet max = $derived(count >= 4)\n\n$inspect(max)\n<\/pre><\/div>\n\n\n
count<\/code> and max<\/code> are both signals \u2014 reactive values you can read, pass around, and build further logic on top of. $inspect<\/code> is a different category of tool entirely. It doesn’t hold a value or produce one; it’s a debugging rune that subscribes to the signals you pass it and reruns a callback (console.log<\/code> by default) whenever they change. Conceptually, it’s close to writing:<\/p>\n\n\n
\n$effect(() => {\n  console.log('max', max)\n})\n<\/pre><\/div>\n\n\n
Two things make $inspect<\/code> worth reaching for instead of a manual effect: it’s automatically stripped out of production builds, so there’s zero cost to leaving it in your code, and it supports a chainable .with()<\/code> for custom logging logic, receiving a type<\/code> of either 'init'<\/code> or 'update'<\/code>.<\/p>\n\n\n\n
The Underlying Pattern<\/h2>\n\n\n\n
Every one of these comes back to the same idea: Svelte 5’s reactivity system is very precise about the difference between reflecting<\/em> a value and controlling<\/em> one, and between an expression<\/em> and a string<\/em>. Once those distinctions are second nature, the runes stop feeling unpredictable and start feeling like exactly what they are \u2014 a small, consistent set of rules that make your components easier to reason about, not harder.<\/p>\n\n\n\n
Building something with Svelte 5 and hitting a wall? Contact Project Immerse<\/a> \u2014 we’d love to help.<\/em><\/p>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
Svelte 5’s runes \u2014 $state, $derived, $effect, $inspect \u2014 are a genuinely elegant reactivity model. They’re also just quirky enough that if your mental model is slightly off, you’ll end up with a perfectly “correct-looking” component that just… doesn’t do the thing. No crash, no red squiggly line, just a button that refuses to rotate … <\/p>\n
Continue reading “6 Svelte 5 Runes Fundamentals That Trip Up Even Experienced Developers”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[56],"tags":[],"class_list":["post-1546","post","type-post","status-publish","format-standard","hentry","category-programming-fundamentals"],"yoast_head":"\n6 Svelte 5 Runes Fundamentals That Trip Up Even Experienced Developers - Project Immerse<\/title>\n<meta name=\"description\" content=\"Confused why your Svelte 5 component isn't reacting? Learn the core rune concepts \u2014 state, class bindings, and $inspect \u2014 behind the most common bugs.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.projectimmerse.com\/blog\/6-svelte-5-runes-fundamentals-that-trip-up-even-experienced-developers\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"6 Svelte 5 Runes Fundamentals That Trip Up Even Experienced Developers - Project Immerse\" \/>\n<meta property=\"og:description\" content=\"Confused why your Svelte 5 component isn't reacting? Learn the core rune concepts \u2014 state, class bindings, and $inspect \u2014 behind the most common bugs.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.projectimmerse.com\/blog\/6-svelte-5-runes-fundamentals-that-trip-up-even-experienced-developers\/\" \/>\n<meta property=\"og:site_name\" content=\"Project Immerse\" \/>\n<meta property=\"article:published_time\" content=\"2026-08-19T11:34:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-08-19T11:49:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.projectimmerse.com\/blog\/wp-content\/uploads\/2026\/08\/svelte-5-runes-fundamentals-1024x1024.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"1024\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Alex Mercer\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alex Mercer\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/6-svelte-5-runes-fundamentals-that-trip-up-even-experienced-developers\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/6-svelte-5-runes-fundamentals-that-trip-up-even-experienced-developers\\\/\"},\"author\":{\"name\":\"Alex Mercer\",\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/#\\\/schema\\\/person\\\/c53f2864be524ee6fa08a7e4800dd1e5\"},\"headline\":\"6 Svelte 5 Runes Fundamentals That Trip Up Even Experienced Developers\",\"datePublished\":\"2026-08-19T11:34:30+00:00\",\"dateModified\":\"2026-08-19T11:49:03+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/6-svelte-5-runes-fundamentals-that-trip-up-even-experienced-developers\\\/\"},\"wordCount\":1034,\"image\":{\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/6-svelte-5-runes-fundamentals-that-trip-up-even-experienced-developers\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/svelte-5-runes-fundamentals-1024x1024.png\",\"articleSection\":[\"Programming Fundamentals\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/6-svelte-5-runes-fundamentals-that-trip-up-even-experienced-developers\\\/\",\"url\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/6-svelte-5-runes-fundamentals-that-trip-up-even-experienced-developers\\\/\",\"name\":\"6 Svelte 5 Runes Fundamentals That Trip Up Even Experienced Developers - Project Immerse\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/6-svelte-5-runes-fundamentals-that-trip-up-even-experienced-developers\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/6-svelte-5-runes-fundamentals-that-trip-up-even-experienced-developers\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/svelte-5-runes-fundamentals-1024x1024.png\",\"datePublished\":\"2026-08-19T11:34:30+00:00\",\"dateModified\":\"2026-08-19T11:49:03+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/#\\\/schema\\\/person\\\/c53f2864be524ee6fa08a7e4800dd1e5\"},\"description\":\"Confused why your Svelte 5 component isn't reacting? Learn the core rune concepts \u2014 state, class bindings, and $inspect \u2014 behind the most common bugs.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/6-svelte-5-runes-fundamentals-that-trip-up-even-experienced-developers\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/6-svelte-5-runes-fundamentals-that-trip-up-even-experienced-developers\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/6-svelte-5-runes-fundamentals-that-trip-up-even-experienced-developers\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/svelte-5-runes-fundamentals.png\",\"contentUrl\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/svelte-5-runes-fundamentals.png\",\"width\":1254,\"height\":1254},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/6-svelte-5-runes-fundamentals-that-trip-up-even-experienced-developers\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"6 Svelte 5 Runes Fundamentals That Trip Up Even Experienced Developers\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/\",\"name\":\"Project Immerse\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/#\\\/schema\\\/person\\\/c53f2864be524ee6fa08a7e4800dd1e5\",\"name\":\"Alex Mercer\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/alex-mercer-author-150x150.png\",\"url\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/alex-mercer-author-150x150.png\",\"contentUrl\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/alex-mercer-author-150x150.png\",\"caption\":\"Alex Mercer\"},\"description\":\"Alex Mercer is a writer and contributor at Project Immerse, covering web design, WordPress, web development, SEO, digital strategy, emerging technology, and the evolving world of the web. His work focuses on practical ideas, useful tools, and approachable guidance that help creators, developers, and business owners build better digital experiences. Alex writes with a hands-on, curiosity-driven approach, exploring both established web practices and new technologies shaping how websites are designed, built, and discovered.\",\"sameAs\":[\"https:\\\/\\\/www.projectimmerse.com\"],\"url\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/author\\\/projectimmerse\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"6 Svelte 5 Runes Fundamentals That Trip Up Even Experienced Developers - Project Immerse","description":"Confused why your Svelte 5 component isn't reacting? Learn the core rune concepts \u2014 state, class bindings, and $inspect \u2014 behind the most common bugs.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.projectimmerse.com\/blog\/6-svelte-5-runes-fundamentals-that-trip-up-even-experienced-developers\/","og_locale":"en_US","og_type":"article","og_title":"6 Svelte 5 Runes Fundamentals That Trip Up Even Experienced Developers - Project Immerse","og_description":"Confused why your Svelte 5 component isn't reacting? Learn the core rune concepts \u2014 state, class bindings, and $inspect \u2014 behind the most common bugs.","og_url":"https:\/\/www.projectimmerse.com\/blog\/6-svelte-5-runes-fundamentals-that-trip-up-even-experienced-developers\/","og_site_name":"Project Immerse","article_published_time":"2026-08-19T11:34:30+00:00","article_modified_time":"2026-08-19T11:49:03+00:00","og_image":[{"width":1024,"height":1024,"url":"https:\/\/www.projectimmerse.com\/blog\/wp-content\/uploads\/2026\/08\/svelte-5-runes-fundamentals-1024x1024.png","type":"image\/png"}],"author":"Alex Mercer","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Alex Mercer","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.projectimmerse.com\/blog\/6-svelte-5-runes-fundamentals-that-trip-up-even-experienced-developers\/#article","isPartOf":{"@id":"https:\/\/www.projectimmerse.com\/blog\/6-svelte-5-runes-fundamentals-that-trip-up-even-experienced-developers\/"},"author":{"name":"Alex Mercer","@id":"https:\/\/www.projectimmerse.com\/blog\/#\/schema\/person\/c53f2864be524ee6fa08a7e4800dd1e5"},"headline":"6 Svelte 5 Runes Fundamentals That Trip Up Even Experienced Developers","datePublished":"2026-08-19T11:34:30+00:00","dateModified":"2026-08-19T11:49:03+00:00","mainEntityOfPage":{"@id":"https:\/\/www.projectimmerse.com\/blog\/6-svelte-5-runes-fundamentals-that-trip-up-even-experienced-developers\/"},"wordCount":1034,"image":{"@id":"https:\/\/www.projectimmerse.com\/blog\/6-svelte-5-runes-fundamentals-that-trip-up-even-experienced-developers\/#primaryimage"},"thumbnailUrl":"https:\/\/www.projectimmerse.com\/blog\/wp-content\/uploads\/2026\/08\/svelte-5-runes-fundamentals-1024x1024.png","articleSection":["Programming Fundamentals"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.projectimmerse.com\/blog\/6-svelte-5-runes-fundamentals-that-trip-up-even-experienced-developers\/","url":"https:\/\/www.projectimmerse.com\/blog\/6-svelte-5-runes-fundamentals-that-trip-up-even-experienced-developers\/","name":"6 Svelte 5 Runes Fundamentals That Trip Up Even Experienced Developers - Project Immerse","isPartOf":{"@id":"https:\/\/www.projectimmerse.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.projectimmerse.com\/blog\/6-svelte-5-runes-fundamentals-that-trip-up-even-experienced-developers\/#primaryimage"},"image":{"@id":"https:\/\/www.projectimmerse.com\/blog\/6-svelte-5-runes-fundamentals-that-trip-up-even-experienced-developers\/#primaryimage"},"thumbnailUrl":"https:\/\/www.projectimmerse.com\/blog\/wp-content\/uploads\/2026\/08\/svelte-5-runes-fundamentals-1024x1024.png","datePublished":"2026-08-19T11:34:30+00:00","dateModified":"2026-08-19T11:49:03+00:00","author":{"@id":"https:\/\/www.projectimmerse.com\/blog\/#\/schema\/person\/c53f2864be524ee6fa08a7e4800dd1e5"},"description":"Confused why your Svelte 5 component isn't reacting? Learn the core rune concepts \u2014 state, class bindings, and $inspect \u2014 behind the most common bugs.","breadcrumb":{"@id":"https:\/\/www.projectimmerse.com\/blog\/6-svelte-5-runes-fundamentals-that-trip-up-even-experienced-developers\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.projectimmerse.com\/blog\/6-svelte-5-runes-fundamentals-that-trip-up-even-experienced-developers\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.projectimmerse.com\/blog\/6-svelte-5-runes-fundamentals-that-trip-up-even-experienced-developers\/#primaryimage","url":"https:\/\/www.projectimmerse.com\/blog\/wp-content\/uploads\/2026\/08\/svelte-5-runes-fundamentals.png","contentUrl":"https:\/\/www.projectimmerse.com\/blog\/wp-content\/uploads\/2026\/08\/svelte-5-runes-fundamentals.png","width":1254,"height":1254},{"@type":"BreadcrumbList","@id":"https:\/\/www.projectimmerse.com\/blog\/6-svelte-5-runes-fundamentals-that-trip-up-even-experienced-developers\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.projectimmerse.com\/blog\/"},{"@type":"ListItem","position":2,"name":"6 Svelte 5 Runes Fundamentals That Trip Up Even Experienced Developers"}]},{"@type":"WebSite","@id":"https:\/\/www.projectimmerse.com\/blog\/#website","url":"https:\/\/www.projectimmerse.com\/blog\/","name":"Project Immerse","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.projectimmerse.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.projectimmerse.com\/blog\/#\/schema\/person\/c53f2864be524ee6fa08a7e4800dd1e5","name":"Alex Mercer","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.projectimmerse.com\/blog\/wp-content\/uploads\/2026\/09\/alex-mercer-author-150x150.png","url":"https:\/\/www.projectimmerse.com\/blog\/wp-content\/uploads\/2026\/09\/alex-mercer-author-150x150.png","contentUrl":"https:\/\/www.projectimmerse.com\/blog\/wp-content\/uploads\/2026\/09\/alex-mercer-author-150x150.png","caption":"Alex Mercer"},"description":"Alex Mercer is a writer and contributor at Project Immerse, covering web design, WordPress, web development, SEO, digital strategy, emerging technology, and the evolving world of the web. His work focuses on practical ideas, useful tools, and approachable guidance that help creators, developers, and business owners build better digital experiences. Alex writes with a hands-on, curiosity-driven approach, exploring both established web practices and new technologies shaping how websites are designed, built, and discovered.","sameAs":["https:\/\/www.projectimmerse.com"],"url":"https:\/\/www.projectimmerse.com\/blog\/author\/projectimmerse\/"}]}},"_links":{"self":[{"href":"https:\/\/www.projectimmerse.com\/blog\/wp-json\/wp\/v2\/posts\/1546","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.projectimmerse.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.projectimmerse.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.projectimmerse.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.projectimmerse.com\/blog\/wp-json\/wp\/v2\/comments?post=1546"}],"version-history":[{"count":5,"href":"https:\/\/www.projectimmerse.com\/blog\/wp-json\/wp\/v2\/posts\/1546\/revisions"}],"predecessor-version":[{"id":1557,"href":"https:\/\/www.projectimmerse.com\/blog\/wp-json\/wp\/v2\/posts\/1546\/revisions\/1557"}],"wp:attachment":[{"href":"https:\/\/www.projectimmerse.com\/blog\/wp-json\/wp\/v2\/media?parent=1546"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.projectimmerse.com\/blog\/wp-json\/wp\/v2\/categories?post=1546"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.projectimmerse.com\/blog\/wp-json\/wp\/v2\/tags?post=1546"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}