POC: Auto-scroll and highlight updated component in docs preview #1161
Description
Description
This is a proof of concept to explore how we can implement this in our playground text editor and the documentation preview.
📌 Goal:
Whenever a user makes a change in the AsyncAPI spec via the text editor, the docs preview should:
- Auto-scroll to the component or section that was updated.
- Temporarily highlight the updated section to draw attention (example of desired effect: GIF example, just the blue box effect—UI style not relevant).
This makes it significantly easier for users to:
- Visualize the impact of their changes.
- Avoid the hassle of manually scrolling through large specs to locate the updated element.
Future Scope:
🔭 Once the core functionality is implemented, we can improve UX further:
- Recognize that a single change can affect multiple places in the docs.
- Implement a mini-map on the right side (inspired by IDEs) that shows the full structure of the docs.
- Use visual markers on the mini-map to indicate all updated sections, even if only one is scrolled-to and highlighted at a time.
- Like this
Why this matters
Right now, users must scroll and hunt through the docs to verify every change they make in the editor—this breaks the workflow and adds friction. A live scroll + highlight feature brings a smoother, more intuitive spec writing experience.
Source/Inspiration
#1152 (comment)