Reviews & Comments of Live editor for CSS, Less & Sass - Magic CSS chrome extension

Brilliant

Really neat way of trying out design alternatives for my website without the complexity of browser development tools, and the ability to toggle the changes to see the differences. A keeper!

This is amazing and there's like no other! It saves even when refreshed. Thank you so much!

A fantastic plugin that I have been using for 6+ months now. I've been waiting for some "gotchas" but this extension has yet to disappoint. Absolutely brilliant - thank you !!

Absolutely great, and my current weapon of choice ( because of the autocomplete and color display ). Previously i was using 'user CSS'. However, when using an external window ( absolute necessity for working on mobile designs ), as you change each page, the external window loses sync with the browser and your changes will not be saved or previewed. Thus you have to click the extension icon, move a window back over to the side, and rinse repeat for each page change. That slows me down :( For the record i'm using windows 10 And Google Chrome Version 108.0.5359.73 (Official Build) (64-bit). I would be willing to help the developer diagnose this as the problem is almost a 'game breaking bug'!

Works really well overall. The only issue I have is when editing in an external window, the plugin has to be loaded again after refreshing the page I'm styling, and then I have to close the old editor. That quickly gets tedious.

I use it in all of my projects and love it!

very helpful

I mostly love this extension, and have been using it for a few years with no issues, though now that I'm sometimes working on a secondary computer I'm going to have to hunt down an alternative extension. There's no way to sync custom code so it's accessible from multiple computers or across different Chromium-based browsers, and worse, there's no way I've been able to find to view all of the code you've added -- if you want to copy it from one computer to another, you have to remember all the websites you modified, then go to each one individually so you can access and copy its custom code. On the plus side, the extension is lightweight and easy to use, and has been stable and reliable in my experience. It also has a feature that I haven't been able to find in any other code injector plugin so far: drag-and-drop functionality for the code window. As I'm trying out alternative plugins, I'm really missing the ability to move the window so it's not blocking a part of the page that I'm trying to modify.

It's really nice to be able to do css developing with less directly on the browser

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.

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

Basically I've been looking for a custom CSS injector and this is really great for that because I can't remember any of the syntax/keywords and have to use trial and error. The selector selector is a plus

Loved It

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

Great app. Works like a charm. sometimes the predictions feel awkward as they block your typing. But thats fine. Btw if you can spend a minute and change the icon color in Chrome toolbar. it would be great. The Chrome toolbar is white and the icon color is also white. So it appears empty there and makes it hard to recall what extension is actually there.

Really the best one. Thanks for useful tool!

After turning on "Allow access to file URLs" in the extension's options, when I try to enable "apply style automatically" on a local html file, thee extension returns the following error: "you need to provide permissions to reapply styles automatically." I'm not sure what it means by that, as the statement is very vague. I believe it used to be able to do this, so I'm guessing something changed in Chrome's security model, since I last used this functionality.

nice ext

i enjoy to use this Program

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.

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!

This is very use full if you want customize view.

a great tool. if you add the convert css to less part, it's even better. Thank you publisher

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!

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.

Very useful, thank you! :)

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.

I use this pretty much every day. Simple, stable, well thought out tool! Thank you very much

Fast, efficient, handy. Does all you need and nothing extra. It's beautiful.

wonderful

Works perfectly. Couldn't ask for anything more. Thank you!

Best extension ever! Thank you!!!

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.

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?

finally, an awesome live css extension that auto loads my styles

♥

Essential for front-end devs. After using this you may wonder how you ever managed without it!

loved the first ONE MINUTE of this extension great app!

Very useful.

You are a genius! This is saving me sooooooo much time its untrue. Thanks muchly

Absolutely love this extension, I use it every day. Nice work guys!

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! =]

Excellent. Cannot develop without it.

I can't live without it anymore.

great app but doesn't work with firebase.google.com

much lighter than stylish, and the same useful

Absolutely amazing! Love this tool so much! Great job!

