Top 10 Hidden Features of Svelte You Didn't Know About

Introduction - what you’ll be able to build

By the time you finish this article you’ll know ten small-but-powerful Svelte features that often live in the shadow of the framework’s headline claims. Use them and your components will be leaner. Your DOM updates will be smarter. Your UI will feel faster and cleaner.

Short. Practical. Immediately applicable.

Why “hidden”? Because these features are documented - but they’re rarely used to their full potential. I’ll show code samples, real-world tips, and links to the docs so you can try each trick in minutes.

1) Advanced reactive blocks: $: blocks, scoped reactive statements, and async work

The reactive declaration ($:) is the heart of Svelte reactivity. But beyond simple one-liners, you can use full scoped blocks and even async logic.

Why it helps: keep derived state, side effects, and async flows declarative and free of manual effect wiring.

Example - scoped reactive block and async fetch:

<script>
  export let id;
  let data;
  let error;

  $: if (id) {
    // scoped reactive block. Runs whenever `id` changes.
    (async () => {
      try {
        const res = await fetch(`/api/items/${id}`);
        data = await res.json();
      } catch (e) {
        error = e;
      }
    })();
  }
</script>

Tip: use $: { /_ … _/ } if you need multiple statements but want them treated as a single reactive block. See the Svelte tutorial on reactive statements: https://svelte.dev/tutorial/reactive-statements

2) Auto-subscription to stores with the $ prefix (and where you can’t use it)

Svelte stores are great - and inside component scripts and templates you can write $storeName to auto-subscribe and read the current value.

Why it helps: eliminates subscribe/unsubscribe boilerplate and keeps components reactive to external state effortlessly.

Example:

<script>
  import { writable } from 'svelte/store';
  export const theme = writable('light');

  // inside a Svelte component
  import { theme } from './stores';
  $: currentTheme = $theme; // auto-subscription
</script>

<div class={$theme}>Current: {$theme}</div>

Caveat: the $ shorthand only works in component instance scripts (not module scripts) and templates. Use manual subscribe when you need to manage the subscription lifetime or access a store outside a Svelte component.

Docs: https://svelte.dev/tutorial/writable-stores

3) tick(): wait for the DOM to catch up

Sometimes you need to wait until Svelte has flushed DOM updates (after state changes) - for example to measure an element that was just shown. Use tick() from ‘svelte’.

Why it helps: avoids race conditions when measuring or focusing elements after updates.

Example:

<script>
  import { tick } from 'svelte';
  let visible = false;
  let el;

  async function open() {
    visible = true;
    await tick(); // DOM is updated now
    el.focus();
  }
</script>

{#if visible}
  <input bind:this={el} />
{/if}

Docs: https://svelte.dev/docs#tick

4) svelte:element - dynamically render arbitrary HTML tags

You know <svelte:component this={Component}/> for dynamic components. But when you need a dynamic HTML tag (div, button, a, h1…), use svelte:element.

Why it helps: build highly generic components (like polymorphic Button components) without conditionals.

Example - polymorphic button:

<script>
  export let tag = 'button';
  export let href;
  export let $$restProps = {};
</script>

<svelte:element this={tag} {...$$restProps} href={href}>
  <slot />
</svelte:element>

Now your Button can be used as Link or as a regular button.

Docs: https://svelte.dev/docs#svelte_element

5) $$restProps and attribute forwarding

When writing wrapper components, you often want to forward arbitrary HTML attributes (class, aria-, data-, etc.). Use {…$$restProps} to spread unknown props onto an inner element.

Why it helps: maintain native attribute behavior and reduce prop-list boilerplate.

Example:

<script>
  export let label;
  export let $$restProps; // collects props not explicitly declared
</script>

<button {...$$restProps}>{label}</button>

This forwards class, id, and any event handlers to the .

Docs: https://svelte.dev/docs#component-format-script-4-component-format

6) Actions: use:myAction with update and destroy hooks

Actions (use:*) are tiny, composable ways to attach behavior to DOM nodes. They can accept parameters and return update/destroy handlers.

Why it helps: isolate DOM-level behavior (tooltips, listeners, 3rd-party libs) without bloating components.

