# save the folding state and reapply after reloading

**URL:** <https://discuss.codemirror.net/t/save-the-folding-state-and-reapply-after-reloading/4587>\
**Category:** Uncategorized\
**Created:** [June 20, 2022, 1:59pm UTC](https://discuss.codemirror.net/t/save-the-folding-state-and-reapply-after-reloading/4587 "2022-06-20T13:59:38Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![mbui0327](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/mbui0327/32/2126_2.png) [@mbui0327](https://discuss.codemirror.net/u/mbui0327)\
**Post date:** [June 20, 2022, 1:59pm UTC](https://discuss.codemirror.net/t/save-the-folding-state-and-reapply-after-reloading/4587/1 "2022-06-20T13:59:38Z")

</div>

Hi, what is the best way to save the folding state to disk and reapply it in case we have to reload the page.

Thank for great work.

---

<div class="post-metadata">

**Author:** ![marijn](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/marijn/32/136_2.png) [@marijn](https://discuss.codemirror.net/u/marijn)\
**Post date:** [June 20, 2022, 5:46pm UTC](https://discuss.codemirror.net/t/save-the-folding-state-and-reapply-after-reloading/4587/2 "2022-06-20T17:46:08Z")

</div>

@codemirror/language 6.1.0 makes this easier by exporting [`foldState`](https://codemirror.net/docs/ref/#language.foldState), which you can use with [`EditorState.toJSON`](https://codemirror.net/docs/ref/#state.EditorState.toJSON)/[`fromJSON`](https://codemirror.net/docs/ref/#state.EditorState%5EfromJSON) to serialize the fold state along with the rest of your state.

---

<div class="post-metadata">

**Author:** ![mbui0327](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/mbui0327/32/2126_2.png) [@mbui0327](https://discuss.codemirror.net/u/mbui0327)\
**Post date:** [June 20, 2022, 5:57pm UTC](https://discuss.codemirror.net/t/save-the-folding-state-and-reapply-after-reloading/4587/3 "2022-06-20T17:57:06Z")

</div>

Thanks. This is great! what about in version earlier such as 0.19.2. I have some dependencies which limits us from moving to the new version right a way.

---

<div class="post-metadata">

**Author:** ![marijn](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/marijn/32/136_2.png) [@marijn](https://discuss.codemirror.net/u/marijn)\
**Post date:** [June 20, 2022, 7:07pm UTC](https://discuss.codemirror.net/t/save-the-folding-state-and-reapply-after-reloading/4587/4 "2022-06-20T19:07:06Z")

</div>

There this doesn’t exist, so you’d have to used `foldedRanges` (if that is available there yet) to set up a solution if your custom code.

---

<div class="post-metadata">

**Author:** ![mbui0327](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/mbui0327/32/2126_2.png) [@mbui0327](https://discuss.codemirror.net/u/mbui0327)\
**Post date:** [August 10, 2022, 6:51pm UTC](https://discuss.codemirror.net/t/save-the-folding-state-and-reapply-after-reloading/4587/5 "2022-08-10T18:51:37Z")

</div>

Is there an example of getting `foldState`. How exactly should I use `EditorState.toJSON` to jsontify `foldState`.  
Thanks.

---

<div class="post-metadata">

**Author:** ![marijn](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/marijn/32/136_2.png) [@marijn](https://discuss.codemirror.net/u/marijn)\
**Post date:** [August 11, 2022, 6:31am UTC](https://discuss.codemirror.net/t/save-the-folding-state-and-reapply-after-reloading/4587/6 "2022-08-11T06:31:55Z")

</div>

```javascript
let stateJSON = state.toJSON({fold: foldState})
let deserializedState = EditorState.fromJSON(stateJSON, {extensions}, {fold: foldState})

```

---

<div class="post-metadata">

**Author:** ![mbui0327](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/mbui0327/32/2126_2.png) [@mbui0327](https://discuss.codemirror.net/u/mbui0327)\
**Post date:** [August 11, 2022, 12:35pm UTC](https://discuss.codemirror.net/t/save-the-folding-state-and-reapply-after-reloading/4587/7 "2022-08-11T12:35:30Z")

</div>

This is great. Btw, is there a way to know when a folding event happen? Basically, I would like to save the foldState if there is any thing change. what is the best practice to implement this?

---

<div class="post-metadata">

**Author:** ![marijn](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/marijn/32/136_2.png) [@marijn](https://discuss.codemirror.net/u/marijn)\
**Post date:** [August 11, 2022, 12:49pm UTC](https://discuss.codemirror.net/t/save-the-folding-state-and-reapply-after-reloading/4587/8 "2022-08-11T12:49:45Z")

</div>

A transaction will have [this effect](https://codemirror.net/docs/ref/#language.foldEffect) in it when it folds, something, and [this one](https://codemirror.net/docs/ref/#language.unfoldEffect) when it unfolds something.

---

<div class="post-metadata">

**Author:** ![Toly](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/toly/32/5446_2.png) [@Toly](https://discuss.codemirror.net/u/Toly)\
**Post date:** [July 17, 2025, 12:36pm UTC](https://discuss.codemirror.net/t/save-the-folding-state-and-reapply-after-reloading/4587/9 "2025-07-17T12:36:33Z")

</div>

@marijn @mbui0327  
After I got the foldState , how can I replay the state to the editor again?