MuseView 妙览 HTML 预览工具 · OneMuse
V1.0 纯前端本地运行 把代码，变成看得见的网页。
无需安装软件与后端服务，浏览器本地安全运行 HTML / CSS / JS，支持多视口预览、链接二维码分享及 PNG / PDF 导出。
当前正在查看分享链接中的 HTML 内容 为保护您的本地草稿，当前暂未覆盖您原有的本地保存记录。
松开鼠标即可导入本地 .html / .htm 文件并实时预览
检测到代码引用了本地相对路径资源，单文件预览无法自动读取您电脑上的关联文件。
点击选择本地 HTML 文件，或将文件拖入此处
支持 .html 与 .htm 格式 · 纯浏览器本地 File API 读取，绝不上传服务器
museview-preview.html
0 KB · 已载入编辑器并实时预览
文件已加载到工作区，您可以直接切换到 HTML Code 标签继续编辑源码，或直接下载修改后的新文件。
关于本地 HTML 关联资源的说明： 1. 内嵌样式与脚本：文件内的 <style>、<script> 及 Base64 图片可 100% 完整还原运行。
2. 外部网络资源 (CDN/图片)：按浏览器标准策略加载；若受跨域 CORS 限制会在导出图片时给出提示。
3. 本地相对路径资源 (如 ./style.css、./img/a.png)：受浏览器安全沙箱保护，单文件导入无法自动读取您硬盘上的其他同目录文件，建议合并为内联代码后预览。
行 1, 列 1 0 字符 · 0 行 文件: museview-preview.html
本地已自动保存
实时就绪
当前编辑器没有 HTML 内容
请在左侧粘贴 HTML 代码、拖入本地 .html 文件，或点击下方按钮加载内置示例。
预览环境诊断与错误监控（区分解析错误 / JS 运行时错误 / 资源加载错误）
当前无运行错误。
文档结构: 完整 HTML5 文档 视口: 自适应桌面宽度
安全边界: Sandbox 隔离 (禁止访问主应用 DOM/存储)
Core Capabilities

核心功能特性

围绕单文件 HTML 查看、调试、分享与导出打造的高效纯前端工作流

01

实时 HTML 预览

粘贴或编写完整 HTML5 文档及普通代码片段，自动识别结构并在独立沙箱中实时渲染内嵌 CSS 与 JavaScript 交互，支持桌面、平板与手机响应式视口切换。

02

本地文件查看

无需安装庞大的 IDE 或配置本地服务器，直接点击选择或拖入 .html / .htm 文件即可在浏览器本地解析查看、在线修改并重新下载保存。

03

分享与导出

支持基于 Gzip + Base64URL 的无后端代码压缩分享链接与离线二维码生成，支持将当前网页预览画面导出为高清 PNG 图片或标准 PDF 文档（支持直接下载 .pdf 或矢量打印）。

Workflow

三步快速上手

无需注册登录，打开网页即可完成从代码到可视页面的全流程

第一步

输入或导入 HTML

在左侧 HTML Code 模式粘贴代码，或切换至 HTML File 模式将本地 .html / .htm 文件拖入工作区。

第二步

实时查看运行结果

右侧沙箱视口将自动渲染网页并执行内嵌 JavaScript。您可拖动中轴调整分栏、切换手机/平板视口或开启独立全屏预览。

第三步

分享链接或导出文件

修改满意后，可一键复制代码、下载完整 HTML 文件、生成带二维码的分享链接，或将预览效果导出为 PNG 图片与 PDF 文件。

Use Cases

典型应用场景

专为 AI 时代网页生成验证、前端快速调试与跨设备分享设计

预览 AI 生成的 HTML 页面

将大模型生成的单文件网页、数据看板或小游戏代码直接粘贴进来，一秒验证真实视觉与交互效果。

检查 HTML、CSS 与 JavaScript

提供实时防抖渲染与分类错误捕获面板，快速定位未闭合标签、JS 运行时异常与静态资源加载问题。

查看本地网页文件

收到他人发来的单个 HTML 报表或说明文件时，直接拖入浏览器查看与微调文案，无需安装任何开发工具。

测试响应式页面

内置桌面、平板（768px）、手机（375px）及自定义像素宽度视口，真实触发页面内的 CSS Media Queries 媒体查询。

分享独立网页原型

