Live editor for CSS, Less & Sass - Magic CSS

CRX id

ifhikkcafabcgolfjegfcgloomalapol

Description from extension meta

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

Image from store Live editor for CSS, Less & Sass - Magic CSS

Description from store 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 ====+====+====+====+====+==== What some of our users say: Justin Hale - ★★★★★ "This extension is great! It allows me to pinpoint specific css modifiers to overwrite them properly." Johnny Petro - ★★★★★ "I would have never expected this: this extension has changed the way I write code. This basically turns Chrome into a live typesetting system. No more developing css in the chrome debugger. No more developing css in an IDE/editor. I feel like this turns Chrome into a word processor." Tanner Legasse - ★★★★★ "I use this plugin on a daily basis. I don't mean just once or twice in a day, I mean it makes 5 hours of work take 2 for me, and I use it constantly." Władzix - ★★★★★ "Incredible! Everything I was searching for, runs Live so you don't have to refresh every time you edit something, very nice suggestions while typing and other small features like colors are displayed in squares while typing names. One of the best features is auto enable on websites. I have made dark theme mode for some websites, thanks to this extension! Awesome!!!" ====+====+====+====+====+==== 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 ➤ The Sass parser is loaded remotely from https://cdnjs.cloudflare.com/ajax/libs/sass.js/... ➤ 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 ⓘ Google Analytics is used to get anonymized stats for improving UX ⓘ Browser extension's storage, localStorage etc are utilized for the extension's core features. Credits for open source code used by this extension: * Amplify JS * Babel * Browserify * Code Mirror * codemirror-colorpicker by easylogic @ GitHub * Emmet codemirror-plugin by emmetio @ GitHub * CSS Pretty * CSSLint * ESLint * jQuery * jQuery UI * jQuery UI Touch Punch * Less * magicsuggest * Material-UI * Mozilla Source Map * Node.js * React JS * React Redux * SASS / SCSS * socket.io (WebSocket API library) * Tooltipster * Webpack Alternative CSS development tools you may like if you are looking for features which are not yet available in Magic CSS: * Amino: Live CSS Editor * CSS Peeper * CSSViewer * Page Ruler Redux * PerfectPixel * Stylebot * Stylus * Viewport Resizer * VisBug * WhatFont Inspirations: * "Auto-generate CSS selectors with point-and-click" feature is partly inspired by the Chrome extensions SelectorGadget and Stylebot Visit https://webextensions.org/ for further details. Created by: ➤ Priyank Parashar - https://linkedin.com/in/ParasharPriyank/ Connect to us at: ➤ https://webextensions.org/ ➤ https://github.com/webextensions/live-css-editor ➤ https://twitter.com/webextensions

Latest reviews

