User Rating 0.0 ★★★★★

Total Usage 0 times

Category Code Utilities

Module Object Name The object your view binds to (e.g. header.view)

postRender / config Function Optional config callback on wrapper element

Output Format Wrap in module view function or output raw hyperscript

Indentation

HTML Input

Mithril Output

Is this tool helpful?

Your feedback helps us improve.

★ ★ ★ ★ ★

About

Mithril.js uses a hyperscript function m(tag, attrs, children) to construct virtual DOM nodes. Writing complex nested views by hand from existing HTML is tedious and error-prone. A misplaced bracket or forgotten attribute conversion breaks rendering silently. This tool parses raw HTML into a proper DOM tree, then recursively generates syntactically correct Mithril m() calls with CSS selector shorthand for classes and IDs, object-literal style attributes, and correct nesting. It handles self-closing elements, boolean attributes, and optional postRender config hooks. The output is copy-paste ready for your view function. Note: this tool approximates conversion assuming well-formed HTML input. Malformed or partial fragments may produce unexpected nesting.

Formulas

The conversion follows a recursive tree-walk algorithm. Given a DOM node N, the output O is produced by:

{

m(selector, attrs, children) if N is Elementtext if N is non-empty TextNULL if N is Comment or whitespace

The selector is constructed as: tag + ("#" + id) + ("." + class₁ + "." + class₂ + …). The attrs object contains all remaining attributes after id and class have been consumed into the selector. The style attribute string is parsed by splitting on ";" then on ":" and converting property names from kebab-case to camelCase. children is built by mapping convert(N_child) over all child nodes, filtering out NULL results. If only one child exists and it is a text string, it is passed directly instead of as an array.

Reference Data

HTML Feature	Mithril Output	Notes
Element with class	m('div.my-class')	CSS selector shorthand
Element with ID	m('div#my-id')	ID appended to tag
Element with both	m('div#id.cls')	ID before classes
Multiple classes	m('div.a.b.c')	Dot-separated
Inline style	{ style: { color: "red" } }	Converted to JS object
Boolean attribute (checked)	{ checked: true }	No value needed
data-* attributes	{ "data-id": "5" }	Preserved as strings
Self-closing tags (br, hr, img)	m('br')	No children array
Text nodes	"Hello world"	String literal child
Mixed children	[m('span'), ' text']	Array of mixed types
Nested elements	m('ul', [m('li')])	Recursive nesting
Comments	Stripped	HTML comments are removed
Empty attributes (disabled)	{ disabled: true }	Treated as boolean
onclick / events	{ onclick: ctrl.handler }	Manual wiring required
config (postRender)	{ config: fn }	Only on wrapper element
SVG elements	m('svg', ...)	Namespace preserved
Input elements	m('input[type=text]')	Type in selector or attrs
Textarea with content	m('textarea', 'text')	Content as child string
Whitespace-only text	Trimmed / ignored	Prevents empty strings

Frequently Asked Questions

Inline style strings are parsed into JavaScript object literals. Each CSS property is split by semicolons, then each declaration is split by the first colon. Property names are converted from kebab-case (e.g., background-color) to camelCase (e.g., backgroundColor). Values remain as quoted strings. The result is { style: { backgroundColor: "red", fontSize: "14px" } }.

Self-closing (void) elements are detected by tag name against the HTML5 void element list: area, base, br, col, embed, hr, img, input, link, meta, param, source, track, wbr. These elements never produce a children array in the output, even if the source HTML incorrectly nests content inside them.

SVG elements are parsed and converted using the same recursive algorithm. Tag names like svg, path, circle, and rect are preserved. However, SVG-specific namespace attributes (xmlns, xlink:href) may need manual adjustment in Mithril depending on your version. Mithril 2.x handles SVG namespacing automatically when the root element is an svg tag.

In Mithril 0.2.x, the config attribute on a virtual DOM node receives a callback function that runs after the element is attached to the real DOM. This is useful for initializing third-party libraries (e.g., jQuery plugins, D3 bindings) on a specific element. The converter adds { config: yourFunctionName } to the outermost wrapper element when you specify a postRender function name. In Mithril 2.x, this is replaced by oncreate and onupdate lifecycle hooks.

Attributes present in the HTML without a value (e.g., <input disabled>) or with an empty string value are converted to boolean true in the attrs object: { disabled: true }. This matches Mithril's expectation for toggling boolean DOM properties.

The converter works with any HTML fragment. You do not need <html>, <head>, or <body> wrappers. Paste a single <div> or a complex nested structure. The DOMParser processes fragments by wrapping them internally. However, malformed HTML (unclosed tags, overlapping elements) will be auto-corrected by the browser parser, which may produce unexpected nesting in the output.