Block Coding Architecture
Dual-Pane State (RightPanel.jsx)
OpenHW Studio supports both standard text coding (Monaco Editor) and visual block coding (Blockly).
Lazy Loading Optimization
Because Blockly is a heavy library, it is dynamically imported: const BlocklyEditor = React.lazy(() => import('../../components/BlocklyEditor.jsx')) This significantly improves Initial Load (LCP) times for users who only want text coding.
State Synchronization
The system maintains a dual-state for visual programming:
blocklyXml: The XML representation of the visual blocks (used to save and restore the user's diagram).blocklyGeneratedCode: The actual C++ code generated by the Blockly workspace.
When useBlocklyCode is active, the simulator compiles the blocklyGeneratedCode instead of the Monaco editor's text content.
Performance Controls
Blockly execution can consume significant CPU. The CanvasBottomControls.jsx exposes a toggle (chrome.setBlocklyDisabled) to unmount the Blockly instance entirely, freeing up browser threads for complex hardware simulations.