Every feature built to
eliminate the rebuild
Castly exists because rebuilding HTML in Elementor by hand is a productivity trap. Here is exactly what the compiler does, and why each feature matters.
Real containers. Real widgets. Not an embedded iframe.
Most conversion tools wrap your page in a giant HTML block or a screenshot-like embed: technically "in Elementor," but impossible to edit. Castly compiles your HTML and CSS into genuine Elementor structure: flexbox containers, headings, buttons, images, icon boxes, each one fully editable in the Elementor panel.
When an effect has no native Elementor control (a backdrop blur, a conic gradient, a looping keyframe animation), it rides along as scoped custom code attached to that element. Only as a last resort does a block fall back to HTML, and every fallback is listed in the handoff report. Nothing is silently dropped.
- Hover states mapped to native Elementor hover controls
- ::before and ::after pseudo-element content baked into the output
- Keyframe animations and transitions carried as scoped custom code
- Every fallback and approximation listed in the handoff report
/* Your CSS in, native Elementor out */
.hero-btn {
background: linear-gradient(
135deg, #e8633a, #b33d8e
);
border-radius: 10px;
}
.hero-btn:hover {
transform: translateY(-2px);
}
→ widget: button
background: gradient (native) ✓
hover: native hover controls ✓
.glow {
animation: pulse 2.4s infinite;
}
→ scoped custom code (no native
control; listed in the handoff)
/* Status: 0 elements dropped ✓ */See desktop, tablet, and mobile before you commit to anything
Castly renders your page in a real headless browser at every breakpoint: desktop, plus tablet and mobile widths read from your own CSS media queries, including custom and laptop breakpoints. The styles measured at each viewport become per-device Elementor responsive settings.
Every compile then scores the output against the original per device. The preview in the workspace is a live render of the converted output, not a screenshot: a close approximation of the Elementor result, with the honest per-device fidelity score alongside it.
- Breakpoints detected from your CSS, custom widths included
- Per-device fidelity score on every compile
- Switchable viewport preview: lock to any device size
- Included on every plan, including Free
Know your accuracy score before the client does
Every compile validates itself before you see the result: content coverage (no hidden text), media coverage (no missed images), a states-and-effects intent audit, and a dropped-structure check. Sections that drift are diagnosed automatically, and anything left for review is surfaced in the review panel and the handoff.
Then hand the client a Fidelity Report: a side-by-side comparison of the original and the converted output with per-device scores, print-friendly and ready to send. Typically 90%+ pixel fidelity; simple pages routinely score 97–99%.
- Per-device accuracy percentages on every compile
- Per-section diagnostics pinpoint exactly where drift comes from
- Client-ready report export (Starter and up); preview in-app on Free
- Runs automatically after every conversion
// Self-validation report
// Project: client-landing-v3
// Generated: 2026-07-02 14:32:07
Running validation checks...
content_coverage: 100% ✓
media_coverage: 100% ✓
states_effects: 14 intents ✓
dropped_structures: 0 ✓
viewport: 1920px
diff_score: 94.0%
status: ✓ PASS
viewport: 768px
diff_score: 90.0%
status: ✓ PASS
viewport: 375px
diff_score: 88.0%
status: ✓ PASS
// Fidelity report: side-by-side, per device
// Print-friendly, ready to sendJSON templates, a design-system kit, and a one-click plugin
Every conversion produces standard Elementor JSON plus a kit extracted from your design system: global colors, typography, and breakpoints as real Elementor globals. Copy to clipboard and paste straight into the editor, or download the .json files for your template library.
Faster still: the Castly WordPress plugin talks to the engine and imports everything in one click: kit first, then pages, with images sideloaded into the Media Library on Pro and Agency. Manual JSON import works on any site with no plugin at all.
- One-click clipboard copy for instant paste into Elementor
- Design-system kit: global colors, typography, breakpoints
- One-click WordPress import via the Castly plugin
- Update/Sync: recompile a changed mockup, keep your manual edits
[
{
"id": "a1b2c3d4",
"elType": "container",
"settings": {
"background_color": "#12141f",
"padding": {
"top": "128",
"bottom": "96"
}
},
"elements": [
{
"elType": "widget",
"widgetType": "heading",
"settings": {
"title": "Your headline",
"size": "xxl"
}
}
]
}
]Point at a live URL. No copy-paste required.
Paste the URL of a public page you built or have permission to convert, and Castly fetches the full DOM and CSS automatically using a headless browser, including external stylesheets. It renders the page at every breakpoint, completes scroll-reveal animations, and measures the real computed styles the browser sees.
Behind a login or working from a local file? Upload the HTML file or paste HTML, CSS, and JS as separate fields; both paths are available on every plan.
- Headless browser fetch: gets exactly what the browser sees
- External stylesheets resolved and measured as computed styles
- Works with any public page you built or are authorized to convert
- URL, file upload, and paste modes on every plan
Fetching: https://example.com/landing
// Headless render complete
DOM nodes: 847
Stylesheets: 3 external + 1 inline
Breakpoints: 1920 / 768 / 375
Total CSS rules: 1,240
Compiling native-first...
hover_states_found: 12 ✓
pseudo_elements: 8 ✓
keyframes: 4 ✓
Generating Elementor JSON...
Widgets created: 64
✓ Conversion completeEverything the compiler handles
A complete picture of what goes in, what comes out, and what gets preserved along the way.
HTML Input
Accepts raw HTML files, HTML + CSS + JS as separate fields, inline style blocks, and live URL fetching. Single-page mockups split into header, pages, footer, and popup parts automatically.
CSS Coverage
Flexbox, grid, gradients, transforms, shadows, media queries, hover states, pseudo-elements. Effects with no Elementor control ride scoped custom code, so nothing is silently dropped.
Preserved JS
Canvas effects, animated counters, sliders, and other script-driven interactions keep their JavaScript in the output, so they continue to run in Elementor. Scroll reveals become native entrance animations.
Elementor Widget Map
HTML structures are mapped to native Elementor elements: flexbox containers, heading, text-editor, image, button, icon-box, icon-list, counter, tabs, accordion, and more, for maximum editability.
Elementor Pro Target
On the Pro plan, forms map to the Form widget, navigation to Nav Menu, and data-h2e annotations wire dynamic and WooCommerce regions: Loop Grids, product widgets, dynamic tags.
Update / Sync
Client changed the mockup after you edited the page in Elementor? Recompile it onto the live page with a 3-way merge: your manual edits are kept, the mockup changes come through.
Whole-Site ZIP Upload
Upload your entire site as a ZIP: pages, stylesheets, scripts, and images with their real relative paths. Castly compiles the whole set and packages the output with shared header and footer templates, in import order.
Custom Fonts
@font-face fonts in your mockup are detected, collected, and shipped with the package. The WordPress plugin installs and enqueues them on the site, so typography survives the import exactly as designed.
Batch & Projects
Convert a URL list or a sitemap in one run; every batch lands in a project with its own history, scores, and re-download links, so client work stays organized in your dashboard.
Castly vs rebuilding by hand
The rebuild approach is not just slow; it loses fidelity at every step. Here is where the gaps appear.
| Capability | Castly | Manual rebuild |
|---|---|---|
| Fidelity | ||
| Hover effects preserved | ✓ | Manually re-coded |
| ::before / ::after pseudo-elements | ✓ | Often lost |
| CSS animations & keyframes | ✓ | Manually re-added |
| Design tokens → Elementor kit | ✓ | Recreated by hand |
| Speed | ||
| Time per landing page | ~2 minutes | 2–6 hours |
| Accuracy verification | ✓ Automated | Manual QA only |
| 3-device preview before export | ✓ | — |
| Output | ||
| Native Elementor widget structure | ✓ | ✓ |
| Reusable .json template | ✓ | — |
| White-label fidelity reports | Coming soon | — |