One Widget, Real Code
Why Protuno ships one widget instead of a widget library, and what it means that the widget stores actual HTML, CSS, and JavaScript rather than configuration.
Most WordPress page builder plugins that extend Elementor ship a library of dozens of widgets, a hero widget, a testimonials widget, a pricing widget, a team grid widget. Protuno ships one: the Proton widget. Understanding why that decision was made, and what it means for how the widget works, is the foundation for understanding everything else in Protuno.
The Problem With Widget Libraries
When a plugin ships a pricing widget, that widget outputs pricing HTML. You can configure the number of columns, the colors, the labels, but you cannot change what the widget fundamentally is. If you need a pricing table that looks different from what the widget supports, you are stuck, or you are writing custom CSS to override a structure you cannot control.
This is not a criticism, it is just a constraint. Fixed-structure widgets are predictable and easy to configure. But when your design is custom, the constraints become friction.
What The Proton Widget Does Instead
The Proton widget has no fixed structure. It is a container that stores whatever HTML, CSS, and JavaScript you put inside it. The design, the real code, lives inside the widget itself.
This means:
- A hero section is a Proton widget with hero HTML, hero CSS, and hero JS inside it
- A pricing table is a Proton widget with pricing HTML, pricing CSS, and pricing JS inside it
- A navigation bar is a Proton widget with nav HTML, nav CSS, and nav JS inside it
The widget adapts to whatever you put in it. One widget, unlimited section types.
The Design Is Real Code
The key distinction is that Protuno stores code, not configuration. When a traditional widget stores "number of columns: 3", Protuno stores the actual HTML for those three columns, <div class="grid-3">, the markup for each card, the CSS that makes them lay out in three columns.
This has several important implications:
You are not limited by what a widget can output. If you can write it in HTML and CSS, it can go in a Proton widget. Custom grid layouts, complex animations, multi-level navigation menus, interactive JavaScript components, all of it works.
AI can write and edit it. Because the output is real code, an AI that knows HTML and CSS can generate it, read it, and modify it. This is why the in-editor AI chat and the MCP integration work, the AI is not configuring a widget, it is writing code.
The design is portable. Copy a Proton widget from one page to another and the entire design, HTML structure, CSS styles, JavaScript behavior, moves with it. There are no external stylesheets or scripts to reconnect.
CSS Auto-Scoping
When you write CSS inside a Proton widget, the plugin automatically rewrites every rule to be specific to that widget's unique selector. A rule you write as:
h2 { font-size: 2rem; }
Gets transformed internally to something like:
.proton-widget-abc123 h2 { font-size: 2rem; }
This means your widget's styles cannot affect other elements on the page, and styles from one Proton widget cannot bleed into another. You write CSS normally; scoping is automatic.
What This Means For Developers
If you are a developer, the Proton widget is essentially a scoped HTML/CSS/JS sandbox inside Elementor. You write real code, it renders real output, and it is scoped so it cannot break anything else on the page.
You do not fight Elementor's component system. You do not write override CSS on top of widget output you cannot control. You write the design directly.
What This Means For Designers And Content Editors
Even though the widget stores code, you do not need to touch code to use it. The slot system (see Slots: How Editable Content Works) automatically extracts every text, link, and image from the widget's HTML and surfaces them as editable fields in the Elementor panel.
The AI (see Build Your First Section With AI) can generate the initial code from a plain-English description. Once the design exists, content editors can update text and swap images through the panel, never opening the code editor.
Frequently Asked Questions
If I need a simple image widget or heading widget, should I still use Proton? Not necessarily. For simple, standard elements, Elementor's own widgets work well. The Proton widget is most valuable for custom section designs where you need full control, complex layouts, custom interactions, or sections that need to be built by AI.
Does storing real code make the widget harder to maintain? For developers, no, it is the opposite. You are maintaining HTML you wrote (or that the AI wrote) rather than reverse-engineering a widget's output. For non-developers, the slot system and AI chat mean you can maintain content without ever seeing the code.
Can I have multiple Proton widgets on the same page? Yes. Each Proton widget is fully independent, with its own scoped CSS and JavaScript. Dozens of Proton widgets on the same page will not conflict with each other.