关于 PreviewPane
我们致力于为开发者提供最优秀的代码预览和分享工具
让代码展示变得优雅，让知识分享变得简单
产品使命
PreviewPane 是一款专为前端开发者、设计师和教学场景打造的网页端代码编辑与图片导出工具。我们的目标是让用户在浏览器中轻松编辑 HTML + CSS 代码，并能实时预览运行效果，最终导出为高质量的图片文件。
核心功能特性
基于需求文档设计的专业功能，满足开发者的实际需求
EditorPanel
支持 HTML + CSS 代码编辑，具备语法高亮功能，使用 monospaced 字体，提供默认示例代码
PreviewPanel
实时渲染 HTML + CSS，所见即所得，页面显示效果与导出图片完全一致，不执行 JavaScript
导出代码图片
将 EditorPanel 中的代码渲染成图片，保持编辑器原有样式（背景、字体、边框、圆角）
导出运行效果
将 PreviewPanel 渲染的效果导出为 PNG，确保图片与页面效果完全一致
多种导出样式
支持 Default、Card、macOS 风格、Terminal 风格四种不同的导出样式主题
响应式设计
移动端上下排列，桌面端左右排列的响应式布局，使用 TailwindCSS 构建
技术架构
前端技术栈：前端技术栈：PreviewPane 基于现代 Web 技术构建，使用 React + Next.js 框架，TailwindCSS 实现快速样式开发和响应式布局，Monaco Editor 提供专业的代码编辑体验。
核心实现：核心实现：编辑器通过 useState 保存代码状态，PreviewPanel 使用 dangerouslySetInnerHTML 实时渲染 HTML + CSS，导出功能基于 html-to-image 库生成 PNG 图片，file-saver 库处理文件下载。
设计理念：设计理念：遵循所见即所得原则，确保导出图片与页面显示效果完全一致。不执行用户 JavaScript 代码，避免安全风险。所有样式内联或放在 style 标签中，保证导出成功。