Examples › Track 2 — Bidirectional › Example 7

Tables & fences round-trip

A pre-built document with tables, code blocks, lists, and inline formatting. Edit the rendered preview directly — change cell values, reorder rows, edit code, type new paragraphs — and the right pane shows the markdown rebuilt by toMarkdown(). The round-trip preserves structure.

Edit the preview — the markdown rebuilds live

Editable preview

Reconstructed markdown


          

        

      


      

        
Things to try

        
    
          
  • Click in a table cell and change the value
    • 
          
  • Click in the code block and edit the code (the language tag is preserved)
    • 
          
  • Add a new paragraph at the end
    • 
          
  • Delete a list item
    • 
          
  • Edit the heading text
    • 
          
  • Type new bold or italic using your browser's contenteditable shortcuts (Ctrl+B / Ctrl+I)
    • 
        

        
The reconstructed markdown on the right always represents the current state of the preview, ready to be saved or sent over the wire.