Svelte 5 Snippets
This extension is a set of Snippets for Svelte. They are created so that scaffolding with Svelte can be easy. You can try to remember most of these.
Snippets Documentation
| Prefix | Description |
|---|---|
s- |
Svelte Snippets |
sk- |
Svelte-Kit Snippets |
Svelte
s-base
<script lang="ts"></script>
<div></div>
<style></style>
s-base-component
<script lang="ts">
import type { Snippet } from "svelte";
let { children }: { children: Snippet } = $props();
</script>
<div>{@render children()}</div>
<style></style>
s-script
<script lang="ts"></script>
s-style
<style></style>
s-style-global
<style global></style>
s-style-lang
<style lang=""></style>
s-if
{#if }
{/if}
s-if-else
{#if }
{:else}
{/if}
s-if-else-if
{#if }
{:else if }
{:else}
{/if}
s-each
{#each items as item}
{/each}
s-each-else
{#each items as item}
{:else}
{/each}
s-each-index
{#each items as item, i}
{/each}
s-each-index-key
{#each items as item, i (item.id)}
{/each}
s-await
{#await promise}
{:then value}
{:catch error}
{/await}
s-debug
{@debug }
s-html
{@html }
s-snippet
{#snippet name(value)}
{/snippet}
s-slot
<slot></slot>
s-slot-name
<slot name=""></slot>
s-render
{@render }
s-render-fallback
{#if children}
{@render children()}
{:else}
<span>default</span>
{/if}
s-bind-value
bind:value={}
s-bind-this
bind:this={}
s-transition-fade
transition:fade="{{delay: 250, duration: 300}}"
s-transition-blur
transition:blur="{{amount: 10}}"
s-transition-fly
transition:fly="{{delay: 250, duration: 300, x: 100, y: 500, opacity: 0.5, easing: quintOut}}"
s-transition-slide
transition:slide="{{delay: 250, duration: 300, easing: quintOut }}"
s-transition-scale
transition:scale="{{duration: 500, delay: 500, opacity: 0.5, start: 0.5, easing: quintOut}}"
s-transition-draw
transition:draw="{{duration: 5000, delay: 500, easing: quintOut}}"
s-animate-flip
animate:flip="{{delay: 250, duration: 250}}"
s-self
<svelte:self></svelte:self>
s-options
<svelte:options />
s-window
<svelte:window />
s-head
<svelte:head>
</svelte:head>
s-body
<svelte:body />
Svelte Kit
sk-page
<script lang="ts">
import type { PageData } from "./$types";
const { data }: { data: PageData } = $props();
</script>
sk-page-load
import type { PageLoad } from "./$types";
export const load: PageLoad = async (event) => {
return {};
};
sk-page-params
<script lang="ts">
import { page } from "$app/stores";
const { id } = $page.params;
</script>
sk-page-server-load
import type { PageServerLoad } from "./$types";
export const load: PageServerLoad = async (event) => {
return {};
};
sk-layout-load
import type { LayoutLoad } from "./$types";
export const load: LayoutLoad = async (event) => {
return {};
};
sk-layout-server-load
import type { LayoutServerLoad } from "./$types";
export const load: LayoutServerLoad = async (event) => {
return {};
};
sk-actions
import type { Actions } from "./$types";
export const actions: Actions = {
async default() {},
};
sk-hooks
import type { Handle } from "./$types";
export const handle: Handle = async ({ event, resolve }) => {
const response = await resolve(event);
return response;
};
sk-json
json({ data: "" }, { status: 200 });
sk-error
error(404, { message: "Not found" });
sk-api-get
import type { RequestHandler, RequestEvent } from "./$types";
import { json } from "@sveltejs/kit";
export const GET = (async ({ request }: RequestEvent) => {
return json({ message: "GET" });
}) satisfies RequestHandler;
sk-api-post
import type { RequestHandler, RequestEvent } from "./$types";
import { json } from "@sveltejs/kit";
export const POST = (async ({ request }: RequestEvent) => {
return json({ message: "POST" });
}) satisfies RequestHandler;
sk-api-put
import type { RequestHandler, RequestEvent } from "./$types";
import { json } from "@sveltejs/kit";
export const PUT = (async ({ request }: RequestEvent) => {
return json({ message: "PUT" });
}) satisfies RequestHandler;
sk-api-delete
import type { RequestHandler, RequestEvent } from "./$types";
import { json } from "@sveltejs/kit";
export const DELETE = (async ({ request }: RequestEvent) => {
return json({ message: "DELETE" });
}) satisfies RequestHandler;
sk-api-patch
import type { RequestHandler, RequestEvent } from "./$types";
import { json } from "@sveltejs/kit";
export const PATCH = (async ({ request }: RequestEvent) => {
return json({ message: "PATCH" });
}) satisfies RequestHandler;
sk-browser
import { browser } from "$app/environment";
if (browser) {
}
sk-env-private
import { env } from "$env/dynamic/private";
sk-env-public
import { env } from "$env/static/public";
TypeScript / JavaScript
s-state
let state = $state();
s-state-frozen
let state = $state.frozen();
s-state-snapshot
$state.snapshot();
s-state-is
$state.is(state1, state2);
s-derived
const value = $derived();
s-derived-by
const value = $derived.by(() => {});
s-effect
$effect(() => {});
s-effect-pre
$effect.pre(() => {});
s-effect-tracking
$effect(() => {
console.log("in effect:", $effect.tracking());
});
s-effect-root
const cleanup = $effect.root(() => {
$effect(() => {});
return () => {};
});
s-computed
let value = $state("");
let valueComputed = {
get value() {
return value;
},
set value(newValue) {
value = newValue;
},
};
s-props
interface Props {}
let {} = $props();
s-host
$host().dispatchEvent();
s-flush-sync
flushSync(() => {});
s-hook
export function useCounter() {
let count = $state(0);
function increment() {
count += 1;
}
return {
get count() {
return count;
},
set count(newValue) {
count = newValue;
},
increment,
};
}
s-store
import { writable } from "svelte/store";
export function createCounter() {
const { subscribe, update } = writable(0);
function increment() {
update((count) => count + 1);
}
return {
subscribe,
increment,
};
}
s-set-context
setContext("key", "value");
s-get-context
const context = getContext("key");
s-has-context
if (hasContext("key")) {
}
Css
s-css-global
:global() {
}
License
