diff --git a/android/app/src/main/java/io/v/android/apps/reader/PdfViewWrapper.java b/android/app/src/main/java/io/v/android/apps/reader/PdfViewWrapper.java
index 4af173b..7ceb503 100644
--- a/android/app/src/main/java/io/v/android/apps/reader/PdfViewWrapper.java
+++ b/android/app/src/main/java/io/v/android/apps/reader/PdfViewWrapper.java
@@ -73,7 +73,7 @@
      * NOTE: must be called after the page loading is finished.
      */
     public void loadPdfFile(String filePath) {
-        evaluateJavascript("window.atom.href.set(\"" + filePath + "\");", null);
+        evaluateJavascript("window.client.open(\"" + filePath + "\");", null);
 
         // leave the page count as 0 until the page count value is properly set from JS side.
         mPageCount = 0;
@@ -85,7 +85,7 @@
      * @param page the page number to jump to. Page number is one-based.
      */
     public void setPage(int page) {
-        evaluateJavascript("window.atom.pages.current.set(" + page + ");", null);
+        evaluateJavascript("window.client.page(" + page + ");", null);
     }
 
     public int getPageCount() {
diff --git a/web/Makefile b/web/Makefile
index 3adc980..9d2c4ee 100644
--- a/web/Makefile
+++ b/web/Makefile
@@ -43,7 +43,7 @@
 		$< 1> $@
 
 .DELETE_ON_ERROR:
-public/pdf-web-view.js: browser/pdf-web-view.js node_modules
+public/pdf-web-view.js: browser/pdf-web-view.js $(js_files) node_modules
 	browserify --debug $< 1> $@
 
 .PHONY:
diff --git a/web/browser/dom/raf-queue.js b/web/browser/dom/raf-queue.js
new file mode 100644
index 0000000..212bf32
--- /dev/null
+++ b/web/browser/dom/raf-queue.js
@@ -0,0 +1,42 @@
+// Copyright 2015 The Vanadium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+
+var raf = require('raf');
+
+var jobs = [];
+var id = null;
+
+module.exports = queue;
+
+// Queue asynchronous workers to fire on the next available animation frame.
+function queue(job) {
+  jobs.push(job);
+
+  // If the id is set there is a job execution happening, don't invoke next in
+  // this case, it will be called when the currently executing job is done.
+  if (!id) {
+    id = raf(next);
+  }
+
+}
+
+// Call the next job in the queue (if available).
+function next() {
+  if (jobs.length === 0) {
+    // Allows the next call to `queue(...)` to kick off the newly added job.
+    id = null;
+    return;
+  }
+
+  var job = jobs.shift();
+  job(done);
+
+  function done(err) {
+    if (err) {
+      throw err;
+    }
+
+    id = raf(next);
+  }
+}
\ No newline at end of file
diff --git a/web/browser/pdf-web-view.js b/web/browser/pdf-web-view.js
index 42071d0..af1f231 100644
--- a/web/browser/pdf-web-view.js
+++ b/web/browser/pdf-web-view.js
@@ -2,69 +2,24 @@
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
 
+var assert = require('assert');
+var canvas = require('./widgets/canvas-widget');
 var document = require('global/document');
 var domready = require('domready');
-var struct = require('observ-struct');
-var value = require('observ');
+var format = require('format');
+var h = require('mercury').h;
+var hg = require('mercury');
 var window = require('global/window');
 
-var atom = struct({
-  debug: value(true),
-  href: value(null),
-  pdf: struct({
-    document: value(null),
-    page: value(null)
-  }),
-  pages: struct({
-    current: value(1),
-    total: value(0),
-  }),
-  scale: value(1),
-  progress: value(0),
-});
-
-window.atom = atom;
-
-// Global cache of the canvas element.
-var canvas = null;
+// Allow debugging in a normal browser.
+window.android = window.android || {
+  setPageCount: noop
+};
 
 domready(function ondomready() {
   debug('domready');
 
-  // Initial DOM Node setup.
-  canvas = document.createElement('canvas');
-  canvas.setAttribute('class','pdf-canvas');
-  document.body.style.margin = '0px';
-  document.body.style.padding = '0px';
-  document.body.appendChild(canvas);
-
-  // Watch for changes on the atom.href value, when it updates load the PDF file
-  // located at that location.
-  // Trigger with: atom.href.set(value)
-  atom.href(function hrefchange(href) {
-    debug('loading pdf file: %s', href);
-    PDFJS
-      .getDocument(href, null, password, progress)
-      .then(setPDF, error);
-  });
-
-  // Watch for page number changes and asyncronosly load the page from PDF.js
-  // APIs.
-  // Trigger with: atom.pages.current.set(value)
-  atom.pages.current(function pagechange(current) {
-    var total = atom.pages.total();
-
-    // Skip invalid operations.
-    if (current === 0 || !atom.pdf.document() || current > total) {
-      return;
-    }
-
-    debug('loading page: %s of %s', current, total);
-
-    var pdf = atom.pdf.document();
-    var success = atom.pdf.page.set.bind(null);
-    pdf.getPage(current).then(success, error);
-  });
+  var atom = state({});
 
   // Watch for the total page number changes and give the new value to the
   // Android client.
@@ -72,63 +27,156 @@
     window.android.setPageCount(current);
   });
 
-  // Watch for changes on the PDF.js page object. When it is updated trigger a
-  // render.
-  // TODO(jasoncampbell): To prevent rendering errors with frequent state
-  // updates renders should be queued in a raf.
-  atom.pdf.page(function pagechange(page) {
-    debug('rendering page');
-    var ratio = window.devicePixelRatio || 1.0;
-    // TODO(jasoncampbell): Use state set scale instead of defaulting to 1.0.
-    var scale = window.innerWidth/page.getViewport(ratio).width;
-    var viewport = page.getViewport(scale);
+  window.atom = atom;
+  window.client = {
+    open: function openPDF(href) {
+      open(atom, { href: href });
+    },
+    page: function pagePDF(number) {
+      page(atom, { number: number });
+    }
+  };
 
-    canvas.height = viewport.height;
-    canvas.width = viewport.width;
+  hg.app(document.body, atom, render);
 
-    page.render({
-      canvasContext: canvas.getContext('2d'),
-      viewport: viewport
-    }).promise.then(noop, error);
-  });
+  return;
 });
 
