Svelte

Svelte 5 Core Knowledge

Full Reference: See advanced.md for WebSocket store patterns, room management, Socket.IO integration, and SvelteKit SSE patterns.

Deep Knowledge: Use mcp__documentation__fetch_docs with technology: svelte for comprehensive documentation.

When NOT to Use This Skill

Skip this skill when:

• Working with Svelte 4 or earlier (use Svelte 4 docs)
• Building React applications (use frontend-react)
• Using Vue framework (use vue-composition)
• Working with Angular (use angular)
• Need only vanilla JavaScript (no framework needed)

Component Structure

<script lang="ts">
  interface Props {
    name: string;
    count?: number;
  }

  let { name, count = 0 }: Props = $props();

  let localState = $state('');
  let doubled = $derived(count * 2);

  function handleClick() {
    localState = 'clicked';
  }
</script>

<div>
  <h1>Hello {name}</h1>
  <p>Count: {count}, Doubled: {doubled}</p>
  <button
</div>

<style>
  div { padding: 1rem; }
</style>

Runes (Svelte 5)

Key Concepts

• No virtual DOM - compiles to vanilla JS
• Scoped CSS by default
• {#if}, {#each}, {#await} blocks
• bind: for two-way binding
• use: for actions (reusable behaviors)

Migration from Svelte 4

<!-- Svelte 4 -->
<script>
  export let count = 0;
  $: doubled = count * 2;
</script>

<!-- Svelte 5 -->
<script>
  let { count = 0 } = $props();
  let doubled = $derived(count * 2);
</script>

Anti-Patterns

Quick Troubleshooting

Production Readiness

Security

<script lang="ts">
  import DOMPurify from 'dompurify';
  let { rawHtml }: { rawHtml: string } = $props();
  let safeHtml = $derived(DOMPurify.sanitize(rawHtml));
</script>

{@html safeHtml}

Testing

import { render, screen } from '@testing-library/svelte';
import userEvent from '@testing-library/user-event';
import Counter from './Counter.svelte';

describe('Counter', () => {
  it('increments count on click', async () => {
    const user = userEvent.setup();
    render(Counter, { props: { initial: 0 } });

    const button = screen.getByRole('button');
    await user.click(button);

    expect(screen.getByText('Count: 1')).toBeInTheDocument();
  });
});

Monitoring Metrics

Checklist

• Svelte 5 runes ($state, $derived, $effect)
• No {@html} with user input
• Error boundaries in SvelteKit
• Virtual lists for large data
• Lazy loaded components
• Proper ARIA attributes
• Testing with @testing-library/svelte
• Server-side rendering enabled
• Prerendering static pages
• Bundle analysis

Reference Documentation

• Runes Cheatsheet
• Component Patterns