Interactive Runes Sandbox
Svelte 5 Signal Sandbox
Mutate signals in real time to observe how Svelte 5 recalculates $derived values and schedules $effect observers without Virtual DOM re-renders.
1. Basic Signal Mutation & Derivation
Live Svelte 5 Playground
Interactive $state & $derived Demo
Count Value 0
Step Increment:
Derived Signal State
$derived(count * 2): 0
Parity Check: EVEN
✨ Mutating count directly updates these derived values in fine-grained
DOM signals without re-rendering the surrounding template tree.
2. Effect Execution & Dependency Tracking
Interactive Svelte 5 Rune Inspector
Observe $state mutations trigger $derived signals and $effect observers
1. $state Signals
count 0
multiplier 2x
2. $derived Signals
multiplied ($derived) 0
Calculated as: 0 × 2
isEven ($derived) true
3. $effect Execution Log
No effect executions yet.
3. Encapsulated Class State Inspector
Svelte 5 Class State & Context Inspector
Demonstrating shared object reactivity across components via class instance
Component A (Provider) setContext()
Mutate $state Object
Status Flag
Component B (Consumer) getContext()
Alex Rivera
ActiveLead Architect
Derived Unread (1)
Svelte 5 Runes loaded
Context initialized
Class Instance Dump Reactive Proxy
// UserStore Instance State
{
"user": {
"name": "Alex Rivera",
"role": "Lead Architect",
"status": "Active"
},
"unreadCount": 1,
"notifications": [
{
"id": 1,
"text": "Svelte 5 Runes loaded",
"read": false
},
{
"id": 2,
"text": "Context initialized",
"read": true
}
]
}✨ Deep $state proxy Auto-synced
S5
SuperSvelte Svelte 5 + Hono RPC + Neon
The Batteries-Included Edge TS Framework
Stop assembling your stack from 15 npm packages. Super Svelte ships Auth, Neon DB, Redis SSE, OpenAPI 3.1 Hono RPC, Uploads, and Resend out-of-the-box with sub-10ms edge cold starts.
OpenAPI 3.1 Hono RPC
Better Auth & Multi-Tenancy
Neon DB + Drizzle ORM
Sub-10ms Edge Starts