A set of reusable widgets have been developed that can be embedded in any web environment, from a React \cite{interfaces}, Angular \cite{framework} or Vue \cite{vuejs} based single page web application, a JupyterLab extension, or a static HTML page. They were developed in the TypeScript language using the Stencil library \cite{stencil}. Once they have been transpiled into JavaScript they become standard web components that can be used just like any other HTML tag such as a <div/> or a <img/>.
The core widgets are exposed using the <oc-molecule-moljs/> and <oc-molecule-vtkjs/> tags. The widgets have a common interface and can be used interchangeably. They take Chemical JSON as input, and a set of parameters can be used to tweak the visualization (such as the isosurface value, the active normal mode, or the molecule representation type). They render a three dimensional representation of the molecule that the user can interact with using the mouse or touch-based interaction, such as the 3Dmol.js based widget shown in Fig. \ref{674871}. The difference between them is that <oc-molecule-moljs/> uses 3Dmol.js \cite{Rego2015} to render the 3D scene, while <oc-molecule-vtkjs/>  uses vtk.js \cite{vtkjs}.
The major features of the widgets are the display of the molecular structure and connectivity, animation of normal modes, and the display of isosurface data from a cube of data (typically molecular orbital data from a quantum chemical calculation). The vtk.js based widget can display the crystal unit cell and offers volume rendering of cube data, shown in Fig. \ref{607756}, in addition to isosurface rendering.
The <oc-molecule/> tag wraps the core  <oc-molecule-moljs/> and <oc-molecule-vtkjs/> and adds a menu so that the user can easily change the visualization parameters. The menu (click on the three dots in the right top corner of the figure) offers: