elements
Manual Recipes

Recipes

elements man recipes Read as markdown

Worked end-to-end examples that compose several Elements primitives. Each recipe is a complete pattern you can copy-adapt. Open one with elements man recipes <slug>.

Topics

recipes/authentication Form-based signin and signup with handle + password. Two pages, bcrypt hashing, reactive session.recipes/form-validation Multi-field form with per-field error states and submit gating.recipes/signup-confirmation Signup, send a confirmation email, verify the token, log the user in.recipes/signup-wizard Multi-step signup that preserves form state across pages.recipes/admin-roles Role-gated admin routes via a role column checked inside a shared guard.recipes/file-upload File input bound to File[], @rpc, bytea storage, served back.recipes/live-comments Slack-style composer with optimistic insert and live append.recipes/likes-toggle Join-table row toggled by an auth-gated scoped LiveTable.recipes/shared-lists URL-addressable editable lists with real-time sync.recipes/team-scoped-table Multi-team data partitioned by team-membership scope.recipes/chat-rooms Handle-only auth with a room list and per-room message stream.recipes/typing-indicator Channel-driven who's-typing indicator on top of a chat.recipes/presence Who's currently on a page; heartbeat plus cron cleanup.recipes/collaborative-canvas Stroke broadcast and clear over a channel.recipes/infinite-scroll-feed Pagination via SQL plus intersection observer plus live-prepend.recipes/bidirectional-scope Rows owned by either of two parties; two scoped LiveTables merged in the template.recipes/search-filter Server-driven search and multi-select filter via @rpc.recipes/admin-table Searchable paginated table with inline actions.recipes/markdown-blog Public read plus admin write with markdown rendering.recipes/public-admin-views Two routes over the same data with admin-only mutations.recipes/cron-cache Cron job recomputes a stats row; the page reads from cache.recipes/live-dashboard Background job notifies a channel; templates reassign on each notification.recipes/marketing-page Dark landing page with hero, pricing, and footer using @elements/style.recipes/status-indicators Real-time status dots driven by a channel.recipes/render-markdown Inline markdown editor with live preview.recipes/time-ago Reactive value that ticks over time.