#257·tweakcn

Add Floating Theme Editor Component

Author: aayush-dev-tsxCreated Feb 8, 2026Updated Feb 8, 2026

Is your feature request related to a problem? Please describe. Currently, developers using tweakcn need to visit the website (tweakcn.com) to customize themes, which shows only dummy preview components. This workflow is frustrating because:

  • I can't see how theme changes look on my actual application pages (dashboards, forms, tables, etc.)
  • Switching between my app and tweakcn.com breaks the development flow
  • I can't instantly test theme changes on real UI components in my project
  • There's no way to inspect individual elements on my pages to see which theme variables they use

Describe the solution you'd like

A Floating Theme Editor component that works like browser DevTools - a draggable, floating panel that overlays your actual application pages. Key features:

Core Functionality:

Floating Panel - Draggable theme editor that stays above page content Inspector Mode - Click to enable, then hover over any element on the page to see its theme classes and customize them ⚡ Real-time Preview - See changes instantly on actual pages (not dummy components)

User Experience:

⌨️ Keyboard Shortcut: Ctrl+Shift+P (or Cmd+Shift+T on Mac) to toggle editor ️ Smooth Drag & Drop: Using @dnd-kit for performance-optimized dragging Boundary Constraints: Panel stays within window bounds with 20px margins Window Resize Handling: Panel position adjusts automatically Intuitive Controls: Collapse/expand, maximize/restore, close buttons

Additional context This feature transforms tweakcn from a website tool into a development-time component