{"id":13417871,"url":"https://github.com/mbasso/asm-dom","last_synced_at":"2025-05-14T21:07:56.776Z","repository":{"id":39635360,"uuid":"83154886","full_name":"mbasso/asm-dom","owner":"mbasso","description":"A minimal WebAssembly virtual DOM to build C++ SPA (Single page applications)","archived":false,"fork":false,"pushed_at":"2023-03-03T18:16:02.000Z","size":53378,"stargazers_count":2809,"open_issues_count":126,"forks_count":91,"subscribers_count":57,"default_branch":"master","last_synced_at":"2025-04-13T16:09:09.044Z","etag":null,"topics":["asm-dom","asmjs","diffing","dom","rendering","vdom","virtual-dom","virtual-dom-library","wasm","webassembly"],"latest_commit_sha":null,"homepage":"https://mbasso.github.io/asm-dom","language":"C++","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mbasso.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-02-25T18:59:11.000Z","updated_at":"2025-04-07T10:48:30.000Z","dependencies_parsed_at":"2024-06-19T00:26:24.369Z","dependency_job_id":"af60d646-1c40-4d88-911f-d5470f5e3700","html_url":"https://github.com/mbasso/asm-dom","commit_stats":{"total_commits":344,"total_committers":6,"mean_commits":"57.333333333333336","dds":0.03197674418604646,"last_synced_commit":"795529cacd3d41154c701e52bd9da0f483e8f916"},"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mbasso%2Fasm-dom","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mbasso%2Fasm-dom/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mbasso%2Fasm-dom/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mbasso%2Fasm-dom/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mbasso","download_url":"https://codeload.github.com/mbasso/asm-dom/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248741204,"owners_count":21154255,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["asm-dom","asmjs","diffing","dom","rendering","vdom","virtual-dom","virtual-dom-library","wasm","webassembly"],"created_at":"2024-07-30T22:00:54.511Z","updated_at":"2025-04-13T16:09:14.564Z","avatar_url":"https://github.com/mbasso.png","language":"C++","readme":"# :rage4: asm-dom :rage4:\r\n[![experimental](http://badges.github.io/stability-badges/dist/experimental.svg)](http://github.com/badges/stability-badges)\r\n[![Build Status](https://travis-ci.org/mbasso/asm-dom.svg?branch=master)](https://travis-ci.org/mbasso/asm-dom)\r\n[![npm version](https://img.shields.io/npm/v/asm-dom.svg)](https://www.npmjs.com/package/asm-dom)\r\n[![npm downloads](https://img.shields.io/npm/dm/asm-dom.svg?maxAge=2592000)](https://www.npmjs.com/package/asm-dom)\r\n[![Join the chat at https://gitter.im/mbasso/asm-dom](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/mbasso/asm-dom?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge)\r\n\r\n\u003e A minimal WebAssembly virtual DOM to build C++ SPA (Single page applications)\r\n\r\n## Table of Contents\r\n\r\n- [Motivation](#motivation)\r\n- [Inline Example](#inline-example)\r\n- [Getting started](#getting-started)\r\n- [Ecosystem](#ecosystem)\r\n- [Examples](#examples)\r\n- [Roadmap](#roadmap)\r\n- [Change Log](#change-log)\r\n- [Authors](#authors)\r\n- [Copyright and License](#copyright-and-license)\r\n\r\n## Motivation\r\n\r\nasm-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](http://kripken.github.io/emscripten-site/), 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](https://github.com/mbasso/asm-dom/tree/master/benchmarks).\r\n\r\n*How can I structure my application with asm-dom?*\r\n\r\nasm-dom is a low-level virtual DOM library. It is unopinionated with regards to how you should structure your application.\r\n\r\n*How did you come up with the concept of asm-dom?*\r\n\r\nAt 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](http://webassembly.org/docs/future-features/) 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.\r\n\r\n## Inline Example\r\n\r\n```jsx\r\n#include \"asm-dom.hpp\"\r\n\r\nusing namespace asmdom;\r\n\r\nint main() {\r\n  Config config = Config();\r\n  init(config);\r\n\r\n  // asm-dom can be used with a JSX like syntax thanks to gccx\r\n  VNode* vnode = (\r\n    \u003cdiv\r\n      onclick={[](emscripten::val e) -\u003e bool {\r\n        emscripten::val::global(\"console\").call\u003cvoid\u003e(\"log\", emscripten::val(\"clicked\"));\r\n        return true;\r\n      }}\r\n    \u003e\r\n      \u003cspan style=\"font-weight: bold\"\u003eThis is bold\u003c/span\u003e\r\n      and this is just normal text\r\n      \u003ca href=\"/foo\"\u003eI'll take you places!\u003c/a\u003e\r\n    \u003c/div\u003e\r\n  );\r\n\r\n  // Patch into empty DOM element – this modifies the DOM as a side effect\r\n  patch(\r\n    emscripten::val::global(\"document\").call\u003cemscripten::val\u003e(\r\n      \"getElementById\",\r\n      std::string(\"root\")\r\n    ),\r\n    vnode\r\n  );\r\n\r\n  // without gccx\r\n  VNode* newVnode = h(\"div\",\r\n    Data(\r\n      Callbacks {\r\n        {\"onclick\", [](emscripten::val e) -\u003e bool {\r\n          emscripten::val::global(\"console\").call\u003cvoid\u003e(\"log\", emscripten::val(\"another click\"));\r\n          return true;\r\n        }}\r\n      }\r\n    ),\r\n    Children {\r\n      h(\"span\",\r\n        Data(\r\n          Attrs {\r\n            {\"style\", \"font-weight: normal; font-style: italic\"}\r\n          }\r\n        ),\r\n        std::string(\"This is now italic type\")\r\n      ),\r\n      h(\" and this is just normal text\", true),\r\n      h(\"a\",\r\n        Data(\r\n          Attrs {\r\n            {\"href\", \"/bar\"}\r\n          }\r\n        ),\r\n        std::string(\"I'll take you places!\")\r\n      )\r\n    }\r\n  );\r\n\r\n  // Second `patch` invocation\r\n  patch(vnode, newVnode); // asm-dom efficiently updates the old view to the new state\r\n\r\n  return 0;\r\n};\r\n```\r\n\r\n## Getting started\r\n\r\nasm-dom aims to be used from C++, however it can be used also from javascript, here you can find the doc of both:\r\n\r\n- [C++ docs](https://mbasso.github.io/asm-dom/docs/installation.html)\r\n- [JS docs](https://github.com/mbasso/asm-dom/blob/master/docs/js.md)\r\n\r\n## Ecosystem\r\n\r\nHere you can find a list of related projects:\r\n\r\n- [gccx](https://github.com/mbasso/gccx) - CPX (JSX like syntax) support.\r\n- [asm-dom-boilerplate](https://github.com/mbasso/asm-dom-boilerplate) - A simple boilerplate to start using asm-dom without configuration.\r\n\r\n## Examples\r\n\r\nExamples are available in the [examples folder](https://github.com/mbasso/asm-dom/tree/master/examples).\r\n\r\nAlso, here is the list of third-party examples:\r\n\r\n- [asm-dom-OO-counters](https://github.com/kevinaud/asm-dom-OO-counters)\r\n- [asm-dom-cmake](https://github.com/ArthurSonzogni/asm-dom-cmake) - Build using cmake only.\r\n\r\nand online Demos:\r\n\r\n- [TODO MVC](https://mbasso.github.io/asm-dom/examples/todomvc/)\r\n- [simple counter](http://arthursonzogni.github.io/asm-dom-cmake/)\r\n\r\n## Roadmap\r\n\r\n- [ ] Thunks support\r\n- [ ] asm-dom aims to be even more powerful with [GC/DOM Integration](http://webassembly.org/docs/future-features/). Unfortunately this is a future feature 🦄, so, we have to be patient and wait a bit.\r\n\r\n## Change Log\r\n\r\nThis project adheres to [Semantic Versioning](http://semver.org/).  \r\nEvery release, along with the migration instructions, is documented on the Github [Releases](https://github.com/mbasso/asm-dom/releases) page.\r\n\r\n## Authors\r\n\r\n**Matteo Basso**\r\n- [github/mbasso](https://github.com/mbasso)\r\n- [@teo_basso](https://twitter.com/teo_basso)\r\n\r\n## Copyright and License\r\n\r\nCopyright for portions of project asm-dom are held by:\r\n- Simon Friis Vindum, 2015 as part of project snabbdom\r\n- project snabbdom-to-html\r\n\r\nAll other copyright for project asm-dom are held by Matteo Basso.\r\n\r\nCopyright (c) 2016, Matteo Basso.\r\n\r\nasm-dom source code is licensed under the [MIT License](https://github.com/mbasso/asm-dom/blob/master/LICENSE.md).\r\n","funding_links":[],"categories":["TODO scan for Android support in followings","C++","Projects"],"sub_categories":["Web frameworks-libraries"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmbasso%2Fasm-dom","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmbasso%2Fasm-dom","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmbasso%2Fasm-dom/lists"}