Sometimes is useful, but not always...

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

Awesome! Fixed the Google Tasks problem with the canvas view being obsolete. Thank you! Here's what I did: 1) install this extension: 'Live editor for CSS, Less & Sass - Magic CSS' 2) put this css into the extension's css editor: .gb_gd,.gb_Md,.gb_od,.gb_Zb { display: none; } .brC-brG { width: 100vw!important; } .G4zhSc,.CTxcDf { width: 100%; } Set it to apply automatically (little icon at top of extension's window). To get it to work I need to click on the Extension icon in the address bar to activate it (not sure why), then press F12 to bring up devtools (not sure why either). That's it!

Very useful!!!

It keep's the style when I accidentally refresh the page, thank you! The only thing is it would be awesome if you could move the window outside of the chrome main page window...

i love it thx

Extremely useful tool.

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

Thanks for this addon.

WOW just WOW .... its the best css-editor extension that I ever used :) keep the good work.

this is a very helpful tool. I loved it since the first use, keep up the good work guys <3..

I've been looking for a replacement for Stylebot and this is almost exactly what I need! The only problem is the pop-up text that appears in the top right corner when you've set the extension to apply styles automatically. It gets kind of distracting when it appears each time you refresh or navigate to a different page. If we could get an option to disable that pop-up, this would be perfect!

One of the extensions I use the MOST. Saves a bunch of time when developing straight in browser. I would love to see some jQuery support as well instead of deferring to the console.

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. A sincere hats off to the developers of this. Also, it has a great personality, if that's not anthropomorphising more than I should:p

This is by far the most useful web development chrome plugin I have ever used. EXCELLENT!

you should totally build this as a application on the play store for android web browsers and pages i think this would be a super successful product on the play store

it is a good program, just if could find site sass files and ability to change theme it will be greate

the best app for web devalopment i give 10 stars if is a way to import sass from file to import the mixns and the variables

Very robust and has every feature I'd want in a live css editor. Well done. Love that it integrates SASS as well and also gives a pretty well done element finder. That said, I do not like that it floats. I have constant issues highlighting/copying/pasting. I also do not like how you resize it (only in the lower-right). I would love a slideout pane that you can resize and also move to the left or right side with an arrow vs. the floating box. My frustration is constant with both of these issues, especially since I use this extension on a Surface and when the resolution changes (from docking/undocking) I always need to resize, etc.

Great extension!. Please support live jQuery injection.

This addon is great! Please support SASS (SCSS syntax). That would be great.

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

awesome, a simple and useful tool

This is pure joy.

So useful. Has never failed me for its purpose. Thank you!

Very helpful tool

I like this extension so much If there is a search function,this extension will be better

Excellent Extension. Was very helpful to quickly check the CSS realtime. Thank you

Nice syntax highlighting, horrific UI and only supports tabs.

Perfect! Especially the floating window and "Disable CSS" feature. Although the window skin is disgusting.

good

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

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!

Speeds up workflow, testing, and debugging! very useful! Google developer tool is very daunting to use for quick easy testing. this extension however, is not!

Great extension! Just add an autocompletion feature and it will be epic :)

Use it daily. Thanks!

It great !!!!!

nice

Great extension. Very helpful to us a developer.. GOOD JOB!

This extension is great! It allows me to pinpoint specific css modifiers to overwrite them properly. I'm not sure why anyone else has problems with this extension, but it works great for me!

Won't work

Muy útil. Escribe tu código CSS en una pequeña ventana junto al navegador y visualiza instantáneamente los cambios que se producen.

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.

Finally!!! A simple and useful extension to live edit the CSS! You can edit the CSS on a separate and simply resizable (not as live CSS) window.

Great features. Needs to either automatically apply the saved css every time the site is visited, or have an option that allows the user to choose to automatically apply the saved css. Also needs options to change which sites the css applies to. An option to resize the css window and text would also be nice.