Nanocar Builder Design

We want to build the most user friendly molecule editor of the web with an emphasis on building nanocars. Our aim is to apply the familiarity and simple UI design of popular CAD tools to molecular science. In other words, we want to build an editor that is straight forward to use, doesn’t require you to search through layers of menus and allows you to perform a wide range molecular operations easily.

User Interface

The user interface has three components, the main window for visualizing molecules, a sidebar on the left to perform various operations and an axis helper on the top right. You can navigate the view with the left mouse button and zoom in and out with the mouse wheel. The background and the menu is designed to be easy on the eyes but still include the most commonly used functions.

Expandable menus

The sidebar consists of several expandable menu buttons. As you click, the menu is expanded to the right to show the options as seen below.


The file menu would be used to load and save molecules into a file. Initially simple and commonly used file formats such as cjson, xyz, pdb, and cif would be supported.


The build menu would consist of custom build operations. Initially these would be functions such as adding a chassis molecule, connecting a wheel molecule, and building a metal surface. More custom build operations can be supported as the editor is developed.


The edit menu opens editable options for what is selected. This could be changing elements, resizing, coloring atoms, joining/separating molecules and more.

Toggle buttons with pop-up windows

The toggle buttons are highlighted as you click on them and they can open pop-up windows according to their function.


The select menu allows users to select atom(s), bond(s), or molecule(s). Additionally the box select tool could be used together with these options. For example clicking both atom, and box select would enable selecting all the atoms in the box. As the user selects an atom for example this would open a pop-up window on the right showing information about the selected atom. This includes element name, which molecule it belongs to, which atoms it's bonded to and its visualization settings such as size and color. Some of these are highlighted in blue meaning that they could be clicked. For example you could click the molecule to select the whole molecule, or click one of the bonded atoms to select it. You could imagine similar menus showing up for different selections. For example, if you would like to select a molecule, you would click the third button from the top in the select menu. This would again open a pop-up windows this time showing information about the whole molecule such as it's composition, molecular weight, and more.


The arrange menu would be used to perform geometric operations on the atom(s) or molecule(s). These include translation, rotation, and reflection. A small pop-up window would open as you click on the buttons that would let you select parameters. For example when you want to rotate a molecule you would be able to select an axis and an angle of rotation.


The view buttons would be used to adjust the camera view and molecular representions. The user can view the molecule through x, y, z axes by selecting from here or just using keyboard buttons (1, 2, 3). More detailed camera options would be set from the camera icon such as perspective/orthograhic view. The settings button would be used to set the molecular representations such as ball and stick, spacefill, and wireframe. This could be selected for each molecule separately.


We are developing this builder on GitHub right now and we appreciate any help. Please check our GitHub page and feel free to join the discussion on our Discord server.