Sneak Peek at WebAssembly Studio

WebAssembly.Studio is an online IDE (integrated development environment) that helps you learn and teach others about WebAssembly. It’s also a Swiss Army knife that comes in handy whenever working with WebAssembly.

We started working on WebAssembly Studio in late December 2017, in an attempt to merge two existing tools that we had developed: WasmExplorer and WasmFiddle. Since then, thanks to several contributors who jumped into the project early, we’ve made quite a bit of progress. We’ve merged those two tools and added several new features. Our beta (more like an alpha) release is now live at https://webassembly.studio and we are very interested in your feedback.

Quick Start

To get started with the example above, simply click Build and then Run. WebAssembly Studio first compiles main.c to out/main.wasm and then creates an iframe sandbox in which it loads main.html. The HTML file loads main.js which loads and executes the WebAssembly module that ultimately prints “Hello World”. To understand exactly what’s going on, read the README.md file included in the project. This is an example I put together to show how C programs interact with WebAPIs. Our hope is that others will put together interesting examples and use WebAssembly Studio as a teaching tool.

Overview of Features

C/C++/Rust Support

WebAssembly Studio has basic (very primitive) support for C, C++ and Rust out of the box. At the moment, compilation services run mostly server-side but we’re hoping to do more of this work on the client.

Editable Compiler Artifacts

WebAssembly binary modules (.wasm) as well as text files (.wat) are fully editable in WebAssembly Studio. Try opening out/main.wasm and you’ll see the disassembled .wat output. You can actually edit this text, and when you save, the original .wasm file will be reassembled.

Note that you can hover over various keywords in the WebAssembly text format to gain insights into what they do. See below:
WebAssembly Documentation

Easily Accessible Tools

Many of the interesting features in WebAssembly Studio are stashed away under context menus. For instance, if you right-click on the out/main.wasm file, you’ll see a pop-up menu appear with several commands:

Context Menu for .wasm Files

You can use these context menu commands to apply various transformations on .wasm files:

  • Validate uses Binaryen to verify that a WebAssmebly Module is valid.
  • Optimize runs several Binaryen optimization passes over a WebAssembly module.
Optimized with Binaryen
  • Disassemble uses Wabt to convert the file to WebAssembly text format. This can then be edited and reassembled back into a WebAssembly file.

Some of the commands generate new files, for example “Firefox x86” will produce a .x86 file with the disassembled output from Firefox’s WebAssembly engine. While this may not be very useful (or actionable) to a JavaScript developer, I find it useful when teaching others about WebAssembly. (It’s proof that WebAssembly is low-level!)

Firefox x86 Disassembly
  • Binary Explorer helps you understand how WebAssembly code is represented at a binary level.
Binary Code Explorer
Binary File View
  • Generate Call Graph plots the caller/callee relationships between functions (including imports and exports) to help you understand what’s included in a WebAssembly module.
Call Graph

Some of the features in WebAssembly Studio need hosted back-end services (compilation), but many others run directly in the browser. Binaryen, Wabt, Capstone.js are all compiled to WebAssembly and run in the browser. This has the added benefit that we can scale much more easily, with less load on the server.

For a dose of WebAssembly magic, right click on main.c and select:

… that’s right, Clang Format is also compiled to WebAssembly, runs locally, and works great.

Interactive Embeddings

Interactive embeddings of WebAssembly Studio projects are now possible thanks to embed.ly, a system for embedding interactive content in a wide variety of web platforms, including medium.com. You can simply paste the link to a Forked project into your medium.com post

.

What’s Next

Over the next few months we’re going to:

  • Add better support for C/C++/Rust projects. For C/C++ applications we’re currently using the LLVM backend by itself, but we’re also hoping to add support for Emscripten using that backend so that you can use APIs like SDL and OpenGL. For Rust, we’d like to support Cargo.
  • Continue to add new features and integrate additional tools into WebAssembly Studio.
  • Make it possible to download and build WebAssembly Studio projects locally using familiar tools.
  • Improve UX, error reporting, and general performance optimizations.

Want to learn more or get more involved in this project? Please share feedback, file issues, and add feature requests on the WebAssembly Studio GitHub repo. If you want to get more involved with WebAssembly check out the main repo to learn more about the project and its infrastructure.

About Michael Bebenita

More articles by Michael Bebenita…


