Overview
Example of a Live CSS Editor, that handles the whole document as well all shadow dom elements.
This browser extension provides an in-page, real-time SCSS editor that simplifies styling for web developers. It allows you to write and compile SCSS code directly within any webpage, with the resulting CSS applied instantly. The tool automatically detects elements with a Shadow DOM and presents them in a dropdown menu, enabling you to apply specific styles to these encapsulated components. For the main document body, you can write general styles that apply globally. Key features include: Live Compilation: Your SCSS code is compiled to CSS in real time, with a status light indicating success or errors. Persistent Storage: All your written SCSS code is automatically saved locally for each website, so your work persists even after you close the tab. Code Formatting: A dedicated "Format Code" button uses the powerful Prettier library to automatically format your SCSS, ensuring clean and readable code. Focus-based Opacity: The entire editor container becomes fully opaque when you interact with it and fades to a lower opacity when you lose focus, minimizing visual clutter. This tool is designed to provide a more efficient workflow for live debugging and styling, especially for complex web applications that utilize Shadow DOM.
Details
- Version1.1
- UpdatedSeptember 10, 2025
- Offered byphilip.juszczak
- Size1.75MiB
- LanguagesEnglish
- Developer
Email
philip.juszczak@gmail.com - Non-traderThis developer has not identified itself as a trader. For consumers in the European Union, please note that consumer rights do not apply to contracts between you and this developer.
Privacy
This developer declares that your data is
- Not being sold to third parties, outside of the approved use cases
- Not being used or transferred for purposes that are unrelated to the item's core functionality
- Not being used or transferred to determine creditworthiness or for lending purposes
