Embedding the Viewer¶

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

<script> tag defining a global variable Miew,
Require.js AMD module Miew,
CommonJS module for Node.js, Browserify, and Webpack,
ES2015 module for Rollup.

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="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/4.1.1/es6-promise.auto.min.js"></script>
  <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="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/4.1.1/es6-promise.auto.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.4/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="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/4.1.1/es6-promise.auto.min.js"></script>
  <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="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/4.1.1/es6-promise.auto.min.js"></script>
  <script src="bundle.js"></script>
</head>
<body>
  <div class="miew-container" style="width:640px; height:480px"></div>
</body>
</html>

index.js

require('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'],
    }],
  },
};