HTML to Elementor Converter

A modern web application that converts HTML code to Elementor JSON format. Built with Next.js, this tool provides a user-friendly interface for developers and designers working with Elementor page builder.

🚀 Features

• HTML to Elementor JSON Conversion: Automatically converts HTML markup to Elementor-compatible JSON structure
• Live Preview: Real-time preview of your HTML content in an iframe
• Split View Interface:
  • Resizable 50/50 split panel layout
  • Drag the divider to adjust panel widths (20% - 80% range)
  • Double-click divider to reset to 50/50
  • Horizontal scrolling support for long content
• Dual View Modes:
  • Preview Mode: See how your HTML renders
  • Elementor JSON Mode: View the generated Elementor JSON structure
• Export Options:
  • Copy JSON to clipboard
  • Download JSON as a file
• Comprehensive Style Support: Converts CSS styles including:
  • Colors, fonts, spacing (margin/padding)
  • Flexbox layouts
  • Backgrounds (colors, images, gradients)
  • Borders, shadows, positioning
  • And much more

📋 Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (version 18 or higher)
• npm, yarn, pnpm, or bun package manager

🛠️ Installation

1. Clone the repository (or download the project):

   git clone <repository-url>
   cd html-to-elementor

2. Install dependencies:

   npm install
   # or
   yarn install
   # or
   pnpm install
   # or
   bun install

🏃 Running the Application

Development Mode

Start the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 in your browser to see the application.

The page will automatically reload when you make changes to the code.

Production Build

To create an optimized production build:

npm run build
# or
yarn build
# or
pnpm build

Then start the production server:

npm start
# or
yarn start
# or
pnpm start

📖 Usage

1. Paste HTML Code: Enter or paste your HTML code in the left panel
2. View Preview: Click the "Preview" tab to see how your HTML renders
3. View Elementor JSON: Click the "Elementor JSON" tab to see the converted JSON structure
4. Export JSON:
   • Click the copy button (📋) to copy JSON to clipboard
   • Click the download button (⬇️) to download as a JSON file
5. Resize Panels: Drag the divider between panels to adjust their widths

🏗️ Project Structure

html-to-elementor/
├── app/
│   ├── page.tsx              # Main application component
│   ├── page.module.css       # Component styles
│   ├── layout.tsx            # Root layout
│   ├── globals.css            # Global styles
│   └── utils/
│       └── html-to-elementor-json.ts  # HTML to Elementor converter
├── public/                   # Static assets
├── elementor/                # Elementor reference files
├── package.json              # Dependencies and scripts
├── tsconfig.json             # TypeScript configuration
└── next.config.ts            # Next.js configuration

🛠️ Technologies

• Next.js 16 - React framework for production
• React 19 - UI library
• TypeScript - Type-safe JavaScript
• jsdom - HTML parsing and manipulation
• CSS Modules - Scoped styling

📝 Supported HTML Elements

The converter supports conversion of various HTML elements to Elementor widgets:

• Containers: div, section, article, main, header, footer, aside, nav, figure, ul, ol, li
• Headings: h1, h2, h3, h4, h5, h6 → Elementor Heading widget
• Text Elements: p, span, strong, em, b, i, small, blockquote, pre, code → Elementor Text Editor widget
• Buttons: button, a → Elementor Button widget
• Images: img → Elementor Image widget
• HTML Blocks: iframe, style → Elementor HTML widget

🎨 Supported CSS Properties

The converter handles a wide range of CSS properties:

• Typography: font-size, font-weight, font-family, color, text-align
• Layout: display, flex-direction, justify-content, align-items, gap
• Spacing: margin, padding (all variants)
• Sizing: width, height, min-width, max-width, etc.
• Backgrounds: background-color, background-image, background-position, gradients
• Borders: border, border-radius, border-color, border-style, border-width
• Effects: box-shadow, opacity
• Positioning: position, top, right, bottom, left, z-index
• Overflow: overflow, overflow-x, overflow-y

🐛 Troubleshooting

Port Already in Use

If port 3000 is already in use, Next.js will automatically try the next available port. You can also specify a custom port:

npm run dev -- -p 3001

Build Errors

If you encounter build errors, try:

1. Delete node_modules and .next directories
2. Clear package manager cache
3. Reinstall dependencies:

   rm -rf node_modules .next
   npm install

📄 License

This project is private and not licensed for public use.

🤝 Contributing

This is a private project. For questions or issues, please contact the project maintainer.

📞 Support

For support, please open an issue in the repository or contact the development team.

---

Built with ❤️ using Next.js and React