WebSight CMS
Building a true WYSIWYG editor on top of a live webpage
Enabling true visual editing on top of a real rendered page using an overlay-based architecture.
Problem
- Needed true WYSIWYG editing on top of a real rendered page, not a simplified preview
- Complex interactions (select, drag, edit) had to feel native to the document
- Rendering inside an iframe introduced challenges with positioning, synchronization, and styling
Work
- Built an overlay-based editor system aligned with an iframe-rendered page underneath
- Synchronized editor state with the live DOM to enable precise interactions
- Solved rendering issues by dynamically adapting styles (e.g. normalizing viewport units like vh/vw)
- Designed a plugin-based architecture (ESM) enabling complex behavior through small, maintainable modules
- Implemented interaction model using overlays, toolbars, and side panels while underlying page re-rendered affected segments
- Collaborated with backend (OSGi) on APIs and architecture, and with design on UX constraints
- Mentored frontend engineers through reviews and architectural guidance
Impact
- Enabled non-technical users to manage content visually
- Delivered a complex UI system with real product value
- Improved maintainability through modular architecture
- Strengthened team capabilities through mentoring