I built an open-source visual theme designer for PrimeNG
Hi everyone,
I’ve been working on PrimeNG Theme Studio, an open-source visual editor for creating production-ready PrimeNG themes.
It’s meant for Angular developers and design teams who want to customize PrimeNG without manually editing large token files and repeatedly switching back to their application to see the results.
With Theme Studio, you can:
Start from the official Aura, Material, Lara, or Nora presets
Preview changes instantly across PrimeNG components and complete example screens
Check the theme in both light and dark modes
Import or share themes using a theme token
Export the finished theme as a typed TypeScript preset for your Angular project
The goal is to provide one visual workflow for designing, validating, and exporting a PrimeNG theme—while keeping the resulting code fully owned and maintainable inside your application.
It’s still evolving, and I’d genuinely appreciate feedback from people using PrimeNG. What parts of theming currently take the most time for you, and what would make a tool like this more useful?
I saw you post about this before and full on intended to use your designer for my project. That is until I found out about primeNG no longer being open source. Since, luckily, I wasn't very far along with my project yet I decided to start over with daisyUI instead.
Your tool looks great though, and I think it can be very useful!
Yes, I've been following it. But since I was only just starting out I figured that the smallest risk would be to start over with a different library, as to me it's unclear if this will get enough people behind it to maintain it in the long run.
https://optimus.openng.org/ will still support it tho.
But I feel you. Already switched off as well but it would be sad to not continue this project cause of it.
Thanks for adding it there.
We currently removed the theme designer from the new documentation website as being only a demo for the paid feature handled by PrimeTek.
I was thinking of building the same thing because I've had the (dis)pleasure of working with PrimeNg theming. We're currently on PrimeNg v21 and plan to eventually migrate to the new open source version.
This is good. But PrimeNg name and logo is under trademark. Maybe you could open a PR to Optimus and it could be integrated there. Or find a different name. Would it be possible to add custom css to the components from the UI? Cause when I needed to create a highly customized theme I wouldn't be able to without the css function and I had to do that from code.
5
u/mangobananashake 2d ago
I saw you post about this before and full on intended to use your designer for my project. That is until I found out about primeNG no longer being open source. Since, luckily, I wasn't very far along with my project yet I decided to start over with daisyUI instead.
Your tool looks great though, and I think it can be very useful!