# How to modify the preview with javascript?

**URL:** https://meta.discourse.org/t/how-to-modify-the-preview-with-javascript/182563
**Category:** Development
**Created:** [March 8, 2021, 10:18pm UTC](https://meta.discourse.org/t/how-to-modify-the-preview-with-javascript/182563 "2021-03-08T22:18:01Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![Heddson](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heddson/32/96742_2.png) [@Heddson](https://meta.discourse.org/u/Heddson)
#### Post date: [March 8, 2021, 10:18pm UTC](https://meta.discourse.org/t/how-to-modify-the-preview-with-javascript/182563/1 "2021-03-08T22:18:02Z")

</div>

This is kind of related to [my last question](https://meta.discourse.org/t/how-to-decorate-a-post-before-its-cooked/182052). But made a new topic since it’s a new question.

What is the best way to modify the preview (that you see when composing a post) with javascript in a theme component?

I know I can modify the DOM (after it’s cooked) in _decorateCookedElement_, but would be nice to have something like _addPostTransformCallback_ where you can modify the cooked post as a string (with t.cooked). But _addPostTransformCallback_ doesn’t get called when the preview is updated (only when you first open to edit a post).

---

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [March 8, 2021, 10:43pm UTC](https://meta.discourse.org/t/how-to-modify-the-preview-with-javascript/182563/2 "2021-03-08T22:43:50Z")

</div>

Do you want to update just the preview or you want to also affect how a submitted post will look?

---

<div class="post-metadata">

### Author: ![Heddson](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heddson/32/96742_2.png) [@Heddson](https://meta.discourse.org/u/Heddson)
#### Post date: [March 8, 2021, 11:17pm UTC](https://meta.discourse.org/t/how-to-modify-the-preview-with-javascript/182563/3 "2021-03-08T23:17:45Z")

</div>

I’m interested in updating both the preview and the submitted post (but don’t want to save the modifications 🙂).

Worried that if I make my modifications to the DOM (with _decorateCookedElement_) it will be too slow. Although I need to make some tests to see if that’s really the case.

---

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [March 8, 2021, 11:24pm UTC](https://meta.discourse.org/t/how-to-modify-the-preview-with-javascript/182563/4 "2021-03-08T23:24:16Z")

</div>

The submitted post will be cooked again in the server, so in order for the modification to work, you will need a plugin, not a theme-component.

This post here covers this topic: [Repackaging a markdown-it extension as a Discourse plugin](https://meta.discourse.org/t/repackaging-a-markdown-it-extension-as-a-discourse-plugin/84614)

---

<div class="post-metadata">

### Author: ![Heddson](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heddson/32/96742_2.png) [@Heddson](https://meta.discourse.org/u/Heddson)
#### Post date: [March 9, 2021, 2:04pm UTC](https://meta.discourse.org/t/how-to-modify-the-preview-with-javascript/182563/5 "2021-03-09T14:04:59Z")

</div>

Thanks! I will definitely check that out.
