docs
Live-Preview| modified | Saturday 9 May 2026 |
|---|
XLog’s live preview with hot-reload creates a seamless writing experience: edit in your text editor, save, and instantly see changes in your browser. No manual refresh needed.
Start XLog server
1xlog
2# => Server running at http://localhost:3000
Open browser to http://localhost:3000
Click “Edit” on any page
Edit and save in your text editor
Repeat - Continuous edit-save-preview loop
No build step, no manual refresh, no context switching.
XLog monitors markdown files for changes:
1. You save file in editor
2. OS notifies XLog of file modification
3. XLog re-renders markdown → HTML
4. WebSocket sends update to browser
5. Browser reloads page
This happens in milliseconds - feels instant.
Browser maintains persistent connection to XLog server:
Browser ←─ WebSocket ─→ XLog Server
│
├─ File change detected
└─ Sends reload signal
When connection drops (server restarts), browser auto-reconnects.
XLog reloads intelligently:
Open from XLog:
1xlog -editor "code"
Or set default:
1export EDITOR="code --wait"
VS Code benefits:
1export EDITOR="vim"
2xlog
Vim workflow:
:w to save triggers instant preview1export EDITOR="emacs"
2# or for daemon:
3export EDITOR="emacsclient -n -a emacs"
4xlog
Emacs benefits:
1export EDITOR="subl -w"
2xlog
1export EDITOR="nvim"
2xlog
Neovim advantages:
┌─────────────────┐ ┌─────────────────┐
│ │ │ │
│ Text Editor │ │ Browser │
│ │ │ (XLog preview) │
│ (markdown) │ │ │
│ │ │ │
└─────────────────┘ └─────────────────┘
Monitor 1 Monitor 2
Edit on one screen, preview on another.
┌──────────────────────────────┐
│ Editor │ Browser │
│ │ │
│ # Title │ Title │
│ │ │
│ Content... │ Rendered │
│ │ content │
└──────────────────────────────┘
50/50 split or 60/40 editor/browser.
Use virtual desktops/workspaces:
Desktop 1: Full-screen editor
Desktop 2: Full-screen browser
Swipe between them (macOS/Linux gesture, Windows virtual desktops).
1. Open page in browser
2. Click "Edit" (opens editor)
3. Write content
4. Save (Ctrl+S / Cmd+S)
5. Instantly see rendered result
6. Continue writing
Live preview enables fast iteration:
Type → Save → Preview → Adjust → Save → Preview
No mental context switch - stay in writing flow.
XLog renders exactly what your readers will see:
What you see is what readers get.
1. Create new post: `echo "# My Post" > blog/new-post.md`
2. Open in browser, click Edit
3. Write content with immediate feedback
4. See formatting, links, images in real-time
5. Publish when satisfied
1. Edit API docs
2. See code examples rendered with syntax highlighting
3. Verify links work
4. Check table formatting
5. Save knowing it's correct
1. Write notes during course/video
2. Save frequently to see structure
3. Add links to other notes
4. Verify everything renders correctly
1. Rough draft ideas quickly
2. See how they look rendered
3. Add backlinks to related pages
4. Refine over time with instant feedback
Don’t close the preview tab - leave it open and switch between applications. This maintains WebSocket connection for fastest reload.
Slow editors delay the write:
Vim/Neovim ← Fast save
VS Code ← Fast save
Emacs ← Fast save
Heavy IDEs ← May lag
Disable your editor’s markdown preview - use XLog’s instead:
VS Code:
1{
2 "markdown.preview.breaks": false,
3 "markdown.preview.doubleClickToSwitchToEditor": false
4}
Less resource usage, faster workflow.
For very large pages (5000+ lines):
1. Check file was saved
2. Check WebSocket connection
3. Clear browser cache
4. Restart XLog server
1Ctrl+C # Stop server
2xlog # Restart
1. Wrong file open?
2. Syntax error in markdown?
3. File permissions?
1ls -la page.md # Check if file is writable
1. Large knowledge base?
2. Slow disk I/O?
3. Many browser extensions?
1xlog
1xlog -build ./public
Use hot-reload while writing, static build when deploying.
Edit multiple pages simultaneously:
1. Open Page A in browser
2. Click Edit (opens in editor tab 1)
3. Open Page B in new browser tab
4. Click Edit (opens in editor tab 2)
5. Switch between editor tabs
6. Each save reloads corresponding browser tab
Combine live preview with version control:
1. Edit page with live preview
2. Save when satisfied
3. Git: add, commit changes
4. Continue editing
Terminal: git add page.md && git commit -m "Add section on X"
While XLog doesn’t support real-time collaboration, you can:
1. Person A writes, commits, pushes
2. Person B pulls, reviews in live preview
3. Person B edits, commits, pushes
4. Repeat
Use: Git for coordination, live preview for review
Hugo, Jekyll, 11ty:
Edit → Save → Run build command → Refresh browser
Manual, slow iteration.
XLog:
Edit → Save → (automatic)
Zero-friction workflow.
Obsidian:
XLog:
Both have excellent live preview - XLog’s is web-based.
Notion:
XLog:
XLog trades WYSIWYG for editor freedom and offline capability.
See results instantly:
No guessing - just save and see.
Stay in writing flow:
Think → Write → See → Adjust → Write...
No context switch to build/refresh breaks concentration.
Know what you’re publishing:
Preview matches deployed version exactly
No surprises after deployment.
Understand markdown faster:
Try syntax → Save → See result → Learn
Perfect for markdown beginners.
Write paragraph → Save → Review → Continue
Frequent saves = continuous feedback.
Ctrl+S / Cmd+S - Save (triggers reload)
Ctrl+K - Search
Alt+Tab - Switch editor ↔ browser
Minimize mouse usage for speed.
Editor + Browser = Perfect
Avoid:
- Multiple windows
- Complex tiling
- Distractions
Simple setup = better focus.
While writing:
Hot-reload is provided by the hotreload extension (enabled by default).
To disable (not recommended):
1xlog -disabled-extensions "hotreload"
Without hot-reload, you’ll need manual browser refresh.