Devsync

Visually edit CSS. Live-sync the result with your editor.

#1 Product of the DayFebruary 17, 2020
A Webflow-like visual editor (Chrome Devtools extension) that live-syncs edits with your code editor. Apply CSS edits visually in real-time and style your page without writing CSS.
Discussion
Would you recommend this product?
2 Reviews5.0/5
Hi PH-ers! πŸ‘‹ Thanks for checking out my product! If you have any questions please don't hesitate to ask them! Today after working on it for almost six months I'm launching Devsync. πŸ₯³ πŸ™‡β€β™‚οΈ Problem When designing website's I would always be messing with the style of elements trough the browser's devtools. This enabled me to quickly see what styles would look like, without constantly switching context. But... I kept having to copy these edits to my editor, and often losing them in the process. πŸ€” Solution I wanted to create a way to preserve these edits and design in a more visual way so my design was based on what looks proper instead of the values I kept changing in my editor until it looked decent. βš™οΈ Working This is what Devsync does. It allows you to design visually using a Sketch/Figma like editor that lives in your browser's devtools and it applies these changes in real-time through your editor by automatically editing your project's CSS. πŸ‘¨β€πŸ’» Demo I have partially ported Devsync to the browser (as well as is possible) so you can try out a demo right now (on desktop). Let me know what you think, after working on this for a long time I'm super excited to hear what people think! πŸ€‘ Discount We're running a 50% launch day discount today for all early adopters!
@rutierut This is awesome! Is there a way that I can save changes made directly in the DevTools Styles section using this tool? I know that this feature is available for CSS but not for extensions such as SCSS as we can see in your video. Although I like the visual editor, I still prefer to write them directly with the keyboard as it's generally faster for me personally. If so please let me know, I would be happy to pay for a feature like this. Regarding the price, €80 feels a bit too much for me, but I still think it would be worth the money for beginners.
@owenfar1 Thanks! We're working on this and it's coming soon(-ish)! You can stay up-to-date by dropping your email at the bottom of the page or just following me on PH.
@rutierut Is the launch day discount over?
Snugly fits into my workflow. Personally hate command tabbing 40 times a second. Also dope landing page!
Congrats on launching @rutierut ! This solves a problem I run into quite often, no more experimenting in the browser, only to forget to copy it to my editor and accidentally refresh the page πŸ€¦β€β™‚οΈ Does Devsync also work with Webstorm as editor?
Hey @erwin_lengkeek! Thanks for the feedback! Not yet, for now only VS Code but more editors will be coming soon! If you want to receive an email when Devsync is compatible with more editors you can leave your email at the bottom of the page. We'll only sporadically email about things like this, no weekly/monthly BS update email, I don't like useless spam either 😁 Cheers!
@rutierut I most certainly will sign up, awaiting for that special email πŸ‘
This looks awesome! Looking forward to trying it out - I’ve always found the traditional dev tools experience very clunky
Looks great. I'm going to hold off for a bit before purchasing though as tutorials, FAQ aren't currently on the site. Plus, not being able to see past the typography demos makes it harder for me to drop money on right now, as I can't gage it's full potential
@simongabriel no worries and thanks for letting me know, the dead links have been fixed, it should have directed you to https://docs.devsync.co/. Thanks!