-function setPDF(pdf) {
-  atom.pdf.document.set(pdf);
-  atom.pages.total.set(pdf.numPages);
-  atom.pages.current.set(1);
+function state(options) {
+  var atom = hg.state({
+    debug: hg.value(options.debug || true),
+    progress: hg.value(0),
+    pdf: hg.struct({
+      document: hg.value(null),
+      page: hg.value(null),
+    }),
+    pages: hg.struct({
+      current: hg.value(1),
+      total: hg.value(0),
+    }),
+    scale: hg.value(1),
+    ratio: hg.value(window.devicePixelRatio || 1),
+    width: hg.value(window.innerWidth),
+    height: hg.value(window.innerHeight),
+    channels: {
+      open: open,
+      page: page
+    }
+  });
+
+  return atom;
 }
 
-function progress(update) {
-  var float = (update.loaded/update.total) * 100;
-  var value = Math.floor(float);
+function open(state, data) {
+  assert.ok(data.href, 'data.href required');
+  debug('opening PDF file: %s', data.href);
 
-  // For some reason the update.loaded value above can be higher than the
-  // update.total value, in that case we can assume the progress is 100%.
-  if (value > 100) {
-    value = 100;
+  var promise = PDFJS.getDocument(data.href, null, password, progress);
+  promise.then(success, error);
+
+  function password() {
+    var message = format('Password required to open: "%s"', data.href);
+    var err = new Error(message);
+    error(err);
   }
 
-  atom.progress.set(value);
+  function progress(update) {
+    // Some servers or situations might not return the content-length header
+    // which is proxied to update.total. Skip updating the progress if this
+    // value is not set.
+    if (!update.total) {
+      return;
+    }
+
+    var float = (update.loaded/update.total) * 100;
+    var value = Math.floor(float);
+
+    // For some reason the update.loaded value above can be higher than the
+    // update.total value, in that case we can assume the progress is 100%.
+    if (value > 100) {
+      value = 100;
+    }
+
+    state.progress.set(value);
+  }
+
+  function success(pdf) {
+    state.pdf.document.set(pdf);
+    state.pages.total.set(pdf.numPages);
+    page(state, { number: 1 });
+  }
 }
 
-function password() {
-  debug('password required');
+function page(state, data) {
+  assert.ok(data.number, 'data.number required');
+
+  var pdf = state.pdf.document();
+  var total = state.pages.total();
+  var number = data.number;
+
+  // Skip invalid operations.
+  if (number === 0 || !pdf || number > total) {
+    return;
+  }
+
+  debug('loading page "%s"', number);
+
+  pdf.getPage(number).then(success, error);
+
+  function success(page) {
+    debug('loaded page "%s"', number);
+    var width = page.getViewport(1).width;
+    var scale = state.width() / width;
+    var viewport = page.getViewport(scale);
+
+    // Reset the scroll position on page change.
+    window.scroll(0, 0) ;
+
+    // Update the state.
+    state.pdf.page.set(page);
+    state.scale.set(scale);
+    state.height.set(viewport.height);
+    state.pages.current.set(number);
+  }
+}
+
+function render(state) {
+  return h('.pdf-viewer', [
+    canvas(draw, state)
+  ]);
+}
+
+
+function draw(context, state, done) {
+  // Skip render if missing the PDFJS page object.
+  if (!state.pdf.page) {
+    done();
+    return;
+  }
+
+  state.pdf.page.render({
+    canvasContext: context,
+    viewport: state.pdf.page.getViewport(state.scale)
+  }).promise.then(done, error);
 }
 
 // TODO(jasoncampbell): Add better error reporting and exception capturing.
 function error(err) {
-  debug('error: %s', err.stack);
+  throw err;
 }
 
 function noop() {}
 
-function debug(template, args) {
+function debug(template, value) {
   // Noop if debugging is disabled.
-  if (!atom.debug()) {
+  if (typeof window.atom === 'undefined' || !window.atom.debug()) {
     return;
   }
 
+  // The logging in Android Studio only shows the template string when calling
+  // console.log directly, pre-fromatting allows the logs to show the correct
+  // information.
   template = 'pdf-viewer: ' + template;
-  console.log.apply(console, arguments);
+  var message = format.apply(null, arguments);
+  console.log(message);
 }
diff --git a/web/browser/widgets/canvas-widget.js b/web/browser/widgets/canvas-widget.js
new file mode 100644
index 0000000..0250f04
--- /dev/null
+++ b/web/browser/widgets/canvas-widget.js
@@ -0,0 +1,103 @@
+// Copyright 2015 The Vanadium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+
+var assert = require('assert');
+var document = require('global/document');
+var queue = require('../dom/raf-queue');
+
+module.exports = CanvasWidget;
+
+// # var widget = CanvasWidget(<draw function>, <state object>)
+//
+// A virtual-dom widget for creating and managing a canvas element which is
+// optimized for high density displays. The constructor takes two arguments:
+//
+// * draw: Function - called every update/render, the function will be called
+// with the arguments `context`, `state`, and `done`.
+// * state: Object - the
+// state object passed in during virtual-dom creation
+//
+// This widget is optimized for usage with PDF.js which has an async render
+// method. Render updates can happen at about 60 fps so some book keeping needs
+// to be done to queue PDF.js render calls to prevent multiple renders from
+// happening simultaneously (triggering weird pdf render bugs like upside down
+// text etc.). The queueing mechanism is simple but requires the `draw` function
+// to fire a callback when it's work is done.
+//
+// Example:
+//
+//     var state = {
+//       width: window.innerWidth,
+//       height: window.innerHeight,
+//       ratio: window.devicePixelRatio
+//     }
+//
+//     h('.pdf-viewer', [
+//       canvas(draw, state)
+//     ]);
+//
+//     function draw(context, state, done) {
+//       // Simulated async method which draws to the canvas context.
+//       setTimeout(function(){
+//         ctx.fillStyle = 'rgb(200,0,0)'
+//         ctx.fillRect(10, 10, 55, 50)
+//         done()
+//       }, 120)
+//     }
+//
+function CanvasWidget(draw, state) {
+  if (!(this instanceof CanvasWidget)) {
+    return new CanvasWidget(draw, state);
+  }
+
+  assert.ok(state.ratio, 'state.ratio is required');
+  assert.ok(state.width, 'state.width is required');
+  assert.ok(state.height, 'state.height is required');
+
+  this.draw = draw;
+  this.state = state;
+}
+
+CanvasWidget.prototype.type = 'Widget';
+
+CanvasWidget.prototype.init = function() {
+  var widget = this;
+  var canvas = document.createElement('canvas');
+  widget.update(null, canvas);
+  return canvas;
+};
+
+CanvasWidget.prototype.update = function(previous, element) {
+  var widget = this;
+  var state = widget.state;
+  var context = element.getContext('2d');
+
+  // In order to render appropriately on retina devices it is important to
+  // increase the size the the canvas element by the `window.devicePixelRatio`
+  // and then shrink the element back down to normal size with CSS. This will
+  // sharpen the image rendered by the canvas but decrease the rendered size. To
+  // get the size of the image back up to where it needs to be the canvas
+  // context needs to be scaled up by the `window.devicePixelRatio`. Simple.
+  //
+  // SEE: http://www.html5rocks.com/en/tutorials/canvas/hidpi/
+  //
+  // NOTE: This is done on update, which fires for every render call instead of
+  // in widget.init(), which will fire only when the element is first created
+  // and inserted into the DOM. Allowing this resizing to happen in the render
+  // loop makes it possible to handle resize events and update anytime the state
+  // values are updated.
+  element.width = Math.floor(state.width * state.ratio);
+  element.height = Math.floor(state.height * state.ratio);
+  element.style.width = Math.floor(state.width) + 'px';
+  element.style.height = Math.floor(state.height) + 'px';
+
+  // Scale the canvas to the the correct ratio. This must directly follow
+  // resizing.
+  context.scale(state.ratio, state.ratio);
+
+  // Queue the widget.draw function into the next available animation frame.
+  queue(function worker(done) {
+    widget.draw(context, widget.state, done);
+  });
+};
diff --git a/web/public/pdf-web-view.html b/web/public/pdf-web-view.html
index 701a420..b2bb1b7 100644
--- a/web/public/pdf-web-view.html
+++ b/web/public/pdf-web-view.html
@@ -1,2 +1,14 @@
 <script type="text/javascript" src="./pdf.js"></script>
-<script type="text/javascript" src="./pdf-web-view.js"></script>
\ No newline at end of file
+<script type="text/javascript" src="./pdf-web-view.js"></script>
+<meta name='viewport'
+  content='width=device-width,
+    initial-scale=1.0,
+    maximum-scale=1.0,
+    user-scalable=no' />
+
+<style media="screen">
+  html, body {
+    padding: 0;
+    margin: 0;
+  }
+</style>
\ No newline at end of file