Skip to content
Tachi Code Logo Tachi Code

Live Preview

Tachi Code’s live preview feature allows you to see changes to your code in real-time.

Languages supporting live preview

Section titled “Languages supporting live preview”

The following languages have support for live preview:

  • Markdown
  • Mermaid
  • SVG

Using live preview

Section titled “Using live preview”

To open the live preview for a supported file:

  1. Open previewable file in the editor.
  2. Click one of the Open Preview or Preview Fullscreen buttons in the editor’s action bar. Alternatively, you can use the keyboard shortcut Shift + Command + V Shift + Control + V to cycle through preview layouts. Editor action bar
  3. The preview will open in a split view. Split view - Horizontal

Preview layouts

Section titled “Preview layouts”

You can configure how the preview appears:

Side by side (horizontal split)

Section titled “Side by side (horizontal split)”
Split view - Horizontal

Top and bottom (vertical split)

Section titled “Top and bottom (vertical split)”
Split view - Vertical

Fullscreen (source is hidden)

Section titled “Fullscreen (source is hidden)”
Preview fullscreen