UD5工具箱
核心功能与编辑器特性
lit-html 模板测试器提供了完整的在线开发环境，从代码编辑到实时预览再到快捷操作，覆盖了模板测试的完整流程。
模板代码编辑器
工具的核心是一个功能完善的模板代码编辑器。编辑器支持 lit-html 的 tagged template literals 语法，用户可以使用 html 标签模板字面量来编写 HTML 模板。编辑器支持代码高亮显示，帮助用户区分 HTML 标签、JavaScript 表达式和字符串内容。编辑器还支持基本的代码缩进和自动换行功能，提供舒适的代码编写体验。
数据编辑器（JSON）
数据编辑器用于定义模板渲染时所需的数据。用户在数据编辑器中输入 JSON 格式的数据对象，这些数据会在模板渲染时通过表达式绑定到模板中的对应位置。数据编辑器支持标准的 JSON 语法，包括对象、数组、字符串、数字、布尔值和 null 等数据类型。数据修改后，运行渲染即可看到更新后的预览效果。
运行按钮与快捷键
点击"运行"按钮即可触发模板渲染，将编辑器中的模板代码和数据结合后在预览区域输出渲染结果。除了点击按钮外，工具还支持快捷键 Ctrl+Enter 来触发渲染操作。快捷键功能让用户无需频繁切换鼠标和键盘，保持编码流程的连续性和高效性。
实时预览功能
预览区域用于展示模板渲染后的 HTML 输出结果。渲染后的 HTML 内容会以可视化的形式呈现在预览区域中，用户可以直接看到最终的页面效果。预览区域支持完整的 HTML 渲染能力，包括样式应用、布局呈现和交互元素显示。实时预览机制让用户能够快速验证模板逻辑和样式效果。
预设示例库
工具内置了多种预设示例，涵盖了 lit-html 的常见使用场景。预设示例包括基础模板渲染、条件渲染（使用 when 指令）、列表渲染（使用 repeat 指令）、动态类名绑定（使用 classMap）、内联样式绑定（使用 styleMap）、条件属性绑定（使用 ifDefined）以及异步内容渲染（使用 until）等。用户可以从预设示例开始学习，通过修改示例代码来探索 lit-html 的各种特性。预设示例是快速入门和理解模板语法的最佳途径。
重置功能
重置功能可以将模板代码编辑器和数据编辑器恢复到初始状态。在进行了大量修改后，如果需要重新开始，点击重置按钮即可一键清除所有修改。重置操作会恢复编辑器的默认内容和预览区域的初始状态。
复制功能
复制功能允许用户一键将模板代码编辑器中的全部代码复制到系统剪贴板。复制后的代码可以直接粘贴到项目文件中使用。这一功能方便了用户将在测试器中调试好的代码快速迁移到实际项目中，减少了手动选择和复制的操作步骤。
丰富的全局变量支持
工具提供了完整的 lit-html 全局变量集合，用户在模板代码中可以直接使用这些变量而无需手动导入。全局变量包括核心渲染函数 html 和 render、列表渲染指令 repeat、条件渲染指令 when、动态样式指令 classMap 和 styleMap、条件属性绑定 ifDefined、异步渲染 until、多分支选择 choose、DOM 引用 ref、依赖追踪 guard、数据对象 data 以及预览引用 preview 等。丰富的全局变量让测试器能够支持几乎所有的 lit-html 模板场景。