asyncapi
POC: Auto-scroll and highlight updated component in docs preview
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 https://github.com/asyncapi/asyncapi-react/issues/1152#issuecomment-2862792921
Please feel free to work on this issue whenever you're ready, no need to wait for it to be assigned to you! If it happens to remain unresolved for too long, I’ll be happy to take it up to help keep things progressing.