16 ms·

Show HN: I made CSS Pro, a re-imagined Devtools for web design

505 points by guivr 3y ago

kwanbix 3y ago
Looks very cool. Sadly, it is very expensive for our small startup though (we are already paying github, jira, confluence, google suite, figma, miro, adobe, etc.).
- asnyder 3y ago
  If you're looking to save a few dollars check out WikiJS as a confluence replacement (can import too), pretty, easier, works with OAuth out of the box, and you can self host on pretty much any instance. Also, figma has figjams which is similar to Miro for many use cases.
- ilrwbwrkhv 3y ago
  Why do you pay for Miro?
hit8run 3y ago
Looks interesting and polished. 30 per month is too much compared to 10 per month for a tool like sketch.
- kwanbix 3y ago
  You can get the Adobe suite for that much.
smcleod 3y ago
The demo music sounds like the load screen for a Call Of Duty game - but I'd take that over marketing videos with clapping sounds any day.
tfsh 3y ago
I was sceptical given the name "CSS Pro", but watching the video, this seems like an extremely polished product. One note of interest to me was the real-time measurements of image contents, I'd be interested to know how this is being done and what model's returning image-coordinate data
Y-bar 3y ago
It's hard to see from the short quick demo videos on the site, but how does it handle rules? My workflow _always_ includes determining things like default margins, default paddings, default text sizes, and how they relate to each other. So, I will say default `main div` margin will be 2rem. While default padding on those blocks will be 1rem, how will this help me visualise adjusting these? It looks like all I am doing is changing individual elements.
gigatexal 3y ago
amazing tool -- too expensive for me -- but those that find it valuable I am sure will pay for it. There's no shame in asking for a relatively high price for a tool that is obviously very well crafted.
- kwanbix 3y ago
  Same here. Very cool looking, but today everything is a subscription. And we are a bootstrapped statup, in the end it adds a lot.
monkey_monkey 3y ago
Does this stop working if you stop subscribing, or do you just lose access to updates? This needs to be made very clear.
- csmattryder 3y ago
  > The extension will only work while your subscription is valid and not expired. At the bottom of the pricing page. It's not a JetBrains type deal.
deserialized 3y ago
Very cool, but out of my price range unfortunately
junon 3y ago
900! For lifetime use! I remember when Photoshop wasn't even that much.
- poulpy123 3y ago
  to be fair this is for lifetime upgrades
  - aziaziazi 3y ago
    Today, Photoshop alone with updates is 21$/month.
    - CharlesW 3y ago
      So, it costs ~3.5 years of Photoshop.
nbzso 3y ago
Fix the pricing. Figma is 20 USD monthly. Framer is 10, Webflow is 18, with hosting.
- gnaman 3y ago
  The product works offline. There should also be a perpetual license for the versions I've already paid for. Paying for products that are completely offline but still require subscription is ludicrous. Adobe justifies it by throwing in CC. Paying monthly for this makes no sense.
- onion2k 3y ago
  To be honest it sounds like Figma, Framer, and Webflow are the ones that need to fix their pricing.
  - micromacrofoot 3y ago
    they're all hugely successful, so good luck with that
    - onion2k 3y ago
      I mean they should charge more.
WolfOliver 3y ago
30$ per month seems overkill
- canadianfella 3y ago
  [dead]
aidenbuis 3y ago
Look amazing!
progx 3y ago
Cool tool, but reconsider the pricing.
wg0 3y ago
This is jaw dropping amount of work TBH. Just curious how much time and effort that is. If it is an indie thing, it is too much work looking at that many tools within a tool.
- ilrwbwrkhv 3y ago
  The author has written a bunch of similar extensions in the past. I am sure a lot of that code was reused.
samwillis 3y ago
I think the comments criticising the pricing are wrong, you can't compare one generalist tool to another highly specialised tool. But on top of that comparing to Figma, Framer or other VC backed products is a mistake, these products are priced to capture market share and grow rabidly. They are clearly underpriced. I may be wrong but CSS Pro looks like a small bootstrapped product, pricing for market growth doesn't need to be the strategy. This is priced for sustainable development and supporting the developer on a small niche product. If a developer/designer is using this 1 day in 5 then they can justify the subscription. To those suggesting this shouldn't be a subscription, keep in mind that CSS is going through a period of rapid improvements, this enables them to add support for new features without having to either eat the cost on a sold product or charge for upgrades multiple times a year. VC backed business setting low prices for rapid growth has unfortunately damaged the ability for small indie developers to price their products sustainably.
- nicce 3y ago
  Many investor backed businesses also might increase their pricing over the years. At the moment you reach enough users, especially users which are highly dependent on you, you increase the prices to make shareholders happy. This is unfortunately a very common strategy, and I rather pay for indie developer bit more than a tech company with a large amount of investors.
- SlowAndCalm 3y ago
  On the subscription side, I think it's an issue as it moves the control away from the consumer when doing those upgrades. With the older, one-time purchase upgrade model, which has since fallen out of favour; I could evaluate once a year whether the updated product was worth the additional cost. With a subscription model, there's a chance I could end up funding the development of features that I neither want nor need.
  - toastal 3y ago
    And CSS will almost always be backwards-compatible. If you want to keep using older CSS, that should be allowed.
theaussiestew 3y ago
This looks exceptional, keep it up. But like others the price is too much for me to afford. Would be great if this was open source but I can understand wanting to keep this closed source, given its quality.
danr4 3y ago
Looks really useful for non-technical people. I don't think you are charging too much but I do think your pricing/market is misaligned. If you're going to charge this amount you probably want to target product/design teams in mid to large enterprises, then charge by seat (with limited trial for up-sell).
madeofpalk 3y ago
There's some neat things in here - the gradient editor showing the stops on the element is pretty nice. But overall the design of this tool is very difficult for me to use. It's trying too hard to be pretty, at the expensive of utility. I found the Typography section to be really difficult to grok with a complete lack of labels and borders around text boxes. It's neat that you have the same flexbox controls that Webflow had in 2015, but the way those icons are laid out makes it so inscruitable.
- itsuka 3y ago
  For gradient tool, I can recommend https://gradient.style https://gradient.style by Adam Argyle Not only is it easy to use (IMO), but it's also more powerful than what design tools offered today, with new color spaces being one of my favorite features. Intro: https://twitter.com/argyleink/status/1649124742463623169 https://twitter.com/argyleink/status/1649124742463623169
- o1y32 3y ago
  It is funny that they actually show gradient in the demo (and some very weird abd ridiculous examples). Serious websites rarely have any gradient background, and this part of the tool is easily replaceable -- there are lots of websites that help you create the CSS. I use gradient background maybe once a year, and I wouldn't even mind doing it by hand.
skilled 3y ago
How does the element copying work? > Copy the designs of your favorite websites, frameworks, or themes. Extract the HTML and CSS code of an element and all its children in seconds. > Not the right element you're looking for? Precisely re-target any DOM element using your keyboard's arrow keys (▲ ▼). The documentation talks about it a little bit but not much. I am wondering if this feature is another cheapskate implementation that doesn't actually do what it says it does. How for example would this tool handle the Firebase[0] featured header? The other features look OK, but I don't think I could justify the price though. If you want to charge for it so much, maybe change your pricing to a yearly license and then do updates, and simply restrict new updates to people who stop subscribing. Seems like a lot more reasonable approach and it also gives you a chance to really work on extending this product beyond what it currently does. [0]: https://firebase.blog/posts/2023/05/whats-new-at-google-io https://firebase.blog/posts/2023/05/whats-new-at-google-io
AhmadIbrahim 3y ago
This looks absolutely spectacular.
jw1224 3y ago
If this had some way to convert to/from Tailwind classes, I would purchase in an instant...
- greggh 3y ago
  Use this tool, take the output and put it in this one: https://hymhub.github.io/css-to-tailwind/ https://hymhub.github.io/css-to-tailwind/
- umaar 3y ago
  Using DevTools, you can extract all styles, even if they're scattered across loads of tailwind utility classes. Made a video on how to do this here: https://umaar.com/dev-tips/261-devtools-copy-all-styles-for-element/ https://umaar.com/dev-tips/261-devtools-copy-all-styles-for-...