(2021-06-17) Richard Cote: I'm revisiting this after having tried it a long time ago. The separate window is a huge improvement, and the preprocessor support is terrific.
(2021-06-13) Mirage Tokyo: Awesome extension! Improved my development efficiency
(2021-06-11) Felipe Bayona: this extencion Is amazing
(2021-06-08) Dustin Tantum: While there are other realtime CSS editors available... this one is by far my favorite. Not only is this a GREAT tool for writing, editing, beautifying/minifying CSS, but it also supports persistent site-by-site CSS customizations as well! Additionally, the developers are very active in its continued development and responsive to good feature requests!
(2021-06-05) Ashish Kumar Burnwal: This is very use full if you want customize view.
(2021-06-02) Vasiliy Leytman: A bit more modern look could add up, but all in all, it's a great little exension!
(2021-05-20) nhungo duc: a great tool. if you add the convert css to less part, it's even better. Thank you publisher
(2021-05-18) Fery Mehry: The buttons in the top-right bar are buggy and sometimes are invisible, though they can be clicked. The style pinner shows a notification on page load which is annoying. It's better to change the icon of the extension to indicate active style injection (see Stylus). Otherwise, great extension!
(2021-05-15) 庞旭东: nice
(2021-05-06) Hao Liu: Great！
(2021-04-29) Theo Kondakos: Been using this plugin for about 4 years now. It helped me write code much much faster, cleaner. The fact that it allows me to write SCSS on the fly is also amazing. The only issue that I face, is while developing smaller screens. The plugin starts behaving a bit wierdly, you can't copy/paste via shortcuts, you can't select all your code to copy if it's too long, and stuff like that. My guess is that these technical difficulties are inherent to the approach the plugin has by being part of the DOM. The new approach, that the plugin opens in a new window solves this downside. I wish it can support SCSS too in the future. That would be super awesome.
(2021-04-28) Jonatan Ro: Very useful, thank you! :)
(2021-04-15) КреКер Деккер: Всё работает как и должно, только лично мне не хватает функции авто-открытия расширения при посещении сайта.
(2021-04-09) Scott Dixon: Works great. I usethis to remove a watermark overlay on a website I visit. I needed something that could easily locally save css changes I made to live sites.
(2021-04-06) Julian Duncan: I use this pretty much every day. Simple, stable, well thought out tool! Thank you very much
(2021-03-28) Janis C: hHe has everything you need to track and edit a website live. Extremely simple but at the same time brilliantly helpful and useful !!! I definitely recommend it !!
(2021-03-12) Kuroi Mato: Awesome
(2021-02-25) ASD ASD: Fast, efficient, handy. Does all you need and nothing extra. It's beautiful.
(2021-02-08) Станислав Садыков: Просто нет слов. Шикарно. Увеличил продуктивность вдвое.
(2021-02-07) Mike: wonderful
(2021-01-31) Jonathan Summers: Works perfectly. Couldn't ask for anything more. Thank you!
(2021-01-04) Lucian Bumb: Best extension ever! Thank you!!!
(2020-12-04) Huy Phạm: Very good extension, but why not have a shortcut to reload all css source, it's will make this perfect extension ever for front-end developer
(2020-11-17) Tudor Neicovcen: This app is good for making themes on websites. It allows to perform css changes and to save those changes. Everytime when you reload a page it will apply those changes to the specific website. It is extremely useful for people with basic knowledge of html & css.
(2020-10-31) ozdal solmaz: Müthiş bir uygulama. Zaman kazandırıyor. Yapımcılara teşekkürler :)
(2020-09-23) Andrew 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.
(2020-09-02) Johnny Petro: I would have never expected this: this extension has changed the way I write code. This basically turns Chrome into a live typesetting system. No more developing css in the chrome debugger. No more developing css in an IDE/editor. I feel like this turns Chrome into a word processor. If I was greedy I would ask for stylus support :-) Pretty please?
(2020-07-15) HieiLawliet: finally, an awesome live css extension that auto loads my styles
(2020-07-08) Ahmed Hafez: ♥
(2020-06-24) Josef Chadim: Very useful to avoid wiping your ideas on refresh when debugging.
(2020-04-15) Not Cool: Absolutely incredible. Automatic page load, finds classes, click on element to add selector to editor. Just crazy. Thank you very much.
(2020-04-15) Lucas Liu: Anyone is having trouble connect to the live-css server as I do from localhost on Mac? I'm launching the server as instructed however it is only running with http but the extension is looking for https. Other than this, everything is perfect.
(2020-04-10) Den Hector: Лучшее расширение из тех, что пробовал на сегодняшний день. Да, не спорю, есть что хотелось бы добавить, но у каждого свои желания и всем не угодишь)))
(2020-03-17) Jose Antonio Carmona Morón: Desde me lo descubrí no puedo vivir sin él, una auténtica maravilla
(2020-01-10) Ben Cheshire: Essential for front-end devs. After using this you may wonder how you ever managed without it!
(2019-12-31) Happy Fone: loved the first ONE MINUTE of this extension great app!
(2019-12-15) I love it, it saved my life
(2019-12-08) Мастер Дарий: Действительно лучшее, но жаль что нет синхронизации или хотябы экспорта! ----------------------------------------------------------------------------------------------------------- Really the best, but it is a pity that there is no synchronization or at least export!
(2019-12-04) Simon Fevyer: Very useful.
(2019-11-21) Perfeito, a melhor ferramenta do Gênero!!!! Parabéns para o autor!
(2019-10-17) Squiggley Woo: You are a genius! This is saving me sooooooo much time its untrue. Thanks muchly
(2019-10-15) Xiguo Zhou: BIG BUG ！！！！ when set div { background-color:red } the background color of the edit view been changed too. So every elements in the edit view should set !important to all styles;
(2019-09-30) Chris Low: Absolutely love this extension, I use it every day. Nice work guys!
(2019-09-30) Nam Đặng: A great plugin, I love you 3000!
(2019-08-19) Simon Edwards: Fantastic. I've tried all of the extensions on the store which do this, but this is by far the best. I hope you keep up the development for this and not fade away like a lot of others devs! =]
(2019-08-16) John Camacho: Excellent. Cannot develop without it.
(2019-07-24) Władzix 2: Incredible! Everything I was searching for, runs Live so you dont have to run every time you edit something,very nice suggestions while typing and other small features like colors are displayed in squares while typing names. The one of the best features is auto enable on websites. I have made dark theme mode for some websites, thanks to this extension! Awesome!!!
(2019-07-19) Yannick Burky: I can't live without it anymore.
(2019-07-16) shod 197: great app but doesn't work with firebase.google.com
(2019-07-04) void painter: much lighter than stylish, and the same useful

