The new component to render any HTML element

Moreover, HTML is actively developed and continually gains new capabilities. Ensuring that the visual builder always has access to these capabilities is vital for future-proofing.

Originally, Webstudio offered components (Box, Text, Heading, etc.) that covered only a small subset of predefined tags and attributes. However, to support all HTML tags we would have needed to add more than 100 additional components, each with its own constraints and attributes. This approach felt impractical and would have added extra client-side JavaScript to every published site. Today, we’re excited to present a more general, optimized solution that puts the full power and flexibility of HTML directly in your hands.

Introducing the Element component

To unlock the full spectrum of the web platform, we evolved Webstudio into a more powerful, HTML-aware editor. Much like modern code editors, users now receive comprehensive assistance when writing HTML. The new Element component replaces many existing primitive components, enabling you to author complete HTML semantics directly in the builder.

1. The Element component adapts to its current context (parent and child elements) by following the HTML content model. For example, dropping an Element into a <ul> automatically detects the required tag and creates a <li> element. If you attempt to change that <ul> tag, only ul, ol, and menu options will be offered.
2. Element can be configured with attributes. In the settings panel, you’ll see only the available attributes for the currently selected tag. For example, <a> shows href and target, while <button> shows type and disabled.
3. Style-panel states like Hover and Focus also adapt to the selected tag. For example, <a> shows a "Visited" state specific to links, and <button> shows a "Disabled" state.

This helps users configure elements correctly.

Copy HTML from anywhere

Since the early days of the internet, people have viewed page source code and copied markup into their own projects. Although many resources let you copy and paste code, recreating designs in a visual builder can be frustrating — when you add each element and set attributes one by one, some things can be missed or overlooked.

Webstudio now intelligently interprets any pasted HTML and converts inline styles into local styles, seamlessly preserving your HTML in a visual workflow. You can paste rich text or tables from any website:

<section>
  <h1>List of candidates</h1>
  
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
      </tr>
    </thead>
    <tr>
      <td>John</td>
      <td>30</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>20</td>
    </tr>
  </table>
</section>

When you paste an <img> tag, the image is automatically uploaded to your Webstudio project:

<section>
  <h1>Webstudio</h1>

  <img src="https://raw.githubusercontent.com/webstudio-is/webstudio-design/refs/heads/main/brand/logo-icon-color.svg" 
    alt="Webstudio logo">
</section>

If you have Markdown documents, simply paste them into the builder:

# List of candidates

| Name | Age |
| ---- | --- |
| John | 30  |
| Jane | 20  |

New сommands for Element

We’ve added several commands to enable advanced workflows with the Element component. You can access the command panel from the global menu by selecting "Search & Commands" or by using the Cmd+K / Ctrl+K shortcut.

1. Insert an Element with any predefined tag by typing < into the command panel. You’ll see a list of tags that can be inserted into the selected instance.
2. Use the “Wrap with Element” command to create a <div> parent around the currently selected instance.
3. Components like Box, Text, and Heading now follow the same content model as the Element and remain fully supported. However, if you want to use a different tag on an existing instance — while preserving its styles and content, run the “Replace with Element” command.

What looms ahead

The new Element component paves the way for even more enhancements:

• Adopting semantic HTML is a significant step toward better integration with the accessibility tree. Future accessibility tools will guide users (or enforce generative AI) to add missing landmarks, ARIA labels, alt text, and other ARIA attributes.
• SVG support is crucial for modern websites. Icons and interactive images make navigation more intuitive and designs more visually expressive. Soon, you’ll be able to paste SVG from Figma or Penpot directly into Webstudio (without HTML Embed). Each tag inside the SVG will be accessible in the builder tree and manipulable like any other element.
• Tailwind CSS is a popular styling solution that localizes styles within each element—very similar to local styles in Webstudio. We’re prototyping HTML pasting with Tailwind classes right now.
• The new HTML-native controls like <dialog>, <details>, and the Popover API can replace Radix components in many cases — no 30 KB JS runtime is needed for each control. We’ll add pseudo-elements and invoker commands to support them.

Let us know what you think of the new Element component and whether you encounter any issues.