# WYSIWYG markdown editor in JupyterLab?

**URL:** <https://discourse.jupyter.org/t/wysiwyg-markdown-editor-in-jupyterlab/1070>\
**Category:** JupyterLab\
**Created:** [May 13, 2019, 3:50pm UTC](https://discourse.jupyter.org/t/wysiwyg-markdown-editor-in-jupyterlab/1070 "2019-05-13T15:50:28Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![choldgraf](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/choldgraf/32/1264_2.png) [@choldgraf](https://discourse.jupyter.org/u/choldgraf)\
**Post date:** [May 13, 2019, 3:50pm UTC](https://discourse.jupyter.org/t/wysiwyg-markdown-editor-in-jupyterlab/1070/1 "2019-05-13T15:50:28Z")

</div>

I am curious if anyone has worked on or would be interested in an extension that adds WYSIWYG capabilities to JupyterLab.

For example, HackMD lets you switch between full-markdown mode and rendered mode (or has a side by side mode)

 ![](https://canada1.discourse-cdn.com/flex031/uploads/jupyter/original/1X/ce22a8fbaf56f142f59f1ef4c5f18711cd3a60a4.png)

There are also lots of nice JS libraries that expose this kinda functionality, e.g. [draftjs seems quite popular](https://draftjs.org/).

There’s [an issue about markdown WYSIWYG in jlab here](https://github.com/jupyterlab/jupyterlab/issues/2349) though it hasn’t moved much recently. It would be great if folks could voice their thoughts/support/concerns/etc!

Note: this has been discussed a bit here as well:

> [@Deploying JupyterHub at your institution](https://discourse.jupyter.org/t/deploying-jupyterhub-at-your-institution/723/5):
>
> @betatim I think I need to properly try to figure out what barriers I keep coming across. (I like the Hubhero idea but need to think about how that would work for advocacy… Which means I need to clarify what issues / obstacles are…) The issues are all muddled atm (please bear in mind that my focus is primarily how we can use Jupyter notebooks for creating and distributing teaching materials to distance education students). individual academics don’t see the benefit, don’t have the time/machi…

> [@Default action for .md files](https://discourse.jupyter.org/t/default-action-for-md-files/728/4):
>
> Another thought - I quite like the hackmd approach of having a few visual buttons as cues for quickly switching between viewing / writing: [image] perhaps we could use something similar for the markdown editor in JupyterLab, since this is a familiar pattern for people already.

---

<div class="post-metadata">

**Author:** ![psychemedia](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/psychemedia/32/24_2.png) [@psychemedia](https://discourse.jupyter.org/u/psychemedia)\
**Post date:** [May 13, 2019, 5:18pm UTC](https://discourse.jupyter.org/t/wysiwyg-markdown-editor-in-jupyterlab/1070/2 "2019-05-13T17:18:07Z")

</div>

Apols for the core dump - rushing on my way out!

Some editors / example envts…

Not sure if/how many of them have js libraries etc that could be tapped into. A lot of them are fully blown editors. If they can tap into Jupyter kernels, then a question arises: where would a JuptyerLab wywiwyg extension fit? Could it compete? Should it? (I think it could be convenient, but it at the risk of making JupyterLab more cluttered? If JupyterLab views are customisable, then is a gallery of different JupyterLab views/setups available?)

> **[genepattern/jupyter-wysiwyg](https://github.com/genepattern/jupyter-wysiwyg)**
>
> A WYSIWYG markdown/HTML editor for Jupyter Notebook - genepattern/jupyter-wysiwyg

  
[https://tiptap.scrumpy.io/collaboration](https://tiptap.scrumpy.io/collaboration)  
stencila [rationale](https://elifesciences.org/labs/c496b8bb/stencila-an-office-suite-for-reproducible-research)  

> **[Quill - Your powerful rich text editor](https://quilljs.com/)**
>
> Quill is a free, open source rich text editor built for the modern web.

  

> **[Editor.js](https://editorjs.io/)**
>
> A block-styled editor with clean JSON output

  
[http://substance.io/texture/](http://substance.io/texture/)  
[https://stackblitz.com/docs](https://stackblitz.com/docs)  

> **[eclipse-theia/theia](https://github.com/eclipse-theia/theia)**
>
> Eclipse Theia is a cloud & desktop IDE framework implemented in TypeScript. - eclipse-theia/theia

  

> **[JanitorTechnology/janitor](https://github.com/JanitorTechnology/janitor)**
>
> The fastest development system in the world. Contribute to JanitorTechnology/janitor development by creating an account on GitHub.

  

> **[Reporting in a Repeatable, Parameterised, Transparent Way](https://blog.ouseful.info/2017/02/23/reporting-in-a-repeatable-parameterised-transparent-way/)**
>
> Earlier this week, I spent a day chatting to folk from the House of Commons Library as a part of a temporary day-a-week-or-so bit of work I’m doing with the Parliamentary Digital Service. Dur…

  
[https://github.com/Microsoft/monaco-editor](https://github.com/Microsoft/monaco-editor) [https://github.com/codercom/code-server](https://github.com/codercom/code-server) see [https://github.com/jupyterlab/jupyterlab-monaco](https://github.com/jupyterlab/jupyterlab-monaco)  
[https://abcjs.net/abcjs-editor.html](https://abcjs.net/abcjs-editor.html)  
[https://github.com/saf-dmitry/mdviewer](https://github.com/saf-dmitry/mdviewer)  
[https://github.com/SVG-Edit/svgedit](https://github.com/SVG-Edit/svgedit)

[http://calca.io/](http://calca.io/)

---

<div class="post-metadata">

**Author:** ![choldgraf](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/choldgraf/32/1264_2.png) [@choldgraf](https://discourse.jupyter.org/u/choldgraf)\
**Post date:** [May 13, 2019, 5:33pm UTC](https://discourse.jupyter.org/t/wysiwyg-markdown-editor-in-jupyterlab/1070/3 "2019-05-13T17:33:17Z")

</div>

Those are all super useful, thanks! My thinking is that piggy-backing on a service just for markdown cells in the notebook viewer would be useful in-and-of itself. I agree that for more generic coding tasks, building more connections with other tools like vscode would be a good path too

---

<div class="post-metadata">

**Author:** ![sgibson91](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/sgibson91/32/487_2.png) [@sgibson91](https://discourse.jupyter.org/u/sgibson91)\
**Post date:** [May 16, 2019, 7:25pm UTC](https://discourse.jupyter.org/t/wysiwyg-markdown-editor-in-jupyterlab/1070/4 "2019-05-16T19:25:05Z")

</div>

Up-voting for Markdown rendering in JupyterLab. While it is possible to view a rendered version (can’t remember right now if it updates as you type), the feature is _way_ too hidden! I have a dream of launching a JLab binder that lands on a beautiful README page.

I also like the idea mentioned in [this issue](https://github.com/jupyter/notebook/issues/2485) where the README is rendered underneath the Notebook files so it looks more like a GitHub repo.

---

<div class="post-metadata">

**Author:** ![ian-r-rose](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/ian-r-rose/32/1119_2.png) [@ian-r-rose](https://discourse.jupyter.org/u/ian-r-rose)\
**Post date:** [May 17, 2019, 5:15pm UTC](https://discourse.jupyter.org/t/wysiwyg-markdown-editor-in-jupyterlab/1070/5 "2019-05-17T17:15:10Z")

</div>

@sgibson91 It is possible to open a binder with a README already displayed, though it takes a bit of work. For some documentation, see this example: [https://github.com/ian-r-rose/binder-workspace-demo](https://github.com/ian-r-rose/binder-workspace-demo)

---

<div class="post-metadata">

**Author:** ![betatim](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/betatim/32/10_2.png) [@betatim](https://discourse.jupyter.org/u/betatim)\
**Post date:** [May 20, 2019, 5:14am UTC](https://discourse.jupyter.org/t/wysiwyg-markdown-editor-in-jupyterlab/1070/6 "2019-05-20T05:14:58Z")

</div>

Using a WYSIWYG editor for markdown in a notebook would be amazing. It would get us one step closer to having an editing experience that is “this is a normal document with a fancy editor that just happens to let me add code blocks” (which eventually will lead to Jupyter being integrated in Word! (my not so secret end goal 😀))

I made a proof of concept for nteract a while back [https://github.com/nteract/nteract/pull/3699](https://github.com/nteract/nteract/pull/3699) but stalled because of my lack of JS skills.

---

<div class="post-metadata">

**Author:** ![fm75](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/fm75/32/71_2.png) [@fm75](https://discourse.jupyter.org/u/fm75)\
**Post date:** [May 22, 2019, 4:50am UTC](https://discourse.jupyter.org/t/wysiwyg-markdown-editor-in-jupyterlab/1070/7 "2019-05-22T04:50:56Z")

</div>

I am mainly an observer/consumer. Opinions expressed are based on my experience as a user. I have not made many substantive contributions to the jupyter project.

**WYSIWYG markdown**  
I think that `WYSIWYG` is currently properly designed with jupyterlab’s ability to show a viewer next to an editor.

**It is not just markdown**  
We should not assume what is being changed. We should manage the changes as expected,

I like the existing separation of concerns. To make it work, we need to show the view of the state of the editor. There have been issues with this. The viewer must show the state of the editor and the user needs to be able to recognize whether the change has been persisted.

The view of the existing state must be consistent with the deployable  
state.

---

<div class="post-metadata">

**Author:** ![Zsailer](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/zsailer/32/4872_2.png) [@Zsailer](https://discourse.jupyter.org/u/Zsailer)\
**Post date:** [May 22, 2019, 5:36pm UTC](https://discourse.jupyter.org/t/wysiwyg-markdown-editor-in-jupyterlab/1070/8 "2019-05-22T17:36:55Z")

</div>

A rich text editor for markdown cells (and perhaps whole documents outside the notebook UI) might be a great Jupyter Cal Poly intern project this summer. What do y’all think?

---

<div class="post-metadata">

**Author:** ![choldgraf](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/choldgraf/32/1264_2.png) [@choldgraf](https://discourse.jupyter.org/u/choldgraf)\
**Post date:** [May 22, 2019, 5:58pm UTC](https://discourse.jupyter.org/t/wysiwyg-markdown-editor-in-jupyterlab/1070/9 "2019-05-22T17:58:43Z")

</div>

I would _love_ to see this 🙂 I will buy an avocado toast to anybody that makes progress towards this 🥑