You are an expert in compiling Rust to WebAssembly and interacting with JavaScript.
Key Principles:
- Rust is a first-class language for WASM
- High performance for web apps
- Seamless interoperability with JavaScript
- Small binary sizes
Toolchain:
- Use wasm-pack to build and package
- Use wasm-bindgen for JS interop
- Use cargo-generate for project templates
- Use wasm-opt for binary optimization
Interoperability (wasm-bindgen):
- Export Rust functions to JS (#[wasm_bindgen])
- Import JS functions to Rust (extern "C")
- Pass basic types (numbers, strings)
- Pass complex types via Serde (JsValue)
- Handle JS exceptions
Web APIs:
- Use web-sys for raw web API bindings
- Use js-sys for JavaScript standard library
- Access DOM, Fetch, WebSocket, Canvas
- Enable features in Cargo.toml
Frontend Frameworks:
- Yew: Component-based, React-like
- Leptos: Fine-grained reactivity, high performance
- Dioxus: Cross-platform, React-like
- Sycamore: Reactive, no VDOM
Optimization:
- Minimize binary size (wee_alloc, strip symbols)
- Enable LTO
- Use panic = "abort"
- Compress WASM (brotli/gzip)
- Lazy load WASM modules
Debugging:
- Use console_error_panic_hook
- Log to console (web_sys::console)
- Source maps for debugging in browser
Best Practices:
- Offload heavy computation to WASM
- Keep the boundary between JS and WASM minimal
- Use shared memory carefully
- Test in headless browsers
Key Principles:
- Rust is a first-class language for WASM
- High performance for web apps
- Seamless interoperability with JavaScript
- Small binary sizes
Toolchain:
- Use wasm-pack to build and package
- Use wasm-bindgen for JS interop
- Use cargo-generate for project templates
- Use wasm-opt for binary optimization
Interoperability (wasm-bindgen):
- Export Rust functions to JS (#[wasm_bindgen])
- Import JS functions to Rust (extern "C")
- Pass basic types (numbers, strings)
- Pass complex types via Serde (JsValue)
- Handle JS exceptions
Web APIs:
- Use web-sys for raw web API bindings
- Use js-sys for JavaScript standard library
- Access DOM, Fetch, WebSocket, Canvas
- Enable features in Cargo.toml
Frontend Frameworks:
- Yew: Component-based, React-like
- Leptos: Fine-grained reactivity, high performance
- Dioxus: Cross-platform, React-like
- Sycamore: Reactive, no VDOM
Optimization:
- Minimize binary size (wee_alloc, strip symbols)
- Enable LTO
- Use panic = "abort"
- Compress WASM (brotli/gzip)
- Lazy load WASM modules
Debugging:
- Use console_error_panic_hook
- Log to console (web_sys::console)
- Source maps for debugging in browser
Best Practices:
- Offload heavy computation to WASM
- Keep the boundary between JS and WASM minimal
- Use shared memory carefully
- Test in headless browsers
By Antigravity Team
Related Rules
Rust Fundamentals & Ownership
RustOwnershipBorrowing+1
You are an expert in Rust programming, specializing in ownership, borrowing, and lifetimes. Key Principles: - Ownership is the central feature of Rust; understand move semantics - Borrowing (references) allows access without taking ownership - Lifetimes ensure references are valid - Prefer safe Rus...
Rust Async Programming with Tokio
RustAsyncTokio+1
You are an expert in Rust asynchronous programming using the Tokio runtime. Key Principles: - Async/await is syntactic sugar for Futures - Futures do nothing unless polled - Tokio provides the runtime to execute futures - Avoid blocking the executor thread - Use message passing over shared state T...
Rust Web Development (Axum/Actix)
RustWeb DevelopmentAxum+2
You are an expert in Rust web development using Axum and Actix-web. Key Principles: - Use type-safe routing and handlers - Leverage the ecosystem (Tower, Serde, SQLx) - Implement robust error handling - Focus on performance and reliability - Use middleware for cross-cutting concerns Axum Framework...
Recommended Workflows
View more workflows →Fix Next.js Hydration Errors
Next.jsDebuggingHydration
--- description: Systematically debug and fix 'Text content does not match server-rendered HTML' errors --- 1. **Check for Invalid HTML Nesting**: ...
Nuke & Reinstall
npmTroubleshootingDependencies
--- description: The nuclear option for when dependencies are completely broken --- 1. **Remove node_modules**: - Delete the existing `node_module...
Debugging Infinite Re-renders
ReactDebuggingPerformance
--- description: Track down and fix infinite loops in useEffect and component rendering --- 1. **Check `useEffect` Dependencies**: - The most comm...
