Markdown preview in the code editor

Example workflows

Starting points built from this record, not transcripts of a run. Each prompt is written the way it should be sent, as one paragraph, and each is worth editing before you send it.

1. 01

   Stand it up from scratch

   You have read the record and want Markdown preview in the code editor working in a real project rather than a sandbox.

   Set up Markdown preview in the code editor in this project — toggle markdown previews for easier reading. Walk it end to end, tell me exactly what you changed, and flag anything I have to switch on myself before it works.

   Expected outcome

   A working setup, a plain list of what changed, and a short list of anything left for you to switch on. Check that list before assuming it is done.

2. 02

   Read formatted documentation without leaving the code editor

   The record lists this as one of the jobs Markdown preview in the code editor is meant for, so it is a fair first test of whether it fits your app.

   In this project, use Markdown preview in the code editor for read formatted documentation without leaving the code editor. Build the smallest version that a real user could complete end to end, keep the change scoped to that path, and tell me how to test it myself.

   Expected outcome

   One complete path a user can walk, the files and settings that changed, and the steps to test it. Walk it yourself before you ship it.

3. 03

   Review it before you publish

   Markdown preview in the code editor is wired in and you are about to put it in front of people. This is the pass that catches the half-configured version.

   Review how this project uses Markdown preview in the code editor before I publish. Check toggle preview on/off and readability enhancement, list anything that is missing, misconfigured, or only half wired, fix what is safe to fix, and tell me what you left alone and why.

   Expected outcome

   A findings list split into what was fixed and what was left, with a reason for each. Anything left alone is yours to decide on.

4. 04

   Preview a README's tables and links before committing it

   A second job the record lists for Markdown preview in the code editor, useful once the first path works.

   Extend this project so Markdown preview in the code editor also covers preview a README's tables and links before committing it. Reuse what is already wired rather than adding a parallel setup, and tell me what you reused and what is new.

   Expected outcome

   A second path built on the same setup, plus a note on what was shared and what was added.

Frequently asked

• What is Markdown preview in the code editor?

  Markdown preview in the code editor is Lovable's Editor feature: Toggle markdown previews for easier reading. Users can now toggle a preview for Markdown files in the code editor, enhancing the reading experience for documents by displaying formatted text without leaving the editor.

• Is Markdown preview in the code editor GA or in beta?

  Markdown preview in the code editor is generally available (GA) on Lovable.

• What Lovable plan includes Markdown preview in the code editor?

  Markdown preview in the code editor is available on all Lovable plans.

• When did Markdown preview in the code editor launch?

  Markdown preview in the code editor launched on Jun 8, 2026.

• SVG previews in chatSame category, also GA · Jun 2026
• Connector sidebarSame category, also GA · Jun 2026
• Improved sharing linksSame category · Jun 2026