Embedding the Viewer

Miew is available as a UMD module thus being compatible with the most popular module loading schemes:

Please note that Miew doesn’t work under Node.js directly since the major viewer requirement is WebGL rendering. However, it still can be installed via NPM and require-ed in your browserify or webpack-based projects.

Browser Globals

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Miew via Global</title>

  <link rel="stylesheet" href="Miew.min.css">
  <script src="Miew.min.js"></script>
</head>
<body>
  <div class="miew-container" style="width:640px; height:480px"></div>

  <script>
    (function() {
      var viewer = new Miew({
        container: document.getElementsByClassName('miew-container')[0],
        load: '1CRN',
      });

      if (viewer.init()) {
        viewer.run();
      }
    })();
  </script>
</body>
</html>

Require.js Module

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Miew via Require.js</title>

  <link rel="stylesheet" href="Miew.min.css">
  <script src="require.min.js"></script>
</head>
<body>
  <div class="miew-container" style="width:640px; height:480px"></div>

  <script>
    require(['Miew.min'], function(Miew) {
      var viewer = new Miew({
        container: document.getElementsByClassName('miew-container')[0],
        load: '1CRN',
      });

      if (viewer.init()) {
        viewer.run();
      }
    });
  </script>
</body>
</html>

Node.js

index.js

var Miew = require('miew');
console.log(Miew.VERSION);

Browserify

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Miew via Browserify</title>

  <link rel="stylesheet" href="Miew.min.css">
  <script src="bundle.js"></script>
</head>
<body>
  <div class="miew-container" style="width:640px; height:480px"></div>
</body>
</html>

index.js

var Miew = require('miew');

window.onload = function() {
  var viewer = new Miew({
    container: document.getElementsByClassName('miew-container')[0],
    load: '1CRN',
  });

  if (viewer.init()) {
    viewer.run();
  }
};

Webpack

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Miew via Webpack</title>

  <script src="bundle.js"></script>
</head>
<body>
  <div class="miew-container" style="width:640px; height:480px"></div>
</body>
</html>

index.js

require('miew/dist/Miew.min.css');

var Miew = require('miew');

window.onload = function() {
  var viewer = new Miew({
    container: document.getElementsByClassName('miew-container')[0],
    load: '1CRN',
  });

  if (viewer.init()) {
    viewer.run();
  }
};

webpack.config.js

module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js'
  },
  module: {
    rules: [{
      test: /\.css$/,
      use: ['style-loader', 'css-loader'],
    }],
  },
};