tailspin2019 3y ago
This is one of the more impressive and polished "Show HNs" I've seen recently. The landing page is superb, the tool is impressive and the ease of trying it out with the "Try on this page" is really great. I think I'm inclined to agree on some of the other comments about pricing. It doesn't sit quite right in comparison to what I pay for other paid tools that I use daily. I can see myself using something like this, and I don't mind paying for great software, but there is something about the $30/month entry price that just stops me considering it further. Maybe I need to actually use it to understand that it's worth this, but it's not clear enough to me coming to it cold. One criticism. I clicked on the "Try on this page" to test it out, and after being initially impressed I clicked on "Try it Free" in the menu, assuming this was a link to see what free/trial options were available, but the link didn't do anything. It took several page refreshes and re-clicking this to realise that this was just doubling up the function of the "Try on this page" option and in fact there is no free trial available. Overall though, seriously impressive work.
aosaigh 3y ago
The killer feature here would be hooking this up to Netlify/Vercel etc. and having a 2-way-write. Every time you update something in the CSSPro editor, your codebase is actually updated and the site is rebuilt in the background. This would let you essentially design in the browser and avoid the tedious copy/paste, rebuild, reload cycle.
- JayStavis 3y ago
  100% agree. This would be a killer integration in vercel preview deployments (a la comments feature) Triplex has some of that 2-way sync for frontend to code: https://triplex.dev/docs/overview https://triplex.dev/docs/overview
- ckolkey 3y ago
  How would that work with VCS?
  - nailer 3y ago
    After you make changes, if you like them, you can commit them.
  - jagged-chisel 3y ago
    The changes exist in the file system of wherever the server runs. Presumably in the repo if code. Run your git commands to see what is changed and select what to commit.
- shireboy 3y ago
  This is what I’ve wanted for ages from browser dev tools. It’s now fairly standard to have hot refresh where the dev server uses websockets to control injecting changes and refreshing the browser when changes are made in the code files. I want to go the other way. If I tweak css in browser, have a way to write those changes back to the project. The real challenge would be traversing a change in browser css back to scss/less.
  - umaar 3y ago
lofaszvanitt 3y ago
This is mostly for the visual types. Designers tend to have an inner picture they want to see/create, so they know what to create.
- hnbad 3y ago
  I recall reading about a very successful animator who needed to sketch out every frame because he had severe aphantasia and thus had general ideas about what he wanted things to look like but couldn't envision the actual result without a visual aid. Having an "inner picture" is helpful but neither necessary nor sufficient to be a designer. You can have a good intuition even when you're physically incapable of having "inner pictures". But yes, the tool is probably less useful if you have a vivid imagination.
TekMol 3y ago
This could also be a bookmarklet. That would make it more secure as bookmarklets only have access to the page you use them on. Looking at the code, you can indeed run it as a bookmarklet. I went to https://www.example.com https://www.example.com and typed this in the browser console: s1=document.createElement('script'); s1.src='https://code.jquery.com/jquery-3.7.0.slim.min.js'; document.head.appendChild(s1); s2=document.createElement('script'); s2.onload=()=>window.cssProReady(); s2.src='https://csspro.com/demo-build/mainnewnew.js'; document.head.appendChild(s2); Boom! The tool is running. So prefixing that line with "javascript:" and putting it into a bookmark would let you use it on any site you wish, simply by clicking the bookmark. Without having to install an extension. Would be a good alternative the author could offer imho.
- evanreichard 3y ago
  Any site that has a half decent Content Security Policy would prevent this. (You can try on HN, GitHub, etc and it fails) However it may work as a UserScript depending on the UserScript engine.
  - graftak 3y ago
    Sure but the main proposition for this tool is for it to be used during local development where CSP is often/always omitted.
