HTML Previewer

HTML Previewer - Online HTML CSS JavaScript Sandbox Editor

A professional HTML previewer and sandbox environment for testing HTML, CSS, and JavaScript code in real-time. Features split-screen editor, live preview, console output, fullscreen mode, templates, and more. Perfect for learning web development, prototyping, testing code snippets, and sharing examples.

What is an HTML Previewer/Sandbox?

An HTML Previewer (also called sandbox or playground) is an interactive environment where you can write and test HTML, CSS, and JavaScript code with instant visual feedback. It's useful for:

- Learning web development
- Testing code snippets
- Prototyping designs
- Debugging HTML/CSS issues
- Sharing code examples
- Experimenting with new features
- Quick demos and proofs of concept

Similar to CodePen, JSFiddle, and other online code editors, but simpler and runs entirely in your browser.

How do I use this HTML Previewer?

Using the previewer is simple:

1. Choose a tab: HTML, CSS, or JavaScript
2. Write your code in the editor
3. Click 'Run Code' or enable 'Auto-run' for instant preview
4. View the result in the Preview pane
5. Check the Console tab for JavaScript logs and errors
6. Use templates to get started quickly
7. Toggle fullscreen for larger workspace

Tips:
- Enable Auto-run for real-time updates as you type
- Use templates to learn common patterns
- Check Console for JavaScript errors
- Download your code when done

What are the editor features?

The editor focuses on a fast, no-friction workflow:

Code Editing:
- Separate HTML, CSS and JavaScript tabs
- Tab key inserts a 4-space indent
- Ctrl/Cmd+Enter runs the code
- Auto-saves to your browser (localStorage) so work survives a refresh

Preview Features:
- Live preview in an isolated, sandboxed iframe
- Auto-run or manual execution
- Live console that captures logs and runtime errors
- Responsive viewport bar (Mobile 375px, Tablet 768px, Desktop, or a custom width)
- Fullscreen preview mode

Layout Options:
- Horizontal split (editor and preview side by side)
- Vertical split (editor on top, preview below)

Other Features:
- Pre-built templates
- External CDN libraries (CSS and JS)
- Download as a single complete HTML file

How do I test responsive breakpoints / change the viewport width?

Use the viewport bar above the preview. Click Mobile (375px), Tablet (768px) or Desktop (full width), or type any custom pixel width and click Apply. The preview iframe is constrained to that width and centered, so you can check responsive breakpoints and media queries without resizing your whole browser window. Your chosen width is remembered for next time.

Can I use external libraries?

Yes! You can use external libraries by including them in your HTML:

CSS Libraries:
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

JavaScript Libraries:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

Common CDNs:
- jsDelivr: cdn.jsdelivr.net
- cdnjs: cdnjs.cloudflare.com
- unpkg: unpkg.com

You can include:
- CSS frameworks (Bootstrap, Tailwind, Bulma)
- JavaScript libraries (jQuery, Vue, React)
- Icon libraries (Font Awesome)
- Any public CDN resource

What's the difference between Auto-run and Manual run?

Two execution modes are available:

Auto-run (Real-time):
- Code runs automatically as you type
- Instant preview updates
- Great for quick experiments
- Updates with small delay (debounced)
- May slow down with complex code
- Best for HTML/CSS work

Manual Run:
- Code runs only when you click 'Run Code'
- More control over execution
- Better performance for complex code
- Prevents accidental infinite loops
- Best for JavaScript development
- Recommended for learning

You can toggle between modes anytime using the Auto-run checkbox.

How does the Console work?

The Console tab captures JavaScript output:

What it shows:
- console.log() output
- console.error() messages
- console.warn() warnings
- console.info() information
- Runtime errors and exceptions

Features:
- Color-coded message types (log, error, warn)
- Timestamps for each message
- Clear console button
- Preserves history during the session
- Shows error line numbers

Examples:
console.log('Hello World');
console.error('This is an error');
console.warn('Warning message');

The console helps you debug JavaScript code and see what your code is doing.

Why does my console.log not show up?

It now does. The preview injects a console hook before any of your JavaScript runs, so even a plain top-level console.log('x') with no setTimeout is captured and shown in the Console tab. If you still see nothing: make sure your code is in the JavaScript tab (not commented out), click Run Code (or enable Auto-run), then open the Console tab. Uncaught errors are shown in red with their line number.

