DEV Community

Miguel CA
Miguel CA

Posted on

Proposal: A Custom Widget Editor for Elementor (HTML/CSS/JS, Built-In)

πŸ› οΈ Proposal: A Custom Widget Editor for Elementor (HTML/CSS/JS, Built-In)

Have you ever wanted to build your own widget in Elementor using just HTML, CSS, and JavaScript β€” without creating a WordPress plugin?

❓ The Problem

Currently, building a custom widget in Elementor requires writing PHP, registering it with WordPress, and deploying it via plugin. For many frontend developers, this creates a barrier.

Elementor is a powerful visual builder, but when it comes to adding custom functionality (like animations, dynamic components, or third-party APIs), you're limited to embedding code in HTML widgets β€” and even then, it's clunky and lacks structure.


πŸ’‘ The Idea

What if Elementor had a built-in Custom Widget Editor?

Features:

  • Code editor tabs for HTML, CSS, and JavaScript
  • Live preview inside the panel
  • Save & reuse custom widgets across projects
  • Export to plugin or Elementor template
  • Syntax highlighting and basic linting

Aimed at power users, it would bring the experience of CodePen or JSFiddle directly into the Elementor UI.


πŸ–ΌοΈ Mockup

Here’s a quick visual mockup of how it could look:

Custom Widget Editor


🧠 GitHub Discussion

I’ve shared this idea in the official Elementor GitHub Discussions:

πŸ‘‰ Read or join the conversation here


πŸ™Œ Let's Make It Happen

If you're a developer, designer, or part of the Elementor team and this idea resonates with you β€” I'd love to hear your thoughts.

Thanks for reading, and happy building!

 ` 
Enter fullscreen mode Exit fullscreen mode

Top comments (0)