Svelte Component Generator
Scaffold a Svelte component — Svelte 5 runes ($props / $state / $derived / $effect / $bindable / snippets) or Svelte 4 (export let / $: / createEventDispatcher / slots), JS or TS, with typed props, defaults, two-way binding, state and styling — plus an optional test and a usage example.
What this tool does
It writes a complete Svelte component from a name and a prop list, in either the Svelte 5 runes syntax or the classic Svelte 4 style.
Svelte 5 vs Svelte 4
Svelte 5 uses runes:
let { title } = $props(),
let count = $state(0),
const doubled = $derived(count * 2),
$effect(() => …), $bindable() for
two-way props, and {#snippet} / {@render}
instead of slots. Svelte 4 uses
export let, reactive $: statements,
createEventDispatcher and <slot>.
Props and types
In TypeScript, Svelte 5 props are typed with an
interface Props passed to
$props<Props>(); Svelte 4 annotates each
export let.
Events
Svelte 5 favours callback props (onsave is just a
function prop you call). Svelte 4 uses
createEventDispatcher and the consumer listens with
on:save.
Privacy
Everything runs in your browser. Nothing is uploaded.