Claude Code + Live Preview, side by side.
English
SideKick is a VSCode extension that combines a Claude Code/HERMES or other ai agent terminal on the left with a live HTML preview on the right. Click elements in the preview to edit text, colors, fonts, and images visually — changes sync back to source in real time. Send selected elements to Claude Code for AI-powered code generation.
Features
- Split View — Claude Code terminal (left) + live preview (right)
- Visual Editing — Click any element to edit text, color, font-size, alignment, images
- Live Source Sync — Edits flow back to the VSCode editor buffer automatically
- Reload to Revert — Discard live edits and restore disk content with one click
- Multi-Tab — Preview multiple HTML files simultaneously
- Snapshot Export — Bake live edits into a new HTML file
- Print to PDF — One-click PDF export
- Presentation Mode — Fullscreen preview for demos
- Send to Claude — Pass selected elements to Claude Code for AI-driven coding
Getting Started
- Open an HTML file in VSCode
- Run
SideKick: Openfrom the command palette, or right-click the HTML file →SideKick: Open - Edit visually in the right panel, or send elements to Claude Code
- Use the toolbar: Select, Reload, Annotate, Move, Snapshot, Print PDF, Present, Send to AI
Requirements
- VSCode 1.85+
- Claude Code CLI (optional — for AI features)
中文
SideKick 是一个 VSCode 扩展，将 Claude Code/HERMES等AI终端（左）与 实时 HTML 预览（右）并排显示。点击预览中的元素即可可视化编辑文字、颜色、字体、图片——修改实时同步回左侧源码。选中元素发送给 Claude Code 进行 AI 编程。
功能
- 分屏布局 — 左侧 Claude Code 终端 + 右侧实时预览
- 可视化编辑 — 点击元素直接修改文字、颜色、字号、对齐、图片
- 实时同步 — 编辑自动同步到 VSCode 编辑器缓冲区
- 一键还原 — 点击 Reload 放弃实时编辑，恢复到磁盘内容
- 多标签 — 同时预览多个 HTML 文件
- 快照导出 — 将实时编辑烘焙成新的 HTML 文件
- PDF 打印 — 一键导出 PDF
- 演示模式 — 全屏预览，适合演示
- 发送给 AI — 选中元素发送给 Claude Code 进行 AI 编程
快速开始
- 在 VSCode 中打开 HTML 文件
- 命令面板运行
SideKick: Open，或右键 HTML 文件 →SideKick: Open - 在右侧面板可视化编辑，或发送元素给 Claude Code
- 使用工具栏：选择、刷新、标注、移动、快照、打印 PDF、演示、发送给 AI
环境要求
- VSCode 1.85+
- Claude Code CLI（可选——AI 功能需要）