Live preview of CSS/Less/Sass code changes. Auto-save file, autocomplete, Less/Sass to CSS, beautify, CSS reloader, lint, ...
Live editor for CSS, Less & Sass - Magic CSS Extension
Featuring:
✓ Live editor for CSS/Less/Sass code - Preview changes as you write code
✓ Autocomplete
✓ Live edit CSS files and auto-save on file system
✓ Open code editor in external window
✓ CSS reloader
✓ Option to reapply styles automatically
✓ Syntax Highlighting
✓ Auto-generate CSS selectors with point-and-click
✓ Emmet support
✓ Color picker
✓ Convert code from Less/Sass to CSS
✓ Beautify / Format code
✓ Minify code
✓ Highlight DOM elements matching the CSS selectors
✓ Option to load this extension in iframes as well
✓ Get SVG icons
✓ Lint CSS code
This extension is available for:
✓ Google Chrome
✓ Microsoft Edge
✓ Mozilla Firefox
✓ Opera
Open source:
✓ https://github.com/webextensions/live-css-editor
====+====+====+====+====+====
You might want to use it for:
➤ No need to refresh pages to test your CSS/Less/Sass code
➤ Auto-save your changes to filesystem as you write the code
➤ Reload CSS resources without refreshing the page
➤ Speed-up development by writing code directly on your page
➤ Develop and test your code before finalizing your changes
➤ Apply some temporary styles (like hiding some components)
➤ Do CSS changes on any website
Notes:
➤ The CSS/Less/Sass code you write gets applied as you write it
➤ The CSS reloader watches CSS files and live updates them immediately
➤ You can develop the code and see the output at the same time
➤ The code is saved in file/browser as soon as you write it
➤ The code editor is draggable and resizable
➤ Use code editor in external window for developing responsive pages
➤ The code you write is auto-saved for the site
➤ You can use \"TAB\" key to indent your code
➤ Running Magic CSS again, while it is already loaded, disables the code
➤ Press \"Esc\" or click on close to hide it
➤ The code is added at the bottom of the tag
➤ It includes CSS/Less/Sass beautifier
➤ It includes CSS minifier
➤ It highlights the DOM elements matching the CSS selectors
➤ Use it along with Chrome/Edge/Firefox/Opera Developer tools
➤ You might find it useful in creating your custom themes for websites based on Stylish / Stylist
➤ This extension was previously known as \"MagiCSS - Live CSS Editor\"
Security and privacy:
ⓘ No permissions approval is required for installing the extension
ⓘ For advanced features, like \"Apply styles automatically\", permissions are requested on-demand
ⓘ Mixpanel is used to get anonymized stats for improving UX
ⓘ Browser extension's storage, localStorage etc are utilized for the extension's core features.
Visit https://webextensions.org/ for further details.
Created by:
➤ Priyank Parashar - https://linkedin.com/in/ParasharPriyank/
Connect with us:
➤ https://webextensions.org/
➤ https://github.com/webextensions/live-css-editor
➤ https://twitter.com/webextensions
Source Manifest.json
Similar Extensions
User JavaScript and CSS 70,000+ 564 ★ 1.62MiB
Code Plunker (Live HTML CSS Editor) 70,000+ 8 ★ 288KiB
Code Cola 70,000+ 188 ★ 189KiB
Amino: Live CSS Editor 70,000+ 453 ★ 1.45MiB
CSS3 Generator 70,000+ 60 ★ 346KiB
Live CSS Editor 70,000+ 182 ★ 24.38KiB
Visual CSS Editor 70,000+ 145 ★ 414KiB
Save CSS 70,000+ 29 ★ 23.44KiB
CSSViewer 70,000+ 371 ★ 301KiB
CSS Shapes Editor 70,000+ 101 ★ 84.76KiB
User CSS 70,000+ 264 ★ 298KiB
Wordpress Style Editor 70,000+ 47 ★ 47.72KiB
CSS Peeper 70,000+ 363 ★ 279KiB
Quickfix CSS Editor 70,000+ 8 ★ 354KiB
CSS Brio 70,000+ 5 ★ 86.26KiB
Jinno: code any React component with AI 70,000+ 38 ★ 18.37MiB
Live Custom CSS,JS injector on pages 70,000+ 35 ★ 140KiB
CSS Inspector 70,000+ 64 ★ 2.57MiB
CSS Scan 70,000+ 84 ★ 1.41MiB
Hoverify 70,000+ 145 ★ 14.54MiB
CSS Used 70,000+ 184 ★ 164KiB
JScript tricks 70,000+ 50 ★ 340KiB
Web Maker 70,000+ 1002 ★ 5.76MiB
Stylebot 70,000+ 1603 ★ 10.27MiB
User reviews
Masoud Tanha (ID: 000000c592c21946) Voted 5 ★ - Updated 01/31/2024
Ayyappa J (ID: 00000048a81b3739) Voted 5 ★ - Updated 01/15/2024
Archicoders Archicoders (ID: 000000b6c23c98c3) Voted 5 ★ - Updated 11/21/2023
ThatWeirdGuy (ID: 00000069dff75b4d) Voted 5 ★ - Updated 09/28/2023
minh quan nguyen (ID: 000000b0c0a68a1e) Voted 5 ★ - Updated 09/12/2023