HTML Elements

Morph renders native elements using OpenGL. Not all HTML elements are supported — here's what works.

Structural Elements

Element	Notes
<html>, <body>	Root containers. <body> has default padding: 8px (not margin). Background fills the window.
<div>	Block-level container. The workhorse element.
<span>	Inline text container.
<h1>–<h6>	Headings with default font sizes.
<p>	Paragraph with bottom margin.
<pre>	Preformatted text.
<header>, <footer>, <nav>, <section>, <article>, <aside>, <main>	Semantic block containers (same layout behavior as <div>).
<blockquote>, <figure>, <figcaption>	Block containers with default margins.
<hr>	Horizontal rule.
<ul>, <ol>, <li>	Lists.
<dl>, <dt>, <dd>	Definition lists.
<form>	Block container (no submit semantics).
<fieldset>, <legend>	Bordered group container + its caption (browser-like default border/padding).
<table>, <caption>, <thead>, <tbody>, <tfoot>, <tr>, <td>, <th>	Rendered as block containers — no table layout yet; use flexbox for grids. <th> is bold + centered.
<details>, <summary>, <dialog>	Plain block containers (no toggle/modal behavior yet).

Text Elements

Element	Notes
<strong>, <b>	Bold text.
<em>, <i>	Italic text.
<small>	Small text.
<code>, <kbd>, <samp>	Monospace text.
<mark>	Highlighted text.
<sub>, <sup>	Subscript / superscript.
<ins>, <u>	Underline.
<del>, ``	Strikethrough.
<q>	Inline quotation (styled as inline text).
<label>	Inline label text.
<a>	Link. href="/route" navigates the current window, target="_blank" opens a new window, external URLs open in the OS browser.

Interactive Elements

Element	Notes
<button>	Clickable button. Has default hover/active styles.
<input>	Text input field with caret, selection, undo/redo, and clipboard support.
<img>	Image display (PNG, JPEG, WebP, GIF, BMP, TGA, PSD, HDR, PNM, PIC).
<select>, <textarea>	Registered but not fully implemented yet (render as inline-block containers; the linter flags them with mx-tag-stub).

<input> Attributes

Attribute	Type	Notes
value	string	Initial/current text content.
placeholder	string	Hint text shown when empty.
type	"text" | "password"	password masks input characters.
disabled	boolean	Disables editing and focus.
maxLength	number	Max characters (browser-parity cap of 524288 when unset).
minLength	number	Min characters for validation.

Special Elements

<morph-window>

Declares a native window (alternative to the windowConfig export — use one, not both).

Prop	Type	Notes
title	string	Window title bar text.
width	number	Window width in CSS pixels.
height	number	Window height in CSS pixels.
minWidth	number	Minimum window width (enforced via GLFW size limits).
minHeight	number	Minimum window height.
maxWidth	number	Maximum window width.
maxHeight	number	Maximum window height.

<morph-window title="Calculator" width={340} height={500}
              minWidth={340} minHeight={500}>
  ...
</morph-window>

JSX Attributes

Standard HTML Attributes

Attribute	Elements	Notes
className	all	CSS class names (space-separated).
class	all	Alias for className — use one or the other, never both (linter: mx-dup-class).
id	all	Element identifier.
style	all	Inline CSS object: style={{ color: "red" }}.
key	.map() lists	List identity for re-renders.
src	<img>	Image path (relative to the project).
alt	<img>	Alt text (not rendered, but stored).
href	<a>	Link target.
target	<a>	Link target window.
width	<img>	Layout hint for intrinsic sizing.
height	<img>	Layout hint for intrinsic sizing.
See `` attributes	<input>	value, placeholder, type, disabled, maxLength, minLength.

Event Handlers

See Events for the full list.

Navigation

Navigation uses the standard <a> element — there are no morph-* action attributes:

Markup	Behavior
<a href="/settings">	Navigate the current window to an internal route
<a href="/settings" target="_blank">	Open an internal route as a new window
<a href="https://…">	External URL — opens in the OS browser, never a Morph window

Internal hrefs are validated against the route manifest (mx-route-unknown on typos). See Windows & Navigation.

Fragments

Use fragments (<>...</>) to wrap multiple children without adding an extra node:

return (
  <>
    <div>First</div>
    <div>Second</div>
  </>
)

Images

<img src="src/avatar.png" alt="Avatar" />
<img src="https://example.com/photo.jpg" width={200} height={150} />

Supported formats: PNG, JPEG, WebP, GIF, BMP, TGA, PSD, HDR, PNM, PIC. Images are loaded via stb_image and cached as GPU textures. border-radius clipping works on images via stencil buffers.

Implementation Notes

• All elements are implemented as C++ classes in runtime/cpp/ui/ and runtime/cpp/widgets/
• <button> → ButtonNode, <input> → InputNode, <img> → ImageNode, <div>/<span>/<body> → RectNode + TextNode
• Unsupported tags are caught by the linter (mx-tag error) with suggestions via string similarity
• <select> and <textarea> render as containers but lack full editing behavior — tracked in future/text-input