Build a simple CodePen-like app using only React, HTML, CSS, and JavaScript with no backend. The app shows three <textarea> editors (for HTML, CSS, and JavaScript) side-by-side or stacked, and a live Preview pane that instantly re-renders the output as the user types. The Preview pane should display the HTML + CSS + JavaScript entered by the user.
Features:
No authentication, no database, no persistence—everything is in the browser.
Each editor should be labeled ("HTML", "CSS", "JavaScript").
As the user edits code in any box, the Preview pane updates automatically.
Use an <iframe> and set its srcDoc to render the live code with sandboxing enabled.
Basic CSS for a neat, readable layout.
Example Code (React, single file):
import React, { useState } from "react";
export default function SimpleCodePen() {
const [html, setHtml] = useState('<h1>Hello World123</h1>');
const [css, setCss] = useState('h1 {\n color: blue;\n}');
const [js, setJs] = useState('console.log("Hello from JS!");');
const srcDoc = <html> <head> <style>${css}</style> </head> <body> ${html} <script> ${js} <\/script> </body> </html> ;
return (
<div style={{ display: "flex", gap: 16, padding: 24, height: "100vh", background: "#fafbfc" }}>
<div style={{ flex: 1, display: "flex", flexDirection: "column", gap: 16 }}>
<label>
<b>HTML</b>
<textarea
value={html}
onChange={e => setHtml(e.target.value)}
style={{ width: "100%", minHeight: 80, fontFamily: "monospace", fontSize: 16 }}
/>
</label>
<label>
<b>CSS</b>
<textarea
value={css}
onChange={e => setCss(e.target.value)}
style={{ width: "100%", minHeight: 80, fontFamily: "monospace", fontSize: 16 }}
/>
</label>
<label>
<b>JavaScript</b>
<textarea
value={js}
onChange={e => setJs(e.target.value)}
style={{ width: "100%", minHeight: 80, fontFamily: "monospace", fontSize: 16 }}
/>
</label>
</div>
<div style={{ flex: 1 }}>
<div><b>Preview</b></div>
<iframe
srcDoc={srcDoc}
title="preview"
sandbox="allow-scripts"
frameBorder="0"
style={{ width: "100%", height: "90%", background: "#fff", border: "1px solid #eee" }}
></iframe>
</div>
</div>
);
}
I'll create a simple CodePen-like app with three code editors and a live preview pane. This will be a single-page React application that runs entirely in the browser.
I've created a polished CodePen-like application with the following features:
useState to track the content of each editor 1srcDocThe app starts with sample code to demonstrate functionality - a styled heading with a gradient background and some JavaScript console logging.
The preview pane will show your combined HTML, CSS, and JavaScript output in real-time, just like CodePen! You can open the browser's developer console to see JavaScript output and any errors.
I'll enhance the CodePen app with Monaco Editor (the same editor used in VS Code) and create a proper tabbed interface for a more professional coding experience.
I've created a professional CodePen-like interface with Monaco Editor and a tabbed layout! Here are the key improvements:
The app now provides a much more professional coding experience with advanced editor features, making it feel like a real development environment!