diff --git a/Makefile b/Makefile
index 12e2460..0c1ed90 100644
--- a/Makefile
+++ b/Makefile
@@ -1,7 +1,7 @@
 CPPFLAGS += -I $(GPHOTO2PREFIX)/include
 
 libapi.mjs: api.cpp
-	libtool --verbose --mode=link --tag=CXX $(CC) $+ --bind -s ASYNCIFY -fexceptions -s DYNAMIC_EXECUTION=0 -g -s ASYNCIFY_STACK_SIZE=1048576 -o $@ \
+	libtool --verbose --mode=link --tag=CXX $(CC) -std=c++17 $+ --bind -s ASYNCIFY -fexceptions -g -s INITIAL_MEMORY=280231936 -s ALLOW_MEMORY_GROWTH -s ASYNCIFY_STACK_SIZE=1048576 -s DYNAMIC_EXECUTION=0 -o $@ \
 	  $(GPHOTO2PREFIX)/lib/libltdl.la \
 	  $(GPHOTO2PREFIX)/lib/libgphoto2.la \
 	  -dlpreopen $(GPHOTO2PREFIX)/lib/libgphoto2/2.5.27.1/ptp2.la \
diff --git a/api.cpp b/api.cpp
index 0e1a43d..d9d0b14 100644
--- a/api.cpp
+++ b/api.cpp
@@ -7,6 +7,22 @@
 
 using emscripten::val;
 
