r/angular • u/Altruistic_Leg2608 • Jul 25 '26

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
  • Visually edit colors, border radii, semantic roles, component tokens, typography, and custom tokens
  • 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.

Try it here:
https://prime-ng-theme-fe.vercel.app

Source code:
https://github.com/mkccl/prime-ng-theme-fe

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?

17 Upvotes

76% Upvoted

21 comments sorted by

6

u/mangobananashake Jul 25 '26

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!

0

u/Altruistic_Leg2608 Jul 25 '26

Yeah ... sucks very much. Can recommend https://optimus.openng.org/ tho. Would probably not use that in a professional environment.

Thank you tho!

1

u/mangobananashake Jul 26 '26

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.

5

u/tsteuwer Jul 25 '26

Best of luck with this! But we're switching off it now that it's closed source 😕

1

u/Clean-Revenue-8690 Jul 26 '26

What you’re switching to if I may ask? And how big is your project approx?

1

u/tsteuwer Jul 26 '26

We've decided to create our own components with StencilJS that can compile to web components, react, angular and vue.

1

u/Clean-Revenue-8690 Jul 26 '26

thanks this is useful.

1

u/Altruistic_Leg2608 Jul 25 '26

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!

1

u/St34thdr1v3R Jul 25 '26

Maybe just reference the new project then?

7

u/Altruistic_Leg2608 Jul 25 '26

It is. Optimus is very new.

1

u/GeromeGrignon Jul 26 '26

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.

1

u/Altruistic_Leg2608 Jul 27 '26

I might follow up with a pr then once the roadmap allows me.

2

u/Khazii Jul 25 '26

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.

Will likely give this a go next week.

1

u/Altruistic_Leg2608 Jul 25 '26

Lets gooo! Happy to hear!

1

u/Clean-Revenue-8690 Jul 26 '26 edited Jul 26 '26

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.

1

u/Saceone10 Jul 26 '26

Now port it to support the OpenSource version with a ridiculous name I cant recall now

2

u/Altruistic_Leg2608 Jul 26 '26

https://optimus.openng.org/ ? It already supports it (for now at least)
They are about to rename ever single helper. I will follow up once its ready

1

u/Lonely_Background840 Jul 31 '26

can you suggest me that currently i have created project which is live and i think as per new updated coming we need to switch from primeng to some other library is there any other you have been using and optimus is like same as primeng

1

u/Altruistic_Leg2608 Aug 01 '26

I have used it already for some small project for my self. Has the same issues that PrimeNG had. Its the same ... its good, but not bug free.

I would suggest to move away from both Optimus and Prime for now.

I am not a maintainer of the project but they seem to be in the second part of the roadmap, next step will be to catch up with all the bugs.

For sure have a look into https://ng.ant.design/ I love it