## Directories ### introduction Getting started with Svelte: project setup, file structure, and basic concepts ## Project Setup **SvelteKit (Recommended):** ```sh npx sv create myapp cd myapp npm install npm run dev ``` Official framework from Svelte team, powered by Vite, supports most application types. **Vite Alternative:** ```sh npm create vite@latest # select svelte option npm run build # generates dist/ ``` Uses vite-plugin-svelte; most projects need separate routing library. Other bundlers have plugins but Vite is recommended. ## Editor & Help - VS Code extension (maintained by Svelte team) - Command-line checking: `sv check` - Community support via Discord and Stack Overflow (tag: svelte) ## .svelte File Structure Components use `.svelte` files (superset of HTML) with optional sections: ```svelte ``` - ` ``` Props update reactively when parent changes. Child can temporarily reassign but should not mutate unless the prop is bindable. Type annotations can be added for IDE support and documentation. **$props.id()** (v5.20.0+): Generates a unique ID per component instance, consistent during hydration. Useful for linking elements: ```svelte const uid = $props.id(); First Name: ``` ## $bindable Marks a component prop as bindable, enabling two-way data flow between parent and child components. Allows the child to communicate changes back to the parent. ```svelte // Child let { value = $bindable(), ...props } = $props(); // Parent let message = $state('hello'); ``` Parent components don't have to use `bind:` — they can pass a normal prop if they don't want to listen to child changes. ## $inspect Development-only rune that logs values whenever they change, similar to `console.log` but reactive. Tracks deep changes in objects and arrays. ```svelte let count = $state(0); $inspect(count); // logs when count changes $inspect(count).with((type, count) => { if (type === 'update') debugger; }); ``` **$inspect.trace()** (v5.14+): Traces the surrounding function, printing which reactive state caused an effect or derived to re-run. Must be the first statement in a function body. `$inspect` is a noop in production builds. ## $host Provides access to the host element when compiling a component as a custom element. Allows dispatching custom events. ```svelte ``` ### template_syntax Complete template syntax reference: markup, events, conditionals, loops, async, snippets, bindings, actions, transitions, animations, styling, and special directives. ## Core Markup - Lowercase tags (`

`) are HTML elements; capitalized/dot-notation tags (``, ``) are components - Attributes support unquoted values, JS expressions, or pure expressions: ``, ``, `

Hello {name}!

sveltejs/svelte