revskill 3y ago
The lifecycle of a startup: - Build MVP - Raise funding - Build pricing structure - Eventually die and open source anything for many reason. Pricing is one such reason. Without free pricing tier, how can you get new users to play with your product ? (if it's not open source).
davidguetta 3y ago
Life saving pro tip : add a free tiers or at least 1 month free
gervwyk 3y ago
This!! Really would like to be a customer on this, but as someone who edits pages like once a month maybe, it's hard to justify the price.. But you totally nailed the workflow as far as I can tell from the video. I always jump into the inspector to tweak, and it is never a good time. I might just buy it anyway...
sodimel 3y ago
This website makes my fans go brrrr.
abraham 3y ago
Reminds me of https://github.com/GoogleChromeLabs/ProjectVisBug https://github.com/GoogleChromeLabs/ProjectVisBug
- rifty 3y ago
  Oh cool, I didn't realize this was an extension. Orion has it built in as a Develop menu item.
bradreaves2 3y ago
I think if I did webdev full time, the price would be easily justified. OP: Consider hobbyists and generalist who aren’t full time. There might be a market segment for short term access for hobbyists or generalists. I would be easily willing to pay $2/day to have this while redoing my personal website, but $30 seems steep for a short term use. Doing a daily price could work to bring in users by serving as a low-cost demo.
- MSFT_Edging 3y ago
  As someone with very little front end experience, mostly chugging through with chatgpt since blogspam is impossible to parse through, $30 bucks to make my site look good over the course of a month is a bargain if I just pay for the months I need.
lnxg33k1 3y ago
I was reading the uprising against the pricing, was expecting who knows what, these people are ridiculous to say the least, pitiful at average, you get paid who knows how much, but then 30dollars to do your job quicker are a nono, from a indie developer? Remembers me of the uprising of millions-dollars companies against docker, some people have no shame
classified 3y ago
Yet another subscription, for a novelty item to boot. Hell, no!
ta-run 3y ago
Is it just me or does the site perform horribly? PS: have h/w acceleration disabled.
o1y32 3y ago
Looks like this is meant for professional web developers to make their life easier. So it is not here to replace wix. So, 1. I am struggling to understand the value proposition of this. Demo is cool but most developers working in an organization will not use most of the features shown here. No, no rotation or fancy fonts or colors. The only thing they will do is to use the standard font or color. And most elements don't use any backgrounds, and if they do they use one of the three predefined colors as the background. Gradient color? Maybe once a year. You can already do spacing stuff and text modification in the chrome devtools. I know this tool seems to make it easier, but is it worth paying money for it? I just don't see myself or any medium/large organization (e.g. Microsoft) paying $30/month. Figma is expensive but that is a whole product by itself. It enables new workflow and is irreplaceable in many ways, but I don't see this tool being the same. 2. Demo does not seem to tackle one of the biggest pain points -- layout. Based on stackoverflow questions and their upvote numbers plus what I see in my company, many people (including new and experienced developers) have trouble handling various methods of layout and arranging items. That is where this tool could help -- if done correctly. 3. What if someone makes a similar, open-source tool that achieves 50% of this, or the core features that people actually use every day? Can this compete at all? I'll be surprised if something doesn't already exist today. Basically, this is all interesting stuff but I can't see how it is a viable business if you charge $30/month.
- dmix 3y ago
  You probably aren’t the target market, you’d typically ask the company you work for to pay for it or if you’re a freelancer and use dev tools daily for this CSS stuff (which I’ve personally done at various times in my career) you just factor it into your business expenses. It’s not like a random person paying for Netflix. $30 is a reasonable ask. > What if someone makes a similar, open-source tool that achieves 50% of this, or the core features that people actually use every day In the video there’s a serious amount of functionality, that would take someone doing this as a hobby a very long time. And most OSS design-wise typically doesn’t look as good or polished (designers care about that). That’s usually the difference, the time/effort a commercial company can put in vs volunteer OSS teams.
- onion2k 3y ago
city17 3y ago
Does anyone know a good extension that just does the hover / inspect element for the CSS styles in a nice way like this app? Seems much more convenient than diving into dev tools every time you want to quickly check an element’s property. 30/month is a bit excessive for just that one function.
- kristopolous 3y ago
  It's a clever idea and it's super simple Add an event listener on the entire document.body Get the event.target and the style and then descend to the children. Put it formatted in the clipboard. Then do it as a bookmarklet and deregister the click handler when you're done so you can continue interacting with the site It's probably around 12 lines of modern js. You can add a fancy graphical outline to know what you're selecting with a few more lines. Just make sure you draw it on top and don't modify the elements. Use a css filter to make it work on all elements. Modern tooling is pretty great.
  - city17 3y ago
    Thanks, I was thinking of a similar solution too, but the tricky part is filtering and finding the right CSS properties to display. From my quick attempt this is a non-trivial task as there is no easy built-in way to get just the computed styles of classes on the specific element and those of its close ancestors. And even among those, not all are always relevant.
- CharlesW 3y ago
  > Does anyone know a good extension that just does the hover / inspect element for the CSS styles in a nice way like this app? I think the same person makes CSS Scan ($95 lifetime): https://getcssscan.com/ https://getcssscan.com/
hathym 3y ago
seems awesome but exorbitant pricing compared to other similar tools
0xbadcafebee 3y ago
I clicked the "try it on this page", and it's really cool! I don't really know web design so obviously there's parts I don't understand, but it's a hell of a lot easier than me trying to Google things for 2 hours, editing some text, and refreshing a page. Kudos!
kirillrogovoy 3y ago
If you use Tailwind and React, you might like Impulse[1] (disclaimer: I made it and use it almost daily) Not only does it provide means for visual editing (for Tailwind only), but it also saves all changes to your code. Free and open source. [1] https://impulse.dev/ https://impulse.dev/
- newusertoday 3y ago
  this looks great does it works on incognito mode?
  - kirillrogovoy 3y ago
    Yes. It'd have to ask you for the FS permissions again though since the active FS handle is stored in the IndexDB which of course is separate in incognito.
brentis 3y ago
Came here to see comments about pricing. I think inline with others.Expected a nominal 1 time fee. Probably up to $60. $30/mo is more than Photoshop.
- onion2k 3y ago
  A comment to address the pricing that everyone is complaining about: A web designer/developer in a decent, profitable company is probably getting paid $100k at least. Assuming 250 working days a year with 8 hours a day of paid time, that's roughly $0.8/minute. If this tool saves that person 90 seconds a day finding and tweaking things in a design then it's saving more than $30/month worth of their time. It's quite cheap. The fact Adobe charge waaaaaaay too little for PS is another matter entirely.
  - manuelmoreale 3y ago
    > A web designer/developer in a decent, profitable company is probably getting paid $100k at least. In the US maybe. Definitely not here in Italy and probably in most of Europe.
    - onion2k 3y ago
      Even if someone is paid 1/3 of the US wage it only means you need to save 3* as much time. It's still quite cheap.
  - lelanthran 3y ago
    > If this tool saves that person 90 seconds a day finding and tweaking things in a design then it's saving more than $30/month worth of their time. As pointed out elsewhere, it's saving the business more than $30/m, not the developer. The developer doesn't get to pocket the savings. Their reward for "saving" 4 hours a week is an extra 4 hours of work per week.
vogon_laureate 3y ago
This is fantastic. I've been using CSS Scan for years on an almost daily basis. It's so incredibly useful. Whenever I wanted to quickly see how a design was done, I'd hit the button and hover and get instant info that was quicker and easier than having to delve into the developer tools. The ability to quickly copy and paste with it is great. Now with all the extra features, it's a really great set of tools and removes the need for me to have separate tools for some of that functionality (including the super buggy eyedropper utilities I've been using). I did not even hesitate to buy it. Amazing work! Ignore the critics.
rcconf 3y ago
Honestly the comments are a good example on how difficult it is to sell to developers and why startup ideas that target developers are dangerous to bootstrap. Developers have high incomes, but are quite frankly, extremely cheap. And I actually mean cheap and not frugal. They will spend 40 hours/week for months to save $5/mo. There's basically no logic apart from that developers have a poor concept of time and money and are spending averse (again, cheap.) In this case, this tool is $30/mo, or about $360 / year, what is that, 3 dinners for 2 people in a year? The tool may save the developer, let's say 3-4 hours / week and at 52 * 3 or about 156 hours of savings a year. At even 30 an hour, it's saved the developer $4,680, or at 60/hour, close to $10,000, but I can guarantee that 99% of developers will not spend $30/month to make their lives easier. My only recommendation is try to sell this product to businesses and maybe offer them a deal based on the amount of developers they have. So sell it do a dev shop with 10 developers at $20/developer / per month. Businesses understand the time/money tradeoff and are not cheap. Developers, my only word of advice, is seriously.. stop being so cheap and spend some money to make your lives easier.
- micromacrofoot 3y ago
  > stop being so cheap and spend some money to make your lives easier if I wanted to make my life easier I'd stop using emacs and arch linux and no I won't
- douglaswlance 3y ago
  Developers in general aren't cheap. Developers who spend their time commenting about how something is too expensives are cheap.
- tmikaeld 3y ago
  I don't think developers in general are cheap, it's that they are employed somewhere and therefore it doesn't benefit THEM to save time, it benefits their employer. It may even be detrimental to the developer as it put higher expectations on the developer to produce more if the suddenly perform better at a specific task..
  - codemonkey-zeta 3y ago
jjdeveloper 3y ago
I think I’ll just stick with Dreamweaver for now
IceDane 3y ago
This just .. doesn't seem that useful compared to the normal devtools. It is also noticeably laggy, based on the demo on your site, with pop-in/FOUC. Definitely not worth $30/m for me. That pricing just seems way unrealistic compared to the value proposition. Easy pass for me.
bilekas 3y ago
This does look really cool and its really responsive and definitely a very handy tool. For me personally I wouldn't use it enough to justify the price tag. Depending on your business plan it might make sense to offer some kind of day/week pass. This would definitely interest me as I would be more of a infrequent user.
itomato 3y ago
Mozilla Composer for today?
jroseattle 3y ago
Just a suggestion on pricing: drop the lifetime option. I've had a bunch of perpetual licenses I've acquired over a lifetime, and nearly every one of them have said "we have no record of you" after 5+ years. I know, I know...save the receipts and all that. But it's just frustrating. Don't put yourself and your customer in a potentially problematic position of he-said-she-said. When you have recurring revenue with a more mature product (and a way to track those subscriptions that you won't end up scrapping), re-consider the perpetual license.
- spyke112 3y ago
  I’ll be the one suggesting to keep the option. I haven’t tried the product yet, but I would in general expect a perpetual life time license to be some sort of license key, that can be entered into the application and verified. So that I can keep it safe, and forever proof that I own a license, thus eliminating the problem mentioned here.
icholy 3y ago
This reminds me of skybound stylizer http://www.skybound.ca/ http://www.skybound.ca/
mrieck 3y ago
This tool is for front-end devs who love tweaking front-end designs faster. My tool is for back-end devs who don’t want anything to do with front-end, but want to build UI faster. https://www.snipcss.com https://www.snipcss.com I’ve always wondered how CSSPro works at extracting/scoping CSS because that’s supposed to be a feature. But I’ve never been willing to pay $30/mon just to see how well a competitor works. Anyone who pays - do you think it recreates a carbon copy of any section of a website well?
T3RMINATED 3y ago
[dead]
filmgirlcw 3y ago
This looks great and I’m not against charging for tools — I’m not even against subscriptions (even tho they often annoy me personally), but the value prop here doesn’t seem to match $30 a month (or $15 if you do annual). And it isn’t because I’m cheap — I spend lots of money on lots of stuff — or that I don’t value indie development (same), but this pricing puts this utility in the same class as things like Figma, the Adobe Suite, a lot of CMSes (Webflow, Craft, etc.) for a utility that might be useful, but doesn’t strike me as $360 a year (or even $180 a year) useful. The value prop just isn’t here for me, even tho I like what this is trying to do. At $5 a month/$50 a year, I think you’d get more traction and much better volume than what you can get at $30 a month/$180 a year prepaid. And I have to say, when I see prices this high, I’m hesitant to prepay from unknown companies because I don’t have any expectation about how long it will be in business or continue to update the product, because I don’t see how you get sustainable development at this price point. Figma and Adobe can charge what they charge because they’ve earned it and because those are tools where you feel like you get your money’s worth. $30 a month for something that will improve but not fundamentally change the way I do web dev, I’m sorry but no.
- willtheperson 3y ago
  Couldn't agree more. I have no problem paying for tools, especially when they will save me time. That said, don't I need to know how to use devtools (chrome/ff/safari) to do my job in the first place? It feels like this product is trying to inject itself into a process that isn't super refined but works fine. The real problem is the dependency it creates. If I only know how to do frontend work with handheld UI controls, then I have to use them and am locked into this product. It doesn't promote me learning the css rules or understanding how to actually fix things, so then I'm back to the devtools and why am I using this?
Thonn 3y ago
To be honest, the pricing really does feel fair for what it offers. I just don't wanna spend money on a monthly subscription, and its too much of an unknown to throw 900$ at it.
graderjs 3y ago
This is a wonderful interface! Great UX, really landmark, effortless design! Reminds me of Bret Victor, and the top notch best products to come out of Apple and Google. You have produced something that big companies spend millions, thousands of developer and designer hours, and months to build. You are truly awesome! Thank you for inspiring the world with this awesome work!!! :) ;P xx ;p Do you have a GitHub or place where we can see more of your work? Thank you for laboring in obscurity until you produced this magnum opus masterpiece. This guy is example of why you should never give up. :) ;p xx ;p
- ilrwbwrkhv 3y ago
  Are you a chat gpt bot?
  - graderjs 3y ago
    Ha ha ha. bringing your negativity. Triggered by positivity.
replwoacause 3y ago
Beautiful website, video, and product. I was also a bit shocked by the price. FWIW, as a hobbyist I wouldn’t subscribe unless it was $5/month or less but would pay $150 for a one-time perpetual license but I’m sure you’ll find your consumer as the pro level.
pokepim 3y ago
[dead]
low_tech_punk 3y ago
Comparison with https://visbug.web.app/ https://visbug.web.app/ (free as in beer, and open source)?
sangupta 3y ago
This is an awesome tool, however, the pricing is lot costly to subscribe as most of these tools are already available for free. * Ruler - Dimensions for Chrome * Assets - Easily get from network tab * Eyedropper - Digital color meter on MacOS * Custom CSS - Stylebot for Chrome The only tool that I personally don't know is the color palette from the page - but then Eyedropper itself can do it. And thus comes the question, why should I pay $30 per month for tools that are available for free to a developer?
- kamikaz1k 3y ago
  can you please link to those referenced tools? thank you
  - sangupta 3y ago
    Dimensions: https://chrome.google.com/webstore/detail/dimensions/baocaagndhipibgklemoalmkljaimfdj https://chrome.google.com/webstore/detail/dimensions/baocaag... Save All Resources: https://chrome.google.com/webstore/detail/save-all-resources/abpdnfjocnmdomablahdcfnoggeeiedb/related https://chrome.google.com/webstore/detail/save-all-resources... Stylebot: https://chrome.google.com/webstore/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha https://chrome.google.com/webstore/detail/stylebot/oiaejidbm...
iamsahebgiri 3y ago
[dead]
iguana_lawyer 3y ago
$30/month? Are you high?
- pyrelight 3y ago
  Yeah I don't know where the pricing is coming from. $30/mo is like Creative Cloud levels and this is not comparable to the utility/functionality you'd get from even one of Adobe's tools. I'd probably pull the trigger on this for $3-$5/mo.
beeburrt 3y ago
This tool looks amazing! That music in the video gives me anxiety
efields 3y ago
This is very cool. The gradient/bkg generator alone is very cool. But I think you’re trying to sell a design tool to developers, even highly proficient CSS developers, who have their _ways_. This is not a $30/month tool to those folks. This is a neat app to generate little parts of a website. Does not look like a daily driver, unless you’re cranking out a lot of unique CSS monthly.
POiNTx 3y ago
I think it looks great! For the pricing, consider adding tiers depending on the type of user. What you're asking for now is perfectly fine for companies. But for individual developers I think it's a bit steep. Also a demo that you can test out in the wild for maybe a week or so would be interesting, or a generous 7 day refund policy. Good luck!
leemcd56 3y ago
Nice tool, but I don’t want to pay a subscription to use it. I appreciate the Lifetime license, but it’s far too expensive. I’ll pass. I wish you the best on this, though!
ShadowBanThis01 3y ago
Looks slick, but another rental thing? Not even going to download it. Good luck though.
recursive 3y ago
This generally looks pretty cool, but on my machine, the "pick any color you need" demo doesn't work. As I mouse over the image, it seems to be generating completely random colors for each pixel, with no correlation to the color that's actually there.
rylan-talerico 3y ago
As a non-technical product manager, this tool could be valuable to me if it works as well as the website illustrates. I agree with the concern expressed in other comments re: price, especially considering the lack of a free tier or trial. The marketing site is great. Congrats on your launch!
xkcd1963 3y ago
I've been working with CSS for a while now and most time spent is on: - tackling of inconsistent browser behaviour and bugs on top of cross-browser compatibility - RWD - pixel perfect implementation of designs - extending or replacing native input elements And very little of it has to do with color gradient selectors or pixel to em conversion.
hrdwdmrbl 3y ago
I would pay if you could show me the formula for how measurements are calculated. The most common question I'm always asking myself is: Why is this like this? For many properties the browser can tell you which CSS selector "won" a property such as "font-family". But for something like a width, the actual formula being applied is often hard to puzzle out. The browser will tell you its result but now how it arrived at that result. For example, the element with id "pagespace" on this page. It has width that works out to some px depending on your screen width. But why that width specifically? I can personally figure it out by going up the DOM tree to see that each element is the full width of its parent (and that's how display: table-row, table-row-group and table all work) until we get to the "hnmain" element which is 85% width (of its parent). And then its parent is the body which has 8px margin all around. So the formula is something like: (screen-width - 8px * 2) * 0.85. But that took me how long to figure out manually? Show your work!
coxley 3y ago
Whoa, this is very nice! I'm going to buy when I kickstart some upcoming web work. The price won't be for everyone — but you don't need everyone. :)
syntex 3y ago
Personally, I find the cost a bit steep. Truth be told, I don't frequently tinker with CSS, maybe only a couple of times annually. A lifetime license for $39.99, however, would definitely be a deal I'd gladly snap up, no more, no less.
tuckerconnelly 3y ago
I'd say I'm the target market, and I don't have a hangup about subscriptions like other comments. I'm almost excited about this, but man, this feels painfully slow. Not like Salesforce slow. But death-by-a-thousand-cuts-everything-takes-500ms slow. "Retool" slow :) If you could cut some of the animations, or use transforms instead of absolute positioning or something--whatever to improve performance--I'd be down to try it for a month.
masukomi 3y ago
a) wow cool. b) if i did CSS for a living i'd install and try it out, but i only dabble when forced to, and dabbling isn't worth $30 a month. good luck.
deleted 3y ago
[deleted]
aldanor 3y ago
"CSS with clicks, not code" honestly sounds like a disadvantage without reading deep into it; the less clicks, the better.
siliconc0w 3y ago
Developers are very sensitive to their toolchain and don't want to learn a new one that may go away/get mismanaged. Also it's easier to justify the value prop if it's a once off and I can evaluate future versions. The single time price should be about a years worth of subscription. If you can't add enough features in a year to make it worth grabbing the next version then you're really saying something about your level of commitment to maintaining and improving the tool.
HellsMaddy 3y ago
I have wanted something like this for years, and your take on it is way better than what I had in mind. I think the pricing is fine, I plan to pay for a month and see if it lives up to my hopes. Awesome job on the marketing page and demo video.
qingcharles 3y ago
Unbelievably well-polished tool. I have no idea how many man-hours went into this. But I echo the other voices concerning the pricing. Right now I have the entire Adobe product suite - everything they make - for only $25/month.
firecall 3y ago
Is this a modern version CSSEdit?
freediver 3y ago
Minor nitpick: The landing page video has a picture of Safari, but when clicked shows Chrome in action.
digitalsin 3y ago
Very cool tool but way, way overpriced.
zestyping 3y ago
Beautiful... but no undo? There's "Reset all changes" but Cmd-Z and Ctrl-Z do nothing. Is there a way to undo the last action? Undo is essential functionality, IMO.
zestyping 3y ago
I don't understand how classes work in this tool. It looks like you can only edit styles on individual elements. I can see classes, but I don't see a way to change the class of an element, or to change the CSS properties of a class. I even tried applying different changes to the same class — larger font for one element, smaller font for another element with the same class — and CSS Pro is happy to give me contradicting CSS rules. Example: https://imgur.com/a/qT1y95T https://imgur.com/a/qT1y95T CSS with a separate rule for every element is unworkable. How is the exported CSS supposed to work?
russdpale 3y ago
Im curious as to how a poor person would use something like this? All of these are creating the haves and the havenots in the coding world. The rich get richer. Im a simple man, I see a monthly sub, and I move on.
ppetty 3y ago
I don't think this is a devtools* replacement or a significant enough "game changer", this is just a different way to interact with CSS. Devtools reveals both the HTML & CSS (as well as the cascading rules that comprise what I'm seeing). Devtools let's me introspect & debug why what I'm seeing as it's happening with CSS in conjunction with HTML & possible HTML changes caused by JavaScript events or pointer-events, for example. I like that this tool could make looking at the parsed & rendered code in a browser window easy to "see" & maybe copy. But for a small part of what devtools does this really is expensive. More expensive than most other apps I use. More expensive than GPT+ plus. More than the cost of hosting my site on DigitalOcean or AWS. If this were a truly must have app & I could get past the price, I'd enjoy it with the concern that most features could be incorporated into devtools directly, by browser makers or by other extensions that expand what devtools can do, although many features of this tool already can be achieved. In fact, I think that's the real missing feature in this service: it could be an web extension for augmenting CSS work devtools. Lastly, what if the price started at $15/month and for every 250,000 (maybe less, maybe more) new users everyone's price was dropped by a $0.50/month but could never drop below $3/month. By the time the price hits $5/month there are at least 5 million subscribers ... (with no annual plans & no life time bananas plan) that seems pretty good. * devtools is pretty awesome & pretty consistent in every browser. (Oh, and I'm super cheap, too.)

505 points by guivr 3y ago

Looks very cool. Sadly, it is very expensive for our small startup though (we are already paying github, jira, confluence, google suite, figma, miro, adobe, etc.).

asnyder 3y ago
If you're looking to save a few dollars check out WikiJS as a confluence replacement (can import too), pretty, easier, works with OAuth out of the box, and you can self host on pretty much any instance. Also, figma has figjams which is similar to Miro for many use cases.
ilrwbwrkhv 3y ago
Why do you pay for Miro?

hit8run 3y ago

Looks interesting and polished. 30 per month is too much compared to 10 per month for a tool like sketch.

kwanbix 3y ago
You can get the Adobe suite for that much.

smcleod 3y ago

The demo music sounds like the load screen for a Call Of Duty game - but I'd take that over marketing videos with clapping sounds any day.

tfsh 3y ago

I was sceptical given the name "CSS Pro", but watching the video, this seems like an extremely polished product. One note of interest to me was the real-time measurements of image contents, I'd be interested to know how this is being done and what model's returning image-coordinate data

Y-bar 3y ago

It's hard to see from the short quick demo videos on the site, but how does it handle rules? My workflow _always_ includes determining things like default margins, default paddings, default text sizes, and how they relate to each other. So, I will say default `main div` margin will be 2rem. While default padding on those blocks will be 1rem, how will this help me visualise adjusting these? It looks like all I am doing is changing individual elements.

gigatexal 3y ago

amazing tool -- too expensive for me -- but those that find it valuable I am sure will pay for it. There's no shame in asking for a relatively high price for a tool that is obviously very well crafted.

kwanbix 3y ago
Same here. Very cool looking, but today everything is a subscription. And we are a bootstrapped statup, in the end it adds a lot.

monkey_monkey 3y ago

Does this stop working if you stop subscribing, or do you just lose access to updates? This needs to be made very clear.

csmattryder 3y ago
> The extension will only work while your subscription is valid and not expired. At the bottom of the pricing page. It's not a JetBrains type deal.

deserialized 3y ago

Very cool, but out of my price range unfortunately

junon 3y ago

900! For lifetime use! I remember when Photoshop wasn't even that much.

poulpy123 3y ago
to be fair this is for lifetime upgrades
- aziaziazi 3y ago
  Today, Photoshop alone with updates is 21$/month.
  - CharlesW 3y ago
    So, it costs ~3.5 years of Photoshop.

nbzso 3y ago

Fix the pricing. Figma is 20 USD monthly. Framer is 10, Webflow is 18, with hosting.

gnaman 3y ago
The product works offline. There should also be a perpetual license for the versions I've already paid for. Paying for products that are completely offline but still require subscription is ludicrous. Adobe justifies it by throwing in CC. Paying monthly for this makes no sense.
onion2k 3y ago
To be honest it sounds like Figma, Framer, and Webflow are the ones that need to fix their pricing.
- micromacrofoot 3y ago
  they're all hugely successful, so good luck with that
  - onion2k 3y ago
    I mean they should charge more.

WolfOliver 3y ago

30$ per month seems overkill

canadianfella 3y ago
[dead]

aidenbuis 3y ago

Look amazing!

progx 3y ago

Cool tool, but reconsider the pricing.

wg0 3y ago

This is jaw dropping amount of work TBH. Just curious how much time and effort that is. If it is an indie thing, it is too much work looking at that many tools within a tool.

ilrwbwrkhv 3y ago
The author has written a bunch of similar extensions in the past. I am sure a lot of that code was reused.

samwillis 3y ago

I think the comments criticising the pricing are wrong, you can't compare one generalist tool to another highly specialised tool. But on top of that comparing to Figma, Framer or other VC backed products is a mistake, these products are priced to capture market share and grow rabidly. They are clearly underpriced. I may be wrong but CSS Pro looks like a small bootstrapped product, pricing for market growth doesn't need to be the strategy. This is priced for sustainable development and supporting the developer on a small niche product. If a developer/designer is using this 1 day in 5 then they can justify the subscription. To those suggesting this shouldn't be a subscription, keep in mind that CSS is going through a period of rapid improvements, this enables them to add support for new features without having to either eat the cost on a sold product or charge for upgrades multiple times a year. VC backed business setting low prices for rapid growth has unfortunately damaged the ability for small indie developers to price their products sustainably.

nicce 3y ago
Many investor backed businesses also might increase their pricing over the years. At the moment you reach enough users, especially users which are highly dependent on you, you increase the prices to make shareholders happy. This is unfortunately a very common strategy, and I rather pay for indie developer bit more than a tech company with a large amount of investors.
SlowAndCalm 3y ago
On the subscription side, I think it's an issue as it moves the control away from the consumer when doing those upgrades. With the older, one-time purchase upgrade model, which has since fallen out of favour; I could evaluate once a year whether the updated product was worth the additional cost. With a subscription model, there's a chance I could end up funding the development of features that I neither want nor need.
- toastal 3y ago
  And CSS will almost always be backwards-compatible. If you want to keep using older CSS, that should be allowed.

theaussiestew 3y ago

This looks exceptional, keep it up. But like others the price is too much for me to afford. Would be great if this was open source but I can understand wanting to keep this closed source, given its quality.

danr4 3y ago

Looks really useful for non-technical people. I don't think you are charging too much but I do think your pricing/market is misaligned. If you're going to charge this amount you probably want to target product/design teams in mid to large enterprises, then charge by seat (with limited trial for up-sell).

madeofpalk 3y ago

There's some neat things in here - the gradient editor showing the stops on the element is pretty nice. But overall the design of this tool is very difficult for me to use. It's trying too hard to be pretty, at the expensive of utility. I found the Typography section to be really difficult to grok with a complete lack of labels and borders around text boxes. It's neat that you have the same flexbox controls that Webflow had in 2015, but the way those icons are laid out makes it so inscruitable.

itsuka 3y ago
For gradient tool, I can recommend https://gradient.style https://gradient.style by Adam Argyle Not only is it easy to use (IMO), but it's also more powerful than what design tools offered today, with new color spaces being one of my favorite features. Intro: https://twitter.com/argyleink/status/1649124742463623169 https://twitter.com/argyleink/status/1649124742463623169
o1y32 3y ago
It is funny that they actually show gradient in the demo (and some very weird abd ridiculous examples). Serious websites rarely have any gradient background, and this part of the tool is easily replaceable -- there are lots of websites that help you create the CSS. I use gradient background maybe once a year, and I wouldn't even mind doing it by hand.

skilled 3y ago

How does the element copying work? > Copy the designs of your favorite websites, frameworks, or themes. Extract the HTML and CSS code of an element and all its children in seconds. > Not the right element you're looking for? Precisely re-target any DOM element using your keyboard's arrow keys (▲ ▼). The documentation talks about it a little bit but not much. I am wondering if this feature is another cheapskate implementation that doesn't actually do what it says it does. How for example would this tool handle the Firebase[0] featured header? The other features look OK, but I don't think I could justify the price though. If you want to charge for it so much, maybe change your pricing to a yearly license and then do updates, and simply restrict new updates to people who stop subscribing. Seems like a lot more reasonable approach and it also gives you a chance to really work on extending this product beyond what it currently does. [0]: https://firebase.blog/posts/2023/05/whats-new-at-google-io https://firebase.blog/posts/2023/05/whats-new-at-google-io

AhmadIbrahim 3y ago

This looks absolutely spectacular.

jw1224 3y ago

If this had some way to convert to/from Tailwind classes, I would purchase in an instant...

greggh 3y ago
Use this tool, take the output and put it in this one: https://hymhub.github.io/css-to-tailwind/ https://hymhub.github.io/css-to-tailwind/
umaar 3y ago
Using DevTools, you can extract all styles, even if they're scattered across loads of tailwind utility classes. Made a video on how to do this here: https://umaar.com/dev-tips/261-devtools-copy-all-styles-for-element/ https://umaar.com/dev-tips/261-devtools-copy-all-styles-for-...

tailspin2019 3y ago

This is one of the more impressive and polished "Show HNs" I've seen recently. The landing page is superb, the tool is impressive and the ease of trying it out with the "Try on this page" is really great. I think I'm inclined to agree on some of the other comments about pricing. It doesn't sit quite right in comparison to what I pay for other paid tools that I use daily. I can see myself using something like this, and I don't mind paying for great software, but there is something about the $30/month entry price that just stops me considering it further. Maybe I need to actually use it to understand that it's worth this, but it's not clear enough to me coming to it cold. One criticism. I clicked on the "Try on this page" to test it out, and after being initially impressed I clicked on "Try it Free" in the menu, assuming this was a link to see what free/trial options were available, but the link didn't do anything. It took several page refreshes and re-clicking this to realise that this was just doubling up the function of the "Try on this page" option and in fact there is no free trial available. Overall though, seriously impressive work.

aosaigh 3y ago

The killer feature here would be hooking this up to Netlify/Vercel etc. and having a 2-way-write. Every time you update something in the CSSPro editor, your codebase is actually updated and the site is rebuilt in the background. This would let you essentially design in the browser and avoid the tedious copy/paste, rebuild, reload cycle.

JayStavis 3y ago
100% agree. This would be a killer integration in vercel preview deployments (a la comments feature) Triplex has some of that 2-way sync for frontend to code: https://triplex.dev/docs/overview https://triplex.dev/docs/overview
ckolkey 3y ago
How would that work with VCS?
- nailer 3y ago
  After you make changes, if you like them, you can commit them.
- jagged-chisel 3y ago
  The changes exist in the file system of wherever the server runs. Presumably in the repo if code. Run your git commands to see what is changed and select what to commit.
shireboy 3y ago
This is what I’ve wanted for ages from browser dev tools. It’s now fairly standard to have hot refresh where the dev server uses websockets to control injecting changes and refreshing the browser when changes are made in the code files. I want to go the other way. If I tweak css in browser, have a way to write those changes back to the project. The real challenge would be traversing a change in browser css back to scss/less.
- umaar 3y ago

lofaszvanitt 3y ago

This is mostly for the visual types. Designers tend to have an inner picture they want to see/create, so they know what to create.

hnbad 3y ago
I recall reading about a very successful animator who needed to sketch out every frame because he had severe aphantasia and thus had general ideas about what he wanted things to look like but couldn't envision the actual result without a visual aid. Having an "inner picture" is helpful but neither necessary nor sufficient to be a designer. You can have a good intuition even when you're physically incapable of having "inner pictures". But yes, the tool is probably less useful if you have a vivid imagination.

TekMol 3y ago

This could also be a bookmarklet. That would make it more secure as bookmarklets only have access to the page you use them on. Looking at the code, you can indeed run it as a bookmarklet. I went to https://www.example.com https://www.example.com and typed this in the browser console: s1=document.createElement('script'); s1.src='https://code.jquery.com/jquery-3.7.0.slim.min.js'; document.head.appendChild(s1); s2=document.createElement('script'); s2.onload=()=>window.cssProReady(); s2.src='https://csspro.com/demo-build/mainnewnew.js'; document.head.appendChild(s2); Boom! The tool is running. So prefixing that line with "javascript:" and putting it into a bookmark would let you use it on any site you wish, simply by clicking the bookmark. Without having to install an extension. Would be a good alternative the author could offer imho.

evanreichard 3y ago
Any site that has a half decent Content Security Policy would prevent this. (You can try on HN, GitHub, etc and it fails) However it may work as a UserScript depending on the UserScript engine.
- graftak 3y ago
  Sure but the main proposition for this tool is for it to be used during local development where CSP is often/always omitted.

revskill 3y ago

The lifecycle of a startup: - Build MVP - Raise funding - Build pricing structure - Eventually die and open source anything for many reason. Pricing is one such reason. Without free pricing tier, how can you get new users to play with your product ? (if it's not open source).

davidguetta 3y ago

Life saving pro tip : add a free tiers or at least 1 month free

gervwyk 3y ago

This!! Really would like to be a customer on this, but as someone who edits pages like once a month maybe, it's hard to justify the price.. But you totally nailed the workflow as far as I can tell from the video. I always jump into the inspector to tweak, and it is never a good time. I might just buy it anyway...

sodimel 3y ago

This website makes my fans go brrrr.

abraham 3y ago

Reminds me of https://github.com/GoogleChromeLabs/ProjectVisBug https://github.com/GoogleChromeLabs/ProjectVisBug

rifty 3y ago
Oh cool, I didn't realize this was an extension. Orion has it built in as a Develop menu item.

bradreaves2 3y ago

I think if I did webdev full time, the price would be easily justified. OP: Consider hobbyists and generalist who aren’t full time. There might be a market segment for short term access for hobbyists or generalists. I would be easily willing to pay $2/day to have this while redoing my personal website, but $30 seems steep for a short term use. Doing a daily price could work to bring in users by serving as a low-cost demo.

MSFT_Edging 3y ago
As someone with very little front end experience, mostly chugging through with chatgpt since blogspam is impossible to parse through, $30 bucks to make my site look good over the course of a month is a bargain if I just pay for the months I need.

lnxg33k1 3y ago

I was reading the uprising against the pricing, was expecting who knows what, these people are ridiculous to say the least, pitiful at average, you get paid who knows how much, but then 30dollars to do your job quicker are a nono, from a indie developer? Remembers me of the uprising of millions-dollars companies against docker, some people have no shame

classified 3y ago

Yet another subscription, for a novelty item to boot. Hell, no!

ta-run 3y ago

Is it just me or does the site perform horribly? PS: have h/w acceleration disabled.

o1y32 3y ago

Looks like this is meant for professional web developers to make their life easier. So it is not here to replace wix. So, 1. I am struggling to understand the value proposition of this. Demo is cool but most developers working in an organization will not use most of the features shown here. No, no rotation or fancy fonts or colors. The only thing they will do is to use the standard font or color. And most elements don't use any backgrounds, and if they do they use one of the three predefined colors as the background. Gradient color? Maybe once a year. You can already do spacing stuff and text modification in the chrome devtools. I know this tool seems to make it easier, but is it worth paying money for it? I just don't see myself or any medium/large organization (e.g. Microsoft) paying $30/month. Figma is expensive but that is a whole product by itself. It enables new workflow and is irreplaceable in many ways, but I don't see this tool being the same. 2. Demo does not seem to tackle one of the biggest pain points -- layout. Based on stackoverflow questions and their upvote numbers plus what I see in my company, many people (including new and experienced developers) have trouble handling various methods of layout and arranging items. That is where this tool could help -- if done correctly. 3. What if someone makes a similar, open-source tool that achieves 50% of this, or the core features that people actually use every day? Can this compete at all? I'll be surprised if something doesn't already exist today. Basically, this is all interesting stuff but I can't see how it is a viable business if you charge $30/month.

dmix 3y ago
You probably aren’t the target market, you’d typically ask the company you work for to pay for it or if you’re a freelancer and use dev tools daily for this CSS stuff (which I’ve personally done at various times in my career) you just factor it into your business expenses. It’s not like a random person paying for Netflix. $30 is a reasonable ask. > What if someone makes a similar, open-source tool that achieves 50% of this, or the core features that people actually use every day In the video there’s a serious amount of functionality, that would take someone doing this as a hobby a very long time. And most OSS design-wise typically doesn’t look as good or polished (designers care about that). That’s usually the difference, the time/effort a commercial company can put in vs volunteer OSS teams.
onion2k 3y ago

city17 3y ago

Does anyone know a good extension that just does the hover / inspect element for the CSS styles in a nice way like this app? Seems much more convenient than diving into dev tools every time you want to quickly check an element’s property. 30/month is a bit excessive for just that one function.

kristopolous 3y ago
It's a clever idea and it's super simple Add an event listener on the entire document.body Get the event.target and the style and then descend to the children. Put it formatted in the clipboard. Then do it as a bookmarklet and deregister the click handler when you're done so you can continue interacting with the site It's probably around 12 lines of modern js. You can add a fancy graphical outline to know what you're selecting with a few more lines. Just make sure you draw it on top and don't modify the elements. Use a css filter to make it work on all elements. Modern tooling is pretty great.
- city17 3y ago
  Thanks, I was thinking of a similar solution too, but the tricky part is filtering and finding the right CSS properties to display. From my quick attempt this is a non-trivial task as there is no easy built-in way to get just the computed styles of classes on the specific element and those of its close ancestors. And even among those, not all are always relevant.
CharlesW 3y ago
> Does anyone know a good extension that just does the hover / inspect element for the CSS styles in a nice way like this app? I think the same person makes CSS Scan ($95 lifetime): https://getcssscan.com/ https://getcssscan.com/

hathym 3y ago

seems awesome but exorbitant pricing compared to other similar tools

0xbadcafebee 3y ago

I clicked the "try it on this page", and it's really cool! I don't really know web design so obviously there's parts I don't understand, but it's a hell of a lot easier than me trying to Google things for 2 hours, editing some text, and refreshing a page. Kudos!

kirillrogovoy 3y ago

If you use Tailwind and React, you might like Impulse[1] (disclaimer: I made it and use it almost daily) Not only does it provide means for visual editing (for Tailwind only), but it also saves all changes to your code. Free and open source. [1] https://impulse.dev/ https://impulse.dev/

newusertoday 3y ago
this looks great does it works on incognito mode?
- kirillrogovoy 3y ago
  Yes. It'd have to ask you for the FS permissions again though since the active FS handle is stored in the IndexDB which of course is separate in incognito.

brentis 3y ago

Came here to see comments about pricing. I think inline with others.Expected a nominal 1 time fee. Probably up to $60. $30/mo is more than Photoshop.

onion2k 3y ago
A comment to address the pricing that everyone is complaining about: A web designer/developer in a decent, profitable company is probably getting paid $100k at least. Assuming 250 working days a year with 8 hours a day of paid time, that's roughly $0.8/minute. If this tool saves that person 90 seconds a day finding and tweaking things in a design then it's saving more than $30/month worth of their time. It's quite cheap. The fact Adobe charge waaaaaaay too little for PS is another matter entirely.
- manuelmoreale 3y ago
  > A web designer/developer in a decent, profitable company is probably getting paid $100k at least. In the US maybe. Definitely not here in Italy and probably in most of Europe.
  - onion2k 3y ago
    Even if someone is paid 1/3 of the US wage it only means you need to save 3* as much time. It's still quite cheap.
- lelanthran 3y ago
  > If this tool saves that person 90 seconds a day finding and tweaking things in a design then it's saving more than $30/month worth of their time. As pointed out elsewhere, it's saving the business more than $30/m, not the developer. The developer doesn't get to pocket the savings. Their reward for "saving" 4 hours a week is an extra 4 hours of work per week.

vogon_laureate 3y ago

This is fantastic. I've been using CSS Scan for years on an almost daily basis. It's so incredibly useful. Whenever I wanted to quickly see how a design was done, I'd hit the button and hover and get instant info that was quicker and easier than having to delve into the developer tools. The ability to quickly copy and paste with it is great. Now with all the extra features, it's a really great set of tools and removes the need for me to have separate tools for some of that functionality (including the super buggy eyedropper utilities I've been using). I did not even hesitate to buy it. Amazing work! Ignore the critics.

rcconf 3y ago

Honestly the comments are a good example on how difficult it is to sell to developers and why startup ideas that target developers are dangerous to bootstrap. Developers have high incomes, but are quite frankly, extremely cheap. And I actually mean cheap and not frugal. They will spend 40 hours/week for months to save $5/mo. There's basically no logic apart from that developers have a poor concept of time and money and are spending averse (again, cheap.) In this case, this tool is $30/mo, or about $360 / year, what is that, 3 dinners for 2 people in a year? The tool may save the developer, let's say 3-4 hours / week and at 52 * 3 or about 156 hours of savings a year. At even 30 an hour, it's saved the developer $4,680, or at 60/hour, close to $10,000, but I can guarantee that 99% of developers will not spend $30/month to make their lives easier. My only recommendation is try to sell this product to businesses and maybe offer them a deal based on the amount of developers they have. So sell it do a dev shop with 10 developers at $20/developer / per month. Businesses understand the time/money tradeoff and are not cheap. Developers, my only word of advice, is seriously.. stop being so cheap and spend some money to make your lives easier.

micromacrofoot 3y ago
> stop being so cheap and spend some money to make your lives easier if I wanted to make my life easier I'd stop using emacs and arch linux and no I won't
douglaswlance 3y ago
Developers in general aren't cheap. Developers who spend their time commenting about how something is too expensives are cheap.
tmikaeld 3y ago
I don't think developers in general are cheap, it's that they are employed somewhere and therefore it doesn't benefit THEM to save time, it benefits their employer. It may even be detrimental to the developer as it put higher expectations on the developer to produce more if the suddenly perform better at a specific task..
- codemonkey-zeta 3y ago

jjdeveloper 3y ago

I think I’ll just stick with Dreamweaver for now

IceDane 3y ago

This just .. doesn't seem that useful compared to the normal devtools. It is also noticeably laggy, based on the demo on your site, with pop-in/FOUC. Definitely not worth $30/m for me. That pricing just seems way unrealistic compared to the value proposition. Easy pass for me.

bilekas 3y ago

This does look really cool and its really responsive and definitely a very handy tool. For me personally I wouldn't use it enough to justify the price tag. Depending on your business plan it might make sense to offer some kind of day/week pass. This would definitely interest me as I would be more of a infrequent user.

itomato 3y ago

Mozilla Composer for today?

jroseattle 3y ago

Just a suggestion on pricing: drop the lifetime option. I've had a bunch of perpetual licenses I've acquired over a lifetime, and nearly every one of them have said "we have no record of you" after 5+ years. I know, I know...save the receipts and all that. But it's just frustrating. Don't put yourself and your customer in a potentially problematic position of he-said-she-said. When you have recurring revenue with a more mature product (and a way to track those subscriptions that you won't end up scrapping), re-consider the perpetual license.

spyke112 3y ago
I’ll be the one suggesting to keep the option. I haven’t tried the product yet, but I would in general expect a perpetual life time license to be some sort of license key, that can be entered into the application and verified. So that I can keep it safe, and forever proof that I own a license, thus eliminating the problem mentioned here.

icholy 3y ago

This reminds me of skybound stylizer http://www.skybound.ca/ http://www.skybound.ca/

mrieck 3y ago

This tool is for front-end devs who love tweaking front-end designs faster. My tool is for back-end devs who don’t want anything to do with front-end, but want to build UI faster. https://www.snipcss.com https://www.snipcss.com I’ve always wondered how CSSPro works at extracting/scoping CSS because that’s supposed to be a feature. But I’ve never been willing to pay $30/mon just to see how well a competitor works. Anyone who pays - do you think it recreates a carbon copy of any section of a website well?

T3RMINATED 3y ago

[dead]

filmgirlcw 3y ago

This looks great and I’m not against charging for tools — I’m not even against subscriptions (even tho they often annoy me personally), but the value prop here doesn’t seem to match $30 a month (or $15 if you do annual). And it isn’t because I’m cheap — I spend lots of money on lots of stuff — or that I don’t value indie development (same), but this pricing puts this utility in the same class as things like Figma, the Adobe Suite, a lot of CMSes (Webflow, Craft, etc.) for a utility that might be useful, but doesn’t strike me as $360 a year (or even $180 a year) useful. The value prop just isn’t here for me, even tho I like what this is trying to do. At $5 a month/$50 a year, I think you’d get more traction and much better volume than what you can get at $30 a month/$180 a year prepaid. And I have to say, when I see prices this high, I’m hesitant to prepay from unknown companies because I don’t have any expectation about how long it will be in business or continue to update the product, because I don’t see how you get sustainable development at this price point. Figma and Adobe can charge what they charge because they’ve earned it and because those are tools where you feel like you get your money’s worth. $30 a month for something that will improve but not fundamentally change the way I do web dev, I’m sorry but no.

willtheperson 3y ago
Couldn't agree more. I have no problem paying for tools, especially when they will save me time. That said, don't I need to know how to use devtools (chrome/ff/safari) to do my job in the first place? It feels like this product is trying to inject itself into a process that isn't super refined but works fine. The real problem is the dependency it creates. If I only know how to do frontend work with handheld UI controls, then I have to use them and am locked into this product. It doesn't promote me learning the css rules or understanding how to actually fix things, so then I'm back to the devtools and why am I using this?

Thonn 3y ago

To be honest, the pricing really does feel fair for what it offers. I just don't wanna spend money on a monthly subscription, and its too much of an unknown to throw 900$ at it.

graderjs 3y ago

This is a wonderful interface! Great UX, really landmark, effortless design! Reminds me of Bret Victor, and the top notch best products to come out of Apple and Google. You have produced something that big companies spend millions, thousands of developer and designer hours, and months to build. You are truly awesome! Thank you for inspiring the world with this awesome work!!! :) ;P xx ;p Do you have a GitHub or place where we can see more of your work? Thank you for laboring in obscurity until you produced this magnum opus masterpiece. This guy is example of why you should never give up. :) ;p xx ;p

ilrwbwrkhv 3y ago
Are you a chat gpt bot?
- graderjs 3y ago
  Ha ha ha. bringing your negativity. Triggered by positivity.

replwoacause 3y ago

Beautiful website, video, and product. I was also a bit shocked by the price. FWIW, as a hobbyist I wouldn’t subscribe unless it was $5/month or less but would pay $150 for a one-time perpetual license but I’m sure you’ll find your consumer as the pro level.

pokepim 3y ago

[dead]

low_tech_punk 3y ago

Comparison with https://visbug.web.app/ https://visbug.web.app/ (free as in beer, and open source)?

sangupta 3y ago

This is an awesome tool, however, the pricing is lot costly to subscribe as most of these tools are already available for free. * Ruler - Dimensions for Chrome * Assets - Easily get from network tab * Eyedropper - Digital color meter on MacOS * Custom CSS - Stylebot for Chrome The only tool that I personally don't know is the color palette from the page - but then Eyedropper itself can do it. And thus comes the question, why should I pay $30 per month for tools that are available for free to a developer?

kamikaz1k 3y ago
can you please link to those referenced tools? thank you
- sangupta 3y ago
  Dimensions: https://chrome.google.com/webstore/detail/dimensions/baocaagndhipibgklemoalmkljaimfdj https://chrome.google.com/webstore/detail/dimensions/baocaag... Save All Resources: https://chrome.google.com/webstore/detail/save-all-resources/abpdnfjocnmdomablahdcfnoggeeiedb/related https://chrome.google.com/webstore/detail/save-all-resources... Stylebot: https://chrome.google.com/webstore/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha https://chrome.google.com/webstore/detail/stylebot/oiaejidbm...

iamsahebgiri 3y ago

[dead]

iguana_lawyer 3y ago

$30/month? Are you high?

pyrelight 3y ago
Yeah I don't know where the pricing is coming from. $30/mo is like Creative Cloud levels and this is not comparable to the utility/functionality you'd get from even one of Adobe's tools. I'd probably pull the trigger on this for $3-$5/mo.

beeburrt 3y ago

This tool looks amazing! That music in the video gives me anxiety

efields 3y ago

This is very cool. The gradient/bkg generator alone is very cool. But I think you’re trying to sell a design tool to developers, even highly proficient CSS developers, who have their _ways_. This is not a $30/month tool to those folks. This is a neat app to generate little parts of a website. Does not look like a daily driver, unless you’re cranking out a lot of unique CSS monthly.

POiNTx 3y ago

I think it looks great! For the pricing, consider adding tiers depending on the type of user. What you're asking for now is perfectly fine for companies. But for individual developers I think it's a bit steep. Also a demo that you can test out in the wild for maybe a week or so would be interesting, or a generous 7 day refund policy. Good luck!

leemcd56 3y ago

Nice tool, but I don’t want to pay a subscription to use it. I appreciate the Lifetime license, but it’s far too expensive. I’ll pass. I wish you the best on this, though!

ShadowBanThis01 3y ago

Looks slick, but another rental thing? Not even going to download it. Good luck though.

recursive 3y ago

This generally looks pretty cool, but on my machine, the "pick any color you need" demo doesn't work. As I mouse over the image, it seems to be generating completely random colors for each pixel, with no correlation to the color that's actually there.

rylan-talerico 3y ago

As a non-technical product manager, this tool could be valuable to me if it works as well as the website illustrates. I agree with the concern expressed in other comments re: price, especially considering the lack of a free tier or trial. The marketing site is great. Congrats on your launch!

xkcd1963 3y ago

I've been working with CSS for a while now and most time spent is on: - tackling of inconsistent browser behaviour and bugs on top of cross-browser compatibility - RWD - pixel perfect implementation of designs - extending or replacing native input elements And very little of it has to do with color gradient selectors or pixel to em conversion.

hrdwdmrbl 3y ago

I would pay if you could show me the formula for how measurements are calculated. The most common question I'm always asking myself is: Why is this like this? For many properties the browser can tell you which CSS selector "won" a property such as "font-family". But for something like a width, the actual formula being applied is often hard to puzzle out. The browser will tell you its result but now how it arrived at that result. For example, the element with id "pagespace" on this page. It has width that works out to some px depending on your screen width. But why that width specifically? I can personally figure it out by going up the DOM tree to see that each element is the full width of its parent (and that's how display: table-row, table-row-group and table all work) until we get to the "hnmain" element which is 85% width (of its parent). And then its parent is the body which has 8px margin all around. So the formula is something like: (screen-width - 8px * 2) * 0.85. But that took me how long to figure out manually? Show your work!

coxley 3y ago

Whoa, this is very nice! I'm going to buy when I kickstart some upcoming web work. The price won't be for everyone — but you don't need everyone. :)

syntex 3y ago

Personally, I find the cost a bit steep. Truth be told, I don't frequently tinker with CSS, maybe only a couple of times annually. A lifetime license for $39.99, however, would definitely be a deal I'd gladly snap up, no more, no less.

tuckerconnelly 3y ago

I'd say I'm the target market, and I don't have a hangup about subscriptions like other comments. I'm almost excited about this, but man, this feels painfully slow. Not like Salesforce slow. But death-by-a-thousand-cuts-everything-takes-500ms slow. "Retool" slow :) If you could cut some of the animations, or use transforms instead of absolute positioning or something--whatever to improve performance--I'd be down to try it for a month.

