SE's editor should use a Discourse-style layout for side-by-side Markdown preview

Question

The UX issue of the Markdown preview being under the edit box has been discussed several times:

• Putting the edit box and the markdown box side by side
• Synced vertical scrollbar in the markdown preview (no answer)
• Preview on the right please, optionally?
• Can't see the preview at the bottom of a long post (Math.SE)

The answers proposed brought up several counter-arguments to implementing a side-by-side preview:

• "screwing low-res users", along with statistics of visitor screen size, as of 2010
• "The design of the site is always a single column downward. When anything expands, it expands further downward."
• this could be done via userscripts [NB: I hadn't found any that worked]
• the side panel displays useful information, such as the Similar Questions list

I would like to propose a different solution that's already implemented in SE-inspired discussion software Discourse and works very well:

Discourse does it better

Advantages

• tried & tested - Discourse is mature software
• familiarity - Jeff Atwood is/was behind both SE and Discourse
• the code is already available - Discourse is open source
• autoscroll is implemented
• accessible to low-res users as well via the fluid layout. The screencast above is shot at about 1024px width
• preserves the sidebar - you can see related topics in Discourse; SE can display related questions
• the "hide preview" link reverts to a single-column editor, and could place the preview under it, to replicate the current layout

For those who want to make sure they avoid horizontal scrollbars in code blocks, the preview area could be sized by default to the current preview size, and a divider between the editor and the preview (just as Discourse has one between the editor+preview and the posts area) could allow further control over the editor vs. preview width.

• TylerH: Possible duplicate of Preview on the right please, optionally?
• Dan Dascalescu: @TylerH: As you can see, I was aware of that question before posting mine.

Answer 1

I've tweaked and added to ˈjuː.zɚ79365's version of a side-by-side editing script from Mathematics.SE to make it work again. It's in a userscript format.

Side by Side editing @ Stack Apps

example image

For more information and an installation link, please visit my Stack Apps post :)

This script does not, unlike Discourse, have autoscroll, and does not preserve the sidebar.

It just about fits side-by-side on my 1366 x 768 monitor, so I'd say that's the minimum size you should have...

---

Note: I have also added this feature to my SE Additional Optional Features userscript (as of v1.5).

Install it to get this feature and many more all collated into one big userscript - all options are optional! See the Stack Apps post for more info on installation.

• Alex S: How can we implement or use this for all StackExchange sites? Can users put something in their browsers?
• ᔕᖺᘎᕊ: @AlexS if you follow the link to my 'SE Additional Optional Features' script - you will see the 'Installation and Requirements' section - over there, it tells you how you can install this userscript :) Feel free to comment over there if you're having trouble installing it! :)
• Aaron Thoma: ( @ᔕᖺᘎᕊ suggestion: in the SOX userscript, for the feature search, adding preview as a search keyword for this feature. PS: Your userscript is awesome – thank you so much for this invaluable contribution!!♥♥)
• ᔕᖺᘎᕊ: @AaronThoma Thanks for the suggestion! I'll add that in for the next DEV version :)) I'm really glad you find the userscript so useful! :D (edit: done in v2.6.22 dev! :)

Answer 2

I would also really like to see this implemented. Media queries are one way to do it, but I would be satisfied with a user setting that just enables side-by-side editing and Markdown output. If the setting for side-by-side it true then just use half the page split vertically for each regardless of the window width. I always preview my writing and fix any errors. Scrolling back up to the edit area and back down to the preview a dozen times or more is a big hassle.