21 comments

  1. Chris Sells

    This looks great! Do you plan on supporting other languages, too? For example, Kotlin? Or make it pluggable so that other people can add their favorite languages?

    April 11th, 2018 at 10:24

    Reply

    1. Michael Bebenita

      We’re planning on making it pluggable, so Kotlin or any other language that compiles to WebAssembly can be hosted in the IDE.

      April 11th, 2018 at 11:23

      Reply

      1. Muzafar

        It would be nice to be able to write Kotlin. I have tried their wasm integration. It’s pretty good as well.

        April 12th, 2018 at 07:24

        Reply

        1. Michael Bebenita

          It would be great to add support for more languages. We’re now focusing on getting C/C++/Rust working well, but are more than happy to assist contributors in adding support for Kotlin.

          April 12th, 2018 at 08:49

          Reply

  2. Christophe Coevoet

    The link to the WebAssembly Studio github repo in the last paragraph is the wrong one. It leads to your fork (where we cannot submit issues) rather than the main repo.

    April 11th, 2018 at 10:39

    Reply

    1. Michael Bebenita

      Fixed, thanks!

      April 11th, 2018 at 12:22

      Reply

  3. Zachary Carter

    Would love to see Nim supported alongside Rust. Slightly confused about the Emscripten support, as I read – LLVM, Rust, Emscripten running server side. – here: https://github.com/wasdk/WebAssemblyStudio

    If Emscripten support is already here – then Nim support should be possible.

    If not I’ll have to figure out a way to do it myself on a fork :)

    April 11th, 2018 at 11:32

    Reply

    1. Michael Bebenita

      The way the IDE works, is that you can plug in your own compiler (either hosted on a server or running locally in the browser). If you create a template (https://github.com/wasdk/WebAssemblyStudio/tree/master/templates) and submit a PR we’d be happy to include it as one of the available languages. I suspect you’d also want to add Monaco editor support for Nim source files. Happy to help integrate it.

      April 11th, 2018 at 11:56

      Reply

  4. David Ross

    This looks awesome!

    Is there any plan to allow uploading compiled .wasm files for inspection? This looks like it could be quite useful for analyzing call graphs and webassembly text of compiled output from large existing WASM projects.

    April 11th, 2018 at 11:48

    Reply

    1. Michael Bebenita

      Yes, right click on the left hand side and upload your .wasm file.

      April 11th, 2018 at 11:50

      Reply

  5. Jeff Nelson

    Is your Web Assembler implementation making any attempt to prevent hardware layer attacks, like RowHammer, or is that left up to the host?

    April 11th, 2018 at 12:00

    Reply

    1. Michael Bebenita

      That’s left up to the host. If you’re curious to see how Firefox compiles this down to x86, right click on a file and look at the Firefox x86 code for both the baseline JIT and the optimizing compiler.

      April 11th, 2018 at 12:04

      Reply

  6. jens

    This looks interesting, but to me this would be more valueable if it was a vscode extension and not another IDE (a big word) from scratch. I need code folding, intellisense, syntax highlighting, refactorings, very good support for Rust or C/C++ and all this is already available for vscode or intellij.

    So added the 5% for better wasm support to an existing IDE instead of adding the 95% of IDE functionality to a wasm tool would seem more appropriate.

    Don’t wanna be harsh. Probably it might be a nice tool for fiddling (like codepen or jsfiddle), but for productivity and real world wasm programs I guess people will use something else. Maybe I just found the word IDE a bit strange in this context :)

    April 11th, 2018 at 13:40

    Reply

    1. Michael Bebenita

      I agree with you, for productivity developers should use local IDEs and well supported command line tools like Emscripten, Binaryen, rustc, etc. WebAssembly.Studio is a fiddle first, IDE second, which is why we went this route. I fully agree that we should move some of the functionality into VSCode (and other IDEs) extensions.

      April 12th, 2018 at 08:40

      Reply

  7. Leviathan Jeanis

    Is there going to be an electron hosted release as well? This looks great, but I hate using IDEs that run inside a browser.

    April 12th, 2018 at 07:15

    Reply

    1. Michael Bebenita

      We don’t have plans for making a Electron based version. WebAssembly.Studio is primarily a learning tool, and to be able to easily share projects with others we want it to run in the browser. However, it is an open source project, so if anyone has interest and time they could package it up as an Electron app, but I think that time would be better spent moving some of the functionality into VSCode extensions.

      April 12th, 2018 at 08:45

      Reply

  8. Josh Yates

    amazing! Great work team.

    April 12th, 2018 at 08:21

    Reply

  9. Dennis van Leeuwen

    That is very exciting. Like the call graph.

    April 12th, 2018 at 08:40

    Reply

  10. Nilesh

    Great article . :)

    April 12th, 2018 at 08:52

    Reply

  11. Samuel

    Awesome news : ) Great work guys!

    April 12th, 2018 at 10:03

    Reply

  12. Kesus Kim

    I couldn’t image this would be real, awwwwwwwwesome =)

    April 12th, 2018 at 17:25

    Reply

Post Your Comment