Svelte

Used in 271 javascript projects (avg ★435)

Used by 271 projects

Language / Topic

JavaScript

Rules

Svelte · balanced balanced

- Use SvelteKit's file-based routing system for pages, layouts, and dynamic routes with [slug] syntax.

- Fetch data server-side using load functions in +page.server.js or +layout.server.js.

- Leverage SSR for dynamic content and SSG for static pages.

- Structure components with separate script (logic), markup, and style sections.

- Use `$state()` for reactive variables, `$derived()` for computed values, and `$effect()` for side effects in Svelte 5 runes mode.

- Pass data with `$props()` destructuring: `let { items, onSelect } = $props()` — use `$bindable()` for two-way binding.

- Use `{#each items as item (item.id)}` with keyed blocks for efficient list rendering — keys prevent unnecessary DOM updates.

- Use `<svelte:component this={component} />` for dynamic components and `{@html content}` for trusted HTML (sanitize first).