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

Latest Version

Version
8.22.5
Update
July 23, 2024
Size
2.15MiB
Developer
webextensions.org
Category
Users
70,000+
Rating
4.64286 ★
Manifest Version
3
Web Store Status
Languages Support
English
See more
Permissions
ActiveTab
Storage
UnlimitedStorage
Scripting
Offscreen
See more

Live editor for CSS, Less & Sass - Magic CSS Extension

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 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
Read more

Source Manifest.json

{"update_url": "https://clients2.google.com/service/update2/crx", "version": "8.22.5", "manifest_version": 3, "author": "Priyank Parashar", "default_locale": "en", "name": "__MSG_Extension_Name__", "description": "__MSG_Extension_Description__", "homepage_url": "https://github.com/webextensions/live-css-editor", "icons": { "16": "icons/icon-16.png", "24": "icons/icon-24.png", "32": "icons/icon-32.png", "40": "icons/icon-40.png", "48": "icons/icon-48.png", "128": "icons/icon-128.png", "256": "icons/icon-256.png" }, "permissions": [ "activeTab", "storage", "unlimitedStorage", "scripting", "offscreen" ], "optional_permissions": [ "webNavigation" ], "optional_host_permissions": [ "*://*/*" ], "action": { "default_icon": { "16": "icons/icon-16.png", "24": "icons/icon-24.png", "32": "icons/icon-32.png", "40": "icons/icon-40.png", "48": "icons/icon-48.png", "128": "icons/icon-128.png", "256": "icons/icon-256.png" }, "default_title": "Launch Magic CSS editor for this page" }, "background": { "service_worker": "dist/background-magicss/background-magicss.bundle.js" }, "commands": { "_execute_action": { "suggested_key": { "default": "Alt+Shift+C" } } }, "options_ui": { "open_in_tab": true, "page": "options.html" }, "content_security_policy": { "extension_pages": "script-src 'self'; object-src 'self'" }, "offline_enabled": true, "minimum_chrome_version": "102"}
Read more

How to download and manually install Live editor for CSS, Less & Sass - Magic CSS extension for Chrome

Looking for a way to install Live editor for CSS, Less & Sass - Magic CSS extensions for Chrome, you can search for them in the Chrome Web Store, clicking the "Add to Chrome" button, and following the straightforward process.

However, you may need to install Live editor for CSS, Less & Sass - Magic CSS extensions manually, this article outlines two simple methods to effortlessly install Live editor for CSS, Less & Sass - Magic CSS extensions, whether they come as unpacked folders in compressed formats like .zip or as .crx files.

Method 1: Download Live editor for CSS, Less & Sass - Magic CSS extension and manually install through Drag &Drop

If you ever need to manually install a Live editor for CSS, Less & Sass - Magic CSS extension for Chrome, don't worry, it's a simple process. Just follow these easy steps, and you will have your extension ready to use in no time.

Step 1: Download the Live editor for CSS, Less & Sass - Magic CSS Extension by clicking the "Download CRX" button on the website.

Look for the Live editor for CSS, Less & Sass - Magic CSS extension you wish to install. Go to the website and download the Live editor for CSS, Less & Sass - Magic CSS extension package, which is usually a .CRX file and comes in a zipped file. Here ".crx" file is the format for Live editor for CSS, Less & Sass - Magic CSS extension that contains all the data.

Step 2: Extract &Arrange Files

Once the file is downloaded, extract that file into its own folder. Similarly, give that extension files a permanent home. In other words, keep it in a folder that you don't accidentally delete it because these files will be needed to make that extension work.

Step 3: Go to the Chrome Extensions Page

Open Google Chrome and in the address bar, type chrome://extensions; it will open the Google Chrome extensions page. Make sure that "My extensions" is selected in the sidebar.

Step 4: Drag and Drop the Extension

Now, go to the folder where you extracted the Live editor for CSS, Less & Sass - Magic CSS extension and drag &drop the extension file from there anywhere onto the extension page within Google Chrome.

Step 5: Complete the Installation

Once you drag and drop the extension file, follow the steps that Google Chrome takes you through. Similarly, if the extension file is of .crx file format, you will be required to review the permissions and then add the extension.

Now, you can manage that added extension as you would like to with any other Chrome extension that you added through Chrome Webstore. Its icon will also appear in the Google Chrome Menu on the right side of the address bar once you activate it.

Method 2: Download Live editor for CSS, Less & Sass - Magic CSS extension for Chrome and install in Developer Mode

This is another method to install Live editor for CSS, Less & Sass - Magic CSS extension manually, but the twist is that here, you install by enabling the developer mode option provided in Google Chrome. This mode is commonly used for testing extensions or running unpublished tools.

