gitwtfhub

wtf is claude-live-preview?

dev-gav/claude-live-preview — explained in plain English

Analysis updated 2026-05-18

1JavaScriptAudience · developerComplexity · 2/5Setup · easy

TL;DR

A plugin for Claude Code that automatically shows Claude's responses in a nicely formatted live view, in your browser or code editor, updating every time Claude finishes writing.

Mindmap

mindmap
  root((repo))
    What it does
      Live response preview
      Browser or editor view
      Auto-updates
    How it works
      Hook on response finish
      Local server for browser
      Markdown file for editor
    Settings
      Toggle auto-mirroring
      Pick viewer mode
      Set port and history
    Requirements
      Claude Code with plugins
      Node 16 or higher
      Editor CLI for editor mode
    Use cases
      Read long AI responses
      Browse recent history
      Theme-aware rendering
    Audience
      Claude Code users
      Developers

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Why would anyone build with this?

REASON 1

See Claude's answers in a clean, formatted view that updates automatically after each response.

REASON 2

Browse through recent Claude responses without losing your place when a new one arrives.

REASON 3

View Claude responses directly inside your code editor with real-time updates.

REASON 4

Keep a history of past Claude responses as plain markdown files on your computer.

What's in the stack?

JavaScriptNode.js

How it stacks up

dev-gav/claude-live-preview0xmukesh/docusaurus-tutorial1tsmejp/palworld-docker-wine
Stars111
LanguageJavaScriptJavaScriptJavaScript
Last pushed2021-12-27
MaintenanceDormant
Setup difficultyeasyeasymoderate
Complexity2/52/54/5
Audiencedeveloperdeveloperops devops

Figures from each repo's GitHub metadata at analysis time.

How do you spin it up?

Difficulty · easy Time to first run · 5min

Requires Claude Code with plugin support and Node.js 16+, editor mode additionally needs your editor's CLI tool on your path.

Wtf does this do

{"i":0,"repo":"dev-gav/claude-live-preview","stars":1,"lang":"JavaScript","ok":true,"char_count":1947,"text":"This is a plugin for Claude Code, which is a tool for working with an AI assistant called Claude. The plugin is called live-preview, and it does one simple thing: every time Claude finishes writing a response, that response gets displayed in a nicely formatted view. You can see it in your web browser or inside your code editor, and the view updates automatically without you needing to refresh anything.\n\nTo use it, you need Claude Code with plugin support and Node.js version 16 or higher installed on your computer. If you want to use the editor mode, you also need your editor's command line tool available. Installation involves adding the plugin marketplace and then installing the plugin through Claude Code's slash command system, followed by a restart or reload.\n\nOnce installed, you get a single command that controls everything. You can turn automatic mirroring on or off, choose whether to view responses in a browser or your editor, check the current status, change the port number, and decide how many past responses to keep browsable. You can also just ask Claude in plain language to push a response to your preview or turn the live view on or off, and it will understand.\n\nIn browser mode, a small local server runs on your machine and sends updates to a web page. The page renders markdown text cleanly, follows your light or dark theme preference, and lets you page backward through recent responses without losing your place when a new one arrives. In editor mode, the response is written to a file that your editor can display and update in real time. The plugin keeps a history of past responses as plain markdown files on your computer.\n\nUnder the hood, a hook fires whenever Claude finishes responding, captures the final message, and pushes it to whichever viewer you have configured. The hook is designed to never interfere with Claude Code itself, and all errors are logged quietly. The plugin stores its configuration and history in a folder within your Claude Code directory.","error":null}

Yoink these prompts

Prompt 1
Install the claude-live-preview plugin in Claude Code and turn on live preview in browser mode so I can see Claude's responses update automatically.
Prompt 2
Configure claude-live-preview to open responses in my editor instead of the browser, and keep the last 20 responses browsable.
Prompt 3
Set up claude-live-preview on a custom port and show me how to toggle auto-mirroring on and off using the slash command.
Prompt 4
Show me how to ask Claude in plain language to push a response to the live preview and turn the live view on.

Frequently asked questions

wtf is claude-live-preview?

A plugin for Claude Code that automatically shows Claude's responses in a nicely formatted live view, in your browser or code editor, updating every time Claude finishes writing.

What language is claude-live-preview written in?

Mainly JavaScript. The stack also includes JavaScript, Node.js.

How hard is claude-live-preview to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is claude-live-preview for?

Mainly developer.

View the repo → Decode another repo

This repo across BitVibe Labs

Don't trust strangers blindly. Verify against the repo.