Svelte 4 → Svelte 5 Runes Converter

Name: Quartalis
Address: GB
Price range: ££

Paste a Svelte 4 component and get Svelte 5 runes output. Converts export let to $props(), reactive statements to $derived / $effect, slots to {@render}, and more.

Svelte 4 Component (input)

Svelte 5 Runes (output)

<script>
  let { name = 'world' } = $props();
  let count = $state(0);
  let doubled = $derived(count * 2);
</script>

<h1>Hello {name}!</h1>
{@render children?.()}

What Gets Converted

Fully Converted

export let props to $props() destructuring
$: derived assignments to $derived()
$: { } blocks to $effect()
$: if statements to $effect()
Reactive let to $state()
createEventDispatcher to callback props
<slot /> to {@render children()}
<slot name="x"> to {@render x()}
on:click to onclick
$$restProps to ...restProps spread

Flagged for Manual Review

$$props usage (needs specific destructuring)
on:event|modifiers (modifiers removed in Svelte 5)
on:event forwarding (use callback props)
transition: directives (check for breaking changes)
Complex reactive statements that need context
Event dispatchers with multiple events
Slot props / let: directives (use snippet props)
Store auto-subscriptions ($store syntax unchanged)

Svelte 4 to 5 Quick Reference

Svelte 4	Svelte 5
export let foo	let { foo } = $props()
export let foo = 'bar'	let { foo = 'bar' } = $props()
let count = 0	let count = $state(0)
$: doubled = count * 2	let doubled = $derived(count * 2)
$: { console.log(x) }	$effect(() => { console.log(x) })
<slot />	{@render children?.()}
<slot name="header" />	{@render header?.()}
on:click	onclick
$$restProps	...restProps from $props()
createEventDispatcher()	Callback props (onEvent)

About Svelte 5 Runes Migration

Svelte 5 introduces runes — a new reactivity system that replaces the implicit compiler-driven reactivity of Svelte 4 with explicit, composable primitives. The key runes are $state, $derived, $effect, and $props.

Instead of the $: label syntax for reactive declarations, Svelte 5 uses $derived() for computed values and $effect() for side effects. Props are declared with $props() instead of export let, and slots are replaced with the {@render} template directive.

This converter handles the most common migration patterns automatically and flags anything that needs manual attention. It runs entirely in your browser — no data is sent to any server.

Key Svelte 5 Changes

$state() — explicit reactive state declaration, replaces implicit let reactivity
$derived() — replaces $: reactive declarations for computed values
$effect() — replaces $: { } blocks and $: side effects
$props() — replaces export let for component props
{@render} — replaces <slot> for content projection
Callback props — replace createEventDispatcher for component events
Event attributes — onclick replaces on:click
onMount / onDestroy — unchanged, still work the same way

Building a SvelteKit + FastAPI app?

Production-ready Svelte 5 + FastAPI starter with auth, Docker, Tailwind v4, and database — already using runes throughout. Skip the boilerplate.

View SvelteKit + FastAPI Starter →