+template <typename T, int (*Deleter)(T *)>
+void gpp_deleter(T *ptr) {
+  gpp_try(Deleter(ptr));
+}
+
+template <typename T, void (*Deleter)(T *)>
+void gpp_deleter(T *ptr) {
+  Deleter(ptr);
+}
+
+template <typename T, auto Deleter>
+using gpp_unique_ptr =
+    std::unique_ptr<T, std::integral_constant<decltype(Deleter), Deleter>>;
+
+using GPPWidget = gpp_unique_ptr<CameraWidget, gp_widget_unref>;
+
 void gpp_try(int status) {
   if (status != GP_OK) {
     throw std::runtime_error(gp_result_as_string(status));
@@ -42,10 +58,7 @@ const thread_local val Blob = val::global("Blob");
 
 class Context {
  public:
-  Context()
-      : camera(nullptr, gp_camera_unref),
-        context(nullptr, gp_context_unref),
-        config(nullptr, gp_widget_unref) {
+  Context() : camera(nullptr), context(nullptr) {
     gpp_rethrow([=]() {
       camera.reset(GPP_CALL(Camera *, gp_camera_new(_)));
       context.reset(gp_context_new());
@@ -54,48 +67,48 @@ class Context {
     });
   }
 
-  Context(int foo): Context() {}
+  Context(int foo) : Context() {}
 
   val configToJS() {
     return gpp_rethrow([=]() {
-      if (config.get() == nullptr) {
-        config.reset(
-            GPP_CALL(CameraWidget *,
-                     gp_camera_get_config(camera.get(), _, context.get())));
-      }
-
+      GPPWidget config(
+          GPP_CALL(CameraWidget *,
+                   gp_camera_get_config(camera.get(), _, context.get())));
       return walk_config(config.get());
     });
   }
 
-  void setConfigValue(int id, val value) {
+  void setConfigValue(std::string name, val value) {
     gpp_rethrow([=]() {
-      auto widget = GPP_CALL(CameraWidget *,
-                             gp_widget_get_child_by_id(config.get(), id, _));
-      auto type = GPP_CALL(CameraWidgetType, gp_widget_get_type(widget, _));
+      GPPWidget widget(GPP_CALL(
+          CameraWidget *, gp_camera_get_single_config(
+                              camera.get(), name.c_str(), _, context.get())));
+      auto type =
+          GPP_CALL(CameraWidgetType, gp_widget_get_type(widget.get(), _));
       switch (type) {
         case GP_WIDGET_RANGE: {
           float number = value.as<float>();
-          gpp_try(gp_widget_set_value(widget, &number));
+          gpp_try(gp_widget_set_value(widget.get(), &number));
           break;
         }
         case GP_WIDGET_MENU:
         case GP_WIDGET_RADIO:
         case GP_WIDGET_TEXT: {
           auto str = value.as<std::string>();
-          gpp_try(gp_widget_set_value(widget, str.c_str()));
+          gpp_try(gp_widget_set_value(widget.get(), str.c_str()));
           break;
         }
         case GP_WIDGET_TOGGLE: {
           int on = value.as<bool>() ? 1 : 0;
-          gpp_try(gp_widget_set_value(widget, &on));
+          gpp_try(gp_widget_set_value(widget.get(), &on));
           break;
         }
         default: {
           throw std::logic_error("unimplemented");
         }
       }
-      gpp_try(gp_camera_set_config(camera.get(), config.get(), context.get()));
+      gpp_try(gp_camera_set_single_config(camera.get(), name.c_str(),
+                                          widget.get(), context.get()));
     });
   }
 
@@ -137,10 +150,8 @@ class Context {
 
       Output output;
 
-      std::unique_ptr<CameraFile, decltype(&gp_file_unref)> file(
-          GPP_CALL(CameraFile *,
-                   gp_file_new_from_handler(_, &handler, &output)),
-          gp_file_unref);
+      gpp_unique_ptr<CameraFile, gp_file_unref> file(GPP_CALL(
+          CameraFile *, gp_file_new_from_handler(_, &handler, &output)));
 
       gpp_try(
           gp_camera_capture_preview(camera.get(), file.get(), context.get()));
@@ -156,14 +167,12 @@ class Context {
   }
 
  private:
-  std::unique_ptr<Camera, decltype(&gp_camera_unref)> camera;
-  std::unique_ptr<GPContext, decltype(&gp_context_unref)> context;
-  std::unique_ptr<CameraWidget, decltype(&gp_widget_unref)> config;
+  gpp_unique_ptr<Camera, gp_camera_unref> camera;
+  gpp_unique_ptr<GPContext, gp_context_unref> context;
 
   static val walk_config(CameraWidget *widget) {
     val result = val::object();
 
-    result.set("id", GPP_CALL(int, gp_widget_get_id(widget, _)));
     result.set("name", GPP_CALL(const char *, gp_widget_get_name(widget, _)));
     result.set("info", GPP_CALL(const char *, gp_widget_get_info(widget, _)));
     result.set("label", GPP_CALL(const char *, gp_widget_get_label(widget, _)));
diff --git a/ui.html b/ui.html
index 7a918ff..6137f09 100644
--- a/ui.html
+++ b/ui.html
@@ -4,16 +4,29 @@
   integrity="sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5"
   crossorigin="anonymous"
 />
-<canvas id="canvas" width="600" height="400"></canvas>
-<div id="config"></div>
+<div class="pure-g" style="height: 100%">
+  <div class="pure-u-2-3" id="canvas-holder" style="max-height: 100%">
+    <canvas id="canvas" style="display: flex; margin: auto"></canvas>
+  </div>
+  <div
+    id="config"
+    class="pure-u-1-3"
+    style="max-height: 100%; overflow-y: auto"
+  ></div>
+</div>
 <script type="module">
   import { h, render, Component } from 'https://unpkg.com/preact?module';
   import initModule from './libapi.mjs';
 
-  const { Context } = await initModule();
-  let context = await new Context();
-
-  let queue = Promise.resolve();
+  let context;
+  let queue = initModule()
+    .then(Module => new Module.Context())
+    .then(ctx => {
+      context = ctx;
+      addEventListener('beforeunload', e => {
+        context.delete();
+      });
+    });
 
   function scheduleOp(op) {
     let res = queue.then(op);
@@ -21,35 +34,32 @@
     return res;
   }
 
-  function renderConfig(config, inProgress) {
-    let { id: key, type, label } = config;
+  function Config({ config, inProgress }) {
+    let { type, label, name } = config;
+    let id = `config-${name}`;
     if (type === 'window' || type === 'section') {
       return h(
         'fieldset',
-        { key },
+        { key: name, id },
         h('legend', {}, label),
-        ...config.children.map(child => renderConfig(child, inProgress))
+        ...config.children.map(child =>
+          h(Config, { config: child, inProgress })
+        )
       );
     }
-    let { name, value, readonly } = config;
+    let { value, readonly } = config;
+    if (name === 'whitebalance') console.log('Got whitebalance', value);
     let attrs = {
-      id: `config-${name}`,
+      id,
       value,
       readonly,
-      'data-id': key,
       disabled: inProgress
     };
     let inputElem;
     switch (type) {
       case 'range': {
         let { min, max, step } = config;
-        inputElem = h('input', {
-          type: 'number',
-          min,
-          max,
-          step,
-          ...attrs
-        });
+        inputElem = h('input', { type: 'number', min, max, step, ...attrs });
         break;
       }
       case 'text':
@@ -83,41 +93,52 @@
     }
     return h(
       'div',
-      { class: 'pure-control-group' },
-      h('label', { for: attrs.id }, label),
+      { class: 'pure-control-group', key: name },
+      h('label', { for: id }, label),
       inputElem
     );
   }
 
   class Settings extends Component {
-    state = { inProgress: false, config: null };
+    state = { inProgress: true, config: 'Connecting...' };
 
     constructor() {
       super();
-      this.refreshConfig();
+      (async () => {
+        while (true) {
+          await this.refreshConfig();
+          await new Promise(resolve => setTimeout(resolve, 100));
+        }
+      })();
     }
 
-    handleInput = async ({ target }) => {
-      let id = +target.dataset.id;
+    setStatePromise(state) {
+      return new Promise(resolve => this.setState(state, resolve));
+    }
+
+    handleInput = async e => {
+      let name = e.target.id;
+      if (!name.startsWith('config-')) {
+        throw new Error('Unhandled input');
+      }
+      name = name.slice('config-'.length);
       let value;
-      switch (target.type) {
+      switch (e.target.type) {
         case 'checkbox':
-          value = target.checked;
+          value = e.target.checked;
           break;
         case 'number':
-          value = target.valueAsNumber;
+          value = e.target.valueAsNumber;
           break;
         default:
-          value = target.value;
+          value = e.target.value;
           break;
       }
 
-      this.setState({ inProgress: true });
+      await this.setStatePromise({ inProgress: true });
 
       try {
-        await scheduleOp(async () => {
-          await context.setConfigValue(id, value);
-        });
+        await scheduleOp(() => context.setConfigValue(name, value));
       } catch (e) {
         console.error(e);
       }
@@ -126,34 +147,73 @@
     };
 
     async refreshConfig() {
-      this.setState({
+      let config;
+      try {
+        config = await scheduleOp(() => context.configToJS());
+      } catch (e) {
+        config = String(e);
+      }
+      await this.setStatePromise({
         inProgress: false,
-        config: await scheduleOp(() => context.configToJS())
+        config
       });
     }
 
-    render(props, { config, inProgress }) {
-      return h(
-        'form',
-        { class: 'pure-form pure-form-aligned', onInput: this.handleInput },
-        config && renderConfig(config, inProgress)
-      );
+    render(props, state) {
+      return typeof config === 'string'
+        ? config
+        : h(
+            'form',
+            { class: 'pure-form pure-form-aligned', onInput: this.handleInput },
+            h(Config, state)
+          );
     }
   }
 
   render(h(Settings), document.getElementById('config'));
 
   (async () => {
+    await queue;
+
     let canvas = document.getElementById('canvas');
     let ctx = canvas.getContext('bitmaprenderer');
+    let ratio;
 
-    while (true) {
+    while (!context.isDeleted()) {
       try {
         let blob = await scheduleOp(() => context.capturePreviewAsBlob());
-        let img = await createImageBitmap(blob, {
-          resizeWidth: canvas.width,
-          resizeHeight: canvas.height
-        });
+
+        // If ratio is known; decode resized image right away - it's a bit faster.
+        // If it isn't known, retrieve entire image to calculate ratio from its dimensions.
+        let img = await createImageBitmap(
+          blob,
+          typeof ratio === 'undefined'
+            ? {}
+            : {
+                resizeWidth: canvas.width,
+                resizeHeight: canvas.height
+              }
+        );
+        if (typeof ratio === 'undefined') {
+          ratio = img.width / img.height;
+          let canvasHolder = document.getElementById('canvas-holder');
+
+          function updateCanvasSize() {
+            let width = canvasHolder.offsetWidth;
+            let height = canvasHolder.offsetHeight;
+
+            if (height * ratio > width) {
+              height = width / ratio;
+            } else {
+              width = height * ratio;
+            }
+
+            Object.assign(canvas, { width, height });
+          }
+
+          updateCanvasSize();
+          new ResizeObserver(updateCanvasSize).observe(canvasHolder);
+        }
         ctx.transferFromImageBitmap(img);
       } catch (e) {
         console.warn(e);