How can I make the data prop bindable for editing?

[MaddyGuthridge]

I'm currently trying to make a site where the content can be edited, but there's no approach I have found that allows data to be updated as edits are made without breaking data reactivity between pages.

Essentially, my page has a value data.item which contains info about the current item. I wish to modify this value and have edits display across the UI as they are made, so that:

• As the user types a new name for the item, the page's navigation displays that new name
• As the user changes the background color, the background updates accordingly

What I've tried:

• Binding to data.item -- the value is not reactive, so edits don't get shown.
• Adding let = thisItem $state(data.item); -- the data updates across the site correctly, but it stops being reactive to page transitions.
• Using an $effect to update thisItem when the page changes -- either causes infinite loops, or doesn't work at all. Was nightmarish to debug.
• Adding a $state specifically for when data is edited, then using an $effect to copy back to the original when edits are made -- since data.item is not reactive, it doesn't realise changes are made, and therefore doesn't re-render the affected parts of the app.

For reference, here is the code I am working on

I'm completely stumped for what to do here. How can I approach this?

[MaddyGuthridge]

I figured out why using an $effect didn't work. Because it only runs after the DOM is updated, it meant that sub-components had already tried to re-render with the half-updated data, which threw an error, preventing the $effect block from running.

By using an $effect.pre, I was able to ensure that the data was fully updated before the DOM was updated.

Even still, this feels extremely janky, and so I'd love to know if there is a better approach.

[brunnerh]

There is a another pattern using $derived and $state:

const item = $derived.by(() => {
	const state = $state({ current: data.item });
	return state;
});

Playground

item.current can be changed and reacts to the changes but also updates when the data prop changes.

[hanszoons]

Future readers: as of Svelte 5.25 (PR sveltejs/svelte#15570) $derived()-runes are writable. This means you can derive from server data AND write to it optimistically.