Skip to content

Commit bc73fad

Browse files
authored
Add Svelte example (#22)
1 parent 79916b9 commit bc73fad

16 files changed

Lines changed: 1995 additions & 5 deletions

README.md

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ Works everywhere: In browsers, Node.js, and edge runtimes with React, Vue, Svelt
1212
### Table of Contents
1313

1414
- [Installation](#installation)
15+
- [Live Examples](#live-examples)
1516
- [Usage](#usage)
1617
- [parseWithSchema](#parsewithschema)
1718
- [Submission](#submission)
@@ -21,7 +22,6 @@ Works everywhere: In browsers, Node.js, and edge runtimes with React, Vue, Svelt
2122
- [setPath](#setpath)
2223
- [PathsFromObject](#pathsfromobject)
2324
- [Zod Field Schemas](#zod-field-schemas)
24-
- [Live Examples](#live-examples)
2525
- [License](#license)
2626

2727
## Installation
@@ -32,6 +32,12 @@ Install Conformal via npm or the package manager of your choice:
3232
npm install conformal
3333
```
3434

35+
## Live Examples
36+
37+
- **React** - Form actions with useActionState: [StackBlitz](https://stackblitz.com/github/marcomuser/conformal/tree/main/examples/react?embed=1&theme=dark&preset=node&file=src/Form.tsx) | [Source](https://github.com/marcomuser/conformal/tree/main/examples/react)
38+
39+
- **SvelteKit** - Server-side form actions: [StackBlitz](https://stackblitz.com/github/marcomuser/conformal/tree/main/examples/svelte?embed=1&theme=dark&preset=node&file=src/routes/%2Bpage.server.ts) | [Source](https://github.com/marcomuser/conformal/tree/main/examples/svelte)
40+
3541
## Usage
3642

3743
### parseWithSchema
@@ -253,10 +259,6 @@ const formSchema = z.object({
253259
});
254260
```
255261

256-
## Live Examples
257-
258-
- **React** - [GitHub](https://github.com/marcomuser/conformal/tree/main/examples/react) | [StackBlitz](https://stackblitz.com/github/marcomuser/conformal/tree/main/examples/react?embed=1&theme=dark&preset=node&file=src/Form.tsx)
259-
260262
## License
261263

262264
Conformal is licensed under the MIT License.

examples/svelte/.gitignore

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
node_modules
2+
3+
# Output
4+
.output
5+
.vercel
6+
.netlify
7+
.wrangler
8+
/.svelte-kit
9+
/build
10+
11+
# OS
12+
.DS_Store
13+
Thumbs.db
14+
15+
# Env
16+
.env
17+
.env.*
18+
!.env.example
19+
!.env.test
20+
21+
# Vite
22+
vite.config.js.timestamp-*
23+
vite.config.ts.timestamp-*

examples/svelte/README.md

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# Conformal SvelteKit Example
2+
3+
Type-safe form submissions with SvelteKit form actions.
4+
5+
## 🚀 Try it on StackBlitz
6+
7+
[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/marcomuser/conformal/tree/main/examples/svelte?embed=1&theme=dark&preset=node&file=src/routes/+page.svelte)
8+
9+
## Local Development
10+
11+
```bash
12+
npm install
13+
npm run dev
14+
```
15+
16+
## What This Shows
17+
18+
- **Conformal + Zod** for type-safe form validation
19+
- **SvelteKit form actions** for server-side form processing
20+
- **Field-level errors** with form preservation
21+
- **Submission pattern** with success/error states
22+
23+
Try submitting empty fields or invalid data to see validation in action!

0 commit comments

Comments
 (0)