Sample.Kit
Packages & Interactive
Demos For SvelteKit
Home of the SampleKit preprocessors and
demos for auth, e-commerce, and beyond.
Preprocessors Shop Demo Articles

Preprocessors

The SampleKit preprocessors utilize HTML comments with custom delimiters to inject functionality without interrupting other tooling.

samplekit | sites/preprocessor-docs
<p>When you need to write some math:</p>

<!-- \[ \ddot u = c^2 \nabla^2 u \] -->

<p>Or maybe some code:</p>

<!-- shiki-start
p c"no-lines" d"theme=daffodil"
s"Ishmael" d"highlight"
```ts
const callMe = "Ishmael";
```
shiki-end -->

<!-- md-start
| NPM Package         | VS Code Extension  |
| ------------------- | ------------------ |
| preprocess-katex    | svelte-pp-katex    |
| preprocess-markdown | svelte-pp-markdown |
| preprocess-shiki    | svelte-pp-shiki    |
md-end -->

<p>There's a Svelte preprocessor for that!</p>
Svelte Preprocessors

When you need to write some math:

u¨=c2∇2uddot u = c^2 abla^2 u

Or maybe some code:

const callMe = "Ishmael";
NPM PackageVS Code Extension
preprocess-katexsvelte-pp-katex
preprocess-markdownsvelte-pp-markdown
preprocess-shikisvelte-pp-shiki

There's a Svelte preprocessor for that!

Preprocessor Docs

Demos

The SampleKit website itself is an accessible template for implementing common features in a SvelteKit application.

01.

Auth

Everything you need for Auth in one place.

  • Email/Pass or OAuth (Google)
  • Email Verification
  • Session Management
  • SMS/Passkey/Authenticator
  • Security Notification Emails
  • Password Reset
  • Server Authentication Hooks
  • Bot Protection
  • Rate Limiting
  • Account Deletion

Articles *Now with ᚱunes

  • Tutorial
  • Demo
  • Source