HTML to Image

HTML to Image is a modern web application that converts HTML and CSS code into high-quality images. It provides a live editor with instant preview and multiple export options for developers and designers.

The application is built with modern web technologies that ensure performance and user experience:

Frontend Framework

• React with TypeScript for type-safe component development
• Vite as the build tool for a fast and lightweight development experience

UI & Design System

• TailwindCSS for utility-first styling
• Shadcn/ui on top of Radix primitives for accessible components

Editor Features:

• ✅ Real-time HTML/CSS code editor
• ✅ Instant live preview
• ✅ Configurable options panel
• ✅ Canvas and resolution configuration

Export Options:

• ✅ Multiple formats: PNG, JPEG, SVG
• ✅ Customizable dimensions

Interface Features:

• ✅ Collapsible accordion options panel
• ✅ Resizable panels (editor, preview, and options)
• ✅ Flexible panel distribution (rearrange editor, preview, and options layout)

Requirements:

• Node.js (+v18.x) installed
• npm installed
• Visual Studio Code with recommended extensions

Steps:

1. Fork this project.

2. Clone the repository:

git clone https://github.com/@username/html-to-image.git

3. Install dependencies:

npm install

4. Run the development server:

npm run dev

Open http://localhost:5173 with your browser 🚀

Contributions are welcome! Please feel free to submit a Pull Request.

This project is open source and available under the MIT License.