Svelte 5 - nested property binding
12:04 22 Dec 2025

Lets say I have a data type

interface User {
    name : string
}

I have a parent component that uses a child component that takes user as parameter to edit its properties.

let user = $state({ name: "John"});


The child component shall update the name of the user and this should be reflected in the user instance of the parent. Child component looks like:

let { user = $bindable() } = $props()


This works exactly as I would expect it! I can edit the user in the child component and the changes are reflected in the user instance of the parent.
However at runtime in the browser console I get a warning like 'https://svelte.dev/e/binding_property_non_reactive'.

What is the proper way of getting rid of the warning?

binding svelte