Live preview of CSS/Less/Sass code changes. Auto-save file, autocomplete, Less/Sass to CSS, beautify, CSS reloader, lint, ...

Latest Version

Version
8.22.5
Update
July 23, 2024
Size
2.15MiB
Developer
webextensions.org
Category
Users
70,000+
Rating
4.64286 ★
Manifest Version
3
Web Store Status
Languages Support
English
See more
Permissions
ActiveTab
Storage
UnlimitedStorage
Scripting
Offscreen
See more

Live editor for CSS, Less & Sass - Magic CSS Extension

Run this extension and start writing your CSS/Less/Sass code which gets applied immediately. The code you write will be saved in the browser extension's storage space or the site's local storage.

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
Read more

Source Manifest.json

{"update_url": "https://clients2.google.com/service/update2/crx", "version": "8.22.5", "manifest_version": 3, "author": "Priyank Parashar", "default_locale": "en", "name": "__MSG_Extension_Name__", "description": "__MSG_Extension_Description__", "homepage_url": "https://github.com/webextensions/live-css-editor", "icons": { "16": "icons/icon-16.png", "24": "icons/icon-24.png", "32": "icons/icon-32.png", "40": "icons/icon-40.png", "48": "icons/icon-48.png", "128": "icons/icon-128.png", "256": "icons/icon-256.png" }, "permissions": [ "activeTab", "storage", "unlimitedStorage", "scripting", "offscreen" ], "optional_permissions": [ "webNavigation" ], "optional_host_permissions": [ "*://*/*" ], "action": { "default_icon": { "16": "icons/icon-16.png", "24": "icons/icon-24.png", "32": "icons/icon-32.png", "40": "icons/icon-40.png", "48": "icons/icon-48.png", "128": "icons/icon-128.png", "256": "icons/icon-256.png" }, "default_title": "Launch Magic CSS editor for this page" }, "background": { "service_worker": "dist/background-magicss/background-magicss.bundle.js" }, "commands": { "_execute_action": { "suggested_key": { "default": "Alt+Shift+C" } } }, "options_ui": { "open_in_tab": true, "page": "options.html" }, "content_security_policy": { "extension_pages": "script-src 'self'; object-src 'self'" }, "offline_enabled": true, "minimum_chrome_version": "102"}
Read more

Similar Extensions

icon

User JavaScript and CSS Extension · Developer Tools 70,000+ 564 ★ 1.62MiB

icon

Code Plunker (Live HTML CSS Editor) Extension · Developer Tools 70,000+ 8 ★ 288KiB

icon

Code Cola Extension · Developer Tools 70,000+ 188 ★ 189KiB

icon

Amino: Live CSS Editor Extension · Developer Tools 70,000+ 453 ★ 1.45MiB

icon

CSS3 Generator Extension · Developer Tools 70,000+ 60 ★ 346KiB

icon

Live CSS Editor Extension · Developer Tools 70,000+ 182 ★ 24.38KiB

icon

Visual CSS Editor Extension · Developer Tools 70,000+ 145 ★ 414KiB

icon

Save CSS Extension · Developer Tools 70,000+ 29 ★ 23.44KiB

icon

CSSViewer Extension · Developer Tools 70,000+ 371 ★ 301KiB

icon

CSS Shapes Editor Extension · Developer Tools 70,000+ 101 ★ 84.76KiB

icon

User CSS Extension · Developer Tools 70,000+ 264 ★ 298KiB

icon

Wordpress Style Editor Extension · Developer Tools 70,000+ 47 ★ 47.72KiB

icon

CSS Peeper Extension · Developer Tools 70,000+ 363 ★ 279KiB

icon

Quickfix CSS Editor Extension · Developer Tools 70,000+ 8 ★ 354KiB

icon

CSS Brio Extension · Developer Tools 70,000+ 5 ★ 86.26KiB

icon

Jinno: code any React component with AI Extension · Developer Tools 70,000+ 38 ★ 18.37MiB

icon

Live Custom CSS,JS injector on pages Extension · Developer Tools 70,000+ 35 ★ 140KiB

icon

CSS Inspector Extension · Developer Tools 70,000+ 64 ★ 2.57MiB

icon

CSS Scan Extension · Developer Tools 70,000+ 84 ★ 1.41MiB

icon

Hoverify Extension · Developer Tools 70,000+ 145 ★ 14.54MiB

icon

CSS Used Extension · Developer Tools 70,000+ 184 ★ 164KiB

icon

JScript tricks Extension · Developer Tools 70,000+ 50 ★ 340KiB

icon

Web Maker Extension · Developer Tools 70,000+ 1002 ★ 5.76MiB

icon

Stylebot Extension · Accessibility 70,000+ 1603 ★ 10.27MiB

User reviews

icon

Masoud Tanha (ID: 000000c592c21946) Voted 5 ★ - Updated 01/31/2024 Makes the life easier! :D

icon

Ayyappa J (ID: 00000048a81b3739) Voted 5 ★ - Updated 01/15/2024 Amazing!

icon

Archicoders Archicoders (ID: 000000b6c23c98c3) Voted 5 ★ - Updated 11/21/2023 Best

icon

ThatWeirdGuy (ID: 00000069dff75b4d) Voted 5 ★ - Updated 09/28/2023 This is A LOT BETTER than using Stylus or Stylebot, I think it did exactly what I wanted it to do Mainly for me to practice css I really appreciate this thing exists because it was just really annoying to find out what would work best for me but I already really like it after using it for like 3 minutes because I place my code in just to see if it'd work and I love it. I'm going to tell other people about this extension it is really helpful and I'm probably gonna write in other reviews that is probably a better alternative then Stylebot or Stylus, they're either very complicated to use or they just don't work anymore for some reason. Thank you for making this and I'm glad I was able to stumble upon this.

icon

minh quan nguyen (ID: 000000b0c0a68a1e) Voted 5 ★ - Updated 09/12/2023 good extentions