Synchronized Scrolling for Markdown Preview

[suprunchuk]

What feature or new tool do you think should be added to DevToys?

Hi,

I’d like to suggest an improvement for the Markdown preview feature. Currently, when you add Markdown text on the left side of the screen, the right side shows the preview, and there are two separate scroll bars—one for each side. However, when scrolling on the left side, the preview on the right does not automatically scroll to match the left content when the text is long.

It would be great if the scrolling behavior could work like in VS Code, where the preview on the right automatically scrolls to the corresponding position as you scroll through the content on the left. This would provide a smoother and more intuitive experience.

Thank you!

Why do you think this is needed?

1. Improved Workflow Efficiency

When working with large Markdown files, users often need to switch between the editing and preview modes. If the scroll positions are not synchronized, users must manually adjust the preview to the relevant section of the document after every scroll. This can be frustrating and time-consuming. Automatic synchronization would eliminate this extra step, making the editing process much smoother and more efficient.

2. Better Context Awareness

When you’re editing Markdown, it’s important to have immediate visual feedback of your changes. If the preview doesn’t automatically adjust as you scroll, it can be easy to lose track of where you are in the document. Synchronized scrolling ensures that you can always see the exact part of the document you are working on, which helps maintain context.

3. Consistency with Other Popular Tools

Many popular Markdown editors (e.g., VS Code, Obsidian, etc.) already offer synchronized scrolling between the editor and the preview. Users who are familiar with these tools may expect this behavior in DevToys as well. By implementing it, DevToys would align with common user expectations, making it easier for new users to adapt and improving overall satisfaction.

4. Reduced Cognitive Load

Having to manually scroll the preview after scrolling the editor can create unnecessary cognitive load. Users must constantly check whether the preview is aligned with the section they’re editing, which disrupts their flow. Synchronizing the scrolls removes this mental step, allowing the user to focus entirely on the task at hand.

5. Better User Experience

Synchronized scrolling contributes to a more polished, intuitive interface. It is a small but important detail that would make the app feel more professional and user-friendly. Simple UI enhancements like this can set an app apart in terms of usability, making users more likely to continue using it and recommend it to others.

By adding this feature, DevToys would become even more user-friendly and competitive with other Markdown editors. It’s a straightforward change that could have a big impact on overall user satisfaction.

Solution/Idea

_._2024-12-24_100429.mp4

Comments

No response