CF Error Page Editor

一个极简、纯前端的经典 Cloudflare 风格 522 错误页编辑器. 左侧修改内容, 右侧实时预览, 最后下载一个可独立部署的 522.html.

Unofficial. This project is not affiliated with or endorsed by Cloudflare, Inc. It does not include the official Cloudflare logo or hotlink official assets.

功能

• 固定的经典三段诊断布局: Browser / Cloudflare / Host.
• 可编辑错误码、标题、域名、状态、说明内容、Ray ID 和页脚.
• 精确的 Desktop 1280px 与 Mobile 390px 预览.
• 预览与下载共用同一个 renderer.
• 下载的 HTML 内联 CSS 和原创 SVG pictograms, 不依赖字体、CDN、API 或 JavaScript.
• 配置自动保存在当前浏览器的 localStorage.
• 用户文字在 renderer 边界统一转义, URL 仅接受 http 和 https.

本地开发

需要 Node.js 20.19+ 和 pnpm 10.

pnpm install
pnpm dev

质量检查:

pnpm typecheck
pnpm test
pnpm build

自托管

pnpm install --frozen-lockfile
pnpm build

将 dist/ 作为普通静态站点发布即可. 项目没有 backend、账号、遥测或环境变量. vite.config.ts 使用相对 base, 因而也可部署到 GitHub Pages 子路径.

使用生成文件

点击 Download HTML 后会得到 <error-code>.html. 将它复制到 Web server 的静态目录, 再使用服务器原生的 error page 配置指向该文件. 服务器是否返回正确 HTTP status 由你的 server 配置决定, HTML 本身不能改变响应状态码.

English

CF Error Page Editor is a focused, client-only editor for one classic Cloudflare-style 522 diagnostic page. Edit the copy and service states on the left, inspect an exact sandboxed preview on the right, and download one self-contained HTML file.

The generated page uses inline CSS and original generic SVG pictograms. It makes no automatic external requests and remains readable with JavaScript disabled because it includes no JavaScript. Configuration stays in local browser storage.

For local development and self-hosting, use the commands above. Publish the generated dist/ folder with any static host.

License

Application source is licensed under MIT. Original generated layout code and pictograms have a separate no-attribution grant described in OUTPUT_LICENSE.md. User-entered content and third-party trademarks are not relicensed.