Being able to define shape in HTML

[denis-migdal]

• I agree to follow the Code of Conduct that this project adheres to.
• I have searched the issue tracker for a feature request that matches the one I want to file, without success.

Is your feature request related to a problem? Please describe.

I'm currently using drawio to generate SVG I then use inside a Web page.
In this image, I add some HTML inputs.

Currently, we can write HTML inside labels. However, labels do not completely fill their parents.

Describe the solution you'd like

I'd like to be able to do "file -> import -> an HTML file" to produce something like:

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100">
  <foreignObject style="overflow: visible;" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
      <div xmlns="http://www.w3.org/1999/xhtml" style="width: 100%; height: 100%;">
        <input type="text" style="width:100%; height:100%; box-sizing:border-box;" />
      </div>
  </foreignObject>
</svg>

I'd also like to be able to edit the raw data of imported elements (SVG and/or HTML) through a simple text input.
This could be done through a popup similar to "+ -> shape...". I'm not asking for a complete SVG editor like a previous issue asked.

The behavior would be identical to the importation, only the text input would be used as a source instead of a file, and the current imported element would be replaced by the edited one.

Describe alternatives you've considered

Creating the SVG containing the HTML myself, then importing it into drawio.

Additional context

[draw-io-triage-bot]

👋 Thank you for opening this issue!

---

Summary: User requests the ability to import HTML files as shapes in draw.io that render as SVG foreignObject elements, and wants a text editor to modify the raw HTML/SVG content of imported elements.

---

📝 Additional Information Needed

To help us investigate this more effectively, could you please provide:

• Would you expect the HTML content to be interactive within the draw.io editor itself, or only when the SVG is exported and used in a web page?
• Should there be any security restrictions on what HTML elements or JavaScript can be included in imported HTML files?
• How should draw.io handle HTML that doesn't render properly or causes layout issues within the diagram canvas?

---

---

_{🤖 This is an automated response to help with initial triage. A human maintainer will review this issue. If you've provided all the requested information, no further action is needed - we'll get back to you soon!}

[denis-migdal]

Would you expect the HTML content to be interactive within the draw.io editor itself, or only when the SVG is exported and used in a web page?

I do not expect the HTML content to be interactive within the draw.io editor itself. Ofc it would be better if it would.

Should there be any security restrictions on what HTML elements or JavaScript can be included in imported HTML files?

Use the same restriction than when using HTML inside a label.

How should draw.io handle HTML that doesn't render properly or causes layout issues within the diagram canvas?

Drawio could use an overflow: hidden on the HTML parent to ensure it doesn't overflow (?).
If custom CSS properties causes issues, that's on the user.

[davidjgraph]

If the border is an issue, can you turn off the draw.io border and add one in HTML if required?

[alderg]

Have you tried Text Overflow: Fill?

[denis-migdal]

@alderg Thanks, it indeed solves my main issue.

1. Create a new Text element
2. Add <input style="width:100%;height:100%"/> as its HTML content (i.e. label).
3. Set the shape's property Text Overflow to fill

Indeed this works...
I spent so much time trying to modify the CSS, reading the generated SVG, asking ChatGPT... I feel so stupid now.

Could it be possible to still have an HTML edit popup (like for + -> shape...) ?
Indeed, when writing/editing the HTML the box is quite small if the shape is small.

[draw-io-triage-bot]

👋 Following up on this issue.

---

Note: Great to hear that Text Overflow: Fill solved your main use case!

Regarding the HTML editor popup request - this is a reasonable enhancement. Currently users have to edit HTML content in the small inline text box, which can be cumbersome for complex HTML.

Would you be interested in opening a separate, more focused feature request specifically for "Add HTML editor popup for text elements (similar to shape editor)"? This would help us track this enhancement separately from your original request which has been resolved.

The new request could include:

• A mockup or description of how you envision the editor popup working
• Whether it should support syntax highlighting
• Whether it should include HTML validation/preview

---

---

_{🤖 A maintainer will review this soon. This is an automated followup.}