HTML Preview Extension

A powerful VS Code extension for live previewing HTML files with advanced JavaScript support and PHP server integration.

Features

Live Preview: Real-time preview of HTML files with automatic updates
PHP Support: Built-in PHP development server for dynamic content
Advanced JavaScript Support: Full support for modern JavaScript features
Layout System: Flexible layout system with grid, flex, and masonry options
Form Handling: Automatic form submission handling with PHP integration
State Management: Built-in state management for dynamic content
Component System: Reusable component system for better code organization

Requirements

Visual Studio Code ^1.60.0
PHP (for PHP server features)

Installation

Install from VS Code Marketplace:
- Open VS Code
- Go to Extensions (Ctrl+Shift+X)
- Search for "HTML Preview"
- Click Install
Manual Installation:
- Download the .vsix file
- Run: code --install-extension html-preview-0.0.1.vsix

Usage

Basic HTML Preview

Open an HTML file
Use one of these methods to open the preview:
- Press Ctrl+Shift+V (or Cmd+Shift+V on Mac)
- Open command palette and type "Show HTML Preview"
- Right-click in editor and select "Show HTML Preview"

PHP Server

Ensure PHP is installed on your system
Open command palette (Ctrl+Shift+P)
Type "Toggle PHP Server"
Check status bar for server status

Layout System

Use data attributes to create responsive layouts:

<div data-layout="grid" data-columns="3" data-gap="1rem" data-responsive>
    <!-- Content -->
</div>

Available layouts:

Grid: data-layout="grid"
Flex: data-layout="flex"
Masonry: data-layout="masonry"

Form Handling

Forms are automatically handled when PHP server is running:

<form action="process.php" method="post">
    <input type="text" name="message">
    <button type="submit">Send</button>
</form>

Examples

Basic PHP Example

<!DOCTYPE html>
<html>
<head>
    <title>PHP Test</title>
</head>
<body>
    <?php
    echo "<h1>Current time: " . date('Y-m-d H:i:s') . "</h1>";
    ?>
</body>
</html>

Layout Example

<div data-layout="grid" data-columns="3" data-gap="1rem" data-responsive>
    <?php
    for ($i = 1; $i <= 6; $i++) {
        echo "<div>Grid Item $i</div>";
    }
    ?>
</div>

Contributing

Fork the repository
Create your feature branch
Commit your changes
Push to the branch
Create a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support

If you encounter any issues or have questions:

Check the documentation
Open an issue
Contact support at your-email@example.com

HTML PHP Preview Plus

KPK gh