svelte-cue-stack-editor Svelte Themes

Svelte Cue Stack Editor

✦ Svelte cue stack editor with Tailwind 4, animate:flip reordering, live cue controls, and Netlify-ready static deployment.

#editor#netlify#netlify-deployment#queue#reactive-ui#static-site#svelte#svelte5#tailwindcss#typescript
Demo Download

✦ Cueframe

Svelte cue stack editor with animated reordering, live editing controls, and a reactive stage preview


A compact Svelte pet project built to demonstrate list reordering the way Svelte makes it feel best: edit a cue, change the stack rule, and watch the board restack itself with animate:flip while the live stage preview recomputes from the same state.

✨ Highlights

  • Manual and auto-stack modes for cue ordering: Manual, Intensity, Focus, and Duration
  • Live cue editing with armed state, label updates, duplication, removal, and timing controls
  • animate:flip-driven card reordering that reacts immediately to sort mode and slider changes
  • Reactive stage preview that derives channel output from the lead cue plus board trim controls
  • Tailwind CSS 4 as the styling base with a small custom range-input layer
  • Static Vite setup with Netlify-ready deployment

🧭 Scope

  • / - the Cueframe cue stack editor

🛠️ Tech Stack

Layer Technology
Framework Svelte 5
Language TypeScript
Styling Tailwind CSS 4 + compact custom slider styling
Motion animate:flip, fade, fly
Build Tool Vite 8
Hosting Static deployment ready

🔀 Cue Stack Logic

  • Manual mode keeps your explicit order and enables move up / move down controls
  • Intensity, Focus, and Duration modes auto-restack the queue from live cue values
  • Editing a cue while auto-stack is enabled can immediately change its position in the queue

🗂️ Project Structure

svelte-cue-stack-editor/
├── public/
│   └── favicon.svg
├── src/
│   ├── App.svelte
│   ├── app.css
│   ├── main.ts
│   ├── vite-env.d.ts
│   └── lib/
│       └── CueSlider.svelte
├── LICENSE
├── netlify.toml
├── package.json
└── README.md

🚀 Local Development

📦 Install

npm install

▶️ Run dev server

npm run dev

🏗️ Build

npm run build

🌐 Deployment

  1. Push your code to GitHub
  2. Connect repository to Netlify
  3. Build settings are auto-configured via netlify.toml
  4. Deploy

📄 License

MIT License. See LICENSE.

Top categories

tailwinddaisyuiadmin templatepopupmdsvexportfolioblogformecommerceuicarouselauthdarkseoimagerouting
Loading Svelte Themes