# Editor Preview Position

**URL:** <https://meta.discourse.org/t/editor-preview-position/309934>\
**Category:** Theme component\
**Tags:** composer, desktop\
**Created:** [May 30, 2024, 6:21am UTC](https://meta.discourse.org/t/editor-preview-position/309934 "2024-05-30T06:21:43Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

**Author:** ![Alteras](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/alteras/32/582398_2.png) [@Alteras](https://meta.discourse.org/u/Alteras)\
**Post date:** [May 30, 2024, 6:21am UTC](https://meta.discourse.org/t/editor-preview-position/309934/1 "2024-05-30T06:21:43Z")

</div>

| | | |
| --- | --- | --- |
| ℹ | **Summary** | Allows the user to reposition and resize the preview in the composer for Discourse. |
| 🛠 | **Repository** | [GitHub - Alteras1/discourse-editor-preview-position: Discourse theme component for users to reposition and resize the preview · GitHub](https://github.com/Alteras1/discourse-editor-preview-position) |
| ❓ | **Install Guide** | [How to install a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682) |
| 📖 | **New to Discourse Themes?** | [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |

Install this theme component

Allows the user to reposition and resize the preview in the composer for Discourse. Double click the dragbar to reposition the split to be in the center.

![preview](https://global.discourse-cdn.com/meta/original/4X/4/4/0/440005275265c3f39b777e050ca26c434e5be7e6.gif)

> **Fullscreen preview**
>
> [https://github.com/Alteras1/discourse-editor-preview-position/raw/main/.github/images/editor-preview-position-fullscreen.gif](https://github.com/Alteras1/discourse-editor-preview-position/raw/main/.github/images/editor-preview-position-fullscreen.gif)
> 
> [https://github.com/Alteras1/discourse-editor-preview-position/raw/main/.github/images/editor-preview-position-fullscreen.gif(image larger than 10 MB)](https://github.com/Alteras1/discourse-editor-preview-position/raw/main/.github/images/editor-preview-position-fullscreen.gif)

Also adds the option to style the composer in the same style as the fullscreen view.

![clean composer mode](https://global.discourse-cdn.com/meta/original/4X/d/f/e/dfe65024883c520569f5a81b9c57677534f627e5.gif)

## Settings

### Top Bar Preview Button

Moves the preview button to the top bar. Default: `true`

> **Screenshots**
>
> non fullscreen:
> 
> ![](https://global.discourse-cdn.com/meta/original/4X/6/8/8/688b15dd0da1ae64c98ff8caf0166233e53bdda3.png)  
> ![](https://global.discourse-cdn.com/meta/original/4X/4/1/0/410a0c9675daafed5d8d715e44ad9804a7b449a7.png)
> 
> fullscreen:
> 
> ![](https://global.discourse-cdn.com/meta/original/4X/f/6/c/f6ce18c2c1df75f383501529e9150bf257b78c64.png)  
> ![](https://global.discourse-cdn.com/meta/original/4X/2/4/a/24ace1324b9472783d509508b6031ef0f80a750a.png)

### Allow Top Bottom Previews

Allows the preview to be position above/below the editor. Default: `true`

> **Screenshots**
>
> ![](https://global.discourse-cdn.com/meta/original/4X/6/e/a/6ea824a9916787715be20ade2c028a8628c0c5db.png)  
> ![](https://global.discourse-cdn.com/meta/original/4X/8/9/f/89f8f1a15c9f0928696fef69c5f6f0673b82573a.png)

### Allow Resizable Horizontal Previews

Allow the previews to be resizable along the horizontal axis. Default: `true`

### Allow Resizable Vertical Previews

Allow the previews to be resizable along the vertical axis. Default: `true`

### Clean Composer Style

Alters the composer style to more closely match the fullscreen composer style. Default: `false`.

> **Screenshots**
>
> Screenshots of the style in different orientations.
> 
> ![](https://global.discourse-cdn.com/meta/original/4X/1/e/5/1e51f19fce68959668710d5a3c23aa14da6d86dd.png)  
> ![](https://global.discourse-cdn.com/meta/original/4X/b/0/b/b0b5d9cb67e2fb403c3696e86a89d9d2e58babff.png)  
> ![](https://global.discourse-cdn.com/meta/original/4X/8/c/1/8c192460f8d236ec4242a870d77e642fae7992f1.png)  
> ![](https://global.discourse-cdn.com/meta/original/4X/4/d/d/4dda82f3ebb4e7dda04402e952f272436bb34f03.png)

> This setting is more of a personal preference. During the development of this theme component, I found the differences between the fullscreen and the non fullscreen editor to be distracting. As such, I added this styling to help create a more “unified” experience. By default it is off.

## Compatibility & Notes

Only works in Discourse v3.2.0 and above due to usage of `api.renderInOutlet()` function and new glimmer components.

Since the side by side preview only happens in desktop views, this theme component only applies to desktop views.

Similarly, as the Rich Text Editor has no separate preview, this component is disabled in RTE mode.

The theme I am using in my screenshots is the Graceful theme.

---

_[View the full topic](https://meta.discourse.org/t/editor-preview-position/309934)._