masukomi 3y ago

a) wow cool. b) if i did CSS for a living i'd install and try it out, but i only dabble when forced to, and dabbling isn't worth $30 a month. good luck.

deleted 3y ago

[deleted]

aldanor 3y ago

"CSS with clicks, not code" honestly sounds like a disadvantage without reading deep into it; the less clicks, the better.

siliconc0w 3y ago

Developers are very sensitive to their toolchain and don't want to learn a new one that may go away/get mismanaged. Also it's easier to justify the value prop if it's a once off and I can evaluate future versions. The single time price should be about a years worth of subscription. If you can't add enough features in a year to make it worth grabbing the next version then you're really saying something about your level of commitment to maintaining and improving the tool.

HellsMaddy 3y ago

I have wanted something like this for years, and your take on it is way better than what I had in mind. I think the pricing is fine, I plan to pay for a month and see if it lives up to my hopes. Awesome job on the marketing page and demo video.

qingcharles 3y ago

Unbelievably well-polished tool. I have no idea how many man-hours went into this. But I echo the other voices concerning the pricing. Right now I have the entire Adobe product suite - everything they make - for only $25/month.

firecall 3y ago

Is this a modern version CSSEdit?

freediver 3y ago

Minor nitpick: The landing page video has a picture of Safari, but when clicked shows Chrome in action.

