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".

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-matched backgrounds.

Example

Input (landing.html):

<section style="padding:96px 64px;background:#0b1220;text-align:center">
  Hello world
  A subtitle.
  
    Get started
  
</section>

Output (landing.json):

[
  {
    "elType": "container",
    "settings": {
      "background_background": "classic",
      "background_color": "#0b1220",
      "padding": {"unit":"px","top":"96","right":"64","bottom":"96","left":"64"},
      "flex_align_items": "stretch"
    },
    "elements": [
      {"elType":"widget","widgetType":"heading","settings":{"title":"Hello world","title_color":"#ffffff","typography_font_size":{"unit":"px","size":"64"}}},
      {"elType":"widget","widgetType":"text-editor","settings":{"editor":"A subtitle.","text_color":"#9ca3af"}},
      {"elType":"widget","widgetType":"button","settings":{"text":"Get started","background_color":"#ec4899","button_text_color":"#ffffff"}}
    ]
  }
]

Drop into _elementor_data meta of a WordPress page → your layout renders.

---

Installation

git clone https://github.com/dudaster/html2elementor.git
cd html2elementor
python3 -m venv .venv
source .venv/bin/activate
pip install -r requirements.txt

Requires Python 3.10+ and three tiny dependencies: beautifulsoup4, tinycss2, cssselect2. No browser, no Node, no services.

Install as a Claude Code skill

SKILL.md at the repo root tells Claude when to invoke the tool. Clone straight into your skills folder:

git clone https://github.com/dudaster/html2elementor.git ~/.claude/skills/html2elementor
cd ~/.claude/skills/html2elementor
python3 -m venv .venv && .venv/bin/pip install -r requirements.txt

After that, prompts like "convert landing.html to Elementor" or "import this mockup into the WP sandbox" auto-trigger the skill — Claude runs the conversion, the verifier, and the import for you.

Install as an openclaw skill