Html2elementor

html2elementor — HTML → Elementor skill for Claude Code / openclaw

**Open-source HTML → Elementor JSON converter, packaged as both a Claude Code and an openclaw skill.** Paste HTML + CSS, get a `_elementor_data` payload you can import into WordPress. Works as a standalone Python CLI or as a skill that Claude auto-invokes when you ask to "import this design into Elementor".

[](https://docs.anthropic.com/en/docs/claude-code) [](https://github.com/humanlayer/claude-code-skills) [](https://www.python.org/downloads/) [](LICENSE) [](https://elementor.com/)

`html2elementor` is a **fully open-source, local, zero-dependency-on-external-services** converter that emits clean Elementor container-based JSON from static HTML + CSS.

Pairs naturally with AI-generated HTML: point an LLM at your design brief, run the output through this tool, and import the JSON into Elementor. Or install as a Claude Code skill and let Claude do all three steps for you.

---

What it does

• Parses HTML + CSS locally (no browser, no API calls) using BeautifulSoup + tinycss2.
• Resolves the CSS cascade including inheritance, inline styles, and CSS custom properties (var(--x)).
• Maps DOM nodes to Elementor widgets: heading, text-editor, button, image, icon-list, icon-box.
• Builds a container tree matching Elementor 3.x flex layouts (rows, columns, nested grids).
• Extracts global colors and typography into a companion kit.json (page-unique hashed IDs so imports don't clobber each other).
• Emits a verify.py companion that diff-checks the output against the source and flags missing colors / wrong sizes / mis-mat