How do I debug JavaScript errors with line numbers?

Any uncaught error or unhandled promise rejection is reported in the Console tab in red, prefixed with the line number where it was thrown (for example, 'Error at line 12: ...'). Write your script in the JavaScript tab, run it, then switch to Console. The error badge on the Console tab also shows how many errors the last run produced, and it clears automatically on the next clean run.

Does it support ES modules, async/await and fetch?

Yes. async/await, Promises and the fetch() API all work because your code runs in a real browser iframe. Network requests are subject to the target server's CORS policy, just like any web page. For ES modules, add type="module" to your own script tag inside the HTML pane (the auto-injected JavaScript pane runs as a classic script). External ES modules can be loaded from a CDN that ships +esm builds, such as jsDelivr.

What features and limitations should I know about?

Supported:
- Live HTML, CSS and JavaScript with instant preview
- Live console (logs, warnings, errors with line numbers)
- External CSS and JavaScript libraries from any public CDN
- Responsive viewport widths (Mobile, Tablet, Desktop, custom px)
- Download the result as one self-contained HTML file
- Auto-save to localStorage

Limitations:
- The preview runs in a sandboxed iframe (sandbox flags: allow-scripts, allow-modals, allow-forms, allow-popups, allow-same-origin). Some browser APIs that require a full top-level origin may be restricted.
- Cross-origin requests still obey CORS.
- There is no cloud save or shareable URL; use Download to keep or share your snippet.

Can I save or share my code?

You can save and share your work:

Save Options:
- Download as complete HTML file (includes CSS and JS)
- Copy code to clipboard
- Save manually in your browser (Ctrl+S works in editors)
- Use browser localStorage (code persists on refresh)

Sharing:
- Copy code and share via email, chat, etc.
- Download and attach to messages
- Include in documentation
- Paste into other tools

Note: This tool doesn't provide cloud storage or URLs for sharing. For permanent hosted sharing, use platforms like CodePen, JSFiddle, or GitHub Gists.

What are Templates?

Templates are pre-built code examples to help you get started:

Available Templates:
- Blank: Empty editor to start from scratch
- Basic HTML: Simple HTML5 structure
- Bootstrap Starter: Bootstrap 5 framework setup
- Flexbox Layout: CSS Flexbox example
- CSS Grid: Modern grid layout example
- CSS Animation: Interactive animation demo

Templates are great for:
- Learning new concepts
- Starting projects quickly
- Understanding code patterns
- Testing frameworks
- Getting inspiration

You can load a template and modify it to suit your needs.

Is my code safe and private?

Yes, your code is completely safe and private:

- All code runs entirely in your browser
- No code is sent to any server
- We don't store, log, or track your code
- No cloud storage or databases
- No analytics on code content
- Works offline after page load

Security features:
- Preview runs in sandboxed iframe
- Limited access to parent page
- No access to your file system
- JavaScript runs in isolated context

Best practices:
- Don't include real API keys or passwords
- Test with sample data
- Be cautious with user input
- Validate and sanitize data

The tool is designed for safe experimentation and learning.

What are the keyboard shortcuts?

Useful keyboard shortcuts:

Editing:
- Tab: Insert a 4-space indent
- Ctrl/Cmd+A: Select all
- Ctrl/Cmd+C: Copy
- Ctrl/Cmd+V: Paste
- Ctrl/Cmd+Z: Undo
- Ctrl/Cmd+Y: Redo

Execution:
- Ctrl/Cmd+Enter: Run code (when focused in an editor)

Note: Some browser-level shortcuts may vary by browser and operating system.

Key Features

• Write HTML, CSS, and JavaScript in tabbed editors
• Live preview with instant updates
• Auto-run mode for real-time preview
• Manual run mode for controlled execution
• Split-screen layout (horizontal or vertical)
• Responsive viewport preview (Mobile 375px, Tablet 768px, Desktop, custom width)
• Fullscreen preview mode
• Live console capturing logs, warnings and errors with line numbers
• Multiple pre-built templates
• External CDN libraries (CSS and JavaScript)
• Download as a single complete HTML file
• Auto-save to browser localStorage
• Sandboxed iframe for safe execution
• Dark mode support
• 100% client-side - no server required
• Works offline after initial load
• Responsive design for all devices
• No registration or login needed