Sercrod Playground

The playground is a collection of small, focused examples. Each page shows one idea with live Sercrod code and a sample running in the browser.

Start with the core examples, then move on to the advanced demos if you want to see larger patterns.

Core examples

• Live search - filter a list as you type, using *input and simple expressions.
• Tag filter - click tags to turn filters on and off, combining *for, @click, and basic conditional rendering.
• Comment stack view - a simple comment list that grows over time, keeping the latest items visible.
• Pagination (Prev / Next) - step through a longer list with Prev / Next buttons, using a page number and *for.
• Form validation - validate a small form with Sercrod only, using data, *input, and @submit.

Advanced examples

• Sortable list (drag and drop) - turn a small or medium list into a sortable block using Sercrod and a bit of JavaScript glue. Drag and drop is intuitive for shorter lists, but can become harder to use as the number of items grows.
• List reordering (buttons) - reorder a list with up and down buttons by rearranging the underlying array and rendering it with *for. This style works better for larger lists or when you want to support keyboard driven interaction more clearly.
• Mini dashboard - display a few key metrics as cards. Uses *for and conditional styling, and can be combined with *fetch in real projects.
• JS spreadsheet - a small spreadsheet-like grid powered by Sercrod. Cells are evaluated with JavaScript expressions and saved with *save and *load.
• WebSocket demo - use *websocket to receive live updates from a server and reflect them in the DOM.