Svelte

Svelte on ohjelmistokehys web-sovellusten kehittämiseen JavaScriptin, HTML:n ja CSS:n avulla. Sille on ominaista muun muassa nopeus ja vakiokoodin () ja erikoissyntaksin vähyys. Nopeus on seurausta erityisesti siitä, että Svelte kääntää sovelluskoodin natiiviksi JavaScriptiksi ja pyrkii näin tekemään vähemmän työtä ajon aikana. Muita vastaavia kehyksiä ovat muun muassa React ja Vue. 
Svelte tukee suoraan myös TypeScriptiä ja SCSS:ää, jotka käännetään JavaScriptiksi ja CSS:ksi esiprosessointivaiheessa.
Esimerkit.
SvelteKit-demo.
SvelteKit-kehyksen sisältämän demosovelluksen tiedostorakenne näyttää seuraavalta:
&lt;syntaxhighlight&gt;
$ tree --filelimit 20
├── node_modules [116 entries exceeds filelimit, not opening dir]
├── package.json
├── package-lock.json
├── README.md
├── src
│   ├── app.html
│   ├── lib
│   │   └── images
│   │   ├── github.svg
│   │   ├── svelte-logo.svg
│   │   ├── svelte-welcome.png
│   │   └── svelte-welcome.webp
│   └── routes
│   ├── about
│   │   ├── +page.js
│   │   └── +page.svelte
│   ├── Counter.svelte
│   ├── Header.svelte
│   ├── +layout.svelte
│   ├── +page.js
│   ├── +page.svelte
│   ├── styles.css
│   └── sverdle
│   ├── how-to-play
│   │   ├── +page.js
│   │   └── +page.svelte
│   ├── +page.server.js
│   ├── +page.svelte
│   └── words.server.js
├── static
│   ├── favicon.png
│   └── robots.txt
├── svelte.config.js
└── vite.config.js
&lt;/syntaxhighlight&gt;
Tämä demosovellus sisältää laskurikomponentin tiedostossa codice_1, joka näyttää oleellisilta osin seuraavalta:
&lt;script&gt;
 // Tuo store-objekti, jonka avulla voidaan muuttaa
 // arvo toiseen jatkuvalla tavalla.
 import { spring } from 'svelte/motion';
 // Komponentissa on yksi tilamuuttuja, joka
 // saa kokonaislukuarvoja.
 let count = 0;
 // Käyttäjälle näytetään reaalilukuja.
 const displayed_count = spring();
 // $-nimellä merkityt lauseet ovat reaktiivisia sisältämiensä
 // muuttujien arvojen muutoksille.
 $: displayed_count.set(count);
 // Jos muuttujan nimi alkaa $:lla, se tulkitaan automaattisesti
 // store-objektiksi tavallisen muuttujan sijaan.
 $: offset = modulo($displayed_count, 1);
 // Alla olevaa funktiota käytetään yllä; tämä on sallittua JavaScriptissä 
 // deklaraationa määritellyille funktioille ().
 function modulo(n, m) {
 return ((n % m) + m) % m;
&lt;/script&gt;
&lt;div class="counter"&gt;
 &lt;!-- Lisää laskuria vähentävään button-elementtiin nimetön 
 tapahtumankäsittelijä natiiville DOM-tapahtumalle "click". 
 JavaScript tulee kaarisulkeisiin ja päivittää count-muuttujaa.
 &lt;button on:click={() =&gt; (count -= 1)} aria-label="Decrease by one"&gt;
 &lt;!-- SVG poistettu --&gt;
 &lt;/button&gt;
 &lt;div class="cv"&gt;
 &lt;!-- CSS-tyylistä tulee dynaaminen interpoloimalla
 siihen suoraan JavaScriptiä. --&gt;
 &lt;div class="cd" style="transform: translate(0, {100 * offset}%)"&gt;
 &lt;strong class="hidden" aria-hidden="true"&gt;
 &lt;/strong&gt;
 &lt;strong&gt;
 &lt;/strong&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 &lt;button on:click={() =&gt; (count += 1)} aria-label="Increase by one"&gt;
 &lt;!-- SVG poistettu --&gt;
 &lt;/button&gt;
&lt;/div&gt;
&lt;style&gt;
 /* CSS poistettu */
&lt;/style&gt;
Käyttö.
Svelten käyttö onnistuu esim. SvelteKit-työkalun avulla codice_2. Tämä edellyttää Node.js-ajoympäristöä ja npm-pakettienhallintaohjelmaa. codice_3 asentaa sovelluksen riippuvuudet ja codice_4 käynnistää paikallisen kehityspalvelimen. codice_5 tuottaa lopullisen sovelluksen konfiguraatiotiedostojen mukaan ja tämä voidaan jakaa halutulla alustalla Node-palvelimella. Osana tätä rakennusprosessia Svelte kääntää tiedostonsa optimoiduksi, natiiviksi JavaScriptiksi (luokaksi).
Rakenne.
Komponentit.
Svelte-sovellukset koostuvat komponenteista, jotka ovat itsenäisiä joukkoja JavaScript-, HTML-, CSS-kieltä ja Svelte-syntaksia. Komponentit määritellään omiin tiedostoihinsa. JavaScript tulee codice_6-merkkien väliin ja CSS codice_7-merkkien väliin – loput komponentista on Svelten laajennettua HTML-tyyppistä merkintäkieltä. JavaScriptiä voidaan sekoittaa suoraan merkintäkieleen kaarisulkeissa, kuten codice_8 tai codice_9. Samalla tavalla esim. codice_7-direktiivi helpottaa CSS-tyylien lisäämistä suoraan elementteihin tyylillä codice_11.
Toisessa tiedostossa esim. codice_12 määritelty komponentti saadaan käyttöön codice_13-lauseella, minkä jälkeen sitä voidaan käyttää HTML-elementin tavoin codice_14. Kun muuttujan (tai lauseen) tulee olla reaktiivinen toisen muuttujan arvon muutokseen, merkitään haluttu lause nimellä codice_15, kuten codice_16. Vain muuttujaan sijoittaminen tekee muuttujasta reaktiivisen, eli JavaScript-objektin mutaatio muulla tavalla ei päivitä sovelluksen tilaa. 
Komponentteja määritellessä käytetään codice_17-elementtiä tyylillä codice_18 kertomaan Sveltelle, mihin komponentin alikomponentit/elementit, kuten codice_19 injektoidaan. Jos mitään injektoitavaa ei anneta codice_19, Svelte käyttää komponenttiin määriteltyä oletuselementtiä codice_21. Jos komponentissa on taas useita slotteja, niille annetaan nimet codice_22 ja injektoitava elementti ohjataan sinne attribuutilla codice_19.
Logiikan lisääminen suoraan komponentin rakenteeseen onnistuu
Erityisiin sisäänrakennettuihin Svelte-elementteihin kuuluvat codice_30, codice_31, codice_32, codice_33, codice_34, codice_35, codice_36 (kääntäjän asetukset) ja codice_37.
Komponenttien tiedonkulku.
Kun alikomponentti tuodaan uuteen komponenttiin, tämän näkymään siirtyvät samalla komponentista jaetut muuttujat eli ns. propsit (), kuten codice_38. Myös slotit hyväksyvät propseja, mutta nämä tulee tuoda näkyviin injektoinnin yhteydessä codice_39-direktiivillä, kuten codice_40. Tällöin arvo siirtyy siis toiseen suuntaan ylhäältä alas.
Komponenttien kesken voidaan jakaa tietoa myös ilman "props"-mekanismia kontekstien avulla. Kun komponentti kutsuu codice_41-funktiota, kyseinen konteksti (mikä tahansa objekti) on saatavissa alikomponenteissa codice_42-kutsulla. Kolmas tapa jakaa tietoa saman komponentin instanssien kesken on käyttää ns. moduulikontekstia: kaikki codice_43-merkkien sisällä oleva JavaScript ajetaan vain kerran moduulin ajon aikana, eikä jokaiselle instanssille erikseen.
Käyttäjän antamien arvojen siirtämiseksi ylös komponenttihierarkkiaa tarvitaan codice_44-direktiiviä, kuten codice_45. Eri elementeillä on erilaisia attribuutteja, joiden kanssa voidaan käyttää codice_44-direktiiviä joko yksi- (lue) tai kaksisuuntaisesti (lue ja kirjoita). codice_47 viittaa attribuutin sijasta itse elementtiin, ja useasta elementistä voidaan ohjata arvoja yhteen muuttujaan käyttämällä codice_48-attribuuttia.
Komponenttien ulkopuolisten tilamuuttujien käyttämiseen tarvitaan ns. tietovarastoa (), joka luodaan funktioiden, kuten codice_49, codice_50 ja codice_51 avulla tyylillä codice_52. Tätä muuttujaa käytetään sitten tuonnin jälkeen sen metodien, kuten codice_53, codice_54 ja codice_55 kautta. Metodien suora käyttö voidaan myös välttää dollarisyntaksilla codice_56 – Svelte tulkitsee tällaisen nimen aina varastoksi.
Tapahtumienhallinta.
Tapahtumankäsittelijän liittämiseksi komponentin/elementin tapahtumaan tehdään codice_57-direktiivin avulla. Direktiivin ja tapahtuman lisäksi voidaan käyttää määreitä () muuttamaan tapahtumankäsittelijän toimintaa syntaksilla codice_58. Tapahtumankäsittelijä voi olla yksinkertaisen funktion sijasta myös ns. tapahtumanlähettäjä (), jonka luomiseen käytetään Svelten codice_59-funktiota. Omien tapahtumien käsittelemiseksi tarvitaan oma ns. toimintofunktio (), joka liitetään elementtiin codice_60-direktiivillä, kuten codice_11.
Tapahtumat eivät nouse () komponenttihierarkiassa ylös automaattisesti; ulompaan komponenttiin ei kuitenkaan tarvitse määritellä omaa edelleenlähetystä vaan pelkän attribuutin lisääminen riittää codice_62. 
Elinkaari ja siirtymät.
Svelten elinkaarifunktio codice_63 mahdollistaa JavaScriptin ajon, kun komponentti renderöidään ensimmäisen kerran. Muita elinkaarifunktioita ovat codice_64, codice_65, codice_66 ja codice_67 (esim. codice_68.
Animaatioiden tekemiseen löytyy työkaluja codice_69, codice_70, codice_71 ja codice_72 moduuleista, kuten codice_73, codice_74, codice_75, codice_76 ja codice_77. DOM-siirtymät sidotaan elementteihin codice_71-, codice_79-, codice_80 ja codice_72-direktiivien avulla, kuten codice_11. Siirtymillä voi olla myös määreitä, kuten codice_83.