{"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=\"projectimmerse\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"projectimmerse\" \/>\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\":\"projectimmerse\",\"@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\":\"projectimmerse\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/4d06955033d6227bfdcf30014e457e4334f7deeb73907de49b65ec2484921931?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/4d06955033d6227bfdcf30014e457e4334f7deeb73907de49b65ec2484921931?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/4d06955033d6227bfdcf30014e457e4334f7deeb73907de49b65ec2484921931?s=96&d=mm&r=g\",\"caption\":\"projectimmerse\"},\"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":"projectimmerse","twitter_card":"summary_large_image","twitter_misc":{"Written by":"projectimmerse","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":"projectimmerse","@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":"projectimmerse","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/4d06955033d6227bfdcf30014e457e4334f7deeb73907de49b65ec2484921931?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/4d06955033d6227bfdcf30014e457e4334f7deeb73907de49b65ec2484921931?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4d06955033d6227bfdcf30014e457e4334f7deeb73907de49b65ec2484921931?s=96&d=mm&r=g","caption":"projectimmerse"},"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}]}}