Live editor for CSS, Less & Sass - Magic CSS

Chrome Web Store

by webextensions.org

v8.22.5 Updated Jul 24, 2024 2.15MiB

CWS

70K

Users

★ 4.64

278 reviews

#1522

of 140.3K

developer

#134 of 12.3K

⚠️Not updated in over a year ✅Highly rated

Description

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 <body> 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

Live editor for CSS, Less & Sass - Magic CSS screenshot 1

Reviews (16 cached)

Last 12 months

★☆☆☆☆2023-06-13

Frank Lafortune (Faux Scout)

Does not work at all.

★☆☆☆☆2020-09-23

Andrei Surdu

Poor implementation. The styles does not load on page refresh unless you open the extension editor again. Also it inherits the website styles in CodeMirror editor, and as a result you end up having white text on white background. I don't have the time to debug it more, if you ask me.

★☆☆☆☆2018-09-21

Ravi Mattar

what a disgusting excuse for an extension

★☆☆☆☆2018-08-27

リョウイチ

Poor implementation... loads on the page you're on, meaning if it has keyboard shortcuts assigned to regular keys, you won't be able to type anything

★☆☆☆☆2015-12-16

Karl S. (AmericanTrekker)

Doesn't seem to actually work on my Chrome Version 47.0.2526.80 m. Nice idea if it did though.

★☆☆☆☆2014-05-11

Deddy Syefria

Won't work

★★☆☆☆2015-08-03

W “EB” W

Looks fine when you start but then after using it a few times it fails to update meaning you have to copy the css, reload the page - open whatever source viewer and start using it again.. kills productivity!

★★☆☆☆2014-03-10

Squalle

Worthless to me. If you add a background color to a div, the editor changes as well. I suppose it works fine for everything that has a specific class or id, but for spans, divs, etc, it only causes issues.

★★★☆☆2025-01-13

Viet Le

This was my goto, but had to remove it because of the annoying little notification that tells me I have autoloading CSS Pinned ruins some of our screen captures. It shows on every refresh for whatever reason. Which it would just stay docked to the extension icon. If you don't need to load any local CSS and screen record at the same time, then this is for you though.

★★★☆☆2023-04-09

HeRuHaiLiu Huang

dont know how to use it, give a ok rating.

★★★☆☆2022-02-02

Jean Fradet

Love the idea, but SASS isn't working :(

★★★☆☆2022-01-15

Whane The Whip

It's okay but it does not work with every site (does not open). Sadly this is the case for a site I need to edit colors on since I'm colored blind. Edit: I don't know what details you want. I already explained that your app does not open on all sites.

★★★☆☆2021-12-01

John Smith

Injects itself into the page which can cause various type of conflicts. Not the best decision. Would have been great extension otherwise.

★★★☆☆2019-04-22

Siniša Petrović

Nice extension but, you can't use it in mobile view, because it's loaded inside the window. That's a big issue.

★★★☆☆2017-08-23

Kevin Thorpe

Great tool, but have had recent issues with its function, copy/paste problems, today could not edit.

★★★☆☆2017-03-03

Rosseyn

Nice syntax highlighting, horrific UI and only supports tabs.

★☆☆☆☆ - Frank Lafortune (Faux Scout) (2023-06-13)

Does not work at all.

★☆☆☆☆ - Andrei Surdu (2020-09-23)

★☆☆☆☆ - Ravi Mattar (2018-09-21)

what a disgusting excuse for an extension

★☆☆☆☆ - リョウイチ (2018-08-27)

Poor implementation... loads on the page you're on, meaning if it has keyboard shortcuts assigned to regular keys, you won't be able to type anything

★☆☆☆☆ - Karl S. (AmericanTrekker) (2015-12-16)

Doesn't seem to actually work on my Chrome Version 47.0.2526.80 m. Nice idea if it did though.

★☆☆☆☆ - Deddy Syefria (2014-05-11)

Won't work

★★☆☆☆ - W “EB” W (2015-08-03)

★★☆☆☆ - Squalle (2014-03-10)

★★★☆☆ - Viet Le (2025-01-13)

★★★☆☆ - HeRuHaiLiu Huang (2023-04-09)

dont know how to use it, give a ok rating.

★★★☆☆ - Jean Fradet (2022-02-02)

Love the idea, but SASS isn't working :(

★★★☆☆ - Whane The Whip (2022-01-15)

★★★☆☆ - John Smith (2021-12-01)

Injects itself into the page which can cause various type of conflicts. Not the best decision. Would have been great extension otherwise.

★★★☆☆ - Siniša Petrović (2019-04-22)

Nice extension but, you can't use it in mobile view, because it's loaded inside the window. That's a big issue.

★★★☆☆ - Kevin Thorpe (2017-08-23)

Great tool, but have had recent issues with its function, copy/paste problems, today could not edit.

★★★☆☆ - Rosseyn (2017-03-03)

Nice syntax highlighting, horrific UI and only supports tabs.

Permissions (6)

Permissions

offscreenunlimitedStorage

Details

Version	8.22.5
Updated	Jul 24, 2024
Size	2.15MiB
First Seen	Mar 29, 2026

Live editor for CSS, Less & Sass - Magic CSS

Description

Reviews (16 cached)

Permissions (6)

Permissions

Details

More by webextensions.org

Popular in developer

Popular Extensions