Latest issues

(2021-06-22, v:8.17.0) Theo Kondakos: Import SCSS files to Live CSS Editor through @import
Hello, I am loving this extension, probably made my workflow a thousand times faster and clearer. Now, I got a question. I am mostly writing SCSS, and I have some kind of personal utility classes and mixins library, and I was wondering if there is a way to load these files into my Live CSS editor through an @import (or @use) command. I tried placing my files (partials etc) to the server, and then using an @import + url to load the one file that loads the rest but it didn't work. My thought was to load all my scss code to Live CSS extension, and then use my variables and mixins in the Live CSS extension. Thanks in advance
(2020-10-08, v:8.5.1) Wojciech Górski: scroll problem
The scroll tends to "acting up" means - when i'm scrolling on mouse then active window is scrolling maybe 0.5mm per full scroll(it's really weird) - it's kinda like it wants to force smooth scroll. Anything can be done about that?
(2020-10-08, v:8.5.1) Wojciech Górski: dark theme?
Any chance for dark mode/theme? I'm used to sublime(and i'm pretty sure tousands of other people too) and suddenly coding in light-color-based editor is kinda problematic :x
(2020-09-11, v:8.3.0) Nathan Swafford: Issue with line spacing and cursor for last week or so.
I'll try and describe the issue as best I can. It works but there are white lines between the lines off CSS and the cursor is huge. At first I thought I may have changed a setting but I've looked. This is on Mac in Chrome. Here is a link to a screenshot https://i.imgur.com/IbuOPWr.png
(2020-02-07, v:7.0.10) Vizlox: Color Editing Tool Not Working
When I try to open the color tool menu by clicking on the square to the left of a color hex, it brings up the menu but without any of the buttons and sliders, only a blank white rectangle. At the top is the color gradient graphic which I am unable to interact with. I tried uninstalling and reinstalling the extension from chrome, I tried rebooting chrome, and I tried restarting my computer but none of these fixed the issue.
(2020-01-13, v:7.0.7) Ben Cheshire: Custom CSS for iframes overwrites the parent page's CSS too
When working in an iframe, if the parent page is refreshed, the custom CSS for the parent page will sometimes (but not always) be overwritten by the iframe's CSS. It's just a minor annoyance for me as I don't need the parent page to have custom CSS, so I just remove the entire block every time it happens. There was one occasion where the parent frame's CSS overwrote the iframe's CSS, luckily I already had a backup of the stylesheet.
(2019-12-31, v:7.0.7) Tojanna Creative: i cannot connect to the live css server
i cannot connect to the live css server, how to resolove ?
(2019-12-08, v:7.0.7) Мастер Дарий: sync or export
Please add sync or export.
(2019-08-19, v:7.0.7) Simon Edwards: URL changed, cannot access my code to copy/restore it to the new URL
Hello, Love the extension, I've been using it for a very long time. I'm running into an issue where the URL of a website I've heavily customized has changed its URL e.g. example1.domain.com to example2.domain.com which means all of my CSS got reset. Is there any way for me to access my old CSS which is still stored on example1? I cannot get to the old URL as it immediately redirects to the new URL so I'm a bit stuck, and I've got about 8 months worth of CSS stored in there. Kind regards, Simon
(2018-12-24, v:7.0.7) Thanks for the awesome extension
Please add reset option to extension main menu ,because I typed this `body{display:none}`
(2018-08-04, v:7.0.0) How can I edit the css for an iframe?
I have ticked the 'Load for frame/iframe' option, but I still get only one instance of the editor for a page which contains iframes, and I can't select elements within the iframe.
(2018-07-10, v:7.0.0) Refano Pradana: can it block magnifier glass ui?
Can it block magnifier glass ui in ebay, amazon, aliexpress. Whenever I view the product viewer, the annoying jquery block the image.
(2018-06-12, v:7.0.0) Load current css file to edit
Perhaps I'm overlooking this feature, but is it possible to load the current .css file on a webpage to quickly make edits?
(2018-03-24, v:6.2.25) webdeve deveweb: Mobile responsive problem
Very cool plugin but when you use it for responsiveness of you can't move the location of the css editor
(2018-01-24, v:6.2.23) Aviad Priel: import sass files
i give 10 stars if is a way to import sass from file to import the mixns and the variables
(2018-01-05, v:6.2.22) Ammi Said: Thank
Thank very lot !!!
(2018-01-03, v:6.2.22) Andrew Nyland: Please fix
This is useless if it can't run in extensions.
(2017-11-18, v:6.2.22) Omid Rahmani: magic css android
magic css android ???

Statistics

Installs

45,382

Links

Extension in store

Web page

Developer e-mail