🦀 Rust Visual Editor

A visual programming environment for Rust, WGSL, and Bevy built with Blockly.

Quick Start

Simplest way: Double-click Start Rust Visual Editor.lnk in the project root

Or manually:

• Navigate to the web folder
• Double-click index.html to open in your browser

Note: For advanced features like the Rust compiler service, you'll need to run a local server (see Development section).

Features

• Multi-Mode Editor: Switch between Rust, WGSL, and Bevy modes
• Visual Block Programming: Drag-and-drop interface for building code
• Real-time Code Generation: See generated code as you build
• Multi-File Support: Generate and manage multiple files
• Code Validation: Built-in validation and error checking
• Import/Export: Save and load workspaces, export generated code
• Rust Compiler Integration: Check code with the Rust compiler (requires backend service)

Project Structure

.
├── web/                    # Frontend application
│   ├── index.html         # Main entry point
│   ├── app.js             # Application logic
│   ├── blocks/            # Block definitions (Rust, WGSL, Bevy)
│   ├── generators/        # Code generators
│   ├── core/              # Core modules (validators, managers)
│   ├── toolbox/           # Toolbox configurations
│   └── utils/             # Utility functions
├── integration/           # Rust backend (compiler service)
│   ├── Cargo.toml
│   └── src/
└── examples/              # Example workspaces

Requirements

• Modern web browser (Chrome, Firefox, Edge, Safari)
• Python 3.x (for local development server)
• Rust toolchain (optional, for compiler service)

Development

Frontend Only

The visual editor works standalone without the backend:

cd web
python -m http.server 8000

With Rust Compiler Service

To enable code checking features:

cd integration
cargo run --bin compiler_service

The service runs on http://localhost:3030

Usage

1. Select Mode: Choose between Rust, WGSL, or Bevy from the dropdown
2. Add Blocks: Drag blocks from the toolbox to the workspace
3. Generate Code: Code updates automatically as you build
4. Check Code: Click "Check Code" to validate (requires backend)
5. Export: Save your workspace or export generated code

Linking Files Together

The visual editor supports multi-file projects with visual connection lines showing file relationships.

Step-by-Step Guide:

1. Create Your Files

• Open the Files category in the toolbox
• Drag a 📄 File block to the workspace
• Set the filename (e.g., main.rs, utils.rs, config.rs)
• Add your code blocks inside each file container

2. Link Files Together

• In your main file, drag a 🔗 mod block from the Files category
• Enter the module name (without .rs extension)
  • Example: To link to utils.rs, enter utils
• A visual connection line will automatically appear between the blocks!

3. Import Items

• Use the use block to import specific items from linked modules
• Example: use utils::helper_function;
• Or import everything: use utils::*;

4. Make Items Public

• In the linked file, use pub blocks to make items accessible
• Example: pub fn helper_function() { ... }

Complete Example:

main.rs:

📄 File: main.rs
  🔗 mod utils;
  🔗 mod config;
  
  use utils::calculate;
  use config::Settings;
  
  fn main() {
    let result = calculate(10);
    println!("Result: {}", result);
  }

utils.rs:

📄 File: utils.rs
  pub fn calculate(x: i32) -> i32 {
    x * 2
  }

config.rs:

📄 File: config.rs
  pub struct Settings {
    pub debug: bool
  }

Visual Feedback:

• Teal dashed lines connect 🔗 mod blocks to their target files
• Arrows point from the mod declaration to the file
• Lines update automatically as you move blocks around

Browser Compatibility

• Chrome/Edge: ✅ Full support
• Firefox: ✅ Full support
• Safari: ✅ Full support
• IE11: ❌ Not supported

License

See LICENSE file for details.