{"id":13477674,"url":"https://github.com/webextensions/live-css-editor","last_synced_at":"2025-04-04T22:04:55.301Z","repository":{"id":20295556,"uuid":"87470794","full_name":"webextensions/live-css-editor","owner":"webextensions","description":"Source code for Chrome/Edge/Firefox/Opera extension Magic CSS (Live editor for CSS, Less \u0026 Sass)","archived":false,"fork":false,"pushed_at":"2024-07-28T09:25:06.000Z","size":15492,"stargazers_count":285,"open_issues_count":37,"forks_count":61,"subscribers_count":21,"default_branch":"main","last_synced_at":"2025-03-28T21:02:58.558Z","etag":null,"topics":["chrome-extension","css","editor","firefox-addon","javascript","less","sass"],"latest_commit_sha":null,"homepage":"https://chromewebstore.google.com/detail/live-editor-for-css-less/ifhikkcafabcgolfjegfcgloomalapol","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/webextensions.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-04-06T20:14:14.000Z","updated_at":"2025-03-21T07:29:11.000Z","dependencies_parsed_at":"2023-11-08T04:25:37.992Z","dependency_job_id":"467c1898-441e-42c1-bc6b-4cae62aad21d","html_url":"https://github.com/webextensions/live-css-editor","commit_stats":{"total_commits":845,"total_committers":5,"mean_commits":169.0,"dds":"0.30177514792899407","last_synced_commit":"f2d3df6709ec8bd6662bbb58a6bc89a4c4377975"},"previous_names":[],"tags_count":32,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webextensions%2Flive-css-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webextensions%2Flive-css-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webextensions%2Flive-css-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webextensions%2Flive-css-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/webextensions","download_url":"https://codeload.github.com/webextensions/live-css-editor/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247256110,"owners_count":20909240,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chrome-extension","css","editor","firefox-addon","javascript","less","sass"],"created_at":"2024-07-31T16:01:45.984Z","updated_at":"2025-04-04T22:04:55.284Z","avatar_url":"https://github.com/webextensions.png","language":"JavaScript","readme":"# Live editor for CSS, Less \u0026 Sass (Magic CSS)\nExtension **Live editor for CSS, Less \u0026 Sass** *(Magic CSS)* for Google Chrome, Microsoft Edge, Mozilla Firefox and Opera.\n\n\u003c!--\n    Reference: https://stackoverflow.com/questions/13808020/include-an-svg-hosted-on-github-in-markdown/16462143#16462143\n--\u003e\n\n\u003cimg width=\"32\" alt=\"Google Chrome Logo\" src=\"extension/ui-images/logo-google-chrome.svg\"\u003e \u0026nbsp; https://chrome.google.com/webstore/detail/ifhikkcafabcgolfjegfcgloomalapol\n\n\u003cimg width=\"32\" alt=\"Microsoft Edge Logo\" src=\"extension/ui-images/logo-microsoft-edge-chromium.svg\"\u003e \u0026nbsp; https://microsoftedge.microsoft.com/addons/detail/live-editor-for-css-less/ahibbdhoijcafelmfepfpcmmdifchpdg\n\n\u003cimg width=\"32\" alt=\"Mozilla Firefox Logo\" src=\"extension/ui-images/logo-firefox_edited.png\"\u003e \u0026nbsp; https://addons.mozilla.org/firefox/addon/live-editor-for-css-less-sass/\n\n\u003cimg width=\"32\" alt=\"Opera Logo\" src=\"extension/ui-images/logo-opera.svg\"\u003e \u0026nbsp; https://addons.opera.com/extensions/details/live-editor-for-css-and-less-magic-css/\n\n**Live preview of CSS/Less/Sass code changes. Auto-save file, autocomplete, convert Less/Sass to CSS, beautify, minify, CSS reloader, linter, ...**\n\nRun 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.\n\n**Featuring:**\n* Live editor for CSS/Less/Sass code - Preview changes as you write code\n* Live edit CSS files and auto-save on file system\n* CSS reloader\n* Option to reapply styles automatically\n* Syntax Highlighting\n* Auto-generate CSS selectors with point-and-click\n* Autocomplete for CSS selectors, properties and values\n* Emmet support helps in quickly expanding abbreviations to CSS code (https://docs.emmet.io/css-abbreviations/)\n* Color picker (supports HEX, RGB, RGBA, HSL and HSLA)\n* Convert code from Less/Sass to CSS\n* Beautify / Format code\n* Minify code\n* Highlight DOM elements matching the CSS selectors\n* Option to load this extension in iframes as well\n* Lint CSS code\n\n**Open source:**\n* https://github.com/webextensions/live-css-editor\n\n**This extension is available for:**\n* Google Chrome\n* Microsoft Edge\n* Mozilla Firefox\n* Opera\n\nVisit https://webextensions.org/ for further details\n\n**Created by:**\n* Priyank Parashar\n\n**Uses:**\n* No need to refresh pages to test your CSS/Less/Sass code\n* Auto-save your changes to filesystem as you write the code\n* Reload CSS resources without refreshing the page\n* Speed-up development and testing of your styling code by doing it directly on your page\n* Develop and test your code before finalizing your changes into the project files\n* Apply some temporary styles (like hiding some components)\n* Test styling changes even when you cannot modify the original source code\n\n**Notes:**\n* The CSS/Less/Sass code you write gets applied as you write it\n* The CSS reloader watches CSS files and live updates them immediately\n* With this styling code tester, you can develop and test the code at the same time\n* The code is saved in browser/file as soon as you write it\n* The code editor is resizable and draggable\n* The code you write is auto-saved at site level and can be used again for same or different pages\n* You can use \"TAB\" key to indent your code\n* Running Magic CSS again, while it is already loaded, will restore it to its original position and size\n* Press \"Esc\" or click on close to hide it and run it again to continue making changes\n* The code you write is added at the bottom of the `\u003cbody\u003e` tag of the active page\n* It includes CSS/Less/Sass beautifier\n* It includes CSS minifier\n* It highlights the DOM elements matching the CSS selectors\n* Use it along with your favorite Chrome/Edge/Firefox/Opera Developer tools\n* You might find it useful in creating your custom themes for websites based on Stylish / Stylist\n* This extension was previously known as \"MagiCSS - Live CSS Editor\"\n\n**Credits for open source code used by this extension:**\n* Amplify JS\n* Browserify\n* Code Mirror\n* [codemirror-colorpicker](https://github.com/easylogic/codemirror-colorpicker)\n* [emmetio/codemirror-plugin](https://github.com/emmetio/codemirror-plugin)\n* CSS Pretty\n* CSSLint\n* jQuery\n* jQuery UI\n* Less\n* magicsuggest\n* Mozilla Source Map\n* SASS / SCSS\n* socket.io (WebSocket API library)\n* Tooltipster\n\n**Inspirations:**\n* \"Auto-generate CSS selectors with point-and-click\" feature is partly inspired by the Chrome extensions SelectorGadget and Stylebot\n\n**Author:**\n* Priyank Parashar - [GitHub](https://github.com/paras20xx) | [Twitter](https://twitter.com/paras20xx) | [LinkedIn](https://linkedin.com/in/ParasharPriyank/)\n\n**Connect with us:**\n* https://webextensions.org/\n* [GitHub](https://github.com/webextensions/live-css-editor)\n* [Twitter](https://twitter.com/webextensions)\n","funding_links":[],"categories":["JavaScript","Miscellaneous"],"sub_categories":["Editor's Draft :black_nib:"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebextensions%2Flive-css-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebextensions%2Flive-css-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebextensions%2Flive-css-editor/lists"}