Native-First Output
Real Elementor containers and widgets, not an embedded iframe or a screenshot. Effects with no Elementor control ride scoped custom code, and the rare HTML fallback is always listed in the handoff report.
Learn more
Now with Update & Sync
Your HTML becomes
editable Elementor
in seconds
Paste your HTML, CSS, and JS, point at a URL, or upload a whole site as a ZIP. Castly compiles it into native, editable Elementor containers and widgets, with live preview at three device sizes, self-validation on every compile, and hover effects preserved.
Free plan forever
Cancel any time
Typically 90%+ pixel fidelity
No plugin required
Input: HTML / CSS / JS
<section class="hero">
<h1 class="hero__title">
Hello World
</h1>
<p class="hero__sub">
Subheading text here
</p>
<a href="#"
class="btn btn--primary">
Get started
</a>
</section>
/* mapped to native hover controls */
.btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px
rgba(0,0,0,.25);
}
Live Preview: 3 Devices
Built for WordPress designers & agencies
Native containers & widgets
Elementor Free & Pro
Design-system kit extraction
One-click WP plugin import
Update & Sync merge
Why Castly
Built for the way
Built for the way
designers actually work
Every feature exists because hand-rebuilding HTML in Elementor used to cost hours. This is the shortcut.
3-Device Live Preview
See your compiled page at desktop, tablet, and mobile simultaneously, with widths taken from your design's own breakpoints (custom breakpoints included), before you export a single byte of JSON.
Learn moreSelf-Validation & Fidelity Report
Every compile checks content coverage, media coverage, and per-section pixel fidelity at all three device sizes, then produces a client-ready side-by-side report with per-device scores.
Learn moreElementor JSON Export
Download a ready-to-import .json template or copy directly to clipboard. Paste straight into Elementor using "Import from another site", or push everything in one click with the Castly WordPress plugin.
Learn moreDesign System → Elementor Kit
Castly extracts your design system (global colors, typography, and breakpoints) into an Elementor kit that imports first, so every page stays consistent and editable with global styles.
Learn moreUpdate & Sync
Changed the mockup after the page was edited in Elementor? Update & Sync recompiles onto the edited page with a three-way merge, so your manual edits stay intact.
Learn more
How it works
From HTML to Elementor
From HTML to Elementor
in four steps
No setup. No configuration. Paste your code and get a finished, editable page.
Paste your code
Drop in an HTML file, separate HTML + CSS + JS, or just paste the URL of a live public page.
See the preview
Instant live preview at desktop, tablet, and mobile, before you commit to anything.
Verify fidelity
Self-validation runs pixel-diff, content, and media coverage checks across all three device sizes and flags anything for review.
Copy or download
"Paste from another site" directly into Elementor, download the .json template, or import in one click with the Castly WordPress plugin.
Pixel fidelity
Typically 90%+ fidelity,
Typically 90%+ fidelity,
verified automatically
Measured against real Elementor across a 100-site stress corpus (July 2026). Simple pages routinely score 97–99, and every compile ships with its own verification, so you know your score before delivery.
Desktop · 100-site average
94%
Tablet · 100-site average
90%
Mobile · 100-site average
88%
// Verification report
// 100-site corpus average
Running pixel-diff scan...
viewport: 1920px
diff_score: 94.0% ✓ PASS
viewport: 768px
diff_score: 90.0% ✓ PASS
viewport: 375px
diff_score: 88.0% ✓ PASS
// native-first: scoped CSS fallback
// :hover, ::before, ::after preserved
All devices passed verification
Who it's for
Saving hours on every project
94%
avg. desktop fidelity
100
sites in the test corpus
3
devices verified per compile
$0
to start · 3 credits/mo
Freelancers
Take a client's HTML mockup, compile it, run the fidelity report, and deliver a fully editable Elementor page the same day. No manual rebuild, no code touching required.
Agencies
Convert whole sites and stores with WooCommerce mapping and batch conversion, and when the mockup changes, Update & Sync recompiles onto the live page without losing the edits made in Elementor.
Developers
The output is standard Elementor JSON: real containers and widgets, editable like anything built by hand. Effects without a native control ride scoped custom code, all listed in the handoff.
Early feedback
What the first users say
★★★★★
I pasted a landing page I had built by hand and got an editable Elementor version in about a minute. The spacing and typography survived, which is the part I always dreaded redoing.
★★★★★
The output is clean Elementor containers, not a pile of pasted HTML. I pushed a compile straight to a client install through the connector and only had to wire the forms.
★★★★★
The fidelity report is my favorite part. You see per-device scores before anything goes near the live site, so there are no surprises later. Complex galleries still need a manual pass.
★★★★★
We compile every mockup we hand to clients now. Hover states and animations carry over, and anything that cannot be mapped natively is listed in the handoff instead of silently dropped.
Reviews from the open beta. Try it and tell us what to improve.