Psy-Phy Preview
Write plain markdown. See it rendered with beautiful components. Export a .mdx file that works immediately in your project.
What it does
When you open any .md or .mdx file, a live preview panel opens beside it — rendering your content using Psy-Phy components. No setup needed to preview. One command to export and install.
The extension automatically converts standard markdown patterns to rich components:
| Markdown |
Component |
Notes |
> [!NOTE] blockquote |
<Callout type="info"> |
Also supports WARNING, TIP, CAUTION, IMPORTANT |
| Markdown table |
<DataTable headers rows> |
Searchable, sortable |
| Numbered list |
<Steps><Step> |
Enable in settings |
```mermaid fence |
<Mermaid chart={...}> |
Auto-detects diagram type |
==text== |
<Highlight> |
Enable in settings |
Commands
Open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P) and search Psy-Phy:
| Command |
What it does |
Psy-Phy: Toggle Preview |
Open the preview if closed, close it if open |
Psy-Phy: Open Preview |
Open the preview panel for the current file |
Psy-Phy: Export as MDX |
Write a .mdx file and auto-install the needed components |
Psy-Phy: Insert Component |
Pick from 18 components and insert the correct markdown syntax |
Psy-Phy: Initialize Project |
Run npx @ravikumarsurya/mdx-ui init in the terminal |
Psy-Phy: Add Component |
Browse all 52 components and install selected ones |
Right-click any .md / .mdx file for quick access to Toggle Preview, Insert Component, and Export.
Editor title bar
When a .md or .mdx file is active, a Ψ|Φ icon appears in the top-right of the editor:
| Icon state |
Meaning |
Click action |
| Ψ|Φ (full opacity) |
Auto-preview is on |
Turn auto-preview off |
| Ψ|Φ (faded + slash) |
Auto-preview is off |
Turn auto-preview on |
This toggles psyphy.autoOpenPreview globally without opening Settings.
Component Palette
Click the Ψ|Φ icon in the Activity Bar (left sidebar) to open the Component Palette. Browse all available components and click any entry to insert it at the cursor.
Export as MDX
The export command does three things in one step:
- Transforms your markdown using the remark-mdx-ui plugin
- Writes a
.mdx file with the correct component import headers
- Runs
npx @ravikumarsurya/mdx-ui add <components> in the terminal to install only what was used
The exported file is immediately usable in Next.js, Astro, or Vite+React projects that have Psy-Phy configured.
Snippets
Type these prefixes in any .md or .mdx file:
| Prefix |
Inserts |
callout |
> [!NOTE] callout |
callout-warn |
> [!WARNING] callout |
callout-danger |
> [!CAUTION] callout |
callout-tip |
> [!TIP] callout |
datatable |
Markdown table with 3 columns |
steps |
Numbered list (1. 2. 3.) |
highlight |
==text== |
mermaid |
Mermaid code fence |
mermaid-flow |
Mermaid flowchart |
mermaid-seq |
Mermaid sequence diagram |
Hover documentation
Hover over any transformed syntax to see:
- Which component it maps to
- The resolved variant/type
- All available props
- A before/after transform example
Diagnostics
The extension highlights problems before export:
- Warning — markdown table rows with column count mismatches (breaks DataTable)
- Info —
==highlight== syntax used while enableHighlight is off
Settings
| Setting |
Default |
Description |
psyphy.autoOpenPreview |
true |
Open preview panel automatically when a .md/.mdx file is opened |
psyphy.enableSteps |
false |
Transform numbered lists to <Steps><Step> |
psyphy.enableHighlight |
false |
Transform ==text== to <Highlight> |
Status bar
The status bar item (bottom-right) shows your project's Psy-Phy state at a glance:
✓ Psy-Phy · 3 components used — project initialized, current file uses 3 components⚠ Psy-Phy: not initialized — click to run init
Click to open the add-component picker (if initialized) or run init (if not).
Requirements
- VS Code 1.85+
- Node.js 18+ (for the export/init commands that run the CLI)
- Internet connection for the Tailwind CDN used in the preview panel
License
MIT © suryaravikumar-space
