Devsync
Visually edit CSS. Live-sync the result with your editor.
Start new thread
Will Willems

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

by
Devsync
ā€¢
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.

Add a comment

Replies

Best
Will Willems
Maker
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!
Will Willems
Maker
@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.
Arun Pattnaik
@rutierut Is the launch day discount over?
Daniel Roger Casanova
No lifetime updates for this early adopters purchase? a bit of a gamble tbh. Also, are you full-time on this?
Will Willems
Maker
@danirogerc I am full-time on this. I am just not a fan of the subscription model for products that don't need it (reoccurring cost for the producer) but I also realize it's not sustainable to keep supporting users forever for this price. Companies tend to solve this in different ways: 1. Just bill monthly: Companies like Adobe simply go with a subscription, mostly because they can. 2. Bill for new versions: A lot of Studio's simply release a new major version X and require you to pay for an upgrade. Pretty fair but a bit frustrating if you just bought the previous version. 3. Get every new version and update for a year: Like Sketch. You pay for 1 year of updates and get to keep using the last update for as long as you want. This doesn't create weird incentives and pushes the product producer to keep improving so it's worth updating. If you have any thoughts on this I'm happy to hear them and improve, thanks for sharing your point of view!
Daniel Roger Casanova
@rutierut Yes, this is a great model. I paid Sketch app back in the day and was happy. However, due to this launch I was hoping the ones that buy now to have this for a lifetime, because I'd rather treat it as an investment that I might want to use in two years (I'd play around with it now, but probably won't take advantage of it in some time)
Ian Kok
Snugly fits into my workflow. Personally hate command tabbing 40 times a second. Also dope landing page!
Erwin AI
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?
Will Willems
Maker
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!
Erwin AI
@rutierut I most certainly will sign up, awaiting for that special email šŸ‘
Š•ŠŗŠ°Ń‚ŠµŃ€ŠøŠ½Š° ŠŸŠµŃ‚Ń€ŠµŠ½ŠŗŠ¾
Nice stuff!
James C Murray
Wow. I've been trying to teach myself to build from scratch after using a few no-code tools. This is amazing and makes it MUCH easier for me to actually get what I want to happen.
Tom Medema
Nice product, I've had experience playing with CSS in dev tools, having to copy and paste each and every single change over to the code editor, so this is definitely useful. Also, few quick things I noticed on your landing page that can be viewed in context here - https://app.usebubbles.com/62458... - cheers!
Will Willems
Maker
Thanks for the feedback @tom4, all very good points, I've already fixed most of them, thanks!
Tom Medema
@rutierut great :) good going!
Titus Decali
Would buy this today if it worked 100% for Vue development
Will Willems
Maker
Hey! @titusdecali most Vue.js projects should work 100% with Devsync. The biggest problem right now is Vue-CLI generating incorrect sourcemaps for vanilla CSS style tags. In the mean time to solve this you can just add SCSS to your project and keep using vanilla CSS, this will generate correct sourcemaps.
johnny makes āš”ļø
This looks awesome! Looking forward to trying it out - Iā€™ve always found the traditional dev tools experience very clunky
Simon Gabriel
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
Will Willems
Maker
@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!
touomno ariane
great
1234
Next
Last