Svelte
65 bites tagged Svelte — interview questions with model answers, and 60-second explainers.
File-Based Routing: Your Filesystem is Your API
File-based routing makes your directory structure the single source of truth for your app's URLs. Creating a file at `routes/about/+page.svelte` automatically creates the `/about` page, no central config needed.
SvelteKit's `load` Function: Pre-fetch Data for Pages
Think of SvelteKit's `load` function as a gatekeeper for your page, fetching data *before* it renders. It's used to grab data from an API or route params, like fetching a blog post. The footgun: `load` in `+page.js` runs on both server and client.
SvelteKit Form Actions: Server-Side Logic for Forms
SvelteKit Form Actions link HTML forms directly to server-side code, handling submissions without client-side boilerplate. They're perfect for logins or registrations and work without JavaScript.
Svelte Scoped Styles: CSS That Can't Leak
Svelte styles are like house rules; they only apply inside that component and don't affect the neighbors. This is the default for any `<style>` tag in a `.svelte` file, preventing CSS conflicts.
Svelte Derived Stores: Reactive Values from Other Stores
A Svelte derived store is like a spreadsheet formula for your state. It listens to other stores and automatically computes a new value whenever they change. The footgun is trying to write to it—it's read-only; you must update its sources instead.
Svelte Stores: State for Async Streams & Legacy Apps
Svelte Stores are objects for sharing reactive state. While Svelte 5's runes (`$state`) are now preferred for simple state sharing, stores remain ideal for complex async streams or when you need manual control over updates.
Svelte's Reactive Assignments with `$: `
Think of Svelte's `$: ` as a magic label that automatically re-runs code when its inputs change. It's used to create derived values, like `$: sum = a + b`. The footgun: the compiler only tracks direct dependencies, not those hidden inside function calls.
Svelte Lifecycle: Mount, Destroy, and Tick
Svelte 5 simplifies the component lifecycle to just two events: creation (`onMount`) and destruction (`onDestroy`). Use `onMount` for DOM setup and return a cleanup function from it. The cleanup only works if the main callback is synchronous, not async.
Svelte's `{@html}` and `{@debug}`: When to Use Them
Svelte's `{@html}` and `{@debug}` offer powerful but risky escapes. `{@html}` renders raw HTML strings, while `{@debug}` acts like a `debugger` statement in your markup. Use them for trusted content and dev-time inspection.
Svelte Slot Props: Child Informs, Parent Renders
Svelte slot props let a child component pass data up to its parent's slot. This is key for reusable list components where the child provides data for each item, but the parent controls the rendering. The footgun: the `let:` directive goes on the component tag.
Svelte Context API: Avoid Prop-Drilling
Svelte's Context API lets a parent component provide data to any descendant, avoiding 'prop-drilling'. It's ideal for sharing app-wide state like user info or themes. The key footgun: calling `getContext` without a parent `setContext` will throw an error.
Handling Basic DOM Events in Svelte
Svelte handles DOM events with `on:eventname` syntax in your markup, linking elements to functions in your script. This is for user interactions within a component, not for parent-child communication. The footgun is confusing this with custom component events.
Svelte Props: Passing Data with `export let`
In Svelte, `export let` turns a variable into a prop, letting a parent component pass data down. It's how you pass a `userName` to a `ProfileCard` component. The footgun: forgetting `export` creates a private variable, not a prop, so data isn't received.
SvelteKit Adapters: Bridge Your App to Production
A SvelteKit adapter is a power plug for your app, making your universal build fit a specific deployment target like Vercel or a Node server. You configure it based on your host, like `adapter-static` for static sites. The footgun is forgetting one entirely.
SvelteKit: From Zero to Dev Server
Spin up a new SvelteKit app with `npx sv create`. This command scaffolds a project, prompting you to add tools like TypeScript. Then, `npm run dev` starts your dev server. The key footgun: forgetting to install dependencies before starting the server.
Why Svelte Skips the Virtual DOM
Svelte skips the Virtual DOM, treating it as runtime overhead. It acts as a compiler, generating precise JavaScript to update the DOM directly. This avoids the 'diffing' step of frameworks like React, leading to smaller bundles and faster updates.
Svelte: A Compiler, Not Just a Framework
Svelte is a compiler that turns your component files into efficient, imperative vanilla JavaScript at build time. This avoids shipping a large runtime, leading to smaller bundles. The footgun is thinking of it as just a runtime; its power is in the build step.
Get Svelte bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.