Senior Frontend Engineer - TypeScript/React (or Vue) with Canvas/SVG/WebGL Expertise
Posted Apr 15, 2026
As a Fronet End Consultant specializing in TypeScript/React (or Vue) with deep expertise in Canvas/SVG/WebGL, your role as a Senior Frontend Engineer involves owning the end-to-end visualization stack to convert PSCAD .pscx XML into an interactive, high-performance 2D schematic. Your key responsibilities will include:
- Designing and implementing the XML-to-visual pipeline by parsing .pscx (XML), extracting hierarchy, component types, coordinates, orientation, and connections, and mapping them to a normalized scene graph. - Building a performant renderer using Canvas/WebGL/SVG (e.g., PixiJS, Konva, or raw Canvas) with level-of-detail strategies, culling, and virtualization to maintain 60 FPS for large models. - Implementing robust interaction features such as pan/zoom, multi-select, hit-testing, tooltips, context menus, component search, and hierarchical navigation. - Creating a reliable mapping between model entities and UI elements to support AI-driven highlights, focus, and annotations from streaming backend messages. - Developing diff visualization features like overlays, side-by-side comparison, and granular param-change highlighting on components and connections. - Collaborating with the Copilot UI engineer to expose rendering APIs/events and integrate streaming highlight updates from the backend. - Documenting rendering architecture, scene graph schemas, and extension hooks for future features. To qualify for this role, you should have:
- 58+ years of experience building complex frontends in TypeScript/React (or Vue) with deep expertise in Canvas/SVG/WebGL-based visualization. - Proven experience in building large-scale interactive editors/viewers with strict performance requirements. - Strong background in algorithms and data structures, including spatial indexing, graph processing, incremental layout, and memory optimization. - Experience with binary/text parsing, structured data pipelines, XML parsing, and secure handling to prevent vulnerabilities.