CSS Editor
The feature-rich CSS editor enables pixel perfect styling relative to specific JSX elements. The intention is to allow you to perfect your changes before sharing them with an LLM.
Core Features
- Live CSS Editing - Edit CSS properties and values inline with real-time validation
- Autocomplete - Intelligent suggestions for CSS properties and values as you type
- Undo/Redo - Full undo/redo stack for all CSS changes (Cmd/Ctrl+Z)
- Property Override Detection - Visual indication when properties are overridden by other rules
Value Editing Shortcuts
- ↑/↓ arrows: Increment/decrement numeric values by 1
- Alt + ↑/↓: Increment/decrement by 0.1
- Cmd + ↑/↓: Increment/decrement by 100
- Smart Unit Handling - Automatically preserves units (px, rem, %, deg, etc.)
Color Editing
- Visual Color Picker - Full color picker with RGB, HSL, and HEX input
- Color Swatches - Inline color swatches that open the picker when clicked
- CSS Variable Resolution - Hover over CSS variables to see their computed values
Advanced Editors
- :pseudo - Add and edit pseudo-class styles (`:hover`, `:focus`, etc.)
- @media - Create responsive styles with media query support
- 🌗 theme - Light/dark theme variant editing
- Nested Support - Combine pseudo-selectors, media queries, and themes