# Wiki Discussion: SWI-Prolog in the browser using WASM

**URL:** <https://swi-prolog.discourse.group/t/wiki-discussion-swi-prolog-in-the-browser-using-wasm/5651>\
**Category:** Wiki Discussion\
**Created:** [August 3, 2022, 8:21pm UTC](https://swi-prolog.discourse.group/t/wiki-discussion-swi-prolog-in-the-browser-using-wasm/5651 "2022-08-03T20:21:56Z")\
**Posts on this page:** 1\
**Showing post:** 79

<div class="post-metadata">

**Author:** ![jan](https://yyz2.discourse-cdn.com/free1/user_avatar/swi-prolog.discourse.group/jan/32/4_2.png) [@jan](https://swi-prolog.discourse.group/u/jan)\
**Post date:** [August 18, 2022, 2:13pm UTC](https://swi-prolog.discourse.group/t/wiki-discussion-swi-prolog-in-the-browser-using-wasm/5651/79 "2022-08-18T14:13:41Z")

</div>

I have pushed an update to #wasm and updated the [wiki page](https://swi-prolog.discourse.group/t/swi-prolog-in-the-browser-using-wasm/5650). There are two big developments:

- Call between Prolog and JavaScript and JavaScript and Prolog are getting close to their final version.
- Calls from Prolog to JavaScript can represent DOM elements as Prolog _blobs_. The DOM elements known to Prolog are subject to Prolog garbage collection 🙂

For example, we can how define a Prolog predicate to add a paragraph to the _shell_ output window:

```prolog
add_par(Text) :-
  Out := document.getElementById("output"),
  More := document.getElementById("more"),
  Par := document.createElement("p"),
  Par.textContent := Text,
  _ := Out.insertBefore(Par, More).

```

After which we can call

```
?- add_par("Hello world!").

```

We can also call the other way around nicely, for example writing all the results of `p/1`:

```javascript
for(const r of Prolog.query("p(X)")) {
  console.log(r.X);
}

```

---

_[View the full topic](https://swi-prolog.discourse.group/t/wiki-discussion-swi-prolog-in-the-browser-using-wasm/5651)._