MCP Svelte Docs Server

# await-expressions Definition **Definition:** Experimental async template expressions for handling promises directly in markup **Syntax:** `{await promise}` or `{await promise then result}` or `{await promise catch error}` **Parameters:** - `promise` - Promise to await in template - `result` - Variable name for resolved value (optional) - `error` - Variable name for caught error (optional) **Returns:** Rendered content based on promise state **Status:** Experimental feature in Svelte 5 ## Examples ```svelte <!-- Basic await expression --> <script> async function fetchUser(id) { const response = await fetch(`/api/users/${id}`); return response.json(); } let userId = $state(1); </script> <!-- Simple await --> <p>User: {await fetchUser(userId)}</p> <!-- With then/catch --> {#await fetchUser(userId)} <p>Loading user...</p> {:then user} <p>Hello {user.name}!</p> {:catch error} <p>Error: {error.message}</p> {/await} <!-- Inline await with destructuring --> <p>Welcome {await fetchUser(userId).then(u => u.name)}!</p> <!-- Multiple awaits --> <div> <h1>{await getTitle()}</h1> <p>{await getDescription()}</p> <footer>{await getFooter()}</footer> </div> <!-- Conditional await --> {#if userId} <p>User data: {await fetchUser(userId)}</p> {/if} ``` ## Related - `$effect.pending` - For monitoring pending async operations - `$state` - For reactive state that can trigger new awaits - `{#await}` - Traditional await block syntax