如何在 web 页面上实时预览 HTML CSS JS 效果

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

请不要在回答技术问题时复制粘贴 AI 生成的内容

这是一个创建于 221 天前的主题，其中的信息可能已经有所发展或是发生改变。

因为最近在入门 html css Javascript ，也会跟着书实践一下，代码都是很小的代码片段，过后就丢弃了。但是将来想用类似效果的时候就又忘记了，就想着在已有的 nextjs + react + tailwindcss 技术栈的网站上支持一下这个功能。

看到好多网站都有类似的效果，但是由于本人是个前端小白，所以在这里请教一下各位大神，有没有好的方案，尽可能简单，毕竟它就是用来写一点点代码片段，预览一下效果的“小玩具”。

感谢！

第 1 条附言 219 天前

感谢所有提供帮助的朋友。最终使用了 iframe 方案，在豆包的帮助下完成。感谢！

实时预览

HTML CSS JS

Next.js

20 条回复 2025-05-12 09:38:39 +08:00

vfs

221 天前

看到这个网站做的就非常好： https://playcode.io/html5 ，不知道做到这样有多大难度

hausen

221 天前

感觉这种用 cursor 能做

wanf1020

221 天前

最简单的 innerHTML

rimworld

221 天前

iframe 不就可以

radishzz

221 天前

嵌入 codepen ？

molvqingtai

221 天前

要简单，一行代码就可以做到

https://github.com/umpox/TinyEditor

quietDown

221 天前

@molvqingtai 第一件见的这个，有点意思

Plumbiu

221 天前

写过一篇博客： https://blog.plumbiu.top/posts/blog/implement-playground

简单点，下面这行代码就能用

```ts
import React, { createElement } from 'react'
import { transform, Options } from 'sucrase'

type Scope = Record<string, any>

const transfromOptions: OptiOns= {
transforms: ['jsx', 'flow', 'imports'],
}

function evalCode(code: string, scope: Scope) {
const _require = (k: keyof Scope) => {
return scope[k]
}
const scopeKeys = Object.keys(scope)
const scopeValues = scopeKeys.map((key) => scope[key])
const _exports: Record<string, any> = {}
const fn = new Function('exports', 'require', ...scopeKeys, code)
fn(_exports, _require, ...scopeValues)
return _exports.default
}

interface PlaygroundPreviewProps {
code: string
scope?: Scope
}

export function Preview({ code, scope }: PlaygroundPreviewProps) {
const evalScope: Scope = {
react: React,
React: React,
...(scope ?? {}),
}
const mainCode = transform(code, transfromOptions).code
return createElement(evalCode(mainCode, evalScope))
}
```

Plumbiu

221 天前

又看了一眼，单纯 html 可以用 innerHTML ，安全点用 iframe 做。

如果有 css 样式隔离，可以用 iframe 喝 ShadowRoot 。React 的 ShadowRoot 可以用这段代码 https://github.com/Plumbiu/blog/blob/main/src/components/function/Shadow.tsx

importmeta

221 天前

楼上的都不是前端, VS Code 安这个 Live Server 插件就完事.

importmeta

221 天前

@importmeta 我审题错误了... 嵌入 codepen codesanbox 都行

pikko

221 天前

你要的就是漏上的 codepen / codesanbox

xe2vforesu

221 天前

iframe 就能实现，试试我这个
https://www.easydo.top/apps/webNew

gsw945

221 天前 via Android

用这个: https://github.com/vuejs/repl

UnluckyNinja

220 天前

尽可能简单那就是 codepen/jsfiddle 嵌入，最简单最省事。

siweipancc

220 天前 via iPhone

娱乐圈……

bapp

220 天前 via Android

data:text/html,<body Oninput="i.srcdoc=h.value+'<style>'+c.value+'</style><script>'+j.value+'</script>'"><style>textarea,iframe{width:100%;height:50%}body{margin:0}textarea{width:33.33%;font-size:18}</style><textarea placeholder=HTML id=h></textarea><textarea placeholder=CSS id=c></textarea><textarea placeholder=JS id=j></textarea><iframe id=i>

chenzw2

218 天前

@vfs 这种支持 vue 、react 项目结构，package.json 里的依赖也需要去拉取吧，应该需要后端支持的

vfs

218 天前

@chenzw2 啊，没看懂你说的。。。我当前用的 nextjs ，前后端都有

vfs

218 天前

@Plumbiu 挺喜欢你这个，奈何太菜了，看了博客也没明白要怎么实现