User:Arthurfragoso/SideBySideEdit
This user script enhances the Wikipedia editing experience by enabling a side-by-side editor and preview panel. The script makes it easier to preview changes while editing an article.
How it works
[edit]| Description | Edit wikipedia with a side preview |
|---|---|
| Author(s) | Arthurfragoso |
| Maintainer(s) | Arthurfragoso |
| First released | January 16, 2025 |
| Version | 1.0.4 |
| Updated | January 29, 2025 (9 days ago) |
| Skins | Vector (2022) |
| Source | User:Arthurfragoso/SideBySideEdit.js |
- After installing, just activate the preview panel by pressing the "Show preview" button while editing.
- Automatic Preview on Edit Start: Enable this option in your Wikipedia Preferences → Editing → Preview → Select "Show preview when starting to edit".
- Panel Switch Button: a "⇄" button at the top center of the page allows you to swap the editor and preview panels. The panel preference is automatically saved using the browser's localStorage.
Extra
[edit]- It is suggested to use this extension together with ResizingDragBar for the editor textbox.
- It works best with the "Show preview without reloading the page" activated in the Wikipedia settings.
Alternatives
[edit]Before developing this script, I searched for existing side-by-side extensions or user scripts for Wikipedia but could not find any. This led me to write this extension. However, shortly after completing it, I discovered that WikiEditor also offers a similar feature. Nonetheless, this script provides an additional option for editors and works well alongside WikiEditor, giving users more flexibility to choose the setup that works best for them.
Compatibility
[edit]Browser support
[edit]Works great in Firefox and Chromium-based browsers. I haven't tested in Safari, but I expect it should work just fine.
Wikipedia Skins
[edit]It currently only works with Vector-2022
Userscript Managers
[edit]This userscript is designed to be compatible with most userscript managers, making it a convenient option for advanced users. Simply copy the code and paste it into your preferred userscript manager.
It has been tested on Tampermonkey, GreaseMonkey, ViolentMonkey, FireMonkey, and, of course, Wikipedia's native Userscript Manager.
-
Editor on the left, preview on the right, dark mode -
Editor on the right, preview on the left, dark mode -
Editor on the left, preview on the right, light mode -
Working seamlessly with WikiEditor in dark mode
