Jsmol-widget NPM

jsmol-widget molecular viewer

This is a small wrapper of JSmol, that provides easy access to selected visualization options, and that is used e.g. on Materials Cloud and as a module of maptomic. See it in action here.

Using the code

Grab the latest release and include it in your HTML pages:

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="<PATH_TO_JSMOL>/JSmol.min.js"></script>
        <script type="text/javascript" src="jsmol-widget.min.js"></script>
    </head>
    <body>
        <div id="viewer" style="width: 600px; height: 400px;"></div>
    </body>
    <script type="text/javascript">
        document.addEventListener("DOMContentLoaded", () => {
            const viewer = new JSmolWidget('viewer', '<PATH_TO_JSMOL>/j2s');
            viewer.load('<some data>')
        });
    </script>
</html>

This viewer requires JSmol to be provided externally, either by yourself or loaded from https://chemapps.stolaf.edu/jmol/jsmol-2019-10-30/JSmol.min.js.

Documentation

jsmol-widget.min.js exports a single global object called JSmolWidget, which is documented here.

Local development

# Install the dependencies
npm install
# run the example locally
npm start
# navigate to http://localhost:8080

Licensing

The widget code is distributed under the 3-clauses BSD license. By contributing to this project, you agree to distribute your contributions under the same license.

Jmol and JSmol are distributed under LGPLv2 license.

@everything-registry/sub-chunk-1982 @zalastax/nolb-jsm

0.7.0

4 years ago