Web Components Builder

ChemDoodle for desktop has the ability to generate ChemDoodle Web Components for you, so you do not need to master Javascript to build dynamic and interactive chemical structures and components for your web pages.

ChemDoodle allows you to create beautiful images for chemical websites. Even better, ChemDoodle can generate scalable vector graphics that look wonderful at any resolution on the web. In addition to static images, ChemDoodle contains a sub-application for customizing, previewing and creating ChemDoodle Web Components for even more advanced and captivating websites. This allows you to display a wide range of chemically relevant dynamic components, including structures, animations, and interactive panels without writing a line of Javascript. In ChemDoodle, you just need to draw or load a structure on the main sheet, lasso it, and use the Web Components menu function to customize, preview and generate the web components.

In the File menu, as the next image illustrates, there is a submenu titled Web Components. Within this submenu, there are three items:

  • Save As Javascript Data File… – will output all selected molecules to a Javascript file that can be input on your webpage so that those molecules can be used in ChemDoodle Web Components you write.
  • Generate Component… – is the item this post covers and will allow you to select the type of component, set Javascript placeholders, customize your graphics, and preview/generate the Javascript you will paste into your webpage.
  • About – brings you to this website.
Web Components Menu Item

Web Components Menu Item

When the Generate Component… menu item is selected, a mini application will appear, allowing you to create any kind of ChemDoodle Web Component as well as fully customize it as is shown in the next image.

Mini Application to Generate Component

Mini Application to Generate Component

After setting up your component, press the Preview button to see it in your default browser.

Preview your component

Preview your component

If you are satisfied with the preview, press the Generate button, copy the generated Javascript into your webpage where you prefer it to be placed, and you are done! You now have rich chemical graphics and dynamic and interactive chemical components in your web page with little to no effort. Make sure to install the ChemDoodle Web Components library first. Enjoy!

ChemDoodle Web Component Javascript Generation

ChemDoodle Web Component Javascript Generation