End-to-end example of building a CRUD form with svelte-pure-admin components wired through Svelte 5 runes. Submissions land in an in-memory store scoped to this browser tab, and the table below renders them with inline editing, a toast-based Undo on delete, and a simulated server failure so you can see how error states are surfaced.
Things to try:
- Submit valid data — the form resets and a success alert replaces any prior status.
- Tick Force validation errors before saving — typed values stick and every field
shows an inline error via the
errorsprop on each input. - Click the pencil to edit a row inline; the submit button switches to Update Entry and a Cancel button appears.
- Click × to delete — the entry disappears and a toast with an Undo action gives you a few seconds to bring it back.
- Save with no network luck — submits have a ~10% chance of a simulated failure, which renders a dismissible danger alert without clearing the form.
- Refresh the page — entries reset to the three seed rows, so you can Clear All and reload to get back to a clean demo state.
New Entry
Stored Submissions
3 total
| Name | Department | Start Date | Bio | Submitted | ||
|---|---|---|---|---|---|---|
| Dale Cooper | dale.cooper@twinpeaks.example | Support | 2024-02-24 | Damn fine coffee enthusiast. FBI-level attention to detail. | a minute ago | |
| Audrey Horne | audrey.horne@twinpeaks.example | Sales | 2023-09-12 | Great Northern hospitality brought to enterprise accounts. | 5 hours ago | |
| Donna Hayward | donna.hayward@twinpeaks.example | Marketing | 2025-01-07 | — | 3 days ago |
How it works
Form binding
- Each field is a Svelte 5
$stateprimitive, bound to anInput/Select/Textareaviabind:value. Errors are a singleFieldErrorsrecord and flow into each input through theerrorsprop — the control auto-appliespa-input--errorand setsaria-invalid. - Validation returns a plain
{ field: message }object; the renderer shows inlineFormHelpunder each flagged field. The Force validation errors checkbox short-circuits validation to a fixed error map so you can inspect all six states without crafting bad input. - A successful submit clears only the inputs — the Force validation errors checkbox keeps its state so you can submit repeatedly while tweaking styles. Explicit Reset also resets the checkbox.
State & UX
- Entries are a reactive
$statearray keyed by an incrementing id. The table re-renders via Svelte's keyed{#each}on every change — simple, and small enough that manual diffing isn't worth the complexity. - The summary alert above the form uses replace semantics: each outcome (validation failure, simulated server error, success, edit-mode entry) overwrites the previous banner so stacking never happens.
- Delete uses the optimistic toast + undo pattern via the
Toastcomponent rendered into aToastContainer. The row disappears immediately; an Undo button on the toast restores it at its original position before the toast auto-dismisses. - The destructive bulk action (Clear All) uses
Popconfirmbecause there's no undo affordance — losing the whole set silently would be surprising. - Submits are run through a
simulateServerSave()promise that resolves with a ~10% failure rate after a short delay, so the success / danger alert paths are both exercisable without tooling. - The Submitted column uses a local
relativeTime()function whose buckets matchPureAdmin.DateTime.relative/2and pure-admin'sform-demo.js; a 30-second tick forces re-render so phrasing stays current.