algorithmic modeling for Rhino

NBBJ Digital Practice is excited to announce the open source release of Human UI, a new plug-in that allows you to build custom User Interfaces for Grasshopper without writing a single line of code.

Today we have gone live, and the plugin is available on Food4Rhino. You will find an installer package, sample files, and a demo video on getting started:

Visit the Bitbucket Repo and poke around in the code:

Check out today's coverage in Architect Magazine:

Finally join our group and ask any questions or post any comments here:

See below for detailed description!


Human UI


Primary Development by:

Lead Developer: Andrew Heumann / andheum / @andrewheumann

Product Manager: Marc Syp / marcsyp / @mpsyp

Contributing Developer: Nate Holland / nateholland / @_NateHolland

Gone are the days of faking a user interface by laying out sliders and text panels and hiding wires on the Grasshopper canvas. Human UI interfaces are entirely separate from the Grasshopper canvas and leverage the power of Windows Presentation Foundation (WPF), a graphical subsystem for rendering user interfaces in the Windows environment.



In other words: Human UI makes your GH definition feel like a Windows app. Create tabbed views, dynamic sliders, pulldown menus, checkboxes, and even 3D viewports and web browsers that look great and make sense to anyone--including designers and clients with no understanding of Grasshopper.



Human UI has been in development at NBBJ for over a year, as part of a larger NBBJ Design Computation initiative to deliver our tools internally as Products -- with fully automated installation, managed dependencies, analytics, documentation, and “magical” user experience. Human UI has been a huge component of the user experience part of this puzzle, and we are excited to share it with the larger Grasshopper community so that others can benefit from it and contribute to its development.


The initial release of Human UI is accompanied by a few simple examples to get you started, but we have developed sophisticated user interfaces with these tools at NBBJ and will slowly be rolling out more advanced examples. We also look forward to opening up the development to the community and seeing what new features and paradigms we can add.


Download the plugin at Food4Rhino and get started building Custom UIs for Grasshopper right away! We are happy to answer any questions or field discussion in the dedicated Grasshopper Group. Please join us!


Join the Grasshopper Group

Download the plugin + sample files

Visit the Bitbucket Repo


We look forward to seeing where this project takes you, please share your projects made with Human UI!



Design Computation Leadership Team, NBBJ


Views: 4985

Replies to This Discussion

Great work guys!!

this takes things to another level!! great stuff.

Great work

looks fantastic! 

Exciting. May be very useful for building tools for clients, for normal Rhino users to enjoy.

Is there any relation to the other Human plug-in?

The relation is that Andrew Heumann is the code wzrd behind both plugins.  

I made a few contributions to the Human plug-in (namely component requests here and there, and the name suggestion -- "Human") but was much more involved with the development of Human UI, largely from a product roadmap, feature set, testing, and usability standpoint. Shout out to our colleague Nate Holland for doing some heavy lifting on the code for charts and graphs as well.  

But all in all, Andrew is the C# genius that made it all come to life and so both plugins bear his Grasshopper Zoo name!



This is fantastic!

I started a test with an old gh file and fall over one point right at the beginning.

I used a expression in my sliders to get n.5 or n.n5 values. And the "Create Slider" component

is ignoring the expression. So I get the "wrong" values displayed in the control window.Is there a way to get the values from the expression in the slider?

Thank you for your great work!

Hi there, glad to see you trying it out.

I believe that your goal is to create custom snapping values, and itt is true that we do not inherit expressions from the slider.  Instead, we have implemented our own "Snap Value" mechanism that we think is more intuitive and friendly to use.  

Simply set the extents of your slider (here I have used 0.0 to 20.0) and the increment that you would like it to snap to (0.5 in this case).  No need to fool the component with reverse math acrobatics.

Let us know if this does or doesn't solve your problem!



Hi Marc,

thank you for your reply. You are right, that math acrobatic is to get the snapping.

I tried it exactly the way you are showing. But it doesn´t work the first time, don´t

know why, maybe I had to recompute or open/close the HUI window.

But now it is all working as expected.

Thank you, I´m still testing. btw. there is no way to show lines/curves in the 3D Window?

Hey, glad you got it working and it does what you need.

As for lines and curves, unfortunately the ecosystem for displaying geometry in a 3D viewport inside the HUI is still pretty crude.  Currently the viewport only accepts meshes, so depending on your visual tolerance, you could simulate lines and curves with very narrow meshes, but this is understandably questionable.

There are some other pretty hacky workarounds that use a combination of Make2D processes and the Create Shape HUI components, but layer order control is difficult and performance is questionable.

Anyway, we're happy to entertain thoughts on how to improve this.



Hey, I don´t know if I understand something wrong here, but why is the slider that short? Shouldn´t  that Stack component, with Horizontal=True, put the elements with max. width for every element? I like to have an "icon" on the right of every slider.

The Create Grid looks a bit to much for that simple thing.



Don't know if you ever got an answer to this question -- but the Horizontal=True does not relate to the width of the component but the relationship between the elements.

Horizontal=True will stack elements side by side, and False will stack them vertically.  You can nest Stacks within Stacks to get a variety of grid effects (without using an official grid).

Slider width can be controlled with the "Adjust Element Appearance" component, but there are some limitations in that we don't have a clean workflow for setting widths dynamically based on window width, for instance. Still, you can accomplish most of what you need with AEA and Stacks.








  • Add Videos
  • View All

© 2024   Created by Scott Davidson.   Powered by

Badges  |  Report an Issue  |  Terms of Service