Skip to content

Svelte

"Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app."

Tenents

  • write less code
  • no virtual dom
  • truly reactive

Getting Started

Examples

<script>
    let name = 'world';
</script>

<h1>Hello {name}!</h1>

<script>
    let src = 'tutorial/image.gif';
    let name = 'Rick Astley';
</script>

<!-- {src} is short for src={src} -->
<img {src} alt="{name} dancing">

Stack with SvelteKit

  • SvelteKit (could be Next, Nuxt, Solid or any other TypeScript framework)
  • tRPC (typed calls between frontend and backend, https://trpc.io)
  • tRpc-sveltekit (glues SvelteKit and tRPC, https://github.com/icflorescu/trpc-sveltekit)
  • Prisma (ORM, https://www.prisma.io)