Svelte Patch Panel Lab
✦ Svelte reactive control-surface lab with Tailwind 4, live bindings, animate:flip module reordering, and Netlify-ready static deployment.
✦ Patch Panel
Svelte reactive control-surface lab with Tailwind 4, live bindings, derived UI, and animated module reordering
A compact pet project built to show what feels especially direct in Svelte: bind:value into live state, rune-based derived UI, a Tailwind-first styling base, and a module stack that reorders itself with animate:flip instead of heavy glue code.
✨ Highlights
- Six live controls wired directly into a single patch state
- Presets that rewrite the whole control surface instantly
- One reactive scene where rings, beam width, waveform, pulse bars, and meters all derive from the same values
- Module stack that self-sorts as weights change, animated with
animate:flip - Conditional live notes with Svelte transitions instead of manual DOM orchestration
- Tailwind CSS 4 wired in as the project styling base
- Static Vite build with a simple Netlify deployment path and no adapter
🧭 Scope
/- the Patch Panel control-surface lab
🛠 Tech Stack
| Layer | Technology |
|---|---|
| Framework | Svelte 5 |
| Language | TypeScript |
| Build Tool | Vite 8 |
| Styling | Tailwind CSS 4 + custom motion CSS |
| Motion | animate:flip, fade, fly, scale |
| Hosting | Static deployment ready for Netlify |
Why This Works For Svelte
- The controls use direct bindings instead of extra event plumbing
- The preview is rebuilt from derived values rather than duplicated local state
- The custom slider component uses
bind:valuethrough component props - The module list gets layout motion from Svelte's built-in animation primitives
📁 Project Structure
svelte-patch-panel-lab/
├── netlify.toml
├── package.json
├── public/
│ └── favicon.svg
├── src/
│ ├── App.svelte
│ ├── app.css
│ ├── main.ts
│ ├── vite-env.d.ts
│ └── lib/
│ └── ControlSlider.svelte
└── README.md
🚀 Local Development
📦 Install
npm install
▶️ Run dev server
npm run dev
🏗️ Build
npm run build
🌐 Deployment
🌐 Netlify (Recommended)
- Push your code to GitHub
- Connect repository to Netlify
- Build settings are auto-configured via
netlify.toml - Deploy
📄 License
MIT License. See LICENSE.
