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.
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.
jsmol-widget.min.js exports a single global object called
JSmolWidget, which is documented
here.
# Install the dependencies
npm install
# run the example locally
npm start
# navigate to http://localhost:8080The 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.