skip to content

Cheatsheet: Svelte

My personal cheatsheet for Svelte.


Await Blocks

	async function getRandomNumber() {...}
	let promise = getRandomNumber();

<button on:click={() => promise = getRandomNumber()}>
	generate random number

{#await promise}
{:then number}
	<p>The number is {number}</p>
{:catch error}
	<p style="color: red">{error.message}</p>

Link: Logic / Await blocks - Svelte Tutorial

Add Tailwind CSS

npx svelte-add@latest tailwindcss



SvelteKit is an application framework powered by Svelte — build bigger apps with a smaller footprint.

Creating a new SvelteKit app

npm create svelte@latest my-app
cd my-app
npm install
npm run dev -- --open

Diagnostics Check

npm run check

Provides CLI diagnostics checks for:

  • Unused CSS
  • Svelte A11y hints
  • JavaScript/TypeScript compiler errors

Install Node.js adapter

npm i -D @sveltejs/adapter-node
// file:svelte.config.js
// Make sure you use the Node.js adapter.
import adapter from "@sveltejs/adapter-node";

export default {
	kit: {
		adapter: adapter(),

Dockerfile for SvelteKit app with Node.js adapter

# Builder
FROM node:lts-alpine AS builder
COPY package.json package-lock.json ./

RUN npm ci
COPY . .

RUN npm run build && npm prune --production

# Docker Image
FROM node:lts-alpine

USER node:node

COPY --from=builder --chown=node:node /app/build ./build
COPY --from=builder --chown=node:node /app/node_modules ./node_modules
COPY --chown=node:node package.json .


CMD ["node", "build"]

Validation with Felte

Felte is an extensible form library for Svelte, Solid and React.

# To install felte
npm i felte

Using Zod

# To install yup + zod adapter
npm i @felte/validator-zod zod