Documentation and best practices for Svelte 5 Runes in the Litekart Admin project.
This skill provides guidelines for working with Svelte 5 Runes in the Litekart Admin codebase. Svelte 5 introduces a new reactivity model based on runes.
$stateUse $state for declaring reactive state.
let count = $state(0);
let user = $state({ name: 'John Doe' });
$derivedUse $derived for state that depends on other state.
let doubleCount = $derived(count * 2);
$propsUse to receive props in components.
$props<script>
let { title, items = [] } = $props();
</script>
$effectUse $effect for side effects. Avoid using it for state synchronization; use $derived instead.
$effect(() => {
console.log('Count changed:', count);
});
export let with $props().$: label with $derived() for computed values.$: { ... } with $effect() for side effects.onchange) instead of createEventDispatcher or on:click syntax for custom events.$state.raw for large arrays or objects where you don't need deep reactivity.$app/state for workspace/page state.