Svelte Engineering: Automating Prop Generation

JSON to Svelte Props: Generating Typed Component Props from JSON Data

Svelte components receive data through props — declared with export let in Svelte 4 or the $props() rune in Svelte 5. When you have a JSON payload representing the data a component should display, generating the prop declarations from the JSON shape gives you the typed interface and default values instantly, ready to drop into a .svelte file.

Live Example: Product Card Component

// Input JSON
{
  "product_id": "prd_7721",
  "name": "Wireless Keyboard",
  "price": 89.99,
  "in_stock": true,
  "rating": 4.8,
  "badge": null
}

// Generated Svelte Component (Svelte 4 syntax)
<script lang="ts">
  export let product_id: string = '';
  export let name: string = '';
  export let price: number = 0;
  export let in_stock: boolean = false;
  export let rating: number = 0;
  export let badge: string | undefined = undefined;
</script>

<div class="svelte-card p-4 rounded-xl border border-slate-200 dark:border-slate-800">
  <h2 class="text-xl font-bold mb-2">Component</h2>
  <ul class="text-sm space-y-1">
    <li><strong>product_id:</strong> {product_id}</li>
    <li><strong>name:</strong> {name}</li>
    <li><strong>price:</strong> {price}</li>
  </ul>
</div>

Svelte 5: The Runes API ($props)

Svelte 5 replaces export let with the $props() rune. The generated code uses Svelte 4 syntax — here's how to migrate:

<!-- Svelte 5 runes syntax -->
<script lang="ts">
  interface Props {
    productId: string;
    name: string;
    price: number;
    inStock: boolean;
    rating: number;
    badge?: string;
    onclick?: (productId: string) => void;
  }

  const { productId, name, price, inStock, rating, badge, onclick }: Props = $props();
</script>

<div class="product-card">
  <h3>{name}</h3>
  <p class="price">${price.toFixed(2)}</p>
  {#if badge}
    <span class="badge">{badge}</span>
  {/if}
  <button
    disabled={!inStock}
    onclick={() => onclick?.(productId)}
  >
    {inStock ? 'Add to Cart' : 'Out of Stock'}
  </button>
</div>

SvelteKit: Passing Server Data as Props

// src/routes/products/[id]/+page.server.ts
import type { PageServerLoad } from './$types';

export const load: PageServerLoad = async ({ params, fetch }) => {
  const res = await fetch(`/api/products/${params.id}`);
  const product = await res.json();

  return { product }; // becomes props.data in the page
};

// src/routes/products/[id]/+page.svelte
<script lang="ts">
  import ProductCard from '$lib/components/ProductCard.svelte';
  import type { PageData } from './$types';

  const { data }: { data: PageData } = $props();
  // data.product is fully typed from the load function return type
</script>

<ProductCard
  productId={data.product.product_id}
  name={data.product.name}
  price={data.product.price}
  inStock={data.product.in_stock}
  rating={data.product.rating}
/>

Reactive Statements and Derived Values

<!-- Svelte 4: $: reactive label -->
<script lang="ts">
  export let price: number = 0;
  export let quantity: number = 1;

  $: total = price * quantity;           // recalculates when price or quantity changes
  $: discounted = total > 100 ? total * 0.9 : total;
  $: console.log('Total changed:', total);  // reactive side effect
</script>

<!-- Svelte 5: $derived() and $effect() -->
<script lang="ts">
  const { price, quantity } = $props();

  const total = $derived(price * quantity);
  const discounted = $derived(total > 100 ? total * 0.9 : total);

  $effect(() => {
    console.log('Total changed:', total);
  });
</script>

Svelte vs React vs Vue for Component Props

• Svelte: Props are just variables with export let (Svelte 4) or $props() (Svelte 5). No prop drilling boilerplate, no explicit interface required (though TypeScript helps). Smallest runtime bundle of the three.
• React: Props passed as an object to the function component. TypeScript interface required for type safety. More explicit but more ceremony.
• Vue 3: defineProps<{}>() with TypeScript generic — similar to Svelte 5's $props() pattern. Slightly more setup than Svelte.

Frequently Asked Questions

What's the difference between Svelte 4 export let and Svelte 5 $props()? In Svelte 4, each prop is a separate exported variable — simple but requires an export for each one. In Svelte 5, all props come as one destructured object from $props(), enabling rest props (const { known, ...rest } = $props()) and a single typed interface. Svelte 5 is the future; migrate when your project is ready.

How do I pass a callback (function) as a prop? In Svelte 4: export let onclick: (id: string) => void = () => {};. In Svelte 5: include it in the Props interface and call onclick?.() with optional chaining. Events in Svelte 5 are just function props — the createEventDispatcher pattern is deprecated.

Is my JSON sent to a server? No. TypeMorph runs entirely in your browser — none of your data leaves your machine.