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.
https://chrome.google.com/webstore/detail/ifhikkcafabcgolfjegfcgloomalapol
https://microsoftedge.microsoft.com/addons/detail/live-editor-for-css-less/ahibbdhoijcafelmfepfpcmmdifchpdg
https://addons.mozilla.org/firefox/addon/live-editor-for-css-less-sass/
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
- 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 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
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
- Browserify
- Code Mirror
- codemirror-colorpicker
- emmetio/codemirror-plugin
- CSS Pretty
- CSSLint
- jQuery
- jQuery UI
- Less
- magicsuggest
- Mozilla Source Map
- SASS / SCSS
- socket.io (WebSocket API library)
- Tooltipster
Inspirations:
- "Auto-generate CSS selectors with point-and-click" feature is partly inspired by the Chrome extensions SelectorGadget and Stylebot
Author:
Connect to us:
Firefox addon cannot be found
"Oops! We can’t find that page" https://addons.mozilla.org/en-CA/firefox/addon/live-editor-for-css-less-sass/
Does not appear via search for "live css" within the Addons page either anymore. Cannot seem to find it - not possible to install anymore? What happened here?
This site can’t be reached
Hello, I followed the steps below:

when I go to http://192.168.0.64:3456/ on Google and Firefox, it shows "This site can’t be reached".

