CSS Grab n'go Editor v4.0
Tags: css, html, showdev, news
Published: 2020-04-14 18:38:11

## Hello developers 👋

After success on [Hacker News](https://news.ycombinator.com/item?id=22722671) two weeks ago, by looking at analytics numbers (11K returning users, and counting), I realized there's a real need in this tool.

So, I put my hands on it. Thanks to everyone for the feedback and feature requests I've received so far. A week later, I'm happy to launch its latest release. I've shifted focus from just tinkering CSS properties to learning CSS and sharing created artworks. If you can't wait, here's a direct [link to the tool](https://cssbuilder.veliovgroup.com).

🔥 And today is the day when I've [launched CSS grab n'go editor on Product Hunt 🚀](https://www.producthunt.com/posts/css-grab-n-go-editor), please, join the discussion here or on PH.

This project isn’t new, and it's been for a while off my focus — until now. As of today, I’ve fully refactored codebase, made it efficient, and added a bunch of new features, again thanks for the feedback.

![Call to action button in pure CSS](https://dev-to-uploads.s3.amazonaws.com/i/uy6zhae1c3ddb2gq71o7.png)

### 👨‍💻 Let's start with used OSS:

* ☄ [Meteor.js](https://www.meteor.com/)
* 📦 [ `meteor-build-client` ](https://www.npmjs.com/package/meteor-build-client)
* 📦 [ `ostrio:base64` ](https://github.com/VeliovGroup/meteor-base64)
* 📦 [ `ostrio:templatehelpers` ](https://github.com/VeliovGroup/Meteor-Template-helpers)
* 📦 [ `seba:minifiers-autoprefixer` ](https://github.com/Meteor-Community-Packages/meteor-minifiers-autoprefix)
* 📦 [ `fourseven:scss` ](https://github.com/Meteor-Community-Packages/meteor-scss)
* 📦 [ `mquandalle:jade` ](https://github.com/mquandalle/meteor-jade)
* 📦 [ `fps-m` ](https://www.npmjs.com/package/fps-m)
* 📦 [ `ClientStorage` ](https://www.npmjs.com/package/ClientStorage)
* 📦 [ `autoprefixer` ](https://www.npmjs.com/package/autoprefixer)
* 📦 [ `color` ](https://www.npmjs.com/package/color)
* 📦 [ `cssbeautify` ](https://www.npmjs.com/package/cssbeautify)
* 📦 [ `jsonpack` ](https://www.npmjs.com/package/jsonpack)
* 📦 [FontAwesome icons](https://github.com/FortAwesome/Font-Awesome)

![UI overview](https://dev-to-uploads.s3.amazonaws.com/i/uphyza1f09jfy3basknw.jpeg)

### ✨ New features

- In the first place a lot of new CSS3 properties, like blending modes and background clipping, see [this example](https://cssbuilder.veliovgroup.com/s/1/YmNyfHRyYW5zcGFyZW50fGJpZXx1cmwoIi-Ei2QtNC5qcGciKcSPY3DEg2V4xI5icsSObm8txItwZWHEqnPEkmNvdmXEgmN8ZnN8MTIwxL53fDkwxYRmZnwiQ29uY8S7dCtPbmUiLCtjxJRzacS6fGh8bnVsbHzFhm-EjkVkaXRhYmxlK1TEqMSOb8SSYm98xLJ8NMWJxIN4fENTUzPDsMKfwqTCmFJvY2tzIV7GkiTFhDF8Mnwzxb58NXw2fDd8OMWHfEHFgXxCxoN8RHxFfEZ8R3xIfEl8Ssa1fEt8THxNxrlOxrlPfFB8UXxSXQ__)
- Every property supported with a link to MDN documentation and its code-sample right above it
- Generated CSS, SASS, SCSS, and LESS code now well-prefixed to work on `>0.5`, `not dead`, and `IE9` to `IE11` with autoprefixer
- Keyboard shortcuts as in any other editor! Undo/Redo
- New sharing experiences — after the desired result is achieved it can be shared via direct link, or saved as to your snippets list
- Fonts! Now you can toggle between different fonts, default, system, and top 5 from Google Fonts. Let me know if your favorite font is missing. I'll be happy to add it :)
- Much better performance, especially on heavy filters, blurs, and 3D transitions
- Much better on mobile devices
- It's a full-featured PWA. It means you can install it via "Add to Home Screen" on iOS and Android devices and have this tool everywhere with you, even if you're offline!
- Demos, to kick your inspiration and show capabilities of this tool, I've prepared a few examples (send me yours, I'll add your "styles" and name on our list):
  - [Bookmark icon](https://cssbuilder.veliovgroup.com/s/1/YmNyfG51bGx8YnNnfGNvbnRlxI8tYm94fHB8aHw0MHx3fMSdb3R8PGRpdj58b2XEiG-ErXQuxJ8xMjjEry5zfHNvbGlkxLZjfCNmZjQxMzbErWLEsXzEs8SdxJTFisS4xY8uxYB0cmFuc3BhcsSRxKPElGzFizExxY7Eu8S3xK3FoMWAxJRyxYvFqsWmZG91YmzErMWtxYBmLmTEuMSWxLN8ecSIbHXEgsSNbG-EgiMwMDFmM2bEl8SsxJzEnXR4XsaUJMSdMXwyfDPEm8WMfDV8xYg3fMS1OXxBfELGnkPGnkR8RXxGfEd8SHxJfEp8S3xMxrN8TXxOfE98UHxRxr9Sxrd8U8eGfFR8VXxWx4xXfCRYfFl8WsebxYzEncS1xaLFjDJdxYzGnDE0xYzGoC00XQ__)
  - [Triangle](https://cssbuilder.veliovgroup.com/s/1/YnRscnw2MXxiYnLEg2JjxIMjZsSQZMSSfGN8IzLEmMSZfGZzfDEwNcSbd3w4MDDEm2Z8IlJvYm90byIsK3NhbnMtc2VyacSpdGHElGVudMS7xIdzZ8SHb3JkxLstxK54fHDEnsShaHxudWxsfMSjN8SmfMSvfDxidXTEsG4~fGzFlTEuMsWfZcWJLsSjNsWxxJXEj2Y0MTPFtMSudMWJYsWJxZrErsSLc8SjX2zFgmd0xZVKWTNwcGVTN3xpZMaVxLdlxb7FkDh8eXwtxp1ibHXEg3NwcmVhxpdjb2zFisWWdW1Jxqxzc0tlxp-Fj8S5aMarb8SjaXNTaMa-bnx0xZBjbGljayttZSEmbmLGpzvFonI~XsSGxKfEp0JeXiTEp8SGxa7EhjN8NHzEocW0xpTGnTl8QXxCfEN8RHxFfEZ8R3xIfEl8SnxLfEx8TXxOfE98UHxRfFLIhHxTfFR8VXxWfFfIlFjIlFnIlFrIlMSffCQxxIYxyIExxa7IqMenyK3EnsepLcelxKExxbQxxpQxxp0xx68xyIMxx7ExyIUxx7PInDHHtTHIhzHHtzHHuTHHu8i0XV3Ense9MUhd)
  - [Call-to-action button](https://cssbuilder.veliovgroup.com/s/1/YnRscnw2MXxiYnLEg2JjxIMjZsSQZMSSfGN8IzLEmMSZfGZzfDEwNcSbd3w4MDDEm2Z8IlJvYm90byIsK3NhbnMtc2VyacSpdGHElGVudMS7xIdzZ8SHb3JkxLstxK54fHDEnsShaHxudWxsfMSjN8SmfMSvfDxidXTEsG4~fGzFlTEuMsWfZcWJLsSjNsWxxJXEj2Y0MTPFtMSudMWJYsWJxZrErsSLc8SjX2zFgmd0xZVKWTNwcGVTN3xpZMaVxLdlxb7FkDh8eXwtxp1ibHXEg3NwcmVhxpdjb2zFisWWdW1Jxqxzc0tlxp-Fj8S5aMarb8SjaXNTaMa-bnx0xZBjbGljayttZSEmbmLGpzvFonI~XsSGxKfEp0JeXiTEp8SGxa7EhjN8NHzEocW0xpTGnTl8QXxCfEN8RHxFfEZ8R3xIfEl8SnxLfEx8TXxOfE98UHxRfFLIhHxTfFR8VXxWfFfIlFjIlFnIlFrIlMSffCQxxIYxyIExxa7IqMenyK3EnsepLcelxKExxbQxxpQxxp0xx68xyIMxx7ExyIUxx7PInDHHtTHIhzHHtzHHuTHHu8i0XV3Ense9MUhd)
  - [Text image clipping](https://cssbuilder.veliovgroup.com/s/1/YmNyfHRyYW5zcGFyZW50fGJpZXx1cmwoIi-Ei2QtNC5qcGciKcSPY3DEg2V4xI5icsSObm8txItwZWHEqnPEkmNvdmXEgmN8ZnN8MTIwxL53fDkwxYRmZnwiQ29uY8S7dCtPbmUiLCtjxJRzacS6fGh8bnVsbHzFhm-EjkVkaXRhYmxlK1TEqMSOb8SSYm98xLJ8NMWJxIN4fENTUzPDsMKfwqTCmFJvY2tzIV7GkiTFhDF8Mnwzxb58NXw2fDd8OMWHfEHFgXxCxoN8RHxFfEZ8R3xIfEl8Ssa1fEt8THxNxrlOxrlPfFB8UXxSXQ__)
  - [Pink scull](https://cssbuilder.veliovgroup.com/s/1/YmNyfCNmNjUyZTV8b3R8PGRpdj58aHwzMHxwfMSYd8SLZXxudWxsfGJvxJnEnzEwOTnEpXPEnV9sZW5ndMSVajRUcUZGaXF8aWTFgG5zZcSNeHx5xKVsdcSCc3ByZWHFgmNvbG-EgsShbUnFlHNzS2XFisSmeC1zaMWTb8SdaXNTaMWpbsWJdWFFdmZkRHw2xJhXR0ZDR2ozc3w5xJhveXdRM2NtZ3wtxJd8RTdUcHVSa1DGj8W6fDU2ecWyNDNYxo-GhXxaN3J0THFExJpyxocyNUhZxoM2amNqRGp0TnxNMndyelgzNnxxSm5iZEY5U3x1eExFc0VIanxKZTdFdDQ4xJotMTLEmFluOcS9d3bFgnpaTWZqQkwyxpI5bkdnVEhrfEN4RkxTU2dCxJRLTGo3YXFix4h6x6lyV05tfFBGZVdoWkxUfFFpaE05xp5HfDhkekQzcjTFijhNY8SvY2Vjx5FwNDnHhmrHkDXErVI3NFDEuDPEind5NHd0bXVFxblOY1RCUkR2fMW~V1JYOVlmfFlwTGZQUk7EjUZNx79iNG-IpmN0UG13WFfItsWgREo1RUTIlcepSMm7M1rHvTM4xIrEhGJhYWY0fHR4XsakMXzHtTN8yozEiseHN8inxoR8QXzIhkN8xbjJjkZ8yKZIfEnHmnxLfEzGv3zGvk-IlsiffFJ8x5DInlV8VnxXfFheXiTEmMqSypTKlsadxbl8ypo4y4nErcqeyIbKnsqhyqN8JMqlMVnKpsuVyqjIpsqqLce1SsuJyq3KmsqvyppNy4vKsXzKksqzMVrKtFHKtsaPMl3KuMuby7XLnsugfMiey6PKrsuoy6fKmsa~y6vKk8SYxprLsMq3y5-LtMq7JMqoyrvLuMqryr3LvMulyrDMgMuqfMqzMsqSzIXLscyIyr7Ltsq-zI7LocyQy4DLvcumy6jMgcyWypPHtcyazIfLs8mfy7bLmcygyrzKrManzKTMk8upzIIyypXMq8uyy7TEqsu2zL7MscyiMcqSzJLLv8y3zKgyyozMu8ycx6TMv8e1zLHLu8uqzYTLvsymzJXMl8SKzYvMrTHKlcyLy6rKlcyxxIrKrc2DzLXNhsynzJfHh82ZzL3KjM2dMcqMzLHKms2izZPMpcyUzLjKms2py6rEis2sxIrMscakzbHNpM2VzLjLjc23MceHzazHh8yxy67Nvs2FzoDNiMStzoPKms2syprMsc2jzorNlM20zYjKns6Dy43NrMuNzojMszHErc6LzpfMl8iGzoPKns2syp7NvM6fzqHOls2HzJfKoc6DyIbNrMiGza-Oq82-zqPKk8W4zoPKoc2syqHNoM62zqLOrsqTyY7Og8W4zazFuM2Qz4DOrc2mypPKpc6DyY7NrMmOzpPKksqty67Pgc~MMsimzoPKpc2syqXPk8yzxqTPl82WypPKqM6DyKbNrMudy7LKq86Uy6jPosy4yqrOg8qozazKqM6ezJHPi8~jMsuhzoPKqs2syqrOqs~2zbPPgjLKrc6Dy6HNrMuhz7-Lic~uzYjKr86Dyq3NrMqtz7XLqsqv0IvMl8unzoPLp82sy6fQksSK0JXKk8a~zoPGvs2sxr7Otcqt0J3Pt8y4yrPOg8qzzazKs9Cly7rOt9CCxprOg8aazazGms6-0KbQsc~Yy7DOg8uwzazLsM~J0LnQnjLKt86DyrfNrMq30YHQsNGDx5DOg8eQzazHkNCvz6HQqM2IyJ7NizHMvciezazIntCvz5bRlMyXyrvRl8y9zIrKqDHMjc~qy6HNsM~tzZQxyr3Mgcq-zJfKvdGizL3GpC00XQ__)
  - [Dice of 6/Domino piece](https://cssbuilder.veliovgroup.com/s/1/YmNyfCNmxIXEhnxic2fEiG9yZGVyLWJveHxwfDl8aHwzNzB8d3xudWxsfG90fDxkaXY~xKdlLnN8c29saWTEsC5jxLrEoTM2xIzEsnxkxKh0ZcS5xJMuxKE5xJ-FicS8IzDFkcWSxIzEqcSTYsSMxKbEk8SCcGV8NMWRxIhzxKFfbGVuZ3TEmzliTUpNV1pqfMS4xbNuc2XEqcSVxJ95xIhsdcSCc3ByZWHEucSefGPEtsSNxKJ1bUnEuWNzc0tlxbzEk3gtc2jGhW-EoWlzU2jGnW58dHheMXwxXl4kxJ-GqTLEnMWefDV8xYA3fDjEmHxBfEJ8Q3xEfEXGqnxGfEd8SHxJfEp8S3xMfE18Tsa7T8a7UMa7Uca7UnxTfFR8JFXGqsa9VselV3zHqlh8LcaxWXxaxqrEn8e1Mcapx7jGsTEzxqo0x5XGqsa1Mca-McWAMca4Mca6LTFdXcaqxJktNF0_)
   - ["Unlock Magic" text](https://cssbuilder.veliovgroup.com/s/1/YmNyfCNmYWM3ZmZ8YnNnxItvcmRlci1ib3h8xIl8IkxhdG8iLCtzYW5zLXPEk2nEimZzfDkzfGzErjExLjV8b3R8PGRpdj58Y8SDxInFhcSKaHxudWxsfHB8MjU0fHfEuWXEj8WOxZc0MDB8dMSuX2xlbmd0xYg4emV5dEdZUXxpZHzEmC0yfHnEi2x1xILFnWNvbMSQxIMzNjUyZMSxxYptScWyY3NzS8WqxZ5leHTEqGhhZG-FlWlzU2jGmm7FkEdvQkFIasWPxbZuZjhqNUY4WcWCeFpFNm1xTnxQYXh1cExiaXwtxLF0QcS~QmlXQXzEsXk2NENrNWfFlXNKSk1xYkdHfGFSRU1mSEPFlS03fMeqI2M0xZLEmk5TWThxR3p6x4Q4fMe7eEhGM0xEcsWvLTZ8yIdEZEpYaWpvV3xKalTFsUtMxZdEUUJCeU5hQseEMcW2yKPGgjUxxInHqlE1SkdCc2jEuC0xxLHItHxLQmdlaDRSb3zEtXxHdFIyM2dTSsiiMXxoYjNLyIQ2RsWexJhVbsaAY2srbWFnaWM8YnI~XknJgMWQx458xZPEuMiHx6rHuzl8x43IoUN8RHxFfMmUx59IfEleXiTFncmMxbbEscmsyIjHq8e8xK-JsnzJtMm2ybjJusmCfMm9yafJlMmKyZRLypFMfE18xrokT8WQxbZQfCTFr8qkUnxTfFTKqnxVfFZ8yJFYfMayyYZ8WsmAyoPJjMW1XcmAxbbKpsuAfMqpyLbKrcqryrDKssq0yrbFkMWTyroxyrzHhDLKvzHFk8uCy5XLhMmAxLHKrci2y4nKs3zKtcq3xLjLj8uRyr7JgMS4y5fEuMqpyqvLnMSxy57Li8q3yIfLpMmAyr3Lk8mAyIfLl8iHy4XHqsucx6rLr8qPyrfHqsuzyYHLpjHHu8uXx7vLhcmxy73Kr8qxy5-Jt8q3x7vMg8u1y5THjcuXx43MisqsyYDJscu-zJDFkMmxzJPLksuUyKHLl8ihy7vMmjHMnMyOyJHMnjLHjcyhzIXJtcuXybXLhcm3y5zJucu-McmUyrfIocywMcuUx5-Ll8efy4XJvcucyafMncuMMsm1zL7LlMmKy5fJisuFypnLnMqbzYjKt8m3zYzJgMqdy5fKnc2EzKjNlMyrzIDFkMm5zZgxyp-Fr82ly5kxzZLJgM2HzaDMrcmUzaTKocuXyqHLhcqky5zFr8y5yqnKt8efzaTKq8uXyqvLhcqty5zKsM2VxZDJvc2kyrLLl8qyzoHMqMiRzoUyyafNpMq1y5fKtcuFxrLLnM6Oza7NicmKzaTKusuXyrrOlsyozoTOmsq3ypnNjMq-MsWdMsy-)

### 🏆 Project achievements (so far):

* [Featured on Hacker News front page](https://news.ycombinator.com/item?id=22722671)
* [Featured in "A Fresh Cup" newsletter](https://afreshcup.com/home/2020/04/09/double-shot-2571)
* [Featured in Frontend focus newsletter](https://frontendfoc.us/issues/435)
* [Featured in Indie Hackers newsletter](https://www.indiehackers.com/product/css-visual-editor/we-made-it-to-the-front-page-of-hn--M3fCymzAIibzF30TyR4)
* 12,000 monthly returning users

I hope this tool is going to find its place in your bookmarks. Do not hesitate to ask for more features and share your CSS3 artwork, — I'll be happy to add it with your name to our snippet and example lists.

Let me know wdyt 🤔