HTML CSS JS 在线编辑器

编写、运行和分享代码片段，无需任何配置。

预览自动预览

控制台

控制台输出会显示在这里。

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Lorem Ipsum Demo</title>
        <style>
            body { font-family: system-ui, sans-serif; padding: 24px; max-width: 680px; }
            p { color: #333; line-height: 1.6; }
        </style>
    </head>
    <body>
        <h1>About the project</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi.</p>
        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
            cupidatat non proident, sunt in culpa qui officia deserunt.</p>
    </body>
</html>

用实时预览编写 HTML、CSS 和 JavaScript

这是一个免费的 HTML、CSS 和 JavaScript 在线编辑器，带有真实的浏览器预览。编辑 index.html、styles.css 和 script.js 三个文件，每次修改后 iframe 都会重新渲染。不需要本地服务器，不需要 Live Server 插件，也没有构建步骤。

编辑器基于与 VS Code 相同的引擎，HTML 标签、CSS 属性和 JS 自动补全都能用。实时预览会在你浏览器中的沙盒 iframe 里渲染页面。无论是画一个落地页草稿、试验 CSS grid，还是编写原生 DOM 脚本，都很合适。

这个 HTML、CSS 和 JavaScript 在线编辑器好用在哪里

即时实时预览：编辑 HTML、CSS 或 JS，每次修改后 iframe 都会重新渲染。没有构建步骤，也不用手动刷新。
HTML、CSS 和 JavaScript 语法高亮与自动补全。Emmet 风格的快捷输入和即时反馈，全部来自 VS Code 同款编辑器引擎。
零安装：不需要 Node、Live Server 或本地 HTTP 服务器。在任何浏览器中都能预览 HTML、CSS 和 JS。
三个文件一起实时预览：HTML、CSS 和 JavaScript 同时编辑，每次修改后都在 iframe 中重新渲染，没有构建步骤。

在 HTML、CSS 和 JavaScript 在线编辑器里可以做什么

一个落地页：结构清晰的 HTML、现代 CSS（grid、flex、自定义属性），再加一点 JavaScript，全部在预览 iframe 中实时刷新。
CSS 实验：grid 布局、flex 对齐、动画和响应式媒体查询，每次修改都能立即看到视觉效果。
原生 JavaScript DOM 脚本：querySelector、事件监听器、fetch 请求、localStorage，配合实时浏览器预览，反馈即时可见。

HTML、CSS 和 JavaScript 在线编辑器常见问题

HTML、CSS 和 JavaScript 在线编辑器是免费的吗？

是的，HTML、CSS 和 JavaScript 在线编辑器可以免费使用。无需注册，不需要本地服务器，也不需要 VS Code 的 Live Server 插件，写完就能预览。

需要本地服务器或 VS Code Live Server 吗？

不需要安装。你不需要 VS Code Live Server、本地 HTTP 服务器或 Node。浏览器会直接在 iframe 中预览你的 HTML、CSS 和 JS 文件。

HTML、CSS 和 JavaScript 在线编辑器能在手机上用吗？

可以。HTML、CSS 和 JavaScript 在线编辑器支持电脑、平板和手机浏览器。编辑器、预览 iframe 和文件标签页都会自动适配小屏幕。

在这里预览 HTML 和 JavaScript 安全吗？

安全。你的 HTML、CSS 和 JavaScript 在浏览器中的沙盒预览 iframe 里渲染，与外层的 Coddy 页面相互隔离。

试过在线编辑器之后，怎么学习 HTML、CSS 和 JavaScript？

修改示例 HTML、CSS 和 JS，点击运行，看预览如何变化。想要更系统地学习时，Coddy 的互动 HTML、CSS 和 JavaScript 课程会带你从选择器一路学到完整的网页。

适合 Web 的实用工具

与 Web 在线编辑器搭配使用的免费浏览器工具，全部来自 Coddy。

查看全部开发者工具 Web 速查表嵌入 Web 编辑器比较编程学习平台