SiteTailor - Visual Website Customizer

Visually customize the CSS properties of any website, preview changes in realtime, and automatically reapply styles on return visits

SiteTailor is a professional visual CSS editor, in-page annotation engine, and theme customizer for Google Chrome. Select any element on any webpage, adjust its styling in real-time, pin sticky notes, insert pre-built components, and persist your customizations across visits—with zero coding required. Whether you are tailoring high-contrast reading themes, removing annoying page clutter, fixing typography legibility, leaving design feedback for your team, or mocking up UI tweaks directly on production sites, SiteTailor gives you studio-grade design control. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ✨ KEY CAPABILITIES & FEATURES ━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 🎨 LIVE VISUAL CSS EDITOR • Point, click, and visually edit any element on the page. • Real-time interactive controls for Typography (font family, size, weight, line-height). • Color palettes, solid fills, linear gradients, and opacity adjustments. • Interactive Box Model visualizer for precise margin and padding tweaking. • Borders, border-radius, and multi-layer box shadows. • Instant Undo / Redo history with keyboard shortcuts (`Ctrl+Z` / `Ctrl+Y`). • Selector health indicator (Unique, Broad, or Missing) ensures robust CSS matching. 📌 STICKY NOTES & IN-PAGE ANNOTATIONS • Pin persistent sticky notes directly to any DOM element. • Leave design review comments, bug notes, or task reminders that stay with the element. • Floating annotation toolbar featuring pens, highlighters, arrows, and shapes. • Custom color swatches (Amber, Sky, Emerald, Coral) and stroke sizing. 🧩 COMPONENT PALETTE & DRAG-AND-DROP LAYERS • Browse and insert pre-styled responsive UI components (buttons, badges, pricing cards, containers). • Visual DOM Layers panel: view element hierarchies and toggle element visibility. • Reorder page elements with intuitive drag-and-drop handles. 🌙 SMART PAGE THEMES • 1-click global Dark Mode and Light Mode inversion. • Background-adaptive color inversion maintains optimal contrast without breaking layout integrity. • Toggle per-site or globally with instant re-render. ⚡ CHROME CLOUD SYNC & PORTABILITY • Rules automatically synchronize across your signed-in Chrome browsers (`chrome.storage.sync`). • Automatic local fallback (`chrome.storage.local`) when offline or exceeding quota. • Visible storage quota monitor in the popup. • Full JSON backup export and per-site restore—your data is always 100% yours. 🔒 PRIVACY BY DESIGN • 100% Client-Side: SiteTailor operates entirely within your browser. • Zero Telemetry: No tracking scripts, no third-party analytics, and no browsing data sent to external servers. • Least-Privilege Permissions: Site access is strictly optional and requested only on sites you choose to customize. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 🚀 HOW TO USE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 1. Click the SiteTailor icon in your browser toolbar or press its shortcut. 2. Click "Open Editor" on any site you want to customize. 3. Click any button, heading, or card on the page to inspect and style it. 4. Your tweaks save automatically and restore instantly whenever you return!