Example - tooltip action with dynamic text:

// tooltip.js
export function tooltip(node, text) {
  const tip = document.createElement('div');
  tip.textContent = text;
  tip.className = 'tooltip';
  node.appendChild(tip);

  return {
    update(newText) {
      tip.textContent = newText;
    },
    destroy() {
      tip.remove();
    },
  };
}

<script>
  import { tooltip } from './tooltip.js';
  let txt = 'hello';
</script>

<button use:tooltip={txt}>Hover me</button>

Docs: https://svelte.dev/docs#use_action

7) Built-in animations: animate:flip and crossfade for smooth state changes

Svelte has built-in tools for animating layout changes and shared-element transitions. animate:flip handles reordering with the FLIP technique. crossfade provides a pair of functions for shared-element animations.

Why it helps: big visual polish with very little code.

Example - list reordering with FLIP:

<script>
  import { flip } from 'svelte/animate';
  let items = [1,2,3,4];
  function shuffle() { items = items.sort(() => Math.random() - .5); }
</script>

<button on:click={shuffle}>Shuffle</button>
<ul>
  {#each items as item (item)}
    <li animate:flip>{item}</li>
  {/each}
</ul>

For crossfade and examples see: https://svelte.dev/docs#animate_flip and the crossfade docs: https://svelte.dev/docs#run-time-svelte-animate-crossfade

8) bind:this for element + component instances (and calling component API)

bind:this gives you a reference to a DOM node or a component instance. For component instances, you can call methods exposed by that instance (useful for imperative APIs).

Why it helps: bridge the gap between declarative markup and occasional imperative needs (focus management, instance methods, third‑party libs).

Example - calling a child component method:

<!-- Child.svelte -->
<script>
  export function reset() { /* reset internal state */ }
</script>

<!-- Parent.svelte -->
<script>
  import Child from './Child.svelte';
  let child;
  function doReset() { child.reset(); }
</script>

<Child bind:this={child} />
<button on:click={doReset}>Reset child</button>

Docs: https://svelte.dev/docs#bind_this

9) Context API (setContext / getContext) - lightweight dependency injection

setContext and getContext let you pass values down the component tree without prop drilling. Share stores, theme objects, or service-like singletons.

Why it helps: simplify deeply nested components and keep APIs clean.

Example - provide a store at a top-level provider and auto-subscribe in descendants:

// Provider.svelte
<script>
  import { setContext } from 'svelte';
  import { writable } from 'svelte/store';
  const user = writable({ name: 'Ada' });
  setContext('user', user);
</script>
<slot />

// Child.svelte
<script>
  import { getContext } from 'svelte';
  const user = getContext('user');
  // auto-subscribe in template with $user
</script>
<p>Hello {$user.name}</p>

Docs: https://svelte.dev/docs#setContext

10) svelte:options hacks - accessors, immutable, and customElement options

svelte:options controls compilation nuances. Few people use it daily, but it unlocks important behaviors:

• accessors - generate getters/setters so consumers can read/set props imperatively from JS.
• immutable - treat props as immutable and enable faster diffing when you follow immutable patterns.
• tag (when building custom elements) - useful for Web Component integration.

Example:

<svelte:options accessors={true} immutable={true} />

When building libraries or custom elements these compile options matter - they change the external API and can dramatically affect performance in certain patterns.

Docs: https://svelte.dev/docs#svelte_options

Conclusion - start using one feature today

Pick one small feature from this list and apply it in the next component you write. Use tick() when you need a reliable post‑update hook. Use svelte:element to make components truly polymorphic. Use $$restProps to let your wrappers be transparent. Each feature is a lever - the right one saves hours of glue code and produces cleaner, faster UI.

Further reading and reference

• Svelte docs and tutorial: https://svelte.dev
• Reactive statements tutorial: https://svelte.dev/tutorial/reactive-statements
• Actions docs: https://svelte.dev/docs#use_action
• Animate & flip: https://svelte.dev/docs#animate_flip and crossfade docs: https://svelte.dev/docs#run-time-svelte-animate-crossfade