WASM-Cairo

A suite of development tools and an environment for Cairo 1.10, all based on WebAssembly.

By Caironautes, for Caironautes.

The WASM-Cairo Project is a sophisticated ensemble of development tools designed to offer developers a simplified and streamlined experience when working with the Cairo programming language. 
The project offers three components, all of which are implemented using WebAssembly (WASM). The suite of tools presents a unique, serverless design model which eliminates the need for complex environmental setups and backend servers, allowing developers to focus purely on their code.

1, Astro Editor:

This is a cutting-edge, online Integrated Development Environment (IDE) built on top of WASM-Cairo. It is an all-JavaScript-or-WASM environment, free of dependencies on backend servers and local setups. The Astro Editor is conveniently accessible through a web browser at the following URL:

https://astro-editor.netlify.app/

This platform enables users to easily compile and execute their Cairo code in their browsers, without additional installations.

2, WASM-Cairo Toolkit for WASM-bindgen

Designed specifically for web browser environments, this toolkit allows Cairo code compilation and execution right on your website. It is as simple as importing the wasm-cairo_bg.wasm and wasm-cairo.js files from the toolkit. In addition to these functionalities, this toolkit also offers an example of a web worker to ensure that WASM execution does not block your main thread, thereby offering an improved user experience. 

Build WASM-Bindgen's WASM-Cairo Toolkit

3, WASM-Cairo Toolkit for WASMTIME

Designed with local and server environments in mind, this toolkit is built to operate seamlessly in the WASMTIME environment. It offers an accessible method for developers to compile and execute Cairo code with no necessary environment setup or downloads. Furthermore, it can be integrated with your preferred IDE to facilitate Cairo code execution. To download the WASMTIME WASM-Cairo Toolkit, please visit: 

Build WASMTIME's WASM-Cairo Toolkit

Use cases:

Although it's a hackathon project and just 10 days old, WASM-Cairo has already been incorporated into real-world products.

1, Cairo-Book playground

As a Caironautes, You're all familiar with Cairo-Book, correct? It's built on the same framework as Rust-book. However, we faced a limitation with Cairo-Book - we couldn't execute Cairo code directly as we could with Rust code in the Rust-Book's playground.

Well, that's no longer an issue! Thanks to the integration with Wasm-Cairo, we can now execute Cairo code directly in the browser!

Give it a try here:

https://starknetastro.github.io/cairo-book.github.io/ch01-02-hello-world.html

The official team is in the process of incorporating my changes into their repository. You can check out my pull request at:

https://github.com/cairo-book/cairo-book.github.io/pull/244

2, Astro Editor for Cairo Workshop

China's first Cairo Workshop - Starknet Shanghai workshop(6/23~6/24), uses Astro Editor as its official Cairo Playground for teaching Cairo.

In this event, they use Astro Editor to compile their sample `erc-20` and `erc-721` Cairo contracts and deployed them to Starknet Testnet.

ERC20 sample contract:

https://testnet.starkscan.co/contract/0x0269f9cdb93dac1e91799d15adc3365d70e1a7e952fc344a67d223eda1e0a3af

ERC721 sample contract:

https://testnet.starkscan.co/contract/0x06722e748113c467542ad7f9985fdf2dd81c2b92088fc832dc7845c13d2eff41

Conclusion:

The WASM-Cairo Project is an innovative development suite that simplifies Cairo programming and execution through a serverless model in an online IDE, local environment, or web browser. This project is an exciting advancement for the developer community, removing the need for intricate setup procedures and offering more time and freedom to create.

Future:

In the future, we will further integrate (maybe with some rewrites) tools such as Madara and Cairo-Lang-CLI, enabling users to use Astro Editor to directly declare and deploy contracts in the browser,  on-chain contract tests, simulation tests, and so on.