Open Source Library/Demo

Sync Audio With Lexical

A specialized open-source project showcasing how to map audio timestamps to specific text nodes within the Lexical rich text editor. This allows for 'karaoke-style' reading experiences where text is highlighted in real-time as the audio plays.

01 / Project Links

Project Links

View on GitHub

02 / What I Owned

What I Owned

Role

Lead Engineer

Key Responsibilities

  • Developed the logic for timestamp mapping between audio files and Lexical JSON
  • Created a high-performance highlighting system for large text bodies
  • Documented the implementation for other developers to integrate into LMS platforms

03 / Technical Details

Technical Details

Technology Stack

frontend
  • React
  • Next.js
  • Lexical
backend
    database
      devops
      • GitHub Actions
      tools
      • TypeScript

      Architecture

      Client-side mapping engine for real-time DOM manipulation based on audio state

      04 / Screenshots & Media

      Screenshots & Media

      05 / Problems & How I Solved Them

      Problems & How I Solved Them

      Challenge

      Highlighting specific words within a deeply nested JSON structure without performance lag

      Solution

      Implemented an index-based lookup system that avoids re-scanning the entire document on every time update

      06 / What Shipped & Impact

      What Shipped & Impact

      Open Source Release

      Provided a foundational tool for developers building accessible reading applications

      07 / Lessons Learned

      Lessons Learned

      • Deep dive into Lexical's internal node structure
      • Efficient state management for high-frequency updates

      More case studies — problem, ownership, and production outcomes.

      All Case Studies