Then I changed the port from 3456 to 8081, also unavailable.
But I have made a live-server successfully like this.
So what should I do? There must be some errors in your project. How should we correct them?
Feature Request(s) - Dark Mode Support
A) Support for a different extension icon color for use with dark web browser themes (black icon is almost invisible when using a dark browser theme).
B) Support for some different theme editor styles (e.g. Ambiance, Chaos, Chrome, Clouds, Clouds Midnight, Cobalt, Crimson Editor, Dawn, Dracula, Dreamweaver, Eclipse, GitHub, Green on Black, Gruvbox, idle Fingers, IPlastic, KatzenMilch, krTheme, Kuroir, Merbivore, Merbivore Soft, Mono Industrial, Monokai, Nord Dark, Pastel on dark, Solarized Dark, Solarized Light, SQL Server, Terminal, TextMate, Tomorrow, Tomorrow Night, Tomorrow Night 80s, Tomorrow Night Blue, Tomorrow Night Bright, Twilight, Vibrant Ink, Xcode )
Feature request: Option to stay active
There is one huge inconvenience with the "workflow" of using this extension:
So on every page reload or new page, there are two unnecessary clicks involved. When trying to work fast, with lots of new page openings, this drives me nuts.
It would be great with an option to have the custom CSS stay active on all subsequent pages/reloads on each activated domain throughout the same browser session,
Desired behaviour:
Suggestion: Space to enter predetermined variables?
It would be fantastic to allow a settings location for pre-determining variables for SASS. I do theming for several websites where i use the same variables, to be able to have those readily available before I start tweaking code would be a HUGE timesaver. Just a thought. Thanks for a great product!
Small bug for Firefox
There is a "small" bug in the Firefox version that prevent the addon from being installed in some configuration and sadly I have one of those setup.
The error is in the "manifest", usually it's an ID missing that can prevent the addon from being installed but this time it's more "complicated" so here's the message from the console:
I use Firefox latest ESR 51.1.2 under Windows.
If you need more information just ask me.
Regards :octocat:
sass parser uses scss instead of sass
there is a syntax difference, particularly the brackets. i thought the plugin was broken because it said that my selector had an error but in reality it was working correctly. it would be awesome to be able to use both sass and scss but at the very least scss should be labeled properly.
its great work though
Can't apply styles to other extension in overlay
Can't apply styles to other extension in overlay, which appear on all sites. I mean styles appear to some other extension (etc online translate) only at one webpage, where that styles was redefined. At ohter page redefined styles is not connect.
Shortcut Does Not Work Second Time
Just discovered this in replacement of a different Live CSS Editing Extension. So good to finally have code completion.
I, however, found that the shortcut apparently only works two times. First to activate the extension first. And then it deactivates the code. But then it doesn't do anything any more 🙈.
Hope to see further improvements on this. It's an amazing tool.
Thanks,
Chris
Suggestion : give the possibility to show the live editor in a separated window
Problem : Live CSS editor show on top of the website you are working on. In some cases, it takes to much place, and even if you resize it to make it small and push it at the right, bottom, left or right, it hides to much the website you are working on.
Example : you push Live CSS editor at the bottom of your website : when you scroll down at the maximum, you cannot see the footer of your website.
Suggestion : possibility to show it in a separated window or possibility to divide the window in 2, as the native browser web editor does. If you show it in a separated window, and have 2 screens, you can show the website in a screen and the CSS editor in an other.
Cursor doesn't show
Great extension !!! I can't see the cursor when I'm editing the CSS.
Any clues how can I fix this. Maybe changing the color of the cursor?
Thank you
Using Chrome Versión 61.0.3163.100 (Build oficial) (64 bits) in Spanish
Feature Request: Backup/Export option!
Currently, there doesn't seem to be a way to back up all the stylesheets in one sweep! Users have to go to each website & then open the extension and then copy the stylesheet & then finally paste it somewhere to back it up. it's a time-consuming process if the user has 100+ stylesheets! Please add a way to back up all the stylesheets in one sweep!
Request - delayed load
This extension is one of my all-time favorites. I sincerely thank you for making it.
I have one issue. A relatively minor but persistent one: this extension never loads properly for Disqus. I think the issue is that Disqus loads a moment after the webpage loads, which also seems to be after this extension loads. I can manually load the extension by clicking it, but that's somewhat inconvenient, and I have to deal with Disqus's horrid default design until then.
The feature I'm hoping for is something like a delayed load (to only load the extension after the website is fully loaded, perhaps?) option that can be toggled or white listed. Or really, whatever solution you might come up with that would make Disqus stop being the bane of my browsing experience.
Thank you.
Bump qs from 6.5.2 to 6.5.3 in /tests
Bumps qs from 6.5.2 to 6.5.3.
Changelog
Sourced from qs's changelog.
Commits
298bfa5
v6.5.3ed0f5dc
[Fix]parse
: ignore__proto__
keys (#428)691e739
[Robustness]stringify
: avoid relying on a globalundefined
(#427)1072d57
[readme] remove travis badge; add github actions/codecov badges; update URLs12ac1c4
[meta] fix README.md (#399)0338716
[actions] backport actions from main5639c20
Clean up license text so it’s properly detected as BSD-3-Clause51b8a0b
add FUNDING.yml45f6759
[Fix] fix for an impossible situation: when the formatter is called with a no...f814a7f
[Dev Deps] backport from mainDependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels
will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers
will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees
will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone
will set the current milestone as the default for future PRs for this repo and languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
Bump express from 4.17.1 to 4.17.3 in /live-css
Bumps express from 4.17.1 to 4.17.3.
Release notes
Sourced from express's releases.
Changelog
Sourced from express's changelog.
Commits
3d7fce5
4.17.3f906371
build: update example dependencies6381bc6
deps: [email protected]a007863
deps: [email protected]e98f584
Revert "build: use [email protected] for Node.js < 4"a659137
tests: use strict modea39e409
tests: prevent leaking changes to NODE_ENV82de4de
examples: fix path traversal in downloads example12310c5
build: use nyc for test coverage884657d
examples: remove bitwise syntax for includes checkDependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels
will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers
will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees
will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone
will set the current milestone as the default for future PRs for this repo and languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
Bump decode-uri-component from 0.2.0 to 0.2.2 in /tests
Bumps decode-uri-component from 0.2.0 to 0.2.2.
Release notes
Sourced from decode-uri-component's releases.
Commits
a0eea46
0.2.2980e0bf
Prevent overwriting previously decoded tokens3c8a373
0.2.176abc93
Switch to GitHub workflows746ca5d
Fix issue where decode throws - fixes #6486d7e2
Update license (#1)a650457
Tidelift tasks66e1c28
Meta tweaksDependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels
will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers
will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees
will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone
will set the current milestone as the default for future PRs for this repo and languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
Bump qs, body-parser and express in /live-css
Bumps qs to 6.11.0 and updates ancestor dependencies qs, body-parser and express. These dependencies need to be updated together.
Updates
qs
from 6.7.0 to 6.11.0Changelog
Sourced from qs's changelog.
... (truncated)
Commits
56763c1
v6.11.0ddd3e29
[readme] fix version badgec313472
[New] [Fix]stringify
: revert 0e903c0; addcommaRoundTrip
option95bc018
v6.10.50e903c0
[Fix]stringify
: witharrayFormat: comma
, properly include an explicit `[...ba9703c
v6.10.44e44019
[Fix]stringify
: witharrayFormat: comma
, include an explicit[]
on a s...113b990
[Dev Deps] updateobject-inspect
c77f38f
[Dev Deps] updateeslint
,@ljharb/eslint-config
,aud
,has-symbol
,tape
2cf45b2
[meta] usenpmignore
to autogenerate an npmignore fileUpdates
body-parser
from 1.19.0 to 1.20.1Release notes
Sourced from body-parser's releases.
Changelog
Sourced from body-parser's changelog.
Commits
830bdfb
1.20.1ecad1cc
build: [email protected]03b93cf
build: [email protected]2c611fc
build: [email protected]f199e94
perf: remove unnecessary object clone0123e12
build: [email protected]de1e6c2
build: [email protected]477ff13
build: [email protected]40c3fff
deps: [email protected]4aa84b7
build: [email protected]Updates
express
from 4.17.1 to 4.18.2Release notes
Sourced from express's releases.
... (truncated)
Changelog
Sourced from express's changelog.
... (truncated)
Commits
8368dc1
4.18.261f4049
docs: replace Freenode with Libera Chatbb7907b
build: [email protected]f56ce73
build: [email protected]24b3dc5
deps: [email protected]689d175
deps: [email protected]340be0f
build: [email protected]33e8dc3
docs: use Node.js name style644f646
build: [email protected]ecd7572
build: [email protected]Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels
will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers
will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees
will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone
will set the current milestone as the default for future PRs for this repo and languageYou can disable automated security fix PRs for this repo from the Security Alerts page.