I’m building an interface where users can input and edit CSS properties. I want to dynamically generate a form that adapts to the type of CSS property being edited. For example:

background-color should show a color picker.

padding and border-radius should allow for input either for all sides, x/y, or individual sides.

I need to distinguish between units like px, em, and percentages.
Properties like font-family, font-weight, and border-thickness should show appropriate select inputs or sliders.

Is there a something out there that has already handled dynamically generating these inputs for different CSS properties? Ideally, I’d like to avoid building this logic manually.

Tried browsing around, but couldn’t find anything that suits my needs. Figured i’d ask here.

Thanks in advance!