# Option to hide frontmatter in live preview **URL:** \ **Category:** Feature archive\ **Created:** [December 4, 2021, 6:37am UTC](https://forum.obsidian.md/t/option-to-hide-frontmatter-in-live-preview/28090 "2021-12-04T06:37:13Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![pzol](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/p/cc9497/32.png) [@pzol](https://forum.obsidian.md/u/pzol)\ **Post date:** [December 4, 2021, 6:37am UTC](https://forum.obsidian.md/t/option-to-hide-frontmatter-in-live-preview/28090/1 "2021-12-04T06:37:14Z")
### Use case or problem I mostly use fronmatter only to define aliases for my notes, so I define it once and then usually it just uglifies my note ### Proposed solution Toggle/show frontmatter in live preview via the three dot menu (similar to toggle backlinks in document) ### Current workaround (optional) Css hack - but that doesn’t remove the gutter triangle `div.is-live-preview span.cm-hmd-frontmatter { display: none; }` ---
**Author:** ![ReaderGuy42](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/r/58f4c7/32.png) [@ReaderGuy42](https://forum.obsidian.md/u/ReaderGuy42)\ **Post date:** [December 13, 2021, 5:10pm UTC](https://forum.obsidian.md/t/option-to-hide-frontmatter-in-live-preview/28090/2 "2021-12-13T17:10:25Z")
Is there a way to hide the frontmatter in regular preview mode (not live)? I’d like to be able to do this too. ---
**Author:** ![alltagsverstand](https://forum.obsidian.md/user_avatar/forum.obsidian.md/alltagsverstand/32/4265_2.png) [@alltagsverstand](https://forum.obsidian.md/u/alltagsverstand)\ **Post date:** [December 13, 2021, 5:59pm UTC](https://forum.obsidian.md/t/option-to-hide-frontmatter-in-live-preview/28090/3 "2021-12-13T17:59:56Z")
> [@ReaderGuy42](#): > > Is there a way to hide the frontmatter in regular preview mode Settings → Editor → Show frontmatter ---
**Author:** ![ReaderGuy42](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/r/58f4c7/32.png) [@ReaderGuy42](https://forum.obsidian.md/u/ReaderGuy42)\ **Post date:** [December 14, 2021, 9:32am UTC](https://forum.obsidian.md/t/option-to-hide-frontmatter-in-live-preview/28090/4 "2021-12-14T09:32:01Z")
Hm, thanks, that doesn’t work. That was already off, but it’s still showing up. ---
**Author:** ![anon12638239](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/a/2bfe46/32.png) [@anon12638239](https://forum.obsidian.md/u/anon12638239)\ **Post date:** [December 14, 2021, 10:15am UTC](https://forum.obsidian.md/t/option-to-hide-frontmatter-in-live-preview/28090/5 "2021-12-14T10:15:08Z")
This _might_ be down to a theme. If you are using a theme, does it work if you turn the theme off? It if does, you might be able to tweak the theme with some custom CSS. Probably worth checking / eliminating as a possible cause. Angel 👼 ---
**Author:** ![ReaderGuy42](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/r/58f4c7/32.png) [@ReaderGuy42](https://forum.obsidian.md/u/ReaderGuy42)\ **Post date:** [December 14, 2021, 10:28am UTC](https://forum.obsidian.md/t/option-to-hide-frontmatter-in-live-preview/28090/6 "2021-12-14T10:28:28Z")
Good idea, thanks, so I turned off the theme, all snippets and all plugins but it still shows up… ---
**Author:** ![anon12638239](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/a/2bfe46/32.png) [@anon12638239](https://forum.obsidian.md/u/anon12638239)\ **Post date:** [December 14, 2021, 10:49am UTC](https://forum.obsidian.md/t/option-to-hide-frontmatter-in-live-preview/28090/7 "2021-12-14T10:49:07Z")
Mmmm, as a test, does it show up if you add some front matter in the help vault? Angel 👼 EDIT: Using aliases? This post might help: > [@Can you hide the "Metadata" box when previewing a note with YAML metadata?](https://forum.obsidian.md/t/can-you-hide-the-metadata-box-when-previewing-a-note-with-yaml-metadata/21931/8): > > Try this css snippet (I didn’t try it, not sure if works): .frontmatter-container { display: none; } ---
**Author:** ![ReaderGuy42](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/r/58f4c7/32.png) [@ReaderGuy42](https://forum.obsidian.md/u/ReaderGuy42)\ **Post date:** [December 14, 2021, 11:09am UTC](https://forum.obsidian.md/t/option-to-hide-frontmatter-in-live-preview/28090/8 "2021-12-14T11:09:18Z")
Yes, it does 🙂 ---
**Author:** ![anon12638239](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/a/2bfe46/32.png) [@anon12638239](https://forum.obsidian.md/u/anon12638239)\ **Post date:** [December 14, 2021, 11:14am UTC](https://forum.obsidian.md/t/option-to-hide-frontmatter-in-live-preview/28090/9 "2021-12-14T11:14:59Z")
Curious. Using aliases? If yes, this post might help: > [@Can you hide the "Metadata" box when previewing a note with YAML metadata?](https://forum.obsidian.md/t/can-you-hide-the-metadata-box-when-previewing-a-note-with-yaml-metadata/21931/8): > > Try this css snippet (I didn’t try it, not sure if works): .frontmatter-container { display: none; } Angel 👼 ---
**Author:** ![sanhuesoft](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/s/f19dbf/32.png) [@sanhuesoft](https://forum.obsidian.md/u/sanhuesoft)\ **Post date:** [February 15, 2022, 2:37am UTC](https://forum.obsidian.md/t/option-to-hide-frontmatter-in-live-preview/28090/10 "2022-02-15T02:37:50Z")
I can confirm your workaround works. And I agree with your proposed solution. ---
**Author:** ![NomarCub](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/n/bbe5ce/32.png) [@NomarCub](https://forum.obsidian.md/u/NomarCub)\ **Post date:** [March 10, 2022, 8:14pm UTC](https://forum.obsidian.md/t/option-to-hide-frontmatter-in-live-preview/28090/11 "2022-03-10T20:14:54Z")
Here’s my little CSS to make live preview mode look a bit more like reading view. Showing here live preview and source view, without and with folds. ![frontmatter](https://forum.obsidian.md/uploads/default/original/3X/2/a/2a785a527c630dff28cb081a83399e143246e7e0.gif) ```css .is-live-preview .cm-line .cm-hmd-frontmatter { color: var(--text-muted); } .is-live-preview .cm-line:not(.cm-active) > .cm-hmd-frontmatter:not(.cm-meta) { font-size: 0.8em; color: inherit; font-weight: 600; border-radius: 0.8em; padding: 0.2em 0.8em; background-color: var(--background-secondary-alt); } .is-live-preview .cm-line > .cm-hmd-frontmatter:not(.cm-meta) .cm-selection, .is-live-preview .cm-line > .cm-hmd-frontmatter:not(.cm-meta).cm-selection { color: var(--text-muted); background-color: var(--text-selection) !important; font-weight: initial; } .is-live-preview .cm-line:not(.cm-active) .cm-hmd-frontmatter.cm-def { visibility: hidden; } .is-live-preview .cm-line .cm-hmd-frontmatter.cm-def .cm-selection { visibility: visible; } ``` ---
**Author:** ![Farrukh](https://forum.obsidian.md/user_avatar/forum.obsidian.md/farrukh/32/30638_2.png) [@Farrukh](https://forum.obsidian.md/u/Farrukh)\ **Post date:** [January 11, 2023, 7:48am UTC](https://forum.obsidian.md/t/option-to-hide-frontmatter-in-live-preview/28090/12 "2023-01-11T07:48:46Z")
This worked better than anything else. Never mind for the gutter space. 🙂 ---
**Author:** ![ize](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/i/96bed5/32.png) [@ize](https://forum.obsidian.md/u/ize)\ **Post date:** [January 18, 2023, 7:55pm UTC](https://forum.obsidian.md/t/option-to-hide-frontmatter-in-live-preview/28090/13 "2023-01-18T19:55:15Z")
Thank you SO much for that code! Works like a treat! I have a question tho, my CSS skills are less than functional … if I’d want the frontmatter section to be collapsed by default… what should I add? ---
**Author:** ![NomarCub](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/n/bbe5ce/32.png) [@NomarCub](https://forum.obsidian.md/u/NomarCub)\ **Post date:** [January 18, 2023, 8:13pm UTC](https://forum.obsidian.md/t/option-to-hide-frontmatter-in-live-preview/28090/14 "2023-01-18T20:13:46Z")
I don’t think that can be done from CSS unfortunately, but someone else might have an idea. ---
**Author:** ![DannyHatcher](https://forum.obsidian.md/user_avatar/forum.obsidian.md/dannyhatcher/32/16946_2.png) [@DannyHatcher](https://forum.obsidian.md/u/DannyHatcher)\ **Post date:** [January 19, 2023, 6:57pm UTC](https://forum.obsidian.md/t/option-to-hide-frontmatter-in-live-preview/28090/15 "2023-01-19T18:57:45Z")
The plugin “Toggle meta YAML” does this. You can pair it with the commander plugin to make it a clickable option in your workspace. ---
**Author:** ![jrhale](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/j/e9bcb4/32.png) [@jrhale](https://forum.obsidian.md/u/jrhale)\ **Post date:** [April 8, 2023, 10:04pm UTC](https://forum.obsidian.md/t/option-to-hide-frontmatter-in-live-preview/28090/16 "2023-04-08T22:04:02Z")
Perfect! Thank you! ---
**Author:** ![sanhuesoft](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/s/f19dbf/32.png) [@sanhuesoft](https://forum.obsidian.md/u/sanhuesoft)\ **Post date:** [April 12, 2023, 2:35am UTC](https://forum.obsidian.md/t/option-to-hide-frontmatter-in-live-preview/28090/17 "2023-04-12T02:35:35Z")
Nice! Gonna try it tomorrow. ---
**Author:** ![NomarCub](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/n/bbe5ce/32.png) [@NomarCub](https://forum.obsidian.md/u/NomarCub)\ **Post date:** [September 16, 2023, 7:44pm UTC](https://forum.obsidian.md/t/option-to-hide-frontmatter-in-live-preview/28090/18 "2023-09-16T19:44:02Z")
With properties introduced in Obsidian 1.4, this is largely obsolete. For styling properties I recommend this: > [@Properties view CSS - The Fall Collection](https://forum.obsidian.md/t/properties-view-css-the-fall-collection/66512): > > With all the new [Properties](https://help.obsidian.md/Editing+and+formatting/Properties) coming on the block, ahem in your notes, you may wonder: do I want the full red carpet experience or the exposed brick for the front? Okay, I’ll stop. The first place you are going to want to check is Settings -\> Editor -\> Properties in document. Visible: The default setting. Hidden: The Properties view interface is hidden in both Reading View and Live Preview. Source: The Properties view interface is rendered in Reading View, and shown as raw YAML in Live Preview. … This is what I use now to achieve a similar effect as before: ```css /* no heading, no folding */ .metadata-properties-heading { display: none; } /* no add button */ .metadata-container .metadata-add-button { display: none; } /* no bottom margin / padding (where it meets the note) */ body { --metadata-padding: var(--size-4-2) 0 0 0; } .metadata-container { margin-block-end: 0; } /* pill-like */ .metadata-property[data-property-key='aliases'] .multi-select-pill { font-weight: var(--font-semibold); background-color: var(--color-base-30); padding: var(--tag-padding-y) var(--tag-padding-x); } ``` ---
**Author:** ![WhiteNoise](https://forum.obsidian.md/user_avatar/forum.obsidian.md/whitenoise/32/11_2.png) [@WhiteNoise](https://forum.obsidian.md/u/WhiteNoise)\ **Post date:** [September 16, 2023, 8:08pm UTC](https://forum.obsidian.md/t/option-to-hide-frontmatter-in-live-preview/28090/19 "2023-09-16T20:08:46Z")
This is implemented with the hidden option. ---
**Author:** ![system](https://forum.obsidian.md/uploads/default/original/3X/b/e/bec35fbd23ab28909bb6bfe62cb32eb82dd34019.png) [@system](https://forum.obsidian.md/u/system)\ **Post date:** [September 23, 2023, 8:09pm UTC](https://forum.obsidian.md/t/option-to-hide-frontmatter-in-live-preview/28090/20 "2023-09-23T20:09:15Z")
Closed on September 23, 2023, 8:09pm UTC This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.