笔.COOL：在线前端代码编辑与即时预览
从新建项目开始
打开首页可以看到“新建 HTML”入口，以及“使用文档”“协作空间”“关注我们”等导航。首页下方还列出多个项目模板入口，包括单文件 HTML、Markdown、React、TypeScript、Vue 3、Vue Router、Element Plus、GSAP、Lodash、ThreeJS 和 D3JS React。使用者可以根据当前任务选择模板，减少从空白文件搭建演示项目的步骤。模板列表说明了编辑器面向的不只是静态 HTML，也覆盖常见的前端框架和演示代码；具体项目应按所用框架的模板启动。
一个项目中的多个文件
HTML/JS/CSS 项目页面把代码区和预览区并排显示。默认项目中可以看到 index.html、style.css、index.js 和 README.md 等文件标签，适合把页面结构、样式、脚本和说明分开放置。编辑器上方提供文件切换和代码格式化入口，页面另一侧显示运行结果，下方有控制台区域；这样浏览、修改和观察输出可以在同一页面中完成。
多文件项目通过入口文件引用其他文件。官方 v2.0 指南要求使用以 ./ 开头的相对路径，例如在 HTML 中引用样式或脚本文件时，路径要从项目文件位置出发。README 示例也展示了在模块代码中导入 CSS 和 Vue 文件。若资源无法加载，优先检查文件名、扩展名、相对路径以及大小写是否与项目内的标签一致；路径写成不符合要求的形式时，预览结果可能缺少相应样式或逻辑。
前端语言与依赖
使用指南将编辑器 v2.0 描述为支持现代前端技术栈的在线工具。文档列明，Vue 单文件组件会自动编译，React 项目支持 JSX 和 TSX，TypeScript 会实时编译为 ES6。对需要第三方模块的项目，文档说明可以在 package.json 中声明依赖，由编辑器自动引入模块；使用者仍需核对依赖名称是否拼写正确，以及所选模板是否符合项目的运行方式。
这类支持适合用来验证组件片段、准备课堂例子、制作可交互的前端演示，或在分享之前检查代码在浏览器中的呈现。它也便于把一个问题压缩成几份相关文件，让阅读者看到结构、样式与行为之间的对应关系。对于大型工程、复杂构建配置或需要本地私有依赖的项目，公开指南没有说明完整的本地开发环境兼容范围，因此应先用小型示例确认所需模块能否在在线项目中运行。
即时预览与调试
编辑器页面包含预览开关、刷新和全屏入口。修改入口 HTML 后，预览区域会呈现对应页面；在编辑区输入标题和段落时，可以直接看到页面更新。预览与代码并列显示，适合边写边观察布局，也便于教师在讲解时展示某段标记如何影响页面。打开预览后，还可以使用页面下方的控制台区域检查输出；官方指南同时建议在需要时使用浏览器开发者工具。
默认项目中包含一个简单页面，用户可以替换标题和正文来验证页面结构，也可以继续编辑样式文件调整背景、间距和文本对齐方式。遇到样式未生效时，可先确认 HTML 中引用了正确的 CSS 文件；遇到脚本没有运行时，可检查脚本入口和控制台输出。对组件或依赖相关问题，回到 README 和 package.json 核对项目文件引用与依赖声明，比把所有代码塞进一个文件更容易定位错误。
一个小型页面练习的流程
如果目标是做一个可以展示的页面，可以先从单文件 HTML 或 HTML/JS/CSS 项目进入。前者适合只有少量结构和样式的演示，后者会把页面、样式和脚本拆到不同文件，方便观察它们各自负责的部分。已有项目也可以从 React、Vue 或 TypeScript 模板开始，再按模板中的入口文件组织内容。
开始编辑时，可以先在 index.html 放入标题、正文和需要的组件，再切换到 style.css 设置背景、宽度、间距和对齐方式。交互逻辑可以写在 index.js 中，通过 HTML 引用脚本；多文件引用应使用 ./ 开头的路径。每完成一小段就观察预览，不必等所有代码写完才检查。这样能较早发现标签不闭合、样式文件未加载、脚本路径写错等问题。
若页面使用第三方模块，可在 package.json 中列出所需依赖，并检查名称拼写。依赖未生效时，官方指南建议先核对依赖声明和编辑器所识别的包名；普通脚本错误则可以查看编辑器控制台或浏览器开发者工具。展示效果确认后，再保存项目或下载副本。这个步骤适合课堂演示和简短的功能样例；较复杂的工程应先拆成可验证的小部分，确认模板和依赖能够运行后再继续扩展。
保存、下载与分享
编辑器顶部可见保存和下载入口。首页说明，登录后作品和项目可以使用云端存储，便于之后找回工作；未登录时也可以打开编辑页面并进行代码编辑。使用者需要留意，公开首页和使用文档没有列出价格表、免费额度或不同账户方案，因此不能仅凭“在线可用”推断所有功能都有相同的免费条件。
首页介绍了作品分享和嵌入场景，页面导航也提供作品社区入口。对于需要在个人博客或课程页面展示代码的用户，嵌入功能可作为一种呈现方式；在使用具体作品前，应确认该作品的访问权限和分享设置。若需要留存本地副本，可以使用下载入口；若希望跨设备继续编辑，则按站内提示登录并使用云端保存功能。
适用人群与使用边界
前端初学者可以用它练习 HTML、CSS 和 JavaScript，教师可以准备能够运行的课堂示例，开发者则可以快速搭建小型原型或复现可分享的问题。多文件视图、框架模板和即时预览让这些练习无需先配置本地工具链。若课程涉及 Vue、React 或 TypeScript，可从相应模板进入，并依据官方指南组织文件和依赖。
公开页面提供编辑器指南、旧版单文件编辑器说明、协作空间指南和嵌入功能说明；其中 v2.0 指南对框架支持、相对路径、package.json 和调试方法给出了较具体的说明。关注账号或联系社区可以通过网站“关注我们”页面查看。公开页面没有提供开源仓库入口，也没有说明完整的价格政策；需要这些信息的用户应以站点后续发布的正式说明为准。