Step 1: Download the Live editor for CSS, Less & Sass - Magic CSS extension file

Select and download the Live editor for CSS, Less & Sass - Magic CSS extension by clicking the 'Download CRX' button on the website.

Step 2: Extract the downloaded contents

Convert the file to a ZIP file if it is in CRX format then extract the Live editor for CSS, Less & Sass - Magic CSS extension zip file or folder that you downloaded. Make sure you extract it using the same folder name and keep it safely in another folder, so you don't delete it by mistake. The extracted folder will be needed to keep your Live editor for CSS, Less & Sass - Magic CSS extension running.

Step 3: Open Chrome Extension Setting Page

In the address bar of Google Chrome, type chrome://extensions and open the Chrome Extension Page.

Step 4: Enable Developer Mode

After opening the Chrome Extension page, look at the top right side, and you will find the toggle option of "Developer mode."Simply enable that developer mode option.

Step 5: Load the Unpacked Extension

Once you enable the developer mode option, you will see the menu of Load Unpacked, Pack Extensions and Update. From that, select the option "Load unpacked."

Step 6: Select the Extension Folder

Once the pop-up opens upon clicking Load unpacked, select the Live editor for CSS, Less & Sass - Magic CSS extension directory and click on the "Select Folder "button.

Step 7: Confirm and Install

After you select an extension folder of a Google Chrome extension you're installing manually, confirm its installation for the final time and let the installation complete.

Conclusion

Here we've made a step-by-step guide on How to manually install Live editor for CSS, Less & Sass - Magic CSS extension in 2 ways. We hope this guide proves helpful.

Similar Extensions

icon

User JavaScript and CSS Extension · Developer Tools 70,000+ 564 ★ 1.62MiB

icon

Code Plunker (Live HTML CSS Editor) Extension · Developer Tools 70,000+ 8 ★ 288KiB

icon

Code Cola Extension · Developer Tools 70,000+ 188 ★ 189KiB

icon

Amino: Live CSS Editor Extension · Developer Tools 70,000+ 453 ★ 1.45MiB

icon

CSS3 Generator Extension · Developer Tools 70,000+ 60 ★ 346KiB

icon

Live CSS Editor Extension · Developer Tools 70,000+ 182 ★ 24.38KiB

icon

Visual CSS Editor Extension · Developer Tools 70,000+ 145 ★ 414KiB

icon

Save CSS Extension · Developer Tools 70,000+ 29 ★ 23.44KiB

icon

CSSViewer Extension · Developer Tools 70,000+ 371 ★ 301KiB

icon

CSS Shapes Editor Extension · Developer Tools 70,000+ 101 ★ 84.76KiB

icon

User CSS Extension · Developer Tools 70,000+ 264 ★ 298KiB

icon

Wordpress Style Editor Extension · Developer Tools 70,000+ 47 ★ 47.72KiB

icon

CSS Peeper Extension · Developer Tools 70,000+ 363 ★ 279KiB

icon

Quickfix CSS Editor Extension · Developer Tools 70,000+ 8 ★ 354KiB

icon

CSS Brio Extension · Developer Tools 70,000+ 5 ★ 86.26KiB

icon

Jinno: code any React component with AI Extension · Developer Tools 70,000+ 38 ★ 18.37MiB

icon

Live Custom CSS,JS injector on pages Extension · Developer Tools 70,000+ 35 ★ 140KiB

icon

CSS Inspector Extension · Developer Tools 70,000+ 64 ★ 2.57MiB

icon

CSS Scan Extension · Developer Tools 70,000+ 84 ★ 1.41MiB

icon

Hoverify Extension · Developer Tools 70,000+ 145 ★ 14.54MiB

icon

CSS Used Extension · Developer Tools 70,000+ 184 ★ 164KiB

icon

JScript tricks Extension · Developer Tools 70,000+ 50 ★ 340KiB

icon

Web Maker Extension · Developer Tools 70,000+ 1002 ★ 5.76MiB

icon

Stylebot Extension · Accessibility 70,000+ 1603 ★ 10.27MiB

User reviews

icon

Masoud Tanha (ID: 000000c592c21946) Voted 5 ★ - Updated 01/31/2024 Makes the life easier! :D

icon

Ayyappa J (ID: 00000048a81b3739) Voted 5 ★ - Updated 01/15/2024 Amazing!

icon

Archicoders Archicoders (ID: 000000b6c23c98c3) Voted 5 ★ - Updated 11/21/2023 Best

icon

ThatWeirdGuy (ID: 00000069dff75b4d) Voted 5 ★ - Updated 09/28/2023 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.

icon

minh quan nguyen (ID: 000000b0c0a68a1e) Voted 5 ★ - Updated 09/12/2023 good extentions