# Hybrid markdown editing (preview for unfocused lines, raw for active line)

**URL:** https://discuss.codemirror.net/t/hybrid-markdown-editing-preview-for-unfocused-lines-raw-for-active-line/9660
**Category:** Uncategorized
**Created:** [January 26, 2026, 2:10pm UTC](https://discuss.codemirror.net/t/hybrid-markdown-editing-preview-for-unfocused-lines-raw-for-active-line/9660 "2026-01-26T14:10:45Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![tiagosimoes](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/tiagosimoes/32/5407_2.png) [@tiagosimoes](https://discuss.codemirror.net/u/tiagosimoes)
#### Post date: [January 26, 2026, 2:10pm UTC](https://discuss.codemirror.net/t/hybrid-markdown-editing-preview-for-unfocused-lines-raw-for-active-line/9660/1 "2026-01-26T14:10:45Z")

</div>

Here’s an extension I’ve built for **hybrid markdown editing** : it renders **the preview of unfocused lines** while keeping the **current line in raw markdown** for editing (so you get readability without losing precise control).

![demo](https://discuss.codemirror.net/uploads/default/original/2X/5/5168b2f222c092f04cede71b92aba799f0a209e1.gif)

- Repo: [GitHub - tiagosimoes/codemirror-markdown-hybrid: A CodeMirror 6 extension for hybrid markdown editing - shows rendered preview for unfocused lines and raw markdown for the line being edited](https://github.com/tiagosimoes/codemirror-markdown-hybrid)

- Live demo: [Hybrid Markdown Editor - Demo](https://tiagosimoes.github.io/codemirror-markdown-hybrid/)

## Install

```bash
npm install codemirror-markdown-hybrid @codemirror/state @codemirror/view

```

## Minimal Usage

```javascript
import { EditorState } from '@codemirror/state'
import { EditorView } from '@codemirror/view'
import { hybridMarkdown } from 'codemirror-markdown-hybrid'

const state = EditorState.create({
  doc: '# Hello World',
  extensions: [hybridMarkdown({ theme: 'light' })],
})

new EditorView({ state, parent: document.body })

```

This is my first extension, so all the feedback is welcomed.

---

<div class="post-metadata">

### Author: ![JerryI](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/jerryi/32/3184_2.png) [@JerryI](https://discuss.codemirror.net/u/JerryI)
#### Post date: [February 22, 2026, 10:34am UTC](https://discuss.codemirror.net/t/hybrid-markdown-editing-preview-for-unfocused-lines-raw-for-active-line/9660/2 "2026-02-22T10:34:59Z")

</div>

Great project!

I love the idea to render them by line, instead of by blocks of wrappers as it is done in Obsidian. This make the layout shifts less annoying and clearly indicates what is edited and what is rendered.