The ZyVOP Web Editor

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 Publishing DrawerCopy Anchor Link

Click the Settings cog in the top-right toolbar or click publish to open the metadata drawer:

• 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 (PNG, JPG, WebP, GIF up to 5MB, recommended 1600×840px).
• Taxonomy: Add tags with auto-complete suggestions.
• Series Selection: Assign the post to an existing multi-part series or create a new series.
• SEO & Social: Preview Google Search snippets and configure custom OG social cards.

5. Slash Commands (/)Copy Anchor Link

Type / on any blank line to access quick-insert blocks:

• Structure: Headings (H1, H2, H3), Bullet/Numbered Lists, Blockquotes, Dividers.
• Advanced: 3×3 Tables, Inline LaTeX Math Equations ($x_1$), FAQ Builder blocks, and multi-file Runnable Examples.
• Media & Embeds: Image uploader, GitHub Gists, YouTube, Vimeo, CodePen, StackBlitz, CodeSandbox, OneCompiler, JSFiddle, and PythonAnywhere-hosted pages. Paste a public PythonAnywhere URL such as https://username.pythonanywhere.com/ in Insert Embed. The hosted page must permit iframe embedding in its own security policy.
• AI Actions: Continue writing, generate outlines, suggest titles, TL;DR, or FAQs.

6. Draft Answer ReadinessCopy Anchor Link

Founding Pro includes a live 0–100 editorial heuristic while you write. The score reviews:

• opening or summary clarity;
• useful content structure;
• support for claims when the draft contains source-dependent statements;
• original evidence, examples, methodology, or limitations;
• topic coverage; and
• sentence-level reading flow.

Source support is marked not applicable when no source-dependent claim is detected, instead of awarding or removing points. Canonical URL and structured-data checks appear separately and do not change the editorial score.

7. Runnable Code ExamplesCopy Anchor Link

Use /Runnable Example to insert a multi-file TypeScript project into a draft. Add an optional display name, choose the start and test files, add up to 12 files, and run the tests in an isolated browser worker. The runner supports relative .ts and .js imports and the @zyvop/test helpers; it does not install packages or allow network access.

A passing result and its capped text output are saved with the example's file and test hash, compiler version, and date. Readers can expand the saved output. ZyVOP labels this as an author browser run. It is not an independent CI verification, and editing any project file clears the saved result.

Keyboard ShortcutsCopy Anchor Link

Auto-Save & Revision SafetyCopy Anchor Link

The editor utilizes a two-tier resilience strategy:

1. Local Storage Debouncing: Changes are debounced and saved locally to the browser's localStorage every second to prevent data loss from accidental tab closures or network drops.
2. Cloud Draft Syncing: Draft posts are automatically debounced and saved to the ZyVOP backend within 1.5 seconds of inactivity.