Svelte best practices

Use when writing or reviewing Svelte components and .svelte files, especially around reactivity, props, events, stores, and Svelte 5 patterns.

Mental model

• Svelte is a compiler-driven UI framework. Prefer direct, declarative component code over React-style indirection patterns carried over by habit.
• Keep component logic simple and close to the markup that uses it.
• Let Svelte’s reactivity model do the work instead of manually reconstructing reactive behavior with unnecessary wrappers.

Components and state

• Keep components focused on one UI responsibility.
• Colocate state with the component or module that owns it; lift only when multiple consumers truly need shared control.
• Prefer simple derived values and reactive declarations over state duplication.

Reactivity