HTML to Elementor JSON Converter
Stop rebuilding static HTML snippets from scratch in Elementor. Our high-performance converter takes your raw HTML structure and maps it directly to Elementor's native JSON template format. This is the ultimate utility for developers migrating landing pages or custom code into the Elementor ecosystem.
100% Private & Secure
This tool runs completely inside your browser using client-side WebAssembly and JS. Zero data is ever sent to our servers.
Expert Integration Tip
This JSON is compatible with Elementor 3.0+. To use it: Go to Elementor → Templates → Saved Templates → Import Templates. Upload the .json file generated here.
Mapping Logic
div/section→ Elementor Sectionh1-h6→ Heading Widgetimg→ Image Widgeta→ Button Widget
100% Client-Side
We use the browser's native DOM parser. Your HTML never touches our server, ensuring your internal project structures remain private.
How to use this tool
- Paste your raw HTML code into the left editor (supports div, h1-h6, p, img, and anchor tags).
- The tool instantly generates a valid Elementor .json template in the right editor.
- Click 'Download .json' to save the file to your computer.
- In WordPress, go to Elementor > Templates > Saved Templates and click 'Import Templates' to upload the file.
- Insert the template into any page using the Elementor Library.
Example Usage
<div class="hero"><h1>Future of Web</h1><p>Build faster.</p></div>
Returns an Elementor Section with a Column containing a Heading and a Text Editor widget.
How to do this in Code
Native implementations for your backend or scripts
{
"content": [
{
"id": "abc1234",
"elType": "section",
"elements": [
{
"id": "def5678",
"elType": "column",
"settings": { "_column_size": 100 },
"elements": [
{
"id": "ghi9012",
"elType": "widget",
"widgetType": "heading",
"settings": { "title": "Hello World" }
}
]
}
]
}
],
"page_settings": { "title": "My Template" },
"version": "0.4",
"type": "section"
}When to use this tool
- Migrating legacy static HTML sites to WordPress and Elementor.
- Quickly prototyping UI layouts in HTML and bringing them into a page builder.
- Converting design system HTML components into shareable Elementor templates.
- Bulk importing sections from a custom build into client sites.
Frequently Asked Questions
How do I import the generated JSON into Elementor?
In your WordPress dashboard, navigate to 'Templates' > 'Saved Templates'. At the top, click the 'Import Templates' button and upload the .json file you downloaded from this tool. Once imported, you can find it in the 'My Templates' tab within the Elementor editor.
Which HTML tags are supported?
Our converter currently supports standard semantic tags: <div> and <section> (mapped to Sections/Columns), <h1>-<h6> (mapped to Heading widgets), <p> and <span> (mapped to Text Editor widgets), <img> (mapped to Image widgets), and <a>/<button> (mapped to Button widgets).
Does it support custom CSS classes?
The current version maps the principal class of a <div> to the Elementor Section title for organizational purposes, but it does not yet automatically map complex CSS styles to Elementor's design controls. It focuses on structural and content migration.
Why does my imported section look blank?
Ensure that you are importing the JSON as a 'Template' and not as a 'Page Export' if you're using older a versions of Elementor. Our JSON is optimized for the 'Saved Templates' library import process.
Built by Developers, For Developers
DevToolsLabs is engineered by a team of full-stack developers who were tired of spammy, ad-filled, server-side tools parsing our sensitive data. Every utility on this site is rigorously tested, strictly client-side (your data never leaves your browser), and built to solve real-world software engineering challenges.