Framework cheatsheet

Svelte and SvelteKit 5 Cheatsheet

Create Svelte 5 apps and write components with runes, template blocks, snippets and SvelteKit routes, loaders and forms.

Setup

Create a project — Scaffold a SvelteKit app with the sv CLI and choose options when prompted.
Install and start — Install dependencies and start the dev server.
Build and preview — Create a production build, then serve it locally.
Type-check the project — Run svelte-check to find type and accessibility problems.
Add tooling — Add Tailwind CSS, a test runner, Drizzle or other integrations to an existing project.

Component skeleton — A single-file component with state, markup and scoped styles.
Reactive state — $state makes a value reactive. Objects and arrays are reactive deeply, so changing a property updates the page.
Derived values — $derived recalculates a value when the state it reads changes.
Side effects — $effect runs after the DOM updates and re-runs when the state it reads changes. Use it for things outside Svelte, not to derive state.
Receive props — $props destructures the props a component receives, with defaults.
Allow two-way binding of a prop — Mark a prop $bindable so a parent can bind to it with bind:value.
Share state between components — Put reactive state in a .svelte.ts file and export it. Export an object, because reassigned primitives can't be exported.

Show content conditionally — Use {#if} blocks, with {:else if} and {:else} branches.
Loop over a list — Give each item a key, in parentheses, so Svelte can update the list efficiently.
Show an async result — Render pending, success and error states of a promise.
Bind form inputs — bind:value keeps a variable and an input in sync in both directions.
Handle events — Events are properties like onclick. Call preventDefault yourself when needed.
Toggle classes — Add a class conditionally with an object or array in the class attribute.
Reusable markup with snippets — Define a snippet once and render it where you need it, with parameters.
Accept child content — Render the content passed between a component's tags.
Animate elements entering and leaving — Apply a built-in transition to elements added or removed by blocks.

Create a page — Folders under src/routes are URLs. [slug] is a dynamic segment, so this serves /blog/hello.
Load data on the server — A +page.server.ts load function runs on the server, and its result is passed to the page as data.
Use the loaded data — Read the load function's result through the data prop.
Handle a form on the server — Form actions receive the submitted form data. The form works without JavaScript and can be enhanced with use:enhance.
Create an API endpoint — A +server.ts file exports a function per HTTP method.
Read a private environment variable — Variables from $env/static/private can only be imported in server code.
Redirect — Redirect from server code, for example when the user isn't signed in.
Share a layout — A +layout.svelte wraps every page below it and renders the page with children.

Angular 22 cheatsheet — Angular CLI commands and standalone component, signals, template, routing, HTTP and forms snippets.
Astro cheatsheet — Build fast content sites with Astro: components, layouts, routing, content collections, islands, endpoints and deployment.
Django 6 cheatsheet — Create projects, run migrations, test and deploy Django apps, plus the ORM queries you use every day.
.NET and ASP.NET Core 10 cheatsheet — The dotnet CLI for creating, building, testing and publishing projects, plus common ASP.NET Core and EF Core code.
Express 5 cheatsheet — Build HTTP servers and APIs with Express 5 on Node.js.
FastAPI 0.115 cheatsheet — Install, run, test and deploy FastAPI apps from the command line.