新建HTML，即刻在线实时编辑、预览HTML/CSS/JS

HTML

格式化

支持Emmet，输入 p 后按 Tab键试试吧！

<head> ...

展开

</head>

<body>

            
                1
2
3
4
5
6
7
8
9
10
11

            
            <script type="importmap">
{
  "imports": {
    "react": "https://esm.sh.bi.cool/react@18",
    "react-dom/client": "https://esm.sh.bi.cool/react-dom@18/client"
  }
}
</script>

<!-- 示例代码 -->
<div id="root"></div>

</body>

CSS

格式化

            
                1
2
3
4

            
            /* 示例代码 */
body {
  text-align: center;
}

格式化

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

            
            // 示例代码
import React, { useState } from "react";
import ReactDOM from "react-dom/client";

function App() {
  const [title, setTitle] = useState("Hello 笔.COOL");
  return <>
    <h1>{ title }</h1>
    <i>一笔一划，绘就人生；一码一境，酷创未来。</i>
  </>
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

console.log("Hello 笔.COOL 控制台")

预览

控制台

清空