ទំរង់នៃកម្មវិធី SvelteKit ចែកចេញជាបីផ្នែកគឺ ផ្នែកខាងលើ ផ្នែកកណ្តាល និង ផ្នែកខាងក្រោម។ ផ្នែកខាងលើជាផ្នែកសំរាប់កូដសរសេរជាភាសា ES6 ដែលត្រូវស្ថិតនៅចន្លោះ tag <script></script> ។ ផ្នែកកណ្តាលដែលជាផ្នែកសំរាប់សរសេរកូដជាភាសា HTML លាយឡំជាមួយនឹងភាសា Svelte ត្រូវគេអោយឈ្មោះថាជាផ្នែក template ឬពុម្ពគំរូដែលនឹងត្រូវសរសេរបង្ហាញនៅលើ browser។ ផ្នែកពុម្ពគំរូមិនចាំបាច់ត្រូវប្រមូលផ្តុំនៅក្នុងធាតុមេណាមួយនោះឡើយ វាអាចនៅរាយប៉ាយហើយមានប៉ុន្មានបន្ទាត់ក៏បានដែរ។ ផ្នែកខាងក្រោមគឺជាផ្នែកសំរាប់កូដជាភាសា CSS ដែលត្រូវស្ថិតនៅចន្លោះ tag <style></style> ។
<!--src/routes/+page.svelte-->
<script>
let info = "ស្វាគមន៍មកកាន់កម្មវិធី SvelteKit!!"
</script>
<h1>{info}</h1>
<style>
h1{
color: green;
}
</style>
ចំណុចសំខាន់មួយទៀត គឺថាកូដនៅក្នុងកម្មវិធី SvelteKit មានលក្ខណៈ reactive ដែលអាចបកប្រែមកជាភាសាខ្មែរថាលក្ខណៈ ប្រតិភាព (reactivity) ដែលជាទង្វើឆ្លើយតបទៅនឹងការផ្លាស់ប្តូរសភាពលក្ខណៈឬតំលៃរបស់អថេរ។ ឧទាហរណ៍ ការផ្លាស់តំលៃនៃអថេរទាំងឡាយដែលត្រូវបានបង្ហាញលើ browser នឹងនាំអោយ browser លុបតំលៃចាស់និងបង្ហាញតំលៃថ្មីនៃអថេរទាំងនោះនៅលើ browser ជាថ្មីម្តងទៀត។ លក្ខណៈប្រតិភាពនេះជាគោលការណ៍គ្រឹះបង្កើតអោយមានអន្តរអំពើ (interactivity) នៅក្នុងកម្មវិធី SvelteKit ។
<!--src/routes/+page.svelte-->
<script>
let info = 0
function increase(){
info += 1
}
</script>
<h1>{info}</h1>
<input type="button" on:click={increase} value="បង្កើនតំលៃ" />
<style>
h1{
color: green;
}
</style>
