\
**Category:** Basement\
**Tags:** live-preview\
**Created:** [June 21, 2024, 9:34pm UTC](https://forum.obsidian.md/t/live-preview-make-html-renderings-editable/84107 "2024-06-21T21:34:10Z")\
**Posts on this page:** 5\
**Page:** 1
**Author:**  [@jw123](https://forum.obsidian.md/u/jw123)\
**Post date:** [June 21, 2024, 9:34pm UTC](https://forum.obsidian.md/t/live-preview-make-html-renderings-editable/84107/1 "2024-06-21T21:34:10Z")
Hey Obsidian-Community,
I recently started developing a plugin for updating PDF annotation back and forth between markdown file and PDF file.
I represent annotation with callout blocks in the markdown file. I do so, because I really like the rendering of callout blocks.
Source mode example of an annotation block in markdown file:
```auto
>[!Annotation] _Type: Underline, Link: [[PluginTest/2105.15203/2105.15203.pdf#page=1]]_
>>[!metadata]- _Metadata_
>>creationDate: "2024-05-09T04:13:35+02:00"
>>modificationDate: "2024-06-21T22:00:03+02:00"
>>filePath: "PluginTest/2105.15203/2105.15203.pdf"
>>pageNumber: 1
>>id: "4P_597R"
>>subType: "Underline"
>>rect: [127.97,408.167,484.169,441.964]
>>meanPosition: [306.07,425.066]
>>quadPoints: [454.88,440.428,467.927,440.428,454.88,431.521,467.927,431.521,144.384,429.519,467.978,429.519,144.384,420.612,467.978,420.612,144.161,418.61,300,418.61,144.161,409.703,300,409.703]
>>author: "xxx"
>>color: [0,0,0]
>
>>[!cite] **Cite**
>>'Undelined text in PDF file'
>
>>[!info] **Comment**
>>- 'Comment for underline annotation'
>
```
### Use case or problem
Now this markdown ‘code’ gets rendered to the callout block as expected, both in live preview and reading mode.
For my ease of use I would like to **edit the rendered callout block directly, without switching back to source mode view**.
Sadly, editing is currently not possible in the rendered HTML Element for callout blocks. So, e.g. by clicking on it, the block returns back to the source mode view.
Detailed reasoning:
- Especially when the annotation blocks get large, searching the position I want to edit something at becomes quite cumbersome.
- Not mentioning all the markdown key symbols, like ‘\>’ (for callouts), I don’t want to edit because I am only editing what’s contained inside the callout block.
- Furthermore, the whole callout block gets selected in source mode, at least when clicking on the rendered live preview. This requires to search for the position I want to edit something at, all over again.
### Proposed solution
What I would propose is to allow editing of the live preview (callouts as a special case). From my understanding this should be possible as the live preview rendering is just another HTMLElement getting inserted into the HTMLElement of the full viewport, which is present even in source mode view.
Use cases and how I think it should behave:
- Callouts in general:
- Clicking/moving cursor inside: Preserve rendered block structure of the callout, but view the inside in source mode
- But do not show the callout structure related markdown symbols (‘\>’)
- Leaving a callout just by the tab logic, analogously to the list tabbing
- Nested callouts
- Only lowest HTML child containing the cursor has to be re-rendered (viewed in source mode)
- Again tabbing in and out of nested stuff just like with list
- Clicking on rendered callouts
- Find the lowest HTML child containing the click event and proceed with the logic above
And in case one really wants to edit in full source mode view, one can trigger it with the already existing button (top-right corner of the rendered callout block) or make what I have proposed above an optional feature, which can be enabled in the settings.
Long story short: I would much appreciate a more efficient editing experience for callout blocks.
P.S. on implementation: I am not sure, if, what I have proposed above, can be implemented with just a plugin. From my understanding, the plugin API allows post-processing of markdown renderings (and even pre-processing), but does not give the ability to completely prevent or override Obsidian’s default way of rendering and which rendering actions happen on certain user input events (mouse/keyboard events). That said, any editor extension (CM) applying some decorations or markdown rendering post-processor would just add that behavior to the Obsidian’s default, which acts its (unwanted) way when interacting with rendered callout blocks.
---
**Author:**  [@vin3375](https://forum.obsidian.md/u/vin3375)\
**Post date:** [December 11, 2025, 11:46pm UTC](https://forum.obsidian.md/t/live-preview-make-html-renderings-editable/84107/2 "2025-12-11T23:46:23Z")
I agree and second this, callout editing is unnecessarily annoying
---
**Author:**  [@WhiteNoise](https://forum.obsidian.md/u/WhiteNoise)\
**Post date:** [December 12, 2025, 11:43am UTC](https://forum.obsidian.md/t/live-preview-make-html-renderings-editable/84107/3 "2025-12-12T11:43:43Z")
The title of this FR is a bit misleading given what is actually asked in the text.
This FR is actually a duplicate of:
> [@Have Live Preview while editing a callout (Edit callouts progressively and maintain live preview of items not being edited)](https://forum.obsidian.md/t/have-live-preview-while-editing-a-callout-edit-callouts-progressively-and-maintain-live-preview-of-items-not-being-edited/84231):
>
> I want to share a thought about a thing that I really find annoying using Obsidian. I usually use Callouts to gather parts of my notes, and each time I edit them the layout in Live Preview messes out, showing the code like Source Mode. I thing a Live Preview editing mode would really increase the overall experience using Callouts especially where inside the the are links, attached files or images, or even when multiple callouts are concatenated. I mean it should work like the new table editor or…
---
**Author:**  [@WhiteNoise](https://forum.obsidian.md/u/WhiteNoise)\
**Post date:** [December 12, 2025, 11:43am UTC](https://forum.obsidian.md/t/live-preview-make-html-renderings-editable/84107/4 "2025-12-12T11:43:50Z")
Closed on December 12, 2025, 11:43am UTC
---
**Author:**  [@WhiteNoise](https://forum.obsidian.md/u/WhiteNoise)\
**Post date:** [December 12, 2025, 11:43am UTC](https://forum.obsidian.md/t/live-preview-make-html-renderings-editable/84107/5 "2025-12-12T11:43:51Z")
Unlisted on December 12, 2025, 11:43am UTC