CSS 混合模式在线演示 - mix-blend-mode 与 background-blend-mode 预览

最新

Handlebars 模板在线测试 - 输入数据和模板渲染

编写 Handlebars 模板并提供 JSON 数据，即时渲染结果，支持 helpers 自定义，纯前端执行。

开发工具 Handlebars 模板 测试 渲染

SVG路径补间变形动画生成器

在两个不同形状的SVG路径间自动生成流畅的过渡变形动画SMIL代码。

前端设计 SVG 动画 变形

网页开幕效果生成 - 两侧幕帘分开动画

生成网页加载时左右幕帘缓缓拉开的开幕式动画，自定义颜色和速度。

前端设计 加载 动画 幕帘

SVG转React组件 - 自动生成JSX代码

粘贴SVG代码，自动转换为React函数组件格式，处理属性名驼峰化。

开发工具 React SVG 组件

SVG噪点/颗粒质感生成器 - 叠加纹理背景

生成可平铺的细微颗粒、皱纸或帆布质感SVG滤镜，用于网页高级感。

前端设计 SVG 噪点 纹理

颜色变量命名工具 - 语义化名称建议

输入颜色十六进制值，根据色相和明度给出类似`--color-primary-500`的命名建议。

前端设计 CSS 命名 颜色

SVG转JSX组件生成器 - 自动化React SVG

粘贴SVG代码，将其转换为可复用的React组件，注意驼峰属性名和自闭合标签。

开发工具 JSX SVG 组件

SVG波浪生成器 - 自定义曲线波形背景

在线调节振幅、频率和层数，生成平滑的SVG波浪图形，直接复制代码或下载SVG。

前端设计 SVG 波浪 生成器

最新

XSS 过滤器测试沙盒 - 输入转义与过滤演示

输入可能的攻击向量，选择不同的转义或过滤策略，实时查看是否被安全处理，教育安全开发。

安全工具 XSS 安全 演示 过滤

最新

CSS 容器查询演示 - @container 根据父元素响应

设置容器宽度阈值，改变容器大小观察组件内部样式的变化，学习容器查询用法。

CSS CSS 容器查询 演示

基础风格迁移演示 - 载入预训练小型模型

利用预训练的轻量变换网络在浏览器中简单演示将图片转换成特定风格。

AI演示 AI 滤镜 风格迁移

Datalist 自动建议增强演示 - 动态数据源

演示如何动态更新 datalist 选项以实现搜索建议，并处理键盘选择。

HTML datalist HTML5 演示 自动建议

最新

Liquid 模板引擎预览器 - 在线测试 Shopify 模板语法

输入 Liquid 模板代码和 JSON 数据，实时查看输出，支持循环、过滤器等常用语法。

开发工具 Liquid 模板 测试 渲染

波的干涉图样生成器 - 双源波长颜色调节

调节两列波的频率、波长和位置，实时观看水面波干涉形成的明暗条纹图案。

教育工具 模拟 波干涉 物理

XML结构校验器 - 嵌套闭合与属性检查

检查XML的格式正确性，报告错误的标签闭合和属性缺失。

开发工具 XML 校验 结构 错误

热门

组件预览沙盒 - 隔离测试 React/Vue 组件

在一个隔离环境中渲染单个组件，调整 props 查看变化，类似于 Storybook 的轻量替代。

开发工具 沙盒 测试 组件 预览

结构化数据代码快速检查 - 验证 JSON-LD 语法与必填属性

粘贴 JSON-LD 代码，校验语法并提示常见类型的必填属性缺失，辅助 SEO 调试。

SEO JSON-LD SEO 结构化数据 验证

代码行数统计工具 - 忽略注释空行

粘贴代码，计算总行数、有效代码行数、注释行数和空行数。

分析工具 代码行数 分析 统计

WebSocket在线测试工具 - 连接/发送消息调试

输入WebSocket服务地址，建立连接，发送和接收消息，方便调试实时通信应用。

开发工具 WebSocket 测试 调试

SVG描边动画生成器 - 虚线描边生长效果

配置SVG路径的描边虚线偏移动画，生成引人注目的自绘线条特效代码。

前端设计 SVG 描边动画 生成器

点击劫持测试页面 - 检测 X-Frame-Options 缺失

尝试将目标 URL 加载到 iframe 中，检测是否缺少点击劫持防护头，并展示风险。

安全 iframe 安全 测试 点击劫持

颜色代码转换工具 - RGB,HEX,HSL,HSV互转

在线颜色格式转换器，实现RGB、HEX、HSL、HSV等颜色代码互相转换，实时预览颜色效果。

前端设计 HEX RGB 转换 颜色

z-index层级可视化 - 拖拽相互遮挡关系

添加多个色块拖拽顺序，直观表现层叠上下文与z-index值。

开发工具 CSS z-index 可视化 层级

热门

双摆混沌模拟 - Canvas实时物理演示

设置初始角度和杆长，实时渲染双摆运动的混沌轨迹，体验确定性系统的不可预测。

教育工具 双摆 模拟 混沌

DOM变动观察器 - 监听节点变化

配置监听目标，实时显示DOM节点的增删改及属性变化，辅助AJAX内容调试。

开发工具 DOM MutationObserver 监听

ResizeObserver演示 - 响应元素尺寸变化

拖拽改变一个div的大小，通过ResizeObserver API实时显示其新的宽度和高度。

前端设计 ResizeObserver 演示 监听

CIELAB颜色转换 - LAB与RGB/HEX互转

在线将LAB色彩空间值与RGB/HEX进行转换，辅助印刷和设计校色。

前端设计 LAB 转换 颜色

数字滤波器设计器 - 低通/高通/带通

在Canvas上绘制理想频率响应，并应用简单FIR滤波器对合成信号进行滤波，听音效对比。

信号处理 信号 滤波器 演示

SQLite WebAssembly 浏览器端演示 - 离线数据库

在浏览器中运行完整的SQLite数据库，创建表、插入查询数据，体验客户端强大的SQL能力。

开发工具 SQLite WASM 数据库 浏览器

最新

Web 字体优化建议器 - 分析字体加载对性能的影响

输入网页 URL，检测所用 Web 字体，评估加载策略并给出优化建议。

开发工具 Web 字体 优化 加载 性能