Live editor for CSS, Less & Sass - Magic CSS

Download / Install How to install an extension

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 ====+====+====+====+====+==== 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

Latest reviews

(2024-01-31) Masoud Tanha: Makes the life easier! :D
(2024-01-15) Ayyappa J: Amazing!
(2023-11-21) Archicoders Archicoders: Best
(2023-09-28) ThatWeirdGuy: 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.
(2023-09-12) minh quan nguyen: good extentions
(2023-08-13) satoru kurita: 基本的に素晴らしい。ただ、アンドロイドスマホにおいて、kiwiブラウザ上で使おうとしたら、styleのreapplyを自動で行うことができない。どの様に権限を付与したらいいのか教えてほしい。
(2023-07-14) Space Dorito: Really amazing! it's so much easier to make themes for websites with this!
(2023-06-13) Frank Lafortune (Faux Scout): Does not work at all.
(2023-05-22) Abdullah Alary: loved it great work
(2023-05-17) Jacu: Muito bom!
(2023-04-13) Bahar Sales: Brilliant
(2023-04-09) HeRuHaiLiu Huang: dont know how to use it, give a ok rating.
(2023-04-06) Peter Boulton: 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!
(2023-03-01) Sheena Tuazon: This is amazing and there's like no other! It saves even when refreshed. Thank you so much!
(2023-02-28) Jovan Ralic: Best one I found! Just wish it would sink the data to my account, so that it's available on my other machine right away.
(2023-02-25) yassine: les fonctionnalités sont dures à trouver mais c'est pile ce qu'il me fallait - tu peux laisser l'extension générer le code lié à un élément de la page en le sélectionnant (l'icône à gauche de la croix en haut à droite) - et avec l'épingle (à gauche des 3 points) tu peux automatiquement appliquer le style au chargement de la page (c'est lié au domaine donc tout le site pas à une seule page) sans devoir lancer l'extension
(2023-02-04) Erick: Es muy buena extension para personas que saben utilizar css, en lo personal me ha gustado muchisimo.
(2023-01-01) Avri Rotner Law.: I put a few CSS lines here for the appearance of the panel of the plugin itself, to adjust it to 2023... I'm sure you'll know how to do it even more accurately than me, and that's very important! The functionality of the plugin is excellent, but its appearance is antique... I put these lines in a plugin on every website, and that's how I get an up-to-date look, I'd be happy if you put this css in by default. {I don't speak English so I translated my message with Google, I'm sure you'll forgive me for the language gaps} /*חלון התוסף*/ #MagiCSS-bookmarklet{ padding: 0px 1px !important; box-shadow: 0px 0px 92px rgba(0,41,89,0.17) !important; background: rgba(255,255,255,0.44) !important; backdrop-filter: blur(30px) !important; border-radius: 15px !important; } #MagiCSS-bookmarklet > div.raw-codemirror-container > div { font-family: 'rubik' !important; } #MagiCSS-bookmarklet > div.raw-codemirror-container > div{ background: rgba(255,255,255,0.02) !important; padding: 15px 15px 15px 15px; } #MagiCSS-bookmarklet > div.magic-css-header > div.magic-css-header-left-section > div > div{ background-color: #020b60 !important; border-radius: 15px; padding: 0px; font-family: 'rubik' !important; } #MagiCSS-bookmarklet > div.magic-css-header{ padding: 8px 15px 0px 15px; } #MagiCSS-bookmarklet > div.raw-codemirror-container > div > div.CodeMirror-scrollbar-filler{ background: rgba(255,255,255,0.02) !important; } ::-webkit-scrollbar, ::-webkit-scrollbar-thumb, ::-webkit-scrollbar-track{ border-radius: 10px; }
(2022-12-09) David S: 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'!
(2022-12-09) Scotty Fitz: 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 !!
(2022-11-30) Острый Перчик: По сравнению с другими подобными расширениями, этот лучший выбор. Но не хватает контекстного подбора параметров стилей uwu.
(2022-11-16) Maxwell Hibbert: 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.
(2022-10-08) Cornelius Kluge: Works wonderful, has a lot of options and handy tools. Can only recommend!
(2022-09-23) Stergios Pappos: I use it in all of my projects and love it!
(2022-09-16) Thanh Hiếu Võ: rất hay
(2022-09-04) reza makvandi: very helpful
(2022-08-28) Laura Timmel: 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.
(2022-07-26) Ruben Fernandes: It's really nice to be able to do css developing with less directly on the browser
(2022-06-27) 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.
(2022-04-29) Tsutchi-ps: Chrome 100に更新してから、Webページを開いた後に自動で反映されないことが多くなりました。 DeepL / Since updating to Chrome 100, web pages are often not automatically reflected after opening.
(2022-03-19) Orest Tiny: Це просто фантастичний продукт, я спробував чимало додатків, цей найкращий!
(2022-02-08) 邱伟师: 初次尝试，感觉不错
(2022-02-02) Jean Fradet: Love the idea, but SASS isn't working :(
(2021-12-24) awe lotta: 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
(2021-12-04) Ashish Dwivedi: Loved It
(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.
(2021-09-20) DeepakKumar Yadav: 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.
(2021-08-31) felipe gabriel: top!
(2021-08-25) Alexandr Fletch: Really the best one. Thanks for useful tool!
(2021-08-19) Zsolt Szabo: 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.
(2021-08-12) Do Trinh: nice ext
(2021-07-30) Amirali Bigdeli: i enjoy to use this Program
(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) Kenny Wind: 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) Feraidoon Mehri: 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!

Statistics

Installs

70,000

Links

Extension in store

Web page

Developer e-mail