Skip to content
A minimal WebAssembly virtual DOM to build C++ SPA (Single page applications)
Branch: master
Clone or download
mbasso Merge pull request #16 from mbasso/develop
Improve tests and refactoring
Latest commit 0c0879a Sep 2, 2018
Type Name Latest commit message Commit time
Failed to load latest commit information.
benchmarks update emcc version Jun 13, 2018
compiled 0.6.2 Sep 2, 2018
examples update emcc version Jun 13, 2018
src replace config singleton with global variables Jul 13, 2018
test fix toHTML tests Sep 1, 2018
.babelrc remove arraybuffer-loader dependency Dec 18, 2017
.editorconfig setup todomvc cpp Jul 16, 2017
.eslintrc merge wasm and js glue in one chunck Apr 30, 2017
.travis.yml Initial commit Feb 25, 2017 makefile Apr 26, 2018 typo Dec 12, 2017
webpack.config.js Merge branch 'master' into 0.6.0 Apr 15, 2018

:rage4: asm-dom :rage4:

experimental Build Status npm version npm downloads Join the chat at

A minimal WebAssembly virtual DOM to build C++ SPA (Single page applications)

Table of Contents


asm-dom is a minimal WebAssembly virtual DOM to build C++ SPA (Single page applications). You can write an entire SPA in C++ and compile it to WebAssembly (or asmjs as fallback) using Emscripten, asm-dom will call DOM APIs for you. This will produce an app that aims to execute at native speed by taking advantage of common hardware capabilities, also, you can use your C/C++ code without any change, you haven't to create a binding layer to use it (as we have to do if we want to use a C++ lib from JS). Basically we are creating an app in C++ that call javascript if needed instead of the opposite. You can write only once in C++ and share as much code as possible with desktop/mobile apps and web site. If you want to learn more about performance, please see this.

How can I structure my application with asm-dom?

asm-dom is a low-level virtual DOM library. It is unopinionated with regards to how you should structure your application.

How did you come up with the concept of asm-dom?

At the beginning asm-dom is born from the idea to test the powerful of WebAssembly in a common use case that is not gaming, VR, AR or Image / video editing. Unfortunately, at the moment, GC/DOM Integration is a future feature 🦄, so, asm-dom isn't totally developed in wasm. All interactions with the DOM are written in Javascript. This is a big disadvantage because of the overhead of the binding between JS and WASM, in the future asm-dom will be even more powerful, anyway results are satisfying.

Inline Example

#include "asm-dom.hpp"

using namespace asmdom;

int main() {
  Config config = Config();

  // asm-dom can be used with a JSX like syntax thanks to gccx
  VNode* vnode = (
      onclick={[](emscripten::val e) -> bool {
        emscripten::val::global("console").call<void>("log", emscripten::val("clicked"));
        return true;
      <span style="font-weight: bold">This is bold</span>
      and this is just normal text
      <a href="/foo">I'll take you places!</a>

  // Patch into empty DOM element – this modifies the DOM as a side effect

  // without gccx
  VNode* newVnode = h("div",
      Callbacks {
        {"onclick", [](emscripten::val e) -> bool {
          emscripten::val::global("console").call<void>("log", emscripten::val("another click"));
          return true;
    Children {
          Attrs {
            {"style", "font-weight: normal; font-style: italic"}
        std::string("This is now italic type")
      h(" and this is just normal text", true),
          Attrs {
            {"href", "/bar"}
        std::string("I'll take you places!")

  // Second `patch` invocation
  patch(vnode, newVnode); // asm-dom efficiently updates the old view to the new state

  return 0;

Getting started

asm-dom aims to be used from C++, however it can be used also from javascript, here you can find the doc of both:


Here you can find a list of related projects:

  • gccx - CPX (JSX like syntax) support.
  • asm-dom-boilerplate - A simple boilerplate to start using asm-dom without configuration.


Examples are available in the examples folder.

Also, here is the list of third-party examples:

and online Demos:


  • Thunks support
  • asm-dom aims to be even more powerful with GC/DOM Integration. Unfortunately this is a future feature 🦄, so, we have to be patient and wait a bit.

Change Log

This project adheres to Semantic Versioning.
Every release, along with the migration instructions, is documented on the Github Releases page.


Matteo Basso

Copyright and License

Copyright for portions of project asm-dom are held by:

  • Simon Friis Vindum, 2015 as part of project snabbdom
  • project snabbdom-to-html

All other copyright for project asm-dom are held by Matteo Basso.

Copyright (c) 2016, Matteo Basso.

asm-dom source code is licensed under the MIT License.

You can’t perform that action at this time.