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.
* Live editor for CSS/Less/Sass code – Preview changes as you write code
* Live edit CSS files and auto-save on file system
* CSS reloader
* Option to reapply styles automatically
* Syntax Highlighting
* Auto-generate CSS selectors with point-and-click
* Autocomplete for CSS selectors, properties and values
* Emmet support helps in quickly expanding abbreviations to CSS code (https://docs.emmet.io/css-abbreviations/)
* Color picker (supports HEX, RGB, RGBA, HSL and HSLA)
* 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
* Lint CSS code
This extension is available for:
* Google Chrome
* Microsoft Edge
* Mozilla Firefox
Visit https://webextensions.org/ for further details
* Priyank Parashar
* 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 and testing of your styling code by doing it directly on your page
* Develop and test your code before finalizing your changes into the project files
* Apply some temporary styles (like hiding some components)
* Test styling changes even when you cannot modify the original source code
* 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/…
* With this styling code tester, you can develop and test the code at the same time
* The code is saved in file/browser as soon as you write it
* The code editor is resizable and draggable
* The code you write is auto-saved at site level and can be used again for same or different pages
* You can use “TAB” key to indent your code
* Running Magic CSS again, while it is already loaded, will restore it to its original position and size
* Press “Esc” or click on close to hide it and run it again to continue making changes
* The code you write is added at the bottom of the tag of the active page
* It includes CSS/Less/Sass beautifier
* It includes CSS minifier
* It highlights the DOM elements matching the CSS selectors
* Use it along with your favorite 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”
Credits for open source code used by this extension:
* Amplify JS
* Code Mirror
* codemirror-colorpicker by easylogic @ GitHub
* Emmet codemirror-plugin by emmetio @ GitHub
* CSS Pretty
* jQuery UI
* jQuery UI Touch Punch
* Mozilla Source Map
* SASS / SCSS
* socket.io (WebSocket API library)
* “Auto-generate CSS selectors with point-and-click” feature is partly inspired by the Chrome extensions SelectorGadget and Stylebot
Connect to us at:
* Priyank Parashar – https://linkedin.com/in/ParasharPriyank/
Fast, efficient, handy. Does all you need and nothing extra. It’s beautiful.
Просто нет слов. Шикарно. Увеличил продуктивность вдвое.
Works perfectly. Couldn’t ask for anything more. Thank you!
Best extension ever!
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
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.
Müthiş bir uygulama. Zaman kazandırıyor. Yapımcılara teşekkürler 🙂
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
Very useful to avoid wiping your ideas on refresh when debugging.
Absolutely incredible. Automatic page load, finds classes, click on element to add selector to editor. Just crazy. Thank you very much.
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.
Лучшее расширение из тех, что пробовал на сегодняшний день. Да, не спорю, есть что хотелось бы добавить, но у каждого свои желания и всем не угодишь)))
Desde me lo descubrí no puedo vivir sin él, una auténtica maravilla
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!
I love it, it saved my life
Действительно лучшее, но жаль что нет синхронизации или хотябы экспорта!
Really the best, but it is a pity that there is no synchronization or at least export!
You are a genius! This is saving me sooooooo much time its untrue.
BIG BUG ！！！！
the background color of the edit view been changed too.
So every elements in the edit view should set !important to all styles;
Absolutely love this extension, I use it every day. Nice work guys!