WASM Cairo 🏅

Run Cairo code in the Browser!

WASM-Cairo is an Infura facility built on Ethereum's second layer, Starknet. WASM-Cairo allows Cairo code to run in a browser. This means we can run sth. like a light Starknet node, a Kakarot EVM, and more, right from the browser without any setup. It makes developing Dapps even more convenient as we no longer need a backend server.

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 IDE 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

https://github.com/cryptonerdcn/wasm-cairo#%EF%B8%8F-build-wasmtimes-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

https://github.com/cryptonerdcn/wasm-cairo#%EF%B8%8F-build-wasm-bindgens-wasm-cairo-toolkit

Use cases:

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

1, Cairo-Book playground

Cairo book is the most influential Cairo tutorial in non-official Starknet guides. 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

2, Astro Editor for Cairo Workshop

China's first Cairo Workshop - Starknet Shanghai workshop, 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

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.