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
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.
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.).
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.
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.
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.
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.
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.
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.
The old model was tightly coupled to the CD as distribution vector—you got what came on the disk, nothing more. It was easy to understand for everyone involved, and the path of least resistance for the developers
The internet changed that, because people began to expect you to fix bugs in a released product indefinitely. Declaring that you are all done fixing bugs is now not just an obvious necessity given the infeasibility of distributing small updates on CDs, it's now a conscious decision that has to be explained to the customer in sufficiently clear terms that they don't come complaining to you later. Failing that, you just have to plan on supporting a purchase indefinitely, and the easiest way to organize that is as a subscription for a single main release channel.
JetBrains has what could be a good model for products that lend themselves to a regular release cadence—it's a subscription, but you keep the license for the version that was current on the day of your last payment. But not every product lends itself to that kind of regular, predictable release cadence.
You could also just cancel when you realize it's not worth it instead of sinking a large upfront on it only to find it didn't fit into your workflow. I find that a benefit as even very loved and low priced software often just doesn't fit my personal desired ways of working.
I'll try it because of hype/marketing/good Show HN/etc, and then never really adopt it. So my thought is it's better to just make it easy to cancel the subscription otherwise I'd probably never even try it.
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).
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.
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.
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.
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.
> 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.
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.
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.
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.
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.
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.
We used to have full WYSIWYG editors in browsers as far back as the 90s (including deployment via FTP). Specialized editors just seem to have always been the preference for developers.
I wonder if there is a way to "export changes to git", such that you can download some sort of script (or apply some cherry-picked git changes) from an external source?
In this case, you would press "export changes to git" and then somehow apply them to your local repo, and bam, all the changes transferred without having to actually change any files.
One problem with this is that the changes in the browser are done on the distribution (bundled) files. Maybe using source-maps it could still be possible.
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.
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.
297 comments
[ 3.9 ms ] story [ 260 ms ] threadOne 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
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.
Also, figma has figjams which is similar to Miro for many use cases.
At the bottom of the pricing page. It's not a JetBrains type deal.
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.
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.
The internet changed that, because people began to expect you to fix bugs in a released product indefinitely. Declaring that you are all done fixing bugs is now not just an obvious necessity given the infeasibility of distributing small updates on CDs, it's now a conscious decision that has to be explained to the customer in sufficiently clear terms that they don't come complaining to you later. Failing that, you just have to plan on supporting a purchase indefinitely, and the easiest way to organize that is as a subscription for a single main release channel.
JetBrains has what could be a good model for products that lend themselves to a regular release cadence—it's a subscription, but you keep the license for the version that was current on the day of your last payment. But not every product lends itself to that kind of regular, predictable release cadence.
I'll try it because of hype/marketing/good Show HN/etc, and then never really adopt it. So my thought is it's better to just make it easy to cancel the subscription otherwise I'd probably never even try it.
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).
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.
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
> 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
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.
We used to have full WYSIWYG editors in browsers as far back as the 90s (including deployment via FTP). Specialized editors just seem to have always been the preference for developers.
In this case, you would press "export changes to git" and then somehow apply them to your local repo, and bam, all the changes transferred without having to actually change any files.
One problem with this is that the changes in the browser are done on the distribution (bundled) files. Maybe using source-maps it could still be possible.
Triplex has some of that 2-way sync for frontend to code: https://triplex.dev/docs/overview
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.
Looking at the code, you can indeed run it as a bookmarklet. I went to https://www.example.com and typed this in the browser console:
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.
However it may work as a UserScript depending on the UserScript engine.
- 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).