The ZyVOP Web EditorCopy Anchor Link

The ZyVOP web editor (/write) is built from the ground up for software engineers and technical authors who prefer Markdown over clunky WYSIWYG rich-text editors. It combines keyboard-first writing with live visual previews, native Mermaid diagramming, and real-time AI assistance.

Key Editor FeaturesCopy Anchor Link

graph LR
    Editor[Markdown Input Pane] --> Parser[Fast AST Parser]
    Parser --> Preview[Live HTML / MDX Preview]
    Parser --> TOC[Dynamic Table of Contents]
    Parser --> Mermaid[Mermaid Diagram Renderer]
    Editor --> AICopilot[Inline AI Copilot\nCmd+K]
    Editor --> Uploader[Drag & Drop Media Uploader]

1. Dual-Pane & Zen Writing ModesCopy Anchor Link

• Split View: Side-by-side synchronized scrolling between your raw Markdown code and the compiled reader preview.
• Zen Mode: Distraction-free full-screen writing with dimmed UI chrome.

2. Live Diagramming with MermaidCopy Anchor Link

Write diagram syntax directly inside fenced code blocks:

```mermaid
sequenceDiagram
    Client->>Gateway: POST /publish
    Gateway->>Worker: Enqueue Task
    Worker->>Destinations: Cross-Post
```

The editor renders the interactive diagram in real time in the preview pane.

3. Drag-and-Drop Media UploadsCopy Anchor Link

• Drag any PNG, JPEG, GIF, or WebP image directly into the editor.
• The image is uploaded immediately to ZyVOP CDN storage, optimized with Sharp, and inserted as standard Markdown: ![Description](https://zyvop.com/uploads/posts/...).

4. Interactive Frontmatter InspectorCopy Anchor Link

Click the Settings cog in the top-right toolbar to open the metadata inspector:

• Canonical URL: Validate or set custom canonical links.
• Cross-Posting Toggles: Switch targets (DEV.to, Hashnode, Medium, Bluesky, WordPress, Mastodon, LinkedIn) on or off with instant visual indicators.
• Cover Image: Upload custom artwork or generate AI imagery with one click.
• Taxonomy: Add tags with auto-complete suggestions.
• Series Selection: Assign the post to an existing multi-part series or create a new series.

Keyboard ShortcutsCopy Anchor Link

Auto-Save & Revision SafetyCopy Anchor Link

The editor utilizes a two-tier resilience strategy:

1. Local Storage Debouncing: Every keystroke is saved to the browser's indexed local database to prevent data loss from accidental tab closures or network drops.
2. Cloud Draft Syncing: Periodic background autosaves sync drafts to the ZyVOP backend every 10 seconds.