pal-e-docs

Project: svelte-playground

project-svelte-playground Project Page

active project-page
Project

Vision

Interactive Svelte prototype hub. Adapts pal-e-playground's CSS-first philosophy with Svelte reactivity for features that need interactivity — kanban boards, drag-and-drop, real-time filters, form wizards. No SvelteKit, no SSR. Svelte + Vite compiles to static files. Each subdirectory is a project prototype. The board tracks which prototypes need building across all projects. Playground-approved designs promote directly to production repos — .svelte files ARE HTML.

User Stories

Who uses this prototype hub, what they need, and how we measure success.
Role Key Story Success Metric
<strong>Superuser</strong> (Lucas) <code>story:prototype-iterate</code> I can see and interact with feature prototypes on my phone, iterate visually, and approve designs before they go to production. Every production feature was playground-approved first. Zero "agent built it but I hate it" moments.
<strong>Superuser</strong> (Lucas) <code>story:client-demo</code> I can share a prototype URL with clients to demo upcoming features before they're production-ready. Client can view prototype on their own device.
<strong>Agent</strong> (Dev) <code>story:agent-promote</code> I can copy .svelte source from the playground directly into a production repo with minimal changes. Promotion is copy-paste + data bindings, not a rewrite.

Plan

No plan yet — this is board-driven work. Prototypes are scoped as tickets on the board.

Board

board-svelte-playground

Status

Project created 2026-03-24. Forgejo repo initialized. Hub scaffolded with shared CSS + pal-e-app kanban prototype (issues #1, #2). Deployed to playground Tailscale funnel at /svelte/ via pal-e-deployments PR #48 (issue #3). Live at https://playground.tail5b443a.ts.net/svelte/.

Milestones

None yet.

Architecture

Lightweight — no backend, no database. Svelte + Vite compiles .svelte files to static HTML/JS/CSS. Served by nginx via hostPath volume on k3s (same pattern as pal-e-playground) or dedicated Tailscale funnel.
Key decisions:
  • Svelte 5 (runes), not SvelteKit — no routing, no SSR, no adapter
  • Vite multi-page mode — each HTML file is an entry point
  • shared.css is the same design tokens as pal-e-playground (Atkinson Hyperlegible, light theme, CSS custom properties)
  • npm run dev for iteration, npm run build for static deployment
  • Each project subdirectory follows: index.html (entry) + *.svelte (components)

Repos

Repo Platform Role Status
<a href="https://forgejo.tail5b443a.ts.net/forgejo_admin/svelte-playground">svelte-playground</a> Forgejo Svelte + Vite prototype hub active

Backlog

Query: list_board_items(board_slug="board-svelte-playground", column="backlog")