HTML Previewer

HTML Previewer - Sandbox Editor HTML CSS JavaScript Trực Tuyến

Môi trường HTML previewer và sandbox chuyên nghiệp để test code HTML, CSS và JavaScript theo thời gian thực. Tính năng editor chia màn hình, live preview, console output, chế độ fullscreen, templates và nhiều hơn. Hoàn hảo cho học web development, prototyping, test code snippets và chia sẻ ví dụ.

HTML Previewer/Sandbox là gì?

HTML Previewer (còn gọi là sandbox hoặc playground) là môi trường tương tác nơi bạn có thể viết và test code HTML, CSS và JavaScript với phản hồi hình ảnh tức thì. Nó hữu ích cho:

- Học web development
- Test code snippets
- Prototyping designs
- Debug vấn đề HTML/CSS
- Chia sẻ ví dụ code
- Thử nghiệm tính năng mới
- Demos nhanh và proof of concept

Tương tự như CodePen, JSFiddle và các online code editors khác, nhưng đơn giản hơn và chạy hoàn toàn trong trình duyệt của bạn.

Làm thế nào để sử dụng HTML Previewer này?

Sử dụng previewer rất đơn giản:

1. Chọn tab: HTML, CSS hoặc JavaScript
2. Viết code của bạn trong editor
3. Nhấp 'Chạy Code' hoặc bật 'Tự động chạy' cho preview tức thì
4. Xem kết quả trong khung Xem Trước
5. Kiểm tra tab Console cho JavaScript logs và errors
6. Dùng templates để bắt đầu nhanh
7. Bật fullscreen cho workspace lớn hơn

Mẹo:
- Bật Tự động chạy cho cập nhật real-time khi gõ
- Dùng templates để học các patterns phổ biến
- Kiểm tra Console cho JavaScript errors
- Download code khi hoàn thành

Tính năng editor là gì?

Editor bao gồm các tính năng chuyên nghiệp:

Chỉnh Sửa Code:
- Syntax highlighting cho HTML, CSS, JavaScript
- Số dòng để dễ tham chiếu
- Tự động indent
- Hỗ trợ Tab (nhấn Tab để indent)
- Tùy chọn xuống dòng tự động
- Cỡ chữ có thể điều chỉnh

Tính Năng Preview:
- Live preview trong iframe độc lập
- Chạy tự động hoặc thủ công
- Console output để debugging
- Chế độ preview toàn màn hình
- Preview responsive

Tùy Chọn Bố Cục:
- Split ngang (editor trái, preview phải)
- Split dọc (editor trên, preview dưới)
- Kích thước split có thể điều chỉnh

Tính Năng Khác:
- Templates có sẵn
- Download dưới dạng HTML file
- Xóa tất cả code
- Copy vào clipboard

Tôi có thể dùng thư viện bên ngoài không?

Có! Bạn có thể dùng thư viện bên ngoài bằng cách include chúng trong HTML:

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

Thư Viện JavaScript:
<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>

CDNs phổ biến:
- jsDelivr: cdn.jsdelivr.net
- cdnjs: cdnjs.cloudflare.com
- unpkg: unpkg.com

Bạn có thể include:
- CSS frameworks (Bootstrap, Tailwind, Bulma)
- JavaScript libraries (jQuery, Vue, React)
- Icon libraries (Font Awesome)
- Bất kỳ CDN resource công khai nào

Khác biệt giữa Tự động chạy và Chạy thủ công?

Có hai chế độ thực thi:

Tự động chạy (Real-time):
- Code chạy tự động khi bạn gõ
- Cập nhật preview tức thì
- Tuyệt vời cho thử nghiệm nhanh
- Cập nhật với độ trễ nhỏ (debounced)
- Có thể chậm với code phức tạp
- Tốt nhất cho công việc HTML/CSS

Chạy Thủ Công:
- Code chỉ chạy khi bạn nhấp 'Chạy Code'
- Kiểm soát tốt hơn việc thực thi
- Performance tốt hơn cho code phức tạp
- Ngăn vòng lặp vô hạn vô tình
- Tốt nhất cho phát triển JavaScript
- Khuyên dùng khi học

Bạn có thể chuyển đổi giữa các chế độ bất cứ lúc nào bằng checkbox Tự động chạy.

Console hoạt động như thế nào?

Tab Console capture JavaScript output:

Những gì nó hiển thị:
- console.log() output
- console.error() messages
- console.warn() warnings
- console.info() information
- Runtime errors và exceptions

Tính năng:
- Message types có mã màu (log, error, warn)
- Timestamps cho mỗi message
- Nút xóa console
- Giữ history trong session
- Hiển thị số dòng lỗi

Ví dụ:
console.log('Xin chào');
console.error('Đây là lỗi');
console.warn('Thông báo cảnh báo');

Console giúp bạn debug JavaScript code và xem code của bạn đang làm gì.

Tôi có thể lưu hoặc chia sẻ code không?

Bạn có thể lưu và chia sẻ công việc của mình:

Tùy Chọn Lưu:
- Download dưới dạng HTML file hoàn chỉnh (bao gồm CSS và JS)
- Copy code vào clipboard
- Lưu thủ công trong trình duyệt (Ctrl+S hoạt động trong editors)
- Dùng browser localStorage (code tồn tại khi refresh)

Chia Sẻ:
- Copy code và chia sẻ qua email, chat, v.v.
- Download và đính kèm vào messages
- Include vào documentation
- Paste vào các công cụ khác

Lưu ý: Công cụ này không cung cấp cloud storage hoặc URLs để chia sẻ. Để chia sẻ hosted vĩnh viễn, dùng platforms như CodePen, JSFiddle hoặc GitHub Gists.

Templates là gì?

Templates là các ví dụ code có sẵn để giúp bạn bắt đầu:

Templates Có Sẵn:
- Trống: Editor rỗng để bắt đầu từ đầu
- HTML Cơ Bản: Cấu trúc HTML5 đơn giản
- Bootstrap Starter: Thiết lập Bootstrap 5 framework
- Flexbox Layout: Ví dụ CSS Flexbox
- CSS Grid: Ví dụ modern grid layout
- CSS Animation: Demo animation tương tác

Templates tuyệt vời cho:
- Học khái niệm mới
- Bắt đầu projects nhanh
- Hiểu code patterns
- Test frameworks
- Lấy cảm hứng

Bạn có thể tải template và sửa đổi nó để phù hợp với nhu cầu của bạn.

Code của tôi có an toàn và riêng tư không?

Có, code của bạn hoàn toàn an toàn và riêng tư:

- Tất cả code chạy hoàn toàn trong trình duyệt của bạn
- Không có code nào được gửi đến server
- Chúng tôi không lưu trữ, log hoặc theo dõi code của bạn
- Không có cloud storage hoặc databases
- Không analytics về nội dung code
- Hoạt động offline sau khi trang load

Tính năng bảo mật:
- Preview chạy trong sandboxed iframe
- Truy cập hạn chế đến parent page
- Không truy cập vào file system của bạn
- JavaScript chạy trong context độc lập

Thực hành tốt nhất:
- Đừng include API keys hoặc passwords thật
- Test với sample data
- Cẩn thận với user input
- Validate và sanitize data

Công cụ được thiết kế cho thử nghiệm và học tập an toàn.

Phím tắt là gì?

Phím tắt hữu ích:

Chỉnh Sửa:
- Tab: Indent code
- Shift+Tab: Outdent code
- Ctrl/Cmd+A: Chọn tất cả
- Ctrl/Cmd+C: Copy
- Ctrl/Cmd+V: Paste
- Ctrl/Cmd+Z: Undo
- Ctrl/Cmd+Y: Redo

Thực Thi:
- Ctrl/Cmd+Enter: Chạy code (khi trong editor)
- Ctrl/Cmd+L: Xóa console

Điều Hướng:
- Ctrl/Cmd+1: Focus HTML editor
- Ctrl/Cmd+2: Focus CSS editor
- Ctrl/Cmd+3: Focus JavaScript editor
- F11: Bật/tắt fullscreen (trình duyệt)

Lưu ý: Một số phím tắt có thể khác nhau tùy trình duyệt và hệ điều hành.

Tính Năng Chính

• Viết HTML, CSS và JavaScript trong các tabbed editors
• Live preview với cập nhật tức thì
• Chế độ tự động chạy cho preview real-time
• Chế độ chạy thủ công cho thực thi có kiểm soát
• Bố cục chia màn hình (ngang hoặc dọc)
• Chế độ preview toàn màn hình
• Console output cho JavaScript debugging
• Syntax highlighting cho tất cả ngôn ngữ
• Số dòng và format code
• Nhiều templates có sẵn
• Download dưới dạng HTML file hoàn chỉnh
• Copy code vào clipboard
• Cỡ chữ có thể điều chỉnh
• Tùy chọn xuống dòng tự động
• Phát hiện và hiển thị lỗi
• Sandboxed iframe cho thực thi an toàn
• Hỗ trợ thư viện bên ngoài qua CDN
• Hỗ trợ chế độ tối
• 100% client-side - không cần server
• Hoạt động offline sau khi load ban đầu
• Thiết kế responsive cho tất cả thiết bị
• Không cần đăng ký hoặc đăng nhập