Public
- Public
- Network
- Groups
- Featured
- Popular
- People

Screenshot of Kitten’s Interactive Shell (REPL), showing an action performed in the browser (client event) automatically triggering a server-side event handler that then updates a boolean value in a JavaScript object in memory that is automatically persisted to disk using Kitten’s built-in JSDB (JavaScript Database): 📄 → 🐱: Client event « signUpSwitch » SignUpsSwitch (KittenComponent) sign-up-switch { _componentId: 'sign-up-switch' } 💾 Settings updated in memory. Settings { id: '7832e729-1996-4ac4-b7d0-db3b6ba294d9', allowSignUps: true, mastodonAccessToken: '**** [REDACTED]' } => allowSignUps = false 🐱 → 📄: Streaming HTML <div hx-swap-oob="morph" data-kitten-component id="sign-up-switch" class="signUpSwitch off"> <div class="Switch"> <label for="switch-c8737e2e-c5be-4eb9-afd3-0bdf44fa3133" class="Switch">Sign-ups are closed.</label> <input id="switch-c8737e2e-c5be-4eb9-afd3-0bdf44fa3133" name="signUpSwitch" type="checkbox" role="switch" ws-send hx-ext="ws,morph" hx-swap-oob="morph"> </div> </div> 💾 Settings table update. kitten.db.settings.allowSignUps = false Persisted as: '_[[`allowSignUps`]] = false;\n' 🐱 💬

Download link

Screenshot of Kitten’s Interactive Shell (REPL), showing an action performed in the browser (client event) automatically triggering a server-side event handler that then updates a boolean value in a JavaScript object in memory that is automatically persisted to disk using Kitten’s built-in JSDB (JavaScript Database): 📄 → 🐱: Client event « signUpSwitch » SignUpsSwitch (KittenComponent) sign-up-switch { _componentId: 'sign-up-switch' } 💾 Settings updated in memory. Settings { id: '7832e729-1996-4ac4-b7d0-db3b6ba294d9', allowSignUps: true, mastodonAccessToken: '**** [REDACTED]' } => allowSignUps = false 🐱 → 📄: Streaming HTML <div hx-swap-oob="morph" data-kitten-component id="sign-up-switch" class="signUpSwitch off"> <div class="Switch"> <label for="switch-c8737e2e-c5be-4eb9-afd3-0bdf44fa3133" class="Switch">Sign-ups are closed.</label> <input id="switch-c8737e2e-c5be-4eb9-afd3-0bdf44fa3133" name="signUpSwitch" type="checkbox" role="switch" ws-send hx-ext="ws,morph" hx-swap-oob="morph"> </div> </div> 💾 Settings table update. kitten.db.settings.allowSignUps = false Persisted as: '_[[`allowSignUps`]] = false;\n' 🐱 💬
https://s3-eu-central-1.amazonaws.com/mastodon-aral/media_attachments/files/116/731/557/737/587/490/original/5c30d8f5d7e2f007.jpeg

Notices where this attachment appears

Embed this notice
Aral Balkan (aral@mastodon.ar.al)'s status on Thursday, 11-Jun-2026 21:55:37 JST Aral Balkan
in reply to

And here’s a real-world example of the lifecycle of an action performed on a local copy of the Gaza Verified web site¹ showing the event from the toggle button on the client being automatically mapped to the relevant event handler on the SignUpsSwitch Kitten component instance, the handler setting a boolean on a JavaScript object in memory, which is automatically persisted to disk via Kitten’s default JSDB² database.
Note that Kitten is smart enough to automatically redact fields in the log output that look like they might be secrets.
All this is in the stateful-components-api-breaking-change branch³ at the moment and will be in the next release.
¹ https://gaza-verified.org
² https://codeberg.org/small-tech/jsdb
³ https://codeberg.org/kitten/app/src/branch/stateful-components-api-breaking-change
#SmallWeb #Kitten #web #dev #statefulComponents #streamingHTML #hypertext #GazaVerified

In conversation about a month ago from mastodon.ar.al permalink