digitalsin 3y ago

Very cool tool but way, way overpriced.

zestyping 3y ago

Beautiful... but no undo? There's "Reset all changes" but Cmd-Z and Ctrl-Z do nothing. Is there a way to undo the last action? Undo is essential functionality, IMO.

zestyping 3y ago

I don't understand how classes work in this tool. It looks like you can only edit styles on individual elements. I can see classes, but I don't see a way to change the class of an element, or to change the CSS properties of a class. I even tried applying different changes to the same class — larger font for one element, smaller font for another element with the same class — and CSS Pro is happy to give me contradicting CSS rules. Example: https://imgur.com/a/qT1y95T https://imgur.com/a/qT1y95T CSS with a separate rule for every element is unworkable. How is the exported CSS supposed to work?

russdpale 3y ago

Im curious as to how a poor person would use something like this? All of these are creating the haves and the havenots in the coding world. The rich get richer. Im a simple man, I see a monthly sub, and I move on.

ppetty 3y ago

I don't think this is a devtools* replacement or a significant enough "game changer", this is just a different way to interact with CSS. Devtools reveals both the HTML & CSS (as well as the cascading rules that comprise what I'm seeing). Devtools let's me introspect & debug why what I'm seeing as it's happening with CSS in conjunction with HTML & possible HTML changes caused by JavaScript events or pointer-events, for example. I like that this tool could make looking at the parsed & rendered code in a browser window easy to "see" & maybe copy. But for a small part of what devtools does this really is expensive. More expensive than most other apps I use. More expensive than GPT+ plus. More than the cost of hosting my site on DigitalOcean or AWS. If this were a truly must have app & I could get past the price, I'd enjoy it with the concern that most features could be incorporated into devtools directly, by browser makers or by other extensions that expand what devtools can do, although many features of this tool already can be achieved. In fact, I think that's the real missing feature in this service: it could be an web extension for augmenting CSS work devtools. Lastly, what if the price started at $15/month and for every 250,000 (maybe less, maybe more) new users everyone's price was dropped by a $0.50/month but could never drop below $3/month. By the time the price hits $5/month there are at least 5 million subscribers ... (with no annual plans & no life time bananas plan) that seems pretty good. * devtools is pretty awesome & pretty consistent in every browser. (Oh, and I'm super cheap, too.)