flâneur

Introduction / What is SvelteKit? • Svelte Tutorial

learn.svelte.dev · 703 words · saved by 1 readers

Whereas Svelte is a component framework, SvelteKit is an app framework (or 'metaframework', depending on who you ask) that solves the tricky problems of building something production-ready: SvelteKit apps are server-rendered by default (like traditional 'multi-page apps' or MPAs) for excellent first load performance and SEO characteristics, but can then transition to client-side navigation (like modern 'single-page apps' or SPAs) to avoid jankily reloading everything (including things like third-party analytics code) when the user navigates. They can run anywhere JavaScript runs, though — as we'll see — your users may not need to run any JavaScript at all. If that sounds complicated, worry not: SvelteKit is the framework that grows with you! Start simple and add new features as you need them. On the right, in the file tree viewer, you'll see a handful of files that SvelteKit expects to find in a project. package.json will be familiar if you've worked with Node.js before. It lists the p

Introduction / What is SvelteKit? • Svelte Tutorial Skip to main content Tutorial Packages Playground Blog Basic Svelte Introduction Welcome to Svelte Your first component Dynamic attributes Styling Nested components HTML tags Reactivity State Deep state Derived state Inspecting state Effects Universal reactivity Props Declaring props Default values Spread props Logic If blocks Else blocks Else-if blocks Each blocks Keyed each blocks Await blocks Events DOM events Inline handlers Capturing Component events Spreading events Bindings Text inputs Numeric inputs Checkbox inputs Select bindings Gro

related reading