/live-css-editor

Source code for Chrome/Edge/Firefox/Opera extension Magic CSS (Live editor for CSS, Less & Sass)

Primary LanguageJavaScriptMIT LicenseMIT

Live editor for CSS, Less & Sass (Magic CSS)

Extension Live editor for CSS, Less & Sass (Magic CSS) for Google Chrome, Microsoft Edge, Mozilla Firefox and Opera.

Google Chrome Logo   https://chrome.google.com/webstore/detail/ifhikkcafabcgolfjegfcgloomalapol

Microsoft Edge Logo   https://microsoftedge.microsoft.com/addons/detail/live-editor-for-css-less/ahibbdhoijcafelmfepfpcmmdifchpdg

Mozilla Firefox Logo   https://addons.mozilla.org/firefox/addon/live-editor-for-css-less-sass/

Opera Logo   https://addons.opera.com/extensions/details/live-editor-for-css-and-less-magic-css/

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

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

Open source:

This extension is available for:

  • Google Chrome
  • Microsoft Edge
  • Mozilla Firefox
  • Opera

Visit https://webextensions.org/ for further details

Created by:

  • Priyank Parashar

Uses:

  • 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

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
  • With this styling code tester, you can develop and test the code at the same time
  • The code is saved in browser/file 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 <body> 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:

Inspirations:

  • "Auto-generate CSS selectors with point-and-click" feature is partly inspired by the Chrome extensions SelectorGadget and Stylebot

Author:

Connect with us: