Composable visual editors for CSS properties. Mix and match to create your own custom design tools without writing code.

A growing collection of composable open source visual editors for CSS properties. The goal is to be able to generate any and all valid CSS with parametric controls for everything in the CSS spec. Why try to do this? We love the web, the materials of the web, and designing with code. But we've found that sometimes writing code is a slow way to design with CSS when compared to the power of parametric design. No matter how fast we type hex codes, there is nothing like sliding around a color picker and watching a design update in realtime. Writing CSS also requires knowing CSS. This hurdle can reduce the available surface area for collaboration amongst teammates. You don't need to know anything about CSS to use a color picker and judge which colors look the best. Parametric interfaces can be effective for creating with intention as well as learning through discovery and play. While there are existing design tools with parametric controls that allow you to export your design as CSS, they often times don't make all of CSS's power and flexibility availble to the designer. What if you could explore every CSS property without writing any code? All code examples or presets could be editable. People could cycle through curated presets, or manually tweak values themselves to discover what's possible. We want to put the creative power of CSS in as many hands as possible. Where the limits of your CSS knowledge, are no longer limitations to your creativity. We'd love to hear what you think.

Congratulations @4lpine and all the team for the great product! John and I were the first ones, together with the founder of Tina, believing in a React-based visual editing CMS back in 2019. Now you are doing great things in the CSS and generative design tools space. I am always curious when you share something new. Keep up the good work! 😊

Thanks, @matfrana! We're really excited for the possibilities here. Much like React and components are a powerful composition layer for WYSIWYGs in the CMS space, we feel that visually editing CSS is a missing piece for the styling/theming layer. After all, it's a web primitive and visual controls simply make it more approachable to more folks. CSS GUI is designed to be leveraged anywhere, whether that's a site builder, a user customizing their profile page, or a developer visually editing some colors and layout within their text editor. Combined with a generative layer, we're hoping this can greatly improve workflows by styling more efficiently and creatively.

I think it's a must have if you plan to learn CSS. Good job Adam!

@thomas_l1 Thanks for the kind words!

CSS.GUI

Open source visual editors for everything in the CSS spec

Do you use CSS.GUI?

Review CSS.GUI?