Awesome

Clangd in Browser

Finally, I made clangd work in browser. You can now get C++ IntelliSense directly without installing any native compiler or relying on a remote server.

This repo contains a build script for clangd on WebAssembly (TBD), and an example of using clangd WASM module together with Monaco Editor powered by it's Language Client port (thanks TypeFox/monaco-languageclient).

How to build

You can take a look at build.sh for how to build clangd to WASM. Once clangd.wasm generated at public/wasm, you can build those frontend code using pnpm install and pnpm build.

About the example page

I've publish a GitHub Page for demonstrating how clangd works in your browser.

Notice that clangd is a multi-thread program, so we need SharedArrayBuffer -- and more over, a strict context called crossOriginIsolated. GitHub Pages do not send COOP/COEP headers for us to enabling that context, so I served this site through CloudFlare with a custom rule adding those headers. If you want to deploy this project by yourself, make sure correct COOP/COEP header is set on the server side, or you can use coi-serviceworker.

You can pass URL search parameters to control the initial state of this page (see here), or embed it in your website (see here, your website needs to be cross-origin-isolated too)

Acknowledgement

• soedirgo/llvm-wasm provides a very detailed guide on how to build LLVM to wasm. Better than famous works like binji/wasm-clang or tbfleming/cib (but also thank you guys :P);
• nokotan/vscode-clangd patch vscode's clangd extension with WASM binary to make it work on vscode-web. Some bugs but useful; no build scripts or further documentation;
• ConorBobbleHat/clangd-wasm and ConorBobbleHat/clangd-wasm-core; build scripts provided but lack examples on how to use them.