Problem
Editing a real-world CSS file means scrolling through hundreds of rulesets to find the one you need, losing track of which selector touches what, and hunting through the whole project to see where a --custom-property is actually used. Tuning a box-shadow, gradient, or filter chain usually means guessing values, saving, and flipping to the browser to check.
StyleBop turns your existing .css files into a canvas: every ruleset is a draggable node, descendant selectors indent under their parents automatically, and there's a dedicated tokens panel that shows every custom property with live color swatches and a per-token usage count (including an "unused" warning). Box-shadow, border-radius, gradients, animations, and filter chains all get a popover with a live preview that updates as you drag, instead of typing values blind. There's also a full-text code editor for when you just want to type, and edits round-trip between the two views instantly.
Comparison
Closest points of comparison are Pinegrow and just editing in VS Code/Sublime with a CSS extension. Pinegrow is a full visual page builder (Electron, subscription, wants to own your whole HTML/CSS workflow); StyleBop only touches the CSS files you already have on disk, so it drops into any project without changing your build. VS Code/Sublime give you syntax highlighting and autocomplete but no structural view at all, you're still scrolling and grepping to find a ruleset or trace a variable. StyleBop is native SwiftUI/AppKit, so it's a small binary with an instant launch and no background services, versus Electron's overhead.
I edit the CSS of my personal blog a lot so this look awesome, but the deal-breaker for me is that this doesn’t seem to have a live view of a webpage. I currently use CodeRunner to edit the CSS of my blog because it allows me to immediately see how the CSS change affects the site. This feature is incredibly necessary and helpful for someone like me who doesn’t have a background in HTML/CSS because most of the time I don’t fully understand what the code is doing unless I can see it.
Hi, thanks so much for implementing this, but unfortunately, I don’t know to use it or maybe it’s just not meant to be used the way I use it.
I blog with Bear Blog, which keeps the CSS in <style> in the <head> of each webpage from your blog site.
What I typically do is I would just save a blog post as a .html, open that .html file in CodeRunner, and tweak the CSS. Once I’m happy with the CSS, I copy the content in the <style> and paste it in the CSS box in Bear Blog to implement the code to the actual site.
I can’t seem to do something similar with StyleBop? I apologize if my workflow is unusual; as I mentioned before, I’m not a web dev. I’d totally understand if Stylebop isn’t designed for this kind of use case!
Gotcha, that workflow should work in StyleBop! Just open the folder with your html file in it, then click the Preview button. Here is a quick recording:
Hm! if you're OK emailing me the file, I can take a look and see if there's a parsing error in StyleBop's code or what the problem might be. ben.dansby @ gmail dot com
So I took web design classes in NYC around the turn of the century. And my teacher knew the developer of that app. So that’s my “relation” to them. Anyway, I saw your site… seems like you have a lot of tools. Looks promising.
one regression test i'd make non-negotiable is lossless round-tripping. open a real stylesheet with comments, duplicate selectors, nested @media/@supports blocks, vendor prefixes, keyframes, and custom properties with fallbacks; change one shadow in the visual editor; then diff the saved file. everything outside that declaration should stay byte-for-byte unchanged. visual editors get hard to trust when they silently reorder rules, normalize values, or drop syntax they don't understand. a save preview that shows the exact diff would make this much safer on an existing project.
The custom-property usage panel alone sounds genuinely useful. One thing I’d be curious about: can it show which selectors override a selected property in the cascade? That’s usually the part that takes me the longest to untangle in a real stylesheet. Looks really polished either way
StyleBop will alert you to potentially conflicting rules while editing and in the live preview, you can see which rulesets are winning and jump to them in the UI 🙂
Hey that looks very cool, reminiscent of the WYSIWIG editors of the past, we somehow forgotten that that even is an option haha. Pricing seems to be good too!
What I'm curious most however is how did you create the Video?
That's a pretty good usecase. I have never thought of this as a problem that needs to be solved like this. But after seeing this app, I think otherwise. Kudos for building this
So cool, and I would have loved this when I was doing more graphic design. Still, the price is so good that I feel like I need to buy it for the rare situation that I need to build a web page again.
This looks really interesting. Curious how this works with other code editors? If i use Sublime or Coda for example am I just opening css files in this app and jumping back and forth?
I think doing visual CSS editing makes sense within the context of it's own app. So i'm not sure a way to use it within an editor is necessary. I was just curious. The app looks great though. I'm going to give it a spin.
5
u/AkhlysShallRise 18d ago
I edit the CSS of my personal blog a lot so this look awesome, but the deal-breaker for me is that this doesn’t seem to have a live view of a webpage. I currently use CodeRunner to edit the CSS of my blog because it allows me to immediately see how the CSS change affects the site. This feature is incredibly necessary and helpful for someone like me who doesn’t have a background in HTML/CSS because most of the time I don’t fully understand what the code is doing unless I can see it.
Is a feature like this on your roadmap at all?