Clone HackMD UI with AI & Add Collab via Velt SDK

Enforce Pixel-Perfect UI Cloning with Strict AI Prompts

Antigravity generates production-ready React components matching a reference image exactly, cutting manual design iteration from hours to minutes. Use a detailed prompt that prioritizes the image as absolute authority: ban assumptions, inventions, or improvements on layout, colors, spacing, typography, or behavior. Key rules include 'DO NOT restyle or improve anything' and 'THE IMAGE ALWAYS WINS.' This yields modular components like Header.tsx (toolbar/icons), Editor.tsx (textarea), Preview.tsx (rendered output), StatusBar.tsx (metadata), and Layout.tsx (split-pane wrapper). Result: responsive dark-theme two-pane layout (left: editable Markdown, right: live preview) with divider, toolbar icons, and GitHub buttons cloned faithfully, using CSS for precise matching of backgrounds, fonts, line heights, hovers, and scrollbars. No external UI libraries except Markdown parser; state lifted to parent for instant preview updates on keystrokes.

Build Live Markdown Preview with Shared React State

Implement a controlled textarea for Markdown input that updates a rendered preview in real time via lifted state in Layout.tsx. On change, setMarkdown triggers both panes instantly, ensuring predictability without debouncing complexity. Default to a template constant. Structure uses flexbox for full-viewport height/width: header (48px var), resizable split (flex:1 with 1px opaque divider), status bar. Editor value={markdown} onChange={setMarkdown}; Preview content={markdown} uses a parser like ReactMarkdown for HTML output. This local setup ships a functional single-user editor before collab, keeping code clean and focused.

Layer Real-Time Collab with Velt SDK Hooks

Velt eliminates WebSocket/CRDT/backend needs by providing managed live sync, anchored comments, presence, and notifications. Install @veltdev/react, wrap app in VeltProvider with API key. For comments, add around content—enables inline selection, threading, and persistence tied to text spans even as edits occur. Replace useState with useLiveState('hackmd-clone-markdown', defaultMarkdown) for multi-user edits: concurrent typing propagates instantly across sessions with built-in conflict resolution. Presence auto-tracks via VeltPresence, showing user avatars/cursors (e.g., in Header with staticUsers array and localStorage user switching). No restructuring: swap state sources, inject components. Trade-off: relies on Velt's service (free tier limits?), but accelerates shipping by avoiding infra (no DB for comments, no sync engine). Demo: Open https://hackmd-velt.vercel.app/ in multiple tabs to see live cursors, edits, comments. Repo: https://github.com/Studio1HQ/hackmd-clone/.