无需购买服务器，通过 URL Hash 压缩编码即可将小型交互原型变成一条链接或二维码发给同事与客户预览。

导出网页图片与 PDF

一键将渲染后的网页视图保存为高清 PNG 长图或标准 PDF 归档文件，方便插入汇报文档或离线留存。

FAQ

常见问题解答

关于运行机制、安全边界、分享限制与导出原理的详细说明

HTML 在线预览工具（MuseView 妙览）是一款直接在浏览器内解析、运行并展示 HTML、内嵌 CSS 和 JavaScript 代码的轻量级 Web 应用。它能将纯文本源代码实时转化为可视化的交互网页，并提供多设备尺寸测试、代码下载、链接分享与 PNG/PDF 导出能力。
完全不需要。MuseView 基于现代浏览器原生标准构建，无需安装 VS Code、Node.js 或任何浏览器插件，也不用注册账号，打开网页即可直接使用全部功能。
支持。您的代码运行在受严格安全边界保护的 sandbox="allow-scripts allow-forms allow-modals allow-popups" 隔离 iframe 中，支持 DOM 操作、事件监听、Canvas 绘图、定时器及交互逻辑，同时严禁预览脚本访问 MuseView 主页面的 DOM 或本地存储。
您可以通过三种方式导入：① 点击左侧工具栏的「导入」按钮选择本地 .html 或 .htm 文件；② 切换到「HTML File」标签页点击或拖入文件；③ 直接将电脑上的 HTML 文件拖拽到核心工作区的任意位置。
不会。MuseView V1.0 是纯前端应用，使用浏览器本地 FileReader API 读取您选择的文件，所有代码解析、预览、自动保存（保存在您本机浏览器的 localStorage）和文件导出均在本地完成，绝不会默认将您的代码或文件上传至任何外部服务器。
当您仅导入单个 HTML 文件时，如果代码中引用了本地相对路径资源（例如 ./images/banner.png 或 ./style.css），浏览器出于安全沙箱限制不允许网页擅自读取您电脑硬盘上的其他关联文件。建议将图片转为 Base64 Data URI 或使用可公开访问的 HTTPS 图片地址。
在无后端模式下，MuseView 采用浏览器原生 CompressionStream('gzip') 对当前 HTML 源码进行高倍率压缩，并转换为 URL 安全的 Base64 编码写入网址 Hash 参数（#mv=gz:...）。接收者打开该链接时，浏览器会在本地自动解压并还原网页预览。请注意：分享链接中包含完整源码，请勿放入密钥或密码等敏感信息。
有。由于不同浏览器、聊天软件和网关对 URL 长度有限制，MuseView 将压缩编码后的分享参数安全上限设定在约 32 KB（对应常规 HTML 源码约 60–120 KB）。若代码体积超出上限，系统会明确提示并引导您使用「下载 HTML」文件的方式进行分享，避免生成被截断的失效链接。
PNG 导出在隔离沙箱内通过序列化预览 DOM、内联计算样式与 Canvas 图像合成生成。如果预览网页中引用了未配置跨域允许头（Access-Control-Allow-Origin）的外部第三方网络图片或外部字体，浏览器的 Canvas 污染安全机制（Tainted Canvas）会阻止读取像素，此时导出引擎会自动替换为安全占位以保证整体截图成功完成。
MuseView 提供两种真实的浏览器端 PDF 导出方案：① 直接生成并下载 .pdf 文件：将当前预览画面按 A4 页面比例分页渲染并封装为标准 PDF 1.4 文档直接下载；② 调用系统打印另存为矢量 PDF：创建仅包含当前预览网页的独立打印视图，您可在浏览器打印面板中选择「另存为 PDF」获得保留可选中文本的矢量 PDF。
完全支持。在手机或窄屏设备上，MuseView 会自动切换为顶部分段控制布局（「代码与文件」/「实时网页预览」一键切换），保证代码编辑区拥有充足的输入视野且不被软键盘遮挡核心操作按钮，分享面板与二维码也会自适应屏幕宽度。
您可以点击右侧预览栏的「诊断」按钮展开错误监控抽屉。系统会区分展示「HTML 结构/解析提示」、「JavaScript 运行时报错（含行号与错误堆栈信息）」以及「静态资源加载失败」。修改代码后可随时点击「刷新」重新运行，也可以点击「重置示例」恢复到初始可用状态。