Phlex HTML Elements

How elements are defined in the Phlex library

It’s fun cracking open source code in libraries to see how certain abstractions are made. In the case of Phlex, it has a file that lists out all legal HTML elements in the standard_elements.rb file.

# Outputs a `<table>` tag.
#
# [MDN Docs](https://developer.mozilla.org/docs/Web/HTML/Element/table)
# [Spec](https://html.spec.whatwg.org/#the-table-element)
register_element def table(**attributes, &content) = nil

# Outputs a `<tbody>` tag.
#
# [MDN Docs](https://developer.mozilla.org/docs/Web/HTML/Element/tbody)
# [Spec](https://html.spec.whatwg.org/#the-tbody-element)
register_element def tbody(**attributes, &content) = nil

# Outputs a `<td>` tag.
#
# [MDN Docs](https://developer.mozilla.org/docs/Web/HTML/Element/td)
# [Spec](https://html.spec.whatwg.org/#the-td-element)
register_element def td(**attributes, &content) = nil

# Outputs a `<template>` tag.
#
# [MDN Docs](https://developer.mozilla.org/docs/Web/HTML/Element/template)
# [Spec](https://html.spec.whatwg.org/#the-template-element)
register_element def template(**attributes, &content) = nil

# Outputs a `<textarea>` tag.
#
# [MDN Docs](https://developer.mozilla.org/docs/Web/HTML/Element/textarea)
# [Spec](https://html.spec.whatwg.org/#the-textarea-element)
register_element def textarea(**attributes, &content) = nil

This is a very concrete approach to abstracting HTML, and its one of the reasons I like Phlex. It’s a very well built bridge that connects HTML and Ruby in a way that makes it easy and enjoyable to work with both.

Language server integraton

It goes beyond that though. If your editor supports language server protocol (LSP), they show a link to the MDN documentation for each element and a WHATWG link to the spec.

Screenshot of Phlex

It’s really lovely how much attention to detail Joel Drapper put into Phlex and the tooling around it.

Do you want to learn Phlex 💪 and enjoy these code examples?

Support Beautiful Ruby by pre-ordering the Phlex on Rails video course.

Order the Phlex on Rails video course for $379 $289