--- title: "Markdown Editor: Preview, Prettier, Frontmatter | Prettify Docs" description: Edit Markdown in an editable Preview or a Raw view, format with Prettier, and edit frontmatter in a card. Pro adds Outline, export, and Skill Check. url: https://prettify.tools/docs/markdown --- [Docs](https://prettify.tools/docs) / Formats # Markdown Last updated: October 16, 2026 Prettify edits Markdown in a Preview that you change in place, or in a Raw source view. It formats with Prettier, and shows YAML frontmatter as an editable Properties card. The Preview, the Raw view, Prettier formatting, and the Properties card are free. Several extra tools are Pro. This page is for anyone who writes Markdown: notes, documentation, blog posts, and Claude `SKILL.md` files. ## Views The view switcher offers three views for Markdown. - Preview: the rendered document, which you edit in place. - Raw: the Markdown source as plain text. - Both: the source and the Preview side by side (Pro). Both (Pro) keeps the source pane and the Preview in sync as you type. On a phone the Both view is hidden, because there is no room for two panes. Free users get one try of Both per day. ## Edit in the Preview The Preview is a visual editor. You type, and the Preview shows the result. Your edits go back into the document as Markdown. Prettify formats each Preview edit with Prettier before it reaches the document, so the stored text stays consistent. The Preview is read-only in a few cases, to protect your document: - The visual editor cannot write the document back exactly. - The file is large (see "Large files" below). - Prettify could not check the document. When the Preview is read-only, edit the document in the Raw view instead. The notice shows an Edit in Raw button. ## Properties card If the document starts with a YAML frontmatter block, Prettify shows it as a Properties card above the body. The card lists one row per top-level key, for example `title` or `tags`: ```yaml --- title: Release notes tags: [docs, draft] --- ``` You can edit each field in the card, or select Edit YAML to edit the raw frontmatter. If the document has no frontmatter, select Add properties to start one. A frontmatter YAML error shows in the Problems panel with its line, for free. ## Prettier formatting Prettify formats Markdown with Prettier. Formatting runs when you open a document below the size limit, and when you edit in the Preview. The first Preview edit of an unformatted document formats the whole document. Prettify shows a notice when this happens. ## Outline (Pro) The Outline lists the headings in the document. Select a heading to jump to it in the Preview and the source. The Outline is hidden below 768 px wide. Free users get one try of the Outline per day. ## Mermaid in the Preview (Pro) With Pro, the Preview renders a `mermaid` code block as a diagram. Free users get one try per day. Without the diagram, the Preview shows the code block as text. See [Mermaid](https://prettify.tools/docs/mermaid) for the diagram syntax. ## Export (Pro) Select the export button to save the document. Export is a Pro feature, with one free try per day. - Export as HTML saves a standalone, styled HTML page. - Export as PDF opens the print dialog so you can save a PDF. PDF export is web only. The desktop app offers HTML export only. Both export types render `mermaid` code blocks as diagrams and read on a white background. ## Skill Check (Pro) Skill Check tests a Claude `SKILL.md` file against the Agent Skills specification and the Claude Code rules. It is a Pro feature, with one free try per day. Without Pro, the Problems panel still tells you how many skill issues it found. Skill Check reports problems with their line, for example: - The `name` must be 1 to 64 lowercase letters, digits, and single hyphens, with no hyphen at the start or end. - Add a `description`. Claude reads it to decide when to use the skill. - Keep the `description` to 1,024 characters or fewer. - Keep `SKILL.md` under 500 lines; move details to reference files. - Keys that Claude Code ignores are flagged. See the [Claude Skill Validator](https://prettify.tools/claude-skill-validator) tool page and the [SKILL.md Format](https://prettify.tools/skill-md) reference. ## Large files A Markdown file of 200 KB or larger opens in a read-only Preview. Prettify renders the body in pieces so a large document still opens. To change a large file, use the Raw view. A single file over 100 MB does not open in the desktop app. ## Related - [MDX](https://prettify.tools/docs/mdx) extends Markdown with JSX components. - [Conversion](https://prettify.tools/docs/conversion) changes Markdown to other formats and back. - [Pro](https://prettify.tools/docs/pro) lists every Pro feature. - Tool pages: [Markdown Preview](https://prettify.tools/markdown-preview), [Markdown Editor](https://prettify.tools/markdown-editor), [Markdown Formatter](https://prettify.tools/markdown-formatter). ## Try it online Tool pages for this topic. Each one runs in your browser. - [Markdown Editor](https://prettify.tools/markdown-editor) - [Markdown Preview](https://prettify.tools/markdown-preview) - [Markdown Formatter](https://prettify.tools/markdown-formatter) - [Claude Skill Validator](https://prettify.tools/claude-skill-validator) - [SKILL.md Format](https://prettify.tools/skill-md) * [PreviousMermaid](https://prettify.tools/docs/mermaid) * [Next MDX](https://prettify.tools/docs/mdx) ## Structured data ```json { "@context": "https://schema.org", "@type": "SoftwareApplication", "name": "Prettify", "url": "https://prettify.tools", "description": "Multi-format data viewer, editor, and query engine for JSON, YAML, CSV, XML, Mermaid, Markdown, MDX, HTML, and SVG", "applicationCategory": "DeveloperApplication", "operatingSystem": "Web, macOS, Windows, Linux", "offers": [ { "@type": "Offer", "price": "0", "priceCurrency": "USD", "description": "Free tier with core features" }, { "@type": "Offer", "price": "19.99", "priceCurrency": "USD", "description": "Pro: lifetime access to all features" } ], "publisher": { "@id": "https://prettify.tools/#organization" } } { "@context": "https://schema.org", "@type": "Organization", "@id": "https://prettify.tools/#organization", "name": "Prettify", "legalName": "Off Leash Labs", "url": "https://prettify.tools/", "logo": { "@type": "ImageObject", "url": "https://prettify.tools/icon-512.png", "width": 512, "height": 512 }, "contactPoint": { "@type": "ContactPoint", "contactType": "customer support", "email": "offleashlabs@gmail.com", "availableLanguage": "English" } } ```