2072c359aa
- Gateway proxies /api/brain/* to brain-api:8200/api/* via pangolin network - User identity injected via X-Gateway-User-Id header - Brain app registered in gateway database (sort_order 9) - Added to GATEWAY_KEY_SERVICES for dashboard integration - Tested: health, config, list, create all working through gateway Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
182 lines
50 KiB
HTML
182 lines
50 KiB
HTML
<!doctype html>
|
||
<html lang="en" class="theme-default typo-default">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||
<meta name="theme-color" content="#ff3e00" />
|
||
|
||
<link rel="manifest" href="/manifest.json" />
|
||
<link rel="icon" type="image/png" href="/favicon.png" />
|
||
|
||
<meta name="twitter:site" content="@sveltejs" />
|
||
<meta name="twitter:creator" content="@sveltejs" />
|
||
|
||
<link
|
||
rel="search"
|
||
type="application/opensearchdescription+xml"
|
||
href="/opensearch.xml"
|
||
title="Svelte"
|
||
/>
|
||
|
||
<script>
|
||
document.documentElement.classList.add(
|
||
`font-${localStorage.getItem('svelte:font') ?? 'elegant'}`
|
||
);
|
||
</script>
|
||
|
||
<link href="../_app/immutable/assets/eb-garamond-latin-400-normal.DSJrtJSV.woff2" rel="preload" as="font" type="font/woff2" crossorigin>
|
||
<link href="../_app/immutable/assets/dm-serif-display-latin-400-normal.C5_t9oOD.woff2" rel="preload" as="font" type="font/woff2" crossorigin>
|
||
<link href="../_app/immutable/assets/fira-sans-latin-400-normal.a0AnQzuD.woff2" rel="preload" as="font" type="font/woff2" crossorigin>
|
||
<link href="../_app/immutable/entry/start.Dpr9qRgg.js" rel="modulepreload">
|
||
<link href="../_app/immutable/chunks/qYs81C9B.js" rel="modulepreload">
|
||
<link href="../_app/immutable/chunks/2d-wjCb2.js" rel="modulepreload">
|
||
<link href="../_app/immutable/chunks/DnTnPfQe.js" rel="modulepreload">
|
||
<link href="../_app/immutable/chunks/gDVcjQvr.js" rel="modulepreload">
|
||
<link href="../_app/immutable/entry/app.CtFMjmly.js" rel="modulepreload">
|
||
<link href="../_app/immutable/chunks/Shm_I8ZE.js" rel="modulepreload">
|
||
<link href="../_app/immutable/chunks/Dr15X4ZF.js" rel="modulepreload">
|
||
<link href="../_app/immutable/chunks/cnniI1X3.js" rel="modulepreload">
|
||
<link href="../_app/immutable/nodes/0.1i3xPtY7.js" rel="modulepreload">
|
||
<link href="../_app/immutable/chunks/CkfQRXN1.js" rel="modulepreload">
|
||
<link href="../_app/immutable/chunks/fvbWwVqM.js" rel="modulepreload">
|
||
<link href="../_app/immutable/chunks/BNvkasHt.js" rel="modulepreload">
|
||
<link href="../_app/immutable/chunks/BK_Mg1HC.js" rel="modulepreload">
|
||
<link href="../_app/immutable/chunks/Bk_4QwRM.js" rel="modulepreload">
|
||
<link href="../_app/immutable/chunks/B5Zu4Ce9.js" rel="modulepreload">
|
||
<link href="../_app/immutable/chunks/nNp4wHmj.js" rel="modulepreload">
|
||
<link href="../_app/immutable/chunks/DshYxWiH.js" rel="modulepreload">
|
||
<link href="../_app/immutable/chunks/32oWKRrz.js" rel="modulepreload">
|
||
<link href="../_app/immutable/chunks/BI96k1L2.js" rel="modulepreload">
|
||
<link href="../_app/immutable/chunks/BJLq-hw4.js" rel="modulepreload">
|
||
<link href="../_app/immutable/chunks/CBe-AsYe.js" rel="modulepreload">
|
||
<link href="../_app/immutable/nodes/12.DMYh2ln0.js" rel="modulepreload">
|
||
<link href="../_app/immutable/chunks/J2V5BIVQ.js" rel="modulepreload">
|
||
<link href="../_app/immutable/chunks/QGxEW8Yk.js" rel="modulepreload">
|
||
<!--12qhfyh--><!--[!--><!--]--><!----><!--16r4un1--><script>
|
||
{
|
||
const theme = localStorage.getItem('sv:theme');
|
||
|
||
document.documentElement.classList.add(
|
||
!theme || theme === 'system'
|
||
? window.matchMedia('(prefers-color-scheme: dark)').matches
|
||
? 'dark'
|
||
: 'light'
|
||
: theme
|
||
);
|
||
}
|
||
</script><!----><!----><!--16r4un1--><script>
|
||
{
|
||
const theme = localStorage.getItem('sv:theme');
|
||
|
||
document.documentElement.classList.add(
|
||
!theme || theme === 'system'
|
||
? window.matchMedia('(prefers-color-scheme: dark)').matches
|
||
? 'dark'
|
||
: 'light'
|
||
: theme
|
||
);
|
||
}
|
||
</script><!----><!----><!--1teoznn--><meta name="twitter:card" content="summary_large_image"/> <meta name="twitter:title" content="Svelte 5 Release Candidate"/> <meta name="twitter:description" content="We’re almost there"/> <meta name="description" content="We’re almost there"/> <meta name="twitter:image" content="https://svelte.dev/blog/svelte-5-release-candidate/card.png"/> <meta name="og:image" content="https://svelte.dev/blog/svelte-5-release-candidate/card.png"/><!----><title>Svelte 5 Release Candidate</title>
|
||
<style>svg.svelte-hfc14b{vertical-align:middle;-o-object-fit:contain;object-fit:contain;transform-origin:50%;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;fill:none;position:relative;overflow:hidden}
|
||
|
||
.byline.svelte-56vzk0{font:var(--sk-font-ui-small);text-transform:uppercase;padding:1rem 0 0}
|
||
</style>
|
||
<link href="../_app/immutable/assets/stores.DoLKfBGK.css" rel="stylesheet" disabled media="(max-width: 0)">
|
||
<link href="../_app/immutable/assets/search.Bf59X-yG.css" rel="stylesheet">
|
||
<link href="../_app/immutable/assets/Text.VHKouIL-.css" rel="stylesheet">
|
||
<link href="../_app/immutable/assets/components.CAIh7XZF.css" rel="stylesheet">
|
||
<link href="../_app/immutable/assets/0.qrmhJS98.css" rel="stylesheet">
|
||
<link href="../_app/immutable/assets/Byline.DhJp-sWa.css" rel="stylesheet" disabled media="(max-width: 0)">
|
||
<link href="../_app/immutable/assets/docs.BVlnJMBK.css" rel="stylesheet">
|
||
<link href="../_app/immutable/assets/12.D9mca-K_.css" rel="stylesheet">
|
||
</head>
|
||
<body data-sveltekit-preload-data="hover">
|
||
<script>
|
||
{
|
||
const div = document.createElement('div');
|
||
|
||
Object.assign(div.style, {
|
||
width: '100px',
|
||
height: '100px',
|
||
overflow: 'scroll',
|
||
position: 'absolute',
|
||
top: '-9999px'
|
||
});
|
||
|
||
document.body.append(div);
|
||
|
||
document.documentElement.classList.add(
|
||
div.offsetWidth - div.clientWidth > 0 ? 'scrollbars-visible' : 'scrollbars-invisible'
|
||
);
|
||
|
||
div.remove();
|
||
}
|
||
</script>
|
||
|
||
<div style="height: 100%"><!--[--><!--[--><!--[--><div style="display: none"><svg><symbol id="arrow-left" class="icon" viewBox="0 0 24 24"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></symbol><symbol id="arrow-right" class="icon" viewBox="0 0 24 24"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></symbol><symbol id="arrow-right-chevron" viewBox="0 0 24 24"><path fill="currentColor" d="M8.7 17.3q-.275-.275-.275-.7t.275-.7l3.9-3.9l-3.9-3.9q-.275-.275-.275-.7t.275-.7q.275-.275.7-.275t.7.275l4.6 4.6q.15.15.213.325t.062.375q0 .2-.063.375t-.212.325l-4.6 4.6q-.275.275-.7.275t-.7-.275Z"></path></symbol><symbol id="arrow-up" class="icon" viewBox="0 0 24 24"><line x1="12" y1="19" x2="12" y2="5"></line><polyline points="5 12 12 5 19 12"></polyline></symbol><symbol id="arrow-down" class="icon" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"></line><polyline points="19 12 12 19 5 12"></polyline></symbol><symbol id="check" class="icon" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"></polyline></symbol><symbol id="close" class="icon" viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></symbol><symbol id="download" class="icon" viewBox="0 0 24 24"><path d="M21 15V19A2 2 0 0 1 19 21H5A2 2 0 0 1 3 19V15"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></symbol><symbol id="edit" class="icon" viewBox="0 0 24 24"><path d="M20 14.66V20a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h5.34"></path><polygon points="18 2 22 6 12 16 8 16 8 12 18 2"></polygon></symbol><symbol id="git-branch" class="icon" viewBox="0 0 24 24"><line x1="6" y1="3" x2="6" y2="15"></line><circle cx="18" cy="6" r="3"></circle><circle cx="6" cy="18" r="3"></circle><path d="M18 9a9 9 0 0 1-9 9"></path></symbol><symbol id="log-in" class="icon" viewBox="0 0 24 24"><path d="M15 3H19A2 2 0 0 1 21 5V19A2 2 0 0 1 19 21H15"></path><polyline points="10 17 15 12 10 7"></polyline><line x1="15" y1="12" x2="3" y2="12"></line></symbol><symbol id="maximize" class="icon" viewBox="0 0 24 24"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"></path></symbol><symbol id="maximize-2" class="icon" viewBox="0 0 24 24"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" y1="3" x2="14" y2="10"></line><line x1="3" y1="21" x2="10" y2="14"></line></symbol><symbol id="menu" viewBox="0 0 48 48"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M7.95 11.95h32m-32 12h32m-32 12h32"></path></symbol><symbol id="message-square" class="icon" viewBox="0 0 24 24"><g transform="translate(0, 1)"><path d="M16.5 19H11V15H18V11H22V19H19.5L18 20.5L16.5 19Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M2 3H18V15H8.5L6.5 17L4.5 15H2V3 M5 10L5 12L10 12L10 10 M5 6L5 9L13 9L13 6Z" fill="currentColor" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></g></symbol><symbol id="minus" class="icon" viewBox="0 0 24 24"><line x1="5" y1="12" x2="19" y2="12"></line></symbol><symbol id="plus" class="icon" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></symbol><symbol id="save" class="icon" viewBox="0 0 24 24"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path><polyline points="17 21 17 13 7 13 7 21"></polyline><polyline points="7 3 7 8 15 8"></polyline></symbol><symbol id="link" class="icon" viewBox="0 0 24 24"><path d="M9,7L6,7A2 2 0 0 0 6,17L9,17"></path><path d="M15,7L18,7A2 2 0 0 1 18,17L15,17"></path><path d="M7,12L17,12"></path></symbol><symbol viewBox="0 0 24 24" id="external-link"><path fill="currentColor" stroke-width="0" d="m16 8.4l-8.875 8.9q-.3.3-.713.3t-.712-.3q-.3-.3-.3-.713t.3-.712L14.6 7H7q-.425 0-.713-.288T6 6q0-.425.288-.713T7 5h10q.425 0 .713.288T18 6v10q0 .425-.288.713T17 17q-.425 0-.713-.288T16 16V8.4Z"></path></symbol><symbol id="chevron-up" class="icon" viewBox="0 0 24 24"><polyline points="18 15 12 9 6 15"></polyline></symbol><symbol id="chevron-down" class="icon" viewBox="0 0 24 24"><path d="m6 9 6 6 6-6"></path></symbol><symbol id="delete" class="icon" viewBox="0 0 24 24"><path fill="currentColor" stroke="none" d="M22 4.2h-5.6L15 1.6c-.1-.2-.4-.4-.7-.4H9.6c-.2 0-.5.2-.6.4L7.6 4.2H2c-.4 0-.8.4-.8.8s.4.8.8.8h1.8V22c0 .4.3.8.8.8h15c.4 0 .8-.3.8-.8V5.8H22c.4 0 .8-.3.8-.8s-.4-.8-.8-.8zM10.8 16.5c0 .4-.3.8-.8.8s-.8-.3-.8-.8V10c0-.4.3-.8.8-.8s.8.3.8.8v6.5zm4 0c0 .4-.3.8-.8.8s-.8-.3-.8-.8V10c0-.4.3-.8.8-.8s.8.3.8.8v6.5z"></path></symbol><symbol id="home" viewBox="0 0 256 256"><path fill="currentColor" d="m221.56 100.85l-79.95-75.47l-.16-.15a19.93 19.93 0 0 0-26.91 0l-.17.15l-79.93 75.47a20.07 20.07 0 0 0-6.44 14.7V208a20 20 0 0 0 20 20h48a20 20 0 0 0 20-20v-44h24v44a20 20 0 0 0 20 20h48a20 20 0 0 0 20-20v-92.45a20.07 20.07 0 0 0-6.44-14.7ZM204 204h-40v-44a20 20 0 0 0-20-20h-32a20 20 0 0 0-20 20v44H52v-86.72l76-71.75l76 71.75Z"></path></symbol><symbol id="search" viewBox="0 0 24 24"><path stroke-width="0.2" fill="currentColor" d="m18.9 20.3l-5.6-5.6q-.75.6-1.725.95T9.5 16q-2.725 0-4.612-1.888T3 9.5q0-2.725 1.888-4.612T9.5 3q2.725 0 4.612 1.888T16 9.5q0 1.1-.35 2.075T14.7 13.3l5.625 5.625q.275.275.275.675t-.3.7q-.275.275-.7.275t-.7-.275ZM9.5 14q1.875 0 3.188-1.313T14 9.5q0-1.875-1.313-3.188T9.5 5Q7.625 5 6.312 6.313T5 9.5q0 1.875 1.313 3.188T9.5 14Z"></path></symbol><symbol id="docs" viewBox="0 0 16 16"><path fill="currentColor" d="M1 3.25C1 2.56 1.56 2 2.249 2h.5c.69 0 1.248.56 1.248 1.25v9.495c0 .69-.559 1.25-1.248 1.25h-.5A1.25 1.25 0 0 1 1 12.744V3.249ZM2.249 3a.25.25 0 0 0-.25.25v9.495c0 .138.112.25.25.25h.5a.25.25 0 0 0 .25-.25V3.249a.25.25 0 0 0-.25-.25h-.5Zm2.748.25c0-.69.559-1.25 1.249-1.25h.5c.689 0 1.248.56 1.248 1.25v9.495c0 .69-.56 1.25-1.249 1.25h-.5a1.25 1.25 0 0 1-1.248-1.25V3.249ZM6.246 3a.25.25 0 0 0-.25.25v9.495c0 .138.112.25.25.25h.5a.25.25 0 0 0 .249-.25V3.249a.25.25 0 0 0-.25-.25h-.5Zm5.726 1.777a1.249 1.249 0 0 0-1.57-.713l-.583.204a1.25 1.25 0 0 0-.746 1.645l2.937 7.304c.249.62.94.933 1.571.713l.582-.204a1.25 1.25 0 0 0 .746-1.646l-2.937-7.303Zm-1.24.23a.25.25 0 0 1 .313.143l2.937 7.303a.25.25 0 0 1-.149.33l-.582.203a.25.25 0 0 1-.314-.142L10 5.54a.25.25 0 0 1 .149-.329l.582-.204Z"></path></symbol><symbol id="contents" viewBox="0 0 256 256" stroke-width="0"><path fill="currentColor" d="M224 44h-64a43.86 43.86 0 0 0-32 13.85A43.86 43.86 0 0 0 96 44H32a20 20 0 0 0-20 20v128a20 20 0 0 0 20 20h64a20 20 0 0 1 20 20a12 12 0 0 0 24 0a20 20 0 0 1 20-20h64a20 20 0 0 0 20-20V64a20 20 0 0 0-20-20ZM96 188H36V68h60a20 20 0 0 1 20 20v104.81A43.79 43.79 0 0 0 96 188Zm124 0h-60a43.71 43.71 0 0 0-20 4.83V88a20 20 0 0 1 20-20h60Z"></path></symbol><symbol viewBox="0 0 24 24" id="copy-to-clipboard-empty"><path fill="currentColor" d="M5 22q-.825 0-1.413-.588T3 20V6h2v14h11v2H5Zm4-4q-.825 0-1.413-.588T7 16V4q0-.825.588-1.413T9 2h9q.825 0 1.413.588T20 4v12q0 .825-.588 1.413T18 18H9Zm0-2h9V4H9v12Zm0 0V4v12Z"></path></symbol><symbol viewBox="0 0 24 24" id="copy-to-clipboard-filled"><path fill="currentColor" d="M5 22q-.825 0-1.413-.588T3 20V6h2v14h11v2H5Zm4-4q-.825 0-1.413-.588T7 16V4q0-.825.588-1.413T9 2h9q.825 0 1.413.588T20 4v12q0 .825-.588 1.413T18 18H9Z"></path></symbol><symbol viewBox="0 0 24 24" id="font-toggle"><g stroke="currentColor"><path d="m3 15 4-8 4 8"></path><path d="M4 13h6"></path><circle cx="18" cy="12" r="3"></circle><path d="M21 9v6"></path></g></symbol></svg></div><!----> <!--[!--><!--]--> <!--[--><a href="#main" class="svelte-1kjmc9y"><!--[!-->Skip to main content<!--]--></a><!----> <nav aria-label="Primary" class="svelte-wf8082 visible"><a class="home-link svelte-wf8082" href="/" title="Homepage" aria-label="Svelte"></a> <!--[--><div class="current-section mobile svelte-wf8082">Blog</div><!--]--> <div class="desktop svelte-wf8082"><div class="links svelte-wf8082"><!--[--><!--[--><div class="dropdown svelte-fwukmr"><a href="/docs" class="svelte-wf8082">Docs <svg width="20" height="20" class="svelte-hfc14b"><use href="#chevron-down"></use></svg><!----></a><!----> <nav class="dropdown-content svelte-fwukmr"><div class="hover-menu svelte-1ftqc6l"><!--[--><a class="secondary svelte-wf8082" href="/docs/svelte">Svelte</a><a class="secondary svelte-wf8082" href="/docs/kit">SvelteKit</a><a class="secondary svelte-wf8082" href="/docs/cli">CLI</a><a class="secondary svelte-wf8082" href="/docs/ai">AI</a><!--]--><!----></div><!----></nav></div><!--]--><!--[!--><a href="/tutorial" class="svelte-wf8082">Tutorial</a><!--]--><!--[!--><a href="/packages" class="svelte-wf8082">Packages</a><!--]--><!--[!--><a href="/playground" class="svelte-wf8082">Playground</a><!--]--><!--[!--><a href="/blog" aria-current="page" class="svelte-wf8082">Blog</a><!--]--><!--]--></div> <div class="menu svelte-wf8082"><form class="search-container svelte-curb4c" action="/search"><input value="" type="search" name="q" placeholder="Search" aria-label="Search" spellcheck="false" class="svelte-curb4c"/> <!--[!--><!--]--></form><!----> <div class="external-links svelte-wf8082"><a href="/chat" aria-label="Discord Chat" class="svelte-wf8082"><span data-icon="discord" class="svelte-wf8082"></span></a> <a href="https://bsky.app/profile/svelte.dev" aria-label="Svelte on Bluesky" class="svelte-wf8082"><span data-icon="bluesky" class="svelte-wf8082"></span></a> <a href="https://github.com/sveltejs" aria-label="GitHub Organization" class="svelte-wf8082"><span data-icon="github" class="svelte-wf8082"></span></a></div> <button class="raised svelte-ocz8b7" type="button" aria-pressed="false" aria-label="Toggle font"><span class="icon svelte-ocz8b7"></span></button><!----> <button class="raised" type="button" aria-pressed="false" aria-label="Toggle dark mode"><span class="icon svelte-16r4un1"></span></button><!----></div></div> <div class="mobile mobile-menu svelte-wf8082"><button aria-label="Search" class="raised icon search"><svg width="18" height="18" class="svelte-hfc14b"><use href="#search"></use></svg><!----></button> <button class="raised svelte-ocz8b7" type="button" aria-pressed="false" aria-label="Toggle font"><span class="icon svelte-ocz8b7"></span></button><!----> <button class="raised" type="button" aria-pressed="false" aria-label="Toggle dark mode"><span class="icon svelte-16r4un1"></span></button><!----> <button aria-label="Toggle menu" aria-expanded="false" class="menu-toggle raised icon"><svg width="16" height="16" class="svelte-hfc14b"><use href="#menu"></use></svg><!----></button></div></nav> <!--[!--><!--]--><!----><!--]--> <!--[!--><!--]--> <main id="main" class="svelte-1ftfg6q"><!--[!--><!--[--><article class="svelte-1teoznn"><header><h1 class="svelte-1teoznn">Svelte 5 Release Candidate</h1> <p class="svelte-1teoznn"><!---->We’re almost there<!----></p> <p class="byline svelte-56vzk0"><!--[--><!----><a href="https://svelte.dev/">The Svelte team<!----></a><!----><!--[!--><!--]--> <!--[!--><!--]--><!--]--> <time datetime="2024-04-30">Apr 30 2024</time></p><!----></header> <div class="text svelte-h44pz9"><!----><p>Svelte 5 is now in the Release Candidate phase. This means that the design of the framework is largely settled, with no anticipated breaking changes between now and the stable release, and that the most egregious bugs have been stomped.</p>
|
||
<p>It <em>doesn't</em> mean that it's ready for production, or that nothing will change between now and 5.0. But if you've held off on dabbling with Svelte 5 during the public beta phase, now is a great time to try it out. You can select the 'Try the Svelte 5 preview' option when starting a new SvelteKit project...</p>
|
||
<div class="code-block"><div class="controls"><button class="copy-to-clipboard raised" title="Copy to clipboard" aria-label="Copy to clipboard"></button></div><pre data-js data-ts data-language="bash" class="shiki css-variables" style="background-color:var(--shiki-background);color:var(--shiki-foreground)"><code><span class="line"><span style="color:var(--shiki-token-function)">npm</span> <span style="color:var(--shiki-token-string)">create</span> <span style="color:var(--shiki-token-string)">svelte@latest</span></span></code></pre></div><p>...or you can add Svelte 5 to an existing project...</p>
|
||
<div class="code-block"><div class="controls"><button class="copy-to-clipboard raised" title="Copy to clipboard" aria-label="Copy to clipboard"></button></div><pre data-js data-ts data-language="bash" class="shiki css-variables" style="background-color:var(--shiki-background);color:var(--shiki-foreground)"><code><span class="line"><span style="color:var(--shiki-token-function)">npm</span> <span style="color:var(--shiki-token-string)">install</span> <span style="color:var(--shiki-token-string)">--save-dev</span> <span style="color:var(--shiki-token-string)">svelte@next</span></span></code></pre></div><p>...or you can tinker in the <a href="https://svelte-5-preview.vercel.app">Svelte 5 Preview</a> website.</p>
|
||
<h2 id="I'm-out-of-the-loop.-What's-Svelte-5"><span>I'm out of the loop. What's Svelte 5?</span><a href="#I'm-out-of-the-loop.-What's-Svelte-5" class="permalink" aria-label="permalink"></a></h2><p>For the last several months, we've been hard at work rewriting Svelte from the ground up to be faster, easier to use and more robust, applying the lessons we've collectively learned from several years of building apps with Svelte.</p>
|
||
<p>You can learn more about the new features from the <a href="https://svelte-5-preview.vercel.app/docs">preview documentation</a>, and by watching the presentation from the most recent <a href="https://www.sveltesummit.com/">Svelte Summit</a>:</p>
|
||
<div class="max">
|
||
<figure style="max-width: 1040px; margin: 0 auto">
|
||
<div style="aspect-ratio: 1.755; position: relative; margin: 0 auto;">
|
||
<iframe style="position: absolute; width: 100%; height: 100%; left: 0; top: 0; margin: 0;" src="https://www.youtube-nocookie.com/embed/xCeYmdukOKI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
||
</div>
|
||
|
||
<figcaption>What You Can Do For Your Framework</figcaption>
|
||
</figure>
|
||
</div>
|
||
|
||
<p>The highlights include:</p>
|
||
<ul>
|
||
<li><a href="/blog/runes">runes</a>, the new signal-powered reactivity API that sits at the heart of Svelte 5 and unlocks <em>universal, fine-grained reactivity</em></li>
|
||
<li>overhauled event handling with less boilerplate and more flexibility</li>
|
||
<li>better component composition through <a href="https://svelte-5-preview.vercel.app/docs/snippets"><em>snippets</em></a></li>
|
||
<li>native TypeScript support, including inside your markup</li>
|
||
</ul>
|
||
<h2 id="Will-I-need-to-rewrite-everything"><span>Will I need to rewrite everything?</span><a href="#Will-I-need-to-rewrite-everything" class="permalink" aria-label="permalink"></a></h2><p>Components written for Svelte 4 will continue to work with Svelte 5, with a <a href="https://svelte-5-preview.vercel.app/docs/breaking-changes">handful of exceptions</a>. If you install Svelte 5 in an existing app, the only real change should be that things get faster. If you maintain a Svelte app, we recommend updating to Svelte 5 as soon as it's stable. (In the meantime, if you're currently on Svelte 3 then you should <a href="/docs/v4-migration-guide">update to Svelte 4</a>.)</p>
|
||
<p>Eventually — in Svelte 6 or 7 — support for certain Svelte 4 features will be dropped in favour of their modern replacements. Because of that, we do encourage you to incrementally migrate your components (you can mix and match old and new components in the same app). We'll release a command line tool for automating much of this migration, and you can try an experimental version of that tool in the <a href="https://svelte-5-preview.vercel.app">playground</a> by pasting in some Svelte 4 code and clicking the 'migrate' button.</p>
|
||
<h2 id="When-is-the-stable-release"><span>When is the stable release?</span><a href="#When-is-the-stable-release" class="permalink" aria-label="permalink"></a></h2><p><a href="https://github.com/sveltejs/svelte/milestone/9">When it's done</a>, and we've updated all the documentation. Bear with us!</p>
|
||
<!----><!----></div><!----></article><!--]--><!--]--><!----><!----></main> <!--[--><!--[!--><!--]--><!--]--><!----><!----> <!--[!--><!--]--><!--]--><!--]--> <!--[!--><!--]--><!--]-->
|
||
|
||
<script>
|
||
{
|
||
__sveltekit_xzmsm7 = {
|
||
base: new URL("..", location).pathname.slice(0, -1)
|
||
};
|
||
|
||
const element = document.currentScript.parentElement;
|
||
|
||
Promise.all([
|
||
import("../_app/immutable/entry/start.Dpr9qRgg.js"),
|
||
import("../_app/immutable/entry/app.CtFMjmly.js")
|
||
]).then(([kit, app]) => {
|
||
kit.start(app, element, {
|
||
node_ids: [0, 12],
|
||
data: [{type:"data",data:{nav_links:[{title:"Docs",slug:"docs",sections:[{title:"Svelte",path:"/docs/svelte",sections:[{title:"Introduction",sections:[{title:"Overview",path:"/docs/svelte/overview"},{title:"Getting started",path:"/docs/svelte/getting-started"},{title:".svelte files",path:"/docs/svelte/svelte-files"},{title:".svelte.js and .svelte.ts files",path:"/docs/svelte/svelte-js-files"}]},{title:"Runes",sections:[{title:"What are runes?",path:"/docs/svelte/what-are-runes"},{title:"$state",path:"/docs/svelte/$state"},{title:"$derived",path:"/docs/svelte/$derived"},{title:"$effect",path:"/docs/svelte/$effect"},{title:"$props",path:"/docs/svelte/$props"},{title:"$bindable",path:"/docs/svelte/$bindable"},{title:"$inspect",path:"/docs/svelte/$inspect"},{title:"$host",path:"/docs/svelte/$host"}]},{title:"Template syntax",sections:[{title:"Basic markup",path:"/docs/svelte/basic-markup"},{title:"{#if ...}",path:"/docs/svelte/if"},{title:"{#each ...}",path:"/docs/svelte/each"},{title:"{#key ...}",path:"/docs/svelte/key"},{title:"{#await ...}",path:"/docs/svelte/await"},{title:"{#snippet ...}",path:"/docs/svelte/snippet"},{title:"{@render ...}",path:"/docs/svelte/@render"},{title:"{@html ...}",path:"/docs/svelte/@html"},{title:"{@attach ...}",path:"/docs/svelte/@attach"},{title:"{@const ...}",path:"/docs/svelte/@const"},{title:"{@debug ...}",path:"/docs/svelte/@debug"},{title:"bind:",path:"/docs/svelte/bind"},{title:"use:",path:"/docs/svelte/use"},{title:"transition:",path:"/docs/svelte/transition"},{title:"in: and out:",path:"/docs/svelte/in-and-out"},{title:"animate:",path:"/docs/svelte/animate"},{title:"style:",path:"/docs/svelte/style"},{title:"class",path:"/docs/svelte/class"},{title:"await",path:"/docs/svelte/await-expressions"}]},{title:"Styling",sections:[{title:"Scoped styles",path:"/docs/svelte/scoped-styles"},{title:"Global styles",path:"/docs/svelte/global-styles"},{title:"Custom properties",path:"/docs/svelte/custom-properties"},{title:"Nested \u003Cstyle> elements",path:"/docs/svelte/nested-style-elements"}]},{title:"Special elements",sections:[{title:"\u003Csvelte:boundary>",path:"/docs/svelte/svelte-boundary"},{title:"\u003Csvelte:window>",path:"/docs/svelte/svelte-window"},{title:"\u003Csvelte:document>",path:"/docs/svelte/svelte-document"},{title:"\u003Csvelte:body>",path:"/docs/svelte/svelte-body"},{title:"\u003Csvelte:head>",path:"/docs/svelte/svelte-head"},{title:"\u003Csvelte:element>",path:"/docs/svelte/svelte-element"},{title:"\u003Csvelte:options>",path:"/docs/svelte/svelte-options"}]},{title:"Runtime",sections:[{title:"Stores",path:"/docs/svelte/stores"},{title:"Context",path:"/docs/svelte/context"},{title:"Lifecycle hooks",path:"/docs/svelte/lifecycle-hooks"},{title:"Imperative component API",path:"/docs/svelte/imperative-component-api"},{title:"Hydratable data",path:"/docs/svelte/hydratable"}]},{title:"Misc",sections:[{title:"Best practices",path:"/docs/svelte/best-practices"},{title:"Testing",path:"/docs/svelte/testing"},{title:"TypeScript",path:"/docs/svelte/typescript"},{title:"Custom elements",path:"/docs/svelte/custom-elements"},{title:"Svelte 4 migration guide",path:"/docs/svelte/v4-migration-guide"},{title:"Svelte 5 migration guide",path:"/docs/svelte/v5-migration-guide"},{title:"Frequently asked questions",path:"/docs/svelte/faq"}]},{title:"Reference",sections:[{title:"svelte",path:"/docs/svelte/svelte"},{title:"svelte/action",path:"/docs/svelte/svelte-action"},{title:"svelte/animate",path:"/docs/svelte/svelte-animate"},{title:"svelte/attachments",path:"/docs/svelte/svelte-attachments"},{title:"svelte/compiler",path:"/docs/svelte/svelte-compiler"},{title:"svelte/easing",path:"/docs/svelte/svelte-easing"},{title:"svelte/events",path:"/docs/svelte/svelte-events"},{title:"svelte/legacy",path:"/docs/svelte/svelte-legacy"},{title:"svelte/motion",path:"/docs/svelte/svelte-motion"},{title:"svelte/reactivity/window",path:"/docs/svelte/svelte-reactivity-window"},{title:"svelte/reactivity",path:"/docs/svelte/svelte-reactivity"},{title:"svelte/server",path:"/docs/svelte/svelte-server"},{title:"svelte/store",path:"/docs/svelte/svelte-store"},{title:"svelte/transition",path:"/docs/svelte/svelte-transition"},{title:"Compiler errors",path:"/docs/svelte/compiler-errors"},{title:"Compiler warnings",path:"/docs/svelte/compiler-warnings"},{title:"Runtime errors",path:"/docs/svelte/runtime-errors"},{title:"Runtime warnings",path:"/docs/svelte/runtime-warnings"}]},{title:"Legacy APIs",sections:[{title:"Overview",path:"/docs/svelte/legacy-overview"},{title:"Reactive let/var declarations",path:"/docs/svelte/legacy-let"},{title:"Reactive $: statements",path:"/docs/svelte/legacy-reactive-assignments"},{title:"export let",path:"/docs/svelte/legacy-export-let"},{title:"$$props and $$restProps",path:"/docs/svelte/legacy-$$props-and-$$restProps"},{title:"on:",path:"/docs/svelte/legacy-on"},{title:"\u003Cslot>",path:"/docs/svelte/legacy-slots"},{title:"$$slots",path:"/docs/svelte/legacy-$$slots"},{title:"\u003Csvelte:fragment>",path:"/docs/svelte/legacy-svelte-fragment"},{title:"\u003Csvelte:component>",path:"/docs/svelte/legacy-svelte-component"},{title:"\u003Csvelte:self>",path:"/docs/svelte/legacy-svelte-self"},{title:"Imperative component API",path:"/docs/svelte/legacy-component-api"}]}]},{title:"SvelteKit",path:"/docs/kit",sections:[{title:"Getting started",sections:[{title:"Introduction",path:"/docs/kit/introduction"},{title:"Creating a project",path:"/docs/kit/creating-a-project"},{title:"Project types",path:"/docs/kit/project-types"},{title:"Project structure",path:"/docs/kit/project-structure"},{title:"Web standards",path:"/docs/kit/web-standards"}]},{title:"Core concepts",sections:[{title:"Routing",path:"/docs/kit/routing"},{title:"Loading data",path:"/docs/kit/load"},{title:"Form actions",path:"/docs/kit/form-actions"},{title:"Page options",path:"/docs/kit/page-options"},{title:"State management",path:"/docs/kit/state-management"},{title:"Remote functions",path:"/docs/kit/remote-functions"}]},{title:"Build and deploy",sections:[{title:"Building your app",path:"/docs/kit/building-your-app"},{title:"Adapters",path:"/docs/kit/adapters"},{title:"Zero-config deployments",path:"/docs/kit/adapter-auto"},{title:"Node servers",path:"/docs/kit/adapter-node"},{title:"Static site generation",path:"/docs/kit/adapter-static"},{title:"Single-page apps",path:"/docs/kit/single-page-apps"},{title:"Cloudflare",path:"/docs/kit/adapter-cloudflare"},{title:"Cloudflare Workers",path:"/docs/kit/adapter-cloudflare-workers"},{title:"Netlify",path:"/docs/kit/adapter-netlify"},{title:"Vercel",path:"/docs/kit/adapter-vercel"},{title:"Writing adapters",path:"/docs/kit/writing-adapters"}]},{title:"Advanced",sections:[{title:"Advanced routing",path:"/docs/kit/advanced-routing"},{title:"Hooks",path:"/docs/kit/hooks"},{title:"Errors",path:"/docs/kit/errors"},{title:"Link options",path:"/docs/kit/link-options"},{title:"Service workers",path:"/docs/kit/service-workers"},{title:"Server-only modules",path:"/docs/kit/server-only-modules"},{title:"Snapshots",path:"/docs/kit/snapshots"},{title:"Shallow routing",path:"/docs/kit/shallow-routing"},{title:"Observability",path:"/docs/kit/observability"},{title:"Packaging",path:"/docs/kit/packaging"}]},{title:"Best practices",sections:[{title:"Auth",path:"/docs/kit/auth"},{title:"Performance",path:"/docs/kit/performance"},{title:"Icons",path:"/docs/kit/icons"},{title:"Images",path:"/docs/kit/images"},{title:"Accessibility",path:"/docs/kit/accessibility"},{title:"SEO",path:"/docs/kit/seo"}]},{title:"Appendix",sections:[{title:"Frequently asked questions",path:"/docs/kit/faq"},{title:"Integrations",path:"/docs/kit/integrations"},{title:"Breakpoint Debugging",path:"/docs/kit/debugging"},{title:"Migrating to SvelteKit v2",path:"/docs/kit/migrating-to-sveltekit-2"},{title:"Migrating from Sapper",path:"/docs/kit/migrating"},{title:"Additional resources",path:"/docs/kit/additional-resources"},{title:"Glossary",path:"/docs/kit/glossary"}]},{title:"Reference",sections:[{title:"@sveltejs/kit",path:"/docs/kit/@sveltejs-kit"},{title:"@sveltejs/kit/hooks",path:"/docs/kit/@sveltejs-kit-hooks"},{title:"@sveltejs/kit/node/polyfills",path:"/docs/kit/@sveltejs-kit-node-polyfills"},{title:"@sveltejs/kit/node",path:"/docs/kit/@sveltejs-kit-node"},{title:"@sveltejs/kit/vite",path:"/docs/kit/@sveltejs-kit-vite"},{title:"$app/environment",path:"/docs/kit/$app-environment"},{title:"$app/forms",path:"/docs/kit/$app-forms"},{title:"$app/navigation",path:"/docs/kit/$app-navigation"},{title:"$app/paths",path:"/docs/kit/$app-paths"},{title:"$app/server",path:"/docs/kit/$app-server"},{title:"$app/state",path:"/docs/kit/$app-state"},{title:"$app/stores",path:"/docs/kit/$app-stores"},{title:"$app/types",path:"/docs/kit/$app-types"},{title:"$env/dynamic/private",path:"/docs/kit/$env-dynamic-private"},{title:"$env/dynamic/public",path:"/docs/kit/$env-dynamic-public"},{title:"$env/static/private",path:"/docs/kit/$env-static-private"},{title:"$env/static/public",path:"/docs/kit/$env-static-public"},{title:"$lib",path:"/docs/kit/$lib"},{title:"$service-worker",path:"/docs/kit/$service-worker"},{title:"Configuration",path:"/docs/kit/configuration"},{title:"Command Line Interface",path:"/docs/kit/cli"},{title:"Types",path:"/docs/kit/types"}]}]},{title:"CLI",path:"/docs/cli",sections:[{title:"Introduction",sections:[{title:"Overview",path:"/docs/cli/overview"},{title:"Frequently asked questions",path:"/docs/cli/faq"}]},{title:"Commands",sections:[{title:"sv create",path:"/docs/cli/sv-create"},{title:"sv add",path:"/docs/cli/sv-add"},{title:"sv check",path:"/docs/cli/sv-check"},{title:"sv migrate",path:"/docs/cli/sv-migrate"}]},{title:"Add-ons",sections:[{title:"devtools-json",path:"/docs/cli/devtools-json"},{title:"drizzle",path:"/docs/cli/drizzle"},{title:"eslint",path:"/docs/cli/eslint"},{title:"better-auth",path:"/docs/cli/better-auth"},{title:"mcp",path:"/docs/cli/mcp"},{title:"mdsvex",path:"/docs/cli/mdsvex"},{title:"paraglide",path:"/docs/cli/paraglide"},{title:"playwright",path:"/docs/cli/playwright"},{title:"prettier",path:"/docs/cli/prettier"},{title:"storybook",path:"/docs/cli/storybook"},{title:"sveltekit-adapter",path:"/docs/cli/sveltekit-adapter"},{title:"tailwindcss",path:"/docs/cli/tailwind"},{title:"vitest",path:"/docs/cli/vitest"}]},{title:"API",sections:[{title:"add-on",path:"/docs/cli/add-on"},{title:"sv-utils",path:"/docs/cli/sv-utils"}]}]},{title:"AI",path:"/docs/ai",sections:[{title:"Introduction",sections:[{title:"Overview",path:"/docs/ai/overview"}]},{title:"Setup",sections:[{title:"Local setup",path:"/docs/ai/local-setup"},{title:"Remote setup",path:"/docs/ai/remote-setup"}]},{title:"Capabilities",sections:[{title:"Tools",path:"/docs/ai/tools"},{title:"Resources",path:"/docs/ai/resources"},{title:"Prompts",path:"/docs/ai/prompts"}]},{title:"Claude Code Plugin",sections:[{title:"Overview",path:"/docs/ai/plugin"},{title:"Subagent",path:"/docs/ai/subagent"}]},{title:"OpenCode Plugin",sections:[{title:"Overview",path:"/docs/ai/opencode-plugin"},{title:"Subagent",path:"/docs/ai/opencode-subagent"}]},{title:"Skills",sections:[{title:"Overview",path:"/docs/ai/skills"}]}]}]},{title:"Tutorial",slug:"tutorial",sections:[{title:"Basic Svelte",sections:[{title:"Introduction",sections:[{title:"Welcome to Svelte",path:"/tutorial/svelte/welcome-to-svelte"},{title:"Your first component",path:"/tutorial/svelte/your-first-component"},{title:"Dynamic attributes",path:"/tutorial/svelte/dynamic-attributes"},{title:"Styling",path:"/tutorial/svelte/styling"},{title:"Nested components",path:"/tutorial/svelte/nested-components"},{title:"HTML tags",path:"/tutorial/svelte/html-tags"}]},{title:"Reactivity",sections:[{title:"State",path:"/tutorial/svelte/state"},{title:"Deep state",path:"/tutorial/svelte/deep-state"},{title:"Derived state",path:"/tutorial/svelte/derived-state"},{title:"Inspecting state",path:"/tutorial/svelte/inspecting-state"},{title:"Effects",path:"/tutorial/svelte/effects"},{title:"Universal reactivity",path:"/tutorial/svelte/universal-reactivity"}]},{title:"Props",sections:[{title:"Declaring props",path:"/tutorial/svelte/declaring-props"},{title:"Default values",path:"/tutorial/svelte/default-values"},{title:"Spread props",path:"/tutorial/svelte/spread-props"}]},{title:"Logic",sections:[{title:"If blocks",path:"/tutorial/svelte/if-blocks"},{title:"Else blocks",path:"/tutorial/svelte/else-blocks"},{title:"Else-if blocks",path:"/tutorial/svelte/else-if-blocks"},{title:"Each blocks",path:"/tutorial/svelte/each-blocks"},{title:"Keyed each blocks",path:"/tutorial/svelte/keyed-each-blocks"},{title:"Await blocks",path:"/tutorial/svelte/await-blocks"}]},{title:"Events",sections:[{title:"DOM events",path:"/tutorial/svelte/dom-events"},{title:"Inline handlers",path:"/tutorial/svelte/inline-handlers"},{title:"Capturing",path:"/tutorial/svelte/capturing"},{title:"Component events",path:"/tutorial/svelte/component-events"},{title:"Spreading events",path:"/tutorial/svelte/spreading-events"}]},{title:"Bindings",sections:[{title:"Text inputs",path:"/tutorial/svelte/text-inputs"},{title:"Numeric inputs",path:"/tutorial/svelte/numeric-inputs"},{title:"Checkbox inputs",path:"/tutorial/svelte/checkbox-inputs"},{title:"Select bindings",path:"/tutorial/svelte/select-bindings"},{title:"Group inputs",path:"/tutorial/svelte/group-inputs"},{title:"Select multiple",path:"/tutorial/svelte/multiple-select-bindings"},{title:"Textarea inputs",path:"/tutorial/svelte/textarea-inputs"}]},{title:"Classes and styles",sections:[{title:"The class attribute",path:"/tutorial/svelte/classes"},{title:"The style directive",path:"/tutorial/svelte/styles"},{title:"Component styles",path:"/tutorial/svelte/component-styles"}]},{title:"Attachments",sections:[{title:"The attach tag",path:"/tutorial/svelte/attach"},{title:"Attachment factories",path:"/tutorial/svelte/attachment-factories"}]},{title:"Transitions",sections:[{title:"The transition directive",path:"/tutorial/svelte/transition"},{title:"Adding parameters",path:"/tutorial/svelte/adding-parameters-to-transitions"},{title:"In and out",path:"/tutorial/svelte/in-and-out"},{title:"Custom CSS transitions",path:"/tutorial/svelte/custom-css-transitions"},{title:"Custom JS transitions",path:"/tutorial/svelte/custom-js-transitions"},{title:"Transition events",path:"/tutorial/svelte/transition-events"},{title:"Global transitions",path:"/tutorial/svelte/global-transitions"},{title:"Key blocks",path:"/tutorial/svelte/key-blocks"}]}]},{title:"Advanced Svelte",sections:[{title:"Advanced reactivity",sections:[{title:"Raw state",path:"/tutorial/svelte/raw-state"},{title:"Reactive classes",path:"/tutorial/svelte/reactive-classes"},{title:"Getters and setters",path:"/tutorial/svelte/getters-and-setters"},{title:"Reactive built-ins",path:"/tutorial/svelte/reactive-builtins"},{title:"Stores",path:"/tutorial/svelte/stores"}]},{title:"Reusing content",sections:[{title:"Snippets and render tags",path:"/tutorial/svelte/snippets-and-render-tags"},{title:"Passing snippets to components",path:"/tutorial/svelte/passing-snippets"},{title:"Implicit snippet props",path:"/tutorial/svelte/implicit-snippet-props"}]},{title:"Motion",sections:[{title:"Tweened values",path:"/tutorial/svelte/tweens"},{title:"Springs",path:"/tutorial/svelte/springs"}]},{title:"Advanced bindings",sections:[{title:"Contenteditable bindings",path:"/tutorial/svelte/contenteditable-bindings"},{title:"Each block bindings",path:"/tutorial/svelte/each-block-bindings"},{title:"Media elements",path:"/tutorial/svelte/media-elements"},{title:"Dimensions",path:"/tutorial/svelte/dimensions"},{title:"This",path:"/tutorial/svelte/bind-this"},{title:"Component bindings",path:"/tutorial/svelte/component-bindings"},{title:"Binding to component instances",path:"/tutorial/svelte/component-this"}]},{title:"Advanced transitions",sections:[{title:"Deferred transitions",path:"/tutorial/svelte/deferred-transitions"},{title:"Animations",path:"/tutorial/svelte/animations"}]},{title:"Context API",sections:[{title:"setContext and getContext",path:"/tutorial/svelte/context-api"}]},{title:"Special elements",sections:[{title:"\u003Csvelte:window>",path:"/tutorial/svelte/svelte-window"},{title:"\u003Csvelte:window> bindings",path:"/tutorial/svelte/svelte-window-bindings"},{title:"\u003Csvelte:document>",path:"/tutorial/svelte/svelte-document"},{title:"\u003Csvelte:body>",path:"/tutorial/svelte/svelte-body"},{title:"\u003Csvelte:head>",path:"/tutorial/svelte/svelte-head"},{title:"\u003Csvelte:element>",path:"/tutorial/svelte/svelte-element"},{title:"\u003Csvelte:boundary>",path:"/tutorial/svelte/svelte-boundary"}]},{title:"\u003Cscript module>",sections:[{title:"Sharing code",path:"/tutorial/svelte/sharing-code"},{title:"Exports",path:"/tutorial/svelte/module-exports"}]},{title:"Next steps",sections:[{title:"Congratulations!",path:"/tutorial/svelte/congratulations"}]}]},{title:"Basic SvelteKit",sections:[{title:"Introduction",sections:[{title:"What is SvelteKit?",path:"/tutorial/kit/introducing-sveltekit"}]},{title:"Routing",sections:[{title:"Pages",path:"/tutorial/kit/pages"},{title:"Layouts",path:"/tutorial/kit/layouts"},{title:"Route parameters",path:"/tutorial/kit/params"}]},{title:"Loading data",sections:[{title:"Page data",path:"/tutorial/kit/page-data"},{title:"Layout data",path:"/tutorial/kit/layout-data"}]},{title:"Headers and cookies",sections:[{title:"Setting headers",path:"/tutorial/kit/headers"},{title:"Reading and writing cookies",path:"/tutorial/kit/cookies"}]},{title:"Shared modules",sections:[{title:"The $lib alias",path:"/tutorial/kit/lib"}]},{title:"Forms",sections:[{title:"The \u003Cform> element",path:"/tutorial/kit/the-form-element"},{title:"Named form actions",path:"/tutorial/kit/named-form-actions"},{title:"Validation",path:"/tutorial/kit/form-validation"},{title:"Progressive enhancement",path:"/tutorial/kit/progressive-enhancement"},{title:"Customizing use:enhance",path:"/tutorial/kit/customizing-use-enhance"}]},{title:"API routes",sections:[{title:"GET handlers",path:"/tutorial/kit/get-handlers"},{title:"POST handlers",path:"/tutorial/kit/post-handlers"},{title:"Other handlers",path:"/tutorial/kit/other-handlers"}]},{title:"$app/state",sections:[{title:"page",path:"/tutorial/kit/page-state"},{title:"navigating",path:"/tutorial/kit/navigating-state"},{title:"updated",path:"/tutorial/kit/updated-state"}]},{title:"Errors and redirects",sections:[{title:"Basics",path:"/tutorial/kit/error-basics"},{title:"Error pages",path:"/tutorial/kit/error-pages"},{title:"Fallback errors",path:"/tutorial/kit/fallback-errors"},{title:"Redirects",path:"/tutorial/kit/redirects"}]}]},{title:"Advanced SvelteKit",sections:[{title:"Hooks",sections:[{title:"handle",path:"/tutorial/kit/handle"},{title:"The RequestEvent object",path:"/tutorial/kit/event"},{title:"handleFetch",path:"/tutorial/kit/handlefetch"},{title:"handleError",path:"/tutorial/kit/handleerror"}]},{title:"Page options",sections:[{title:"Basics",path:"/tutorial/kit/page-options"},{title:"ssr",path:"/tutorial/kit/ssr"},{title:"csr",path:"/tutorial/kit/csr"},{title:"prerender",path:"/tutorial/kit/prerender"},{title:"trailingSlash",path:"/tutorial/kit/trailingslash"}]},{title:"Link options",sections:[{title:"Preloading",path:"/tutorial/kit/preload"},{title:"Reloading the page",path:"/tutorial/kit/reload"}]},{title:"Advanced routing",sections:[{title:"Optional parameters",path:"/tutorial/kit/optional-params"},{title:"Rest parameters",path:"/tutorial/kit/rest-params"},{title:"Param matchers",path:"/tutorial/kit/param-matchers"},{title:"Route groups",path:"/tutorial/kit/route-groups"},{title:"Breaking out of layouts",path:"/tutorial/kit/breaking-out-of-layouts"}]},{title:"Advanced loading",sections:[{title:"Universal load functions",path:"/tutorial/kit/universal-load-functions"},{title:"Using both load functions",path:"/tutorial/kit/using-both-load-functions"},{title:"Using parent data",path:"/tutorial/kit/await-parent"},{title:"Invalidation",path:"/tutorial/kit/invalidation"},{title:"Custom dependencies",path:"/tutorial/kit/custom-dependencies"},{title:"invalidateAll",path:"/tutorial/kit/invalidate-all"}]},{title:"Environment variables",sections:[{title:"$env/static/private",path:"/tutorial/kit/env-static-private"},{title:"$env/dynamic/private",path:"/tutorial/kit/env-dynamic-private"},{title:"$env/static/public",path:"/tutorial/kit/env-static-public"},{title:"$env/dynamic/public",path:"/tutorial/kit/env-dynamic-public"}]},{title:"Conclusion",sections:[{title:"Next steps",path:"/tutorial/kit/next-steps"}]}]}]},{title:"Packages",slug:"packages"},{title:"Playground",slug:"playground"},{title:"Blog",slug:"blog"}],banner:{id:"barcelona-2025-tickets",start:new Date(1745193600000),end:new Date(1746575999000),arrow:true,content:{lg:"Svelte Summit Barcelona and online, May 8-9: Last few days to get tickets!",sm:"Svelte Summit May 8-9"},href:"https://www.sveltesummit.com/"}},uses:{}},{type:"data",data:{slug:"blog/svelte-5-release-candidate",file:"blog/2024-04-30-svelte-5-release-candidate.md",metadata:{title:"Svelte 5 Release Candidate",description:"We’re almost there",author:"The Svelte team",authorURL:"https://svelte.dev/"},breadcrumbs:[{title:"Blog"}],body:"\u003Cp>Svelte 5 is now in the Release Candidate phase. This means that the design of the framework is largely settled, with no anticipated breaking changes between now and the stable release, and that the most egregious bugs have been stomped.\u003C/p>\n\u003Cp>It \u003Cem>doesn't\u003C/em> mean that it's ready for production, or that nothing will change between now and 5.0. But if you've held off on dabbling with Svelte 5 during the public beta phase, now is a great time to try it out. You can select the 'Try the Svelte 5 preview' option when starting a new SvelteKit project...\u003C/p>\n\u003Cdiv class=\"code-block\">\u003Cdiv class=\"controls\">\u003Cbutton class=\"copy-to-clipboard raised\" title=\"Copy to clipboard\" aria-label=\"Copy to clipboard\">\u003C/button>\u003C/div>\u003Cpre data-js data-ts data-language=\"bash\" class=\"shiki css-variables\" style=\"background-color:var(--shiki-background);color:var(--shiki-foreground)\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--shiki-token-function)\">npm\u003C/span> \u003Cspan style=\"color:var(--shiki-token-string)\">create\u003C/span> \u003Cspan style=\"color:var(--shiki-token-string)\">svelte@latest\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\u003C/div>\u003Cp>...or you can add Svelte 5 to an existing project...\u003C/p>\n\u003Cdiv class=\"code-block\">\u003Cdiv class=\"controls\">\u003Cbutton class=\"copy-to-clipboard raised\" title=\"Copy to clipboard\" aria-label=\"Copy to clipboard\">\u003C/button>\u003C/div>\u003Cpre data-js data-ts data-language=\"bash\" class=\"shiki css-variables\" style=\"background-color:var(--shiki-background);color:var(--shiki-foreground)\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:var(--shiki-token-function)\">npm\u003C/span> \u003Cspan style=\"color:var(--shiki-token-string)\">install\u003C/span> \u003Cspan style=\"color:var(--shiki-token-string)\">--save-dev\u003C/span> \u003Cspan style=\"color:var(--shiki-token-string)\">svelte@next\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\u003C/div>\u003Cp>...or you can tinker in the \u003Ca href=\"https://svelte-5-preview.vercel.app\">Svelte 5 Preview\u003C/a> website.\u003C/p>\n\u003Ch2 id=\"I'm-out-of-the-loop.-What's-Svelte-5\">\u003Cspan>I'm out of the loop. What's Svelte 5?\u003C/span>\u003Ca href=\"#I'm-out-of-the-loop.-What's-Svelte-5\" class=\"permalink\" aria-label=\"permalink\">\u003C/a>\u003C/h2>\u003Cp>For the last several months, we've been hard at work rewriting Svelte from the ground up to be faster, easier to use and more robust, applying the lessons we've collectively learned from several years of building apps with Svelte.\u003C/p>\n\u003Cp>You can learn more about the new features from the \u003Ca href=\"https://svelte-5-preview.vercel.app/docs\">preview documentation\u003C/a>, and by watching the presentation from the most recent \u003Ca href=\"https://www.sveltesummit.com/\">Svelte Summit\u003C/a>:\u003C/p>\n\u003Cdiv class=\"max\">\n\u003Cfigure style=\"max-width: 1040px; margin: 0 auto\">\n\u003Cdiv style=\"aspect-ratio: 1.755; position: relative; margin: 0 auto;\">\n\t\u003Ciframe style=\"position: absolute; width: 100%; height: 100%; left: 0; top: 0; margin: 0;\" src=\"https://www.youtube-nocookie.com/embed/xCeYmdukOKI\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen>\u003C/iframe>\n\u003C/div>\n\n\u003Cfigcaption>What You Can Do For Your Framework\u003C/figcaption>\n\u003C/figure>\n\u003C/div>\n\n\u003Cp>The highlights include:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Ca href=\"/blog/runes\">runes\u003C/a>, the new signal-powered reactivity API that sits at the heart of Svelte 5 and unlocks \u003Cem>universal, fine-grained reactivity\u003C/em>\u003C/li>\n\u003Cli>overhauled event handling with less boilerplate and more flexibility\u003C/li>\n\u003Cli>better component composition through \u003Ca href=\"https://svelte-5-preview.vercel.app/docs/snippets\">\u003Cem>snippets\u003C/em>\u003C/a>\u003C/li>\n\u003Cli>native TypeScript support, including inside your markup\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"Will-I-need-to-rewrite-everything\">\u003Cspan>Will I need to rewrite everything?\u003C/span>\u003Ca href=\"#Will-I-need-to-rewrite-everything\" class=\"permalink\" aria-label=\"permalink\">\u003C/a>\u003C/h2>\u003Cp>Components written for Svelte 4 will continue to work with Svelte 5, with a \u003Ca href=\"https://svelte-5-preview.vercel.app/docs/breaking-changes\">handful of exceptions\u003C/a>. If you install Svelte 5 in an existing app, the only real change should be that things get faster. If you maintain a Svelte app, we recommend updating to Svelte 5 as soon as it's stable. (In the meantime, if you're currently on Svelte 3 then you should \u003Ca href=\"/docs/v4-migration-guide\">update to Svelte 4\u003C/a>.)\u003C/p>\n\u003Cp>Eventually — in Svelte 6 or 7 — support for certain Svelte 4 features will be dropped in favour of their modern replacements. Because of that, we do encourage you to incrementally migrate your components (you can mix and match old and new components in the same app). We'll release a command line tool for automating much of this migration, and you can try an experimental version of that tool in the \u003Ca href=\"https://svelte-5-preview.vercel.app\">playground\u003C/a> by pasting in some Svelte 4 code and clicking the 'migrate' button.\u003C/p>\n\u003Ch2 id=\"When-is-the-stable-release\">\u003Cspan>When is the stable release?\u003C/span>\u003Ca href=\"#When-is-the-stable-release\" class=\"permalink\" aria-label=\"permalink\">\u003C/a>\u003C/h2>\u003Cp>\u003Ca href=\"https://github.com/sveltejs/svelte/milestone/9\">When it's done\u003C/a>, and we've updated all the documentation. Bear with us!\u003C/p>\n",sections:[{slug:"I'm-out-of-the-loop.-What's-Svelte-5",title:"I’m out of the loop. What’s Svelte 5?",subsections:[]},{slug:"Will-I-need-to-rewrite-everything",title:"Will I need to rewrite everything?",subsections:[]},{slug:"When-is-the-stable-release",title:"When is the stable release?",subsections:[]}],children:[],prev:{slug:"blog/whats-new-in-svelte-april-2024",title:"What’s new in Svelte: April 2024"},next:{slug:"blog/whats-new-in-svelte-may-2024",title:"What’s new in Svelte: May 2024"},date:"2024-04-30",date_formatted:"Apr 30 2024",authors:[{name:"The Svelte team",url:"https://svelte.dev/"}],pinned:false},uses:{params:["slug"]}}],
|
||
form: null,
|
||
error: null
|
||
});
|
||
});
|
||
}
|
||
</script>
|
||
</div>
|
||
|
||
<script>
|
||
if (localStorage.getItem('svelte:show-legacy') !== 'false') {
|
||
for (const node of document.querySelectorAll('details.legacy')) {
|
||
node.open = true;
|
||
}
|
||
}
|
||
|
||
if (localStorage.getItem('svelte:prefers-ts') === 'false') {
|
||
for (const node of document.querySelectorAll('.ts-toggle')) {
|
||
node.checked = false;
|
||
}
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|