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:
Key Features:
- Three Code Editors: HTML (orange), CSS (blue), and JavaScript (yellow) with color-coded headers
- Live Preview: Updates automatically as you type in any editor
- Responsive Design: Works on both desktop and mobile devices
- Error Handling: JavaScript errors are caught and logged to console
- Clean UI: Modern design with Tailwind CSS styling
- Sandboxed Preview: Uses iframe with proper sandboxing for security
How it Works:
- State Management: Uses React's
useStateto track the content of each editor 1 - Live Updates: The preview updates instantly as you type in any textarea
- iframe Rendering: Combines HTML, CSS, and JavaScript into a complete document using
srcDoc - Responsive Layout: Grid layout that stacks on mobile and shows side-by-side on larger screens
Default Content:
The 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:
New Features:
Monaco Editor Integration
- Syntax Highlighting: Full syntax highlighting for HTML, CSS, and JavaScript
- IntelliSense: Auto-completion and error detection
- VS Code Experience: Same editor used in Visual Studio Code
- Line Numbers: Professional code editing with line numbers
- Word Wrap: Better code readability
Tabbed Interface
- Color-Coded Tabs: HTML (orange), CSS (blue), JavaScript (yellow)
- Easy Navigation: Switch between editors with a single click
- Active State: Clear visual indication of the current editor
Enhanced UI/UX
- Dark Theme: Professional dark interface like real CodePen
- Maximizable Preview: Toggle fullscreen preview mode
- Auto-run Toggle: Option to enable/disable automatic preview updates
- Reset Button: Quickly restore default code
- Responsive Layout: Works on different screen sizes
Better Error Handling
- JavaScript Errors: Displayed both in console and preview pane
- Safe Execution: Proper error catching and user feedback
Professional Layout
- Split View: Editors on left, preview on right
- Resizable Interface: Clean, modern design
- Loading States: Smooth loading experience for Monaco Editor
How to Use:
- Switch Tabs: Click HTML, CSS, or JavaScript tabs to edit different code types
- Live Preview: See changes instantly in the preview pane
- Maximize Preview: Click the maximize button for fullscreen preview
- Reset Code: Use the reset button to restore default examples
- Toggle Auto-run: Turn off auto-run if you want manual control
The app now provides a much more professional coding experience with advanced editor features, making it feel like a real development environment!