HTML Code Tabs

A powerful and customizable component for displaying HTML code with live preview and syntax highlighting. Perfect for documentation, tutorials, and showcasing HTML/CSS examples.

Demo

View on GitHubGitHub

Loading preview...

Features

Live Preview: Renders HTML in an iframe with Tailwind CSS support
Syntax Highlighting: Beautiful code highlighting using Shiki
Copy to Clipboard: One-click code copying functionality
Responsive Design: Works seamlessly across all device sizes
Dark Theme: GitHub Dark theme for code display
TypeScript Support: Fully typed for better development experience

Usage

Basic Usage

Custom Title and Filename

With Custom Styling

Complex HTML Example

Examples

Basic Button

View on GitHubGitHub

Loading preview...

Component Structure

The component consists of several sub-components:

HtmlCodeTabs: Main wrapper component
CodeTabs: Tab management and layout
Preview: Live HTML preview with iframe
CodeView: Code display with syntax highlighting
HtmlRenderer: HTML rendering with Tailwind CSS support
CodeEditor: Syntax highlighting and copy functionality

Props

Prop	Type	Default	Description
htmlContent	string	—	The HTML content to display and preview
(required)	—	title	string
fileName	string	"index.html"	Filename to display in the code tab
className	string	""	Additional CSS classes for the container

Features in Detail

Live Preview

Renders HTML in a sandboxed iframe
Includes Tailwind CSS CDN for styling
Transparent background support
Responsive design with grid background

Code Display

Syntax highlighting using Shiki with GitHub Dark theme
Line numbers for better readability
Copy to clipboard functionality with visual feedback
Hover effects for better user experience

Responsive Design

Mobile-first approach
Adaptive sizing for different screen sizes
Optimized for both desktop and mobile viewing

Styling

The component uses a dark theme by default with:

GitHub Dark syntax highlighting
Dark background containers
Blue accent colors
Smooth transitions and hover effects

You can customize the appearance by:

Passing custom className props
Modifying the CSS classes in the component
Overriding the default styles with your own CSS

Browser Support

Modern browsers with ES6+ support
iframe sandbox support required for preview
CSS Grid and Flexbox support needed for layout

Dependencies

React 18+
Lucide React (for icons)
Shiki (for syntax highlighting)
Tailwind CSS (for styling)

The component dynamically imports Shiki to keep the initial bundle size small.