๐ HTM.jl (Hyperscript Tagged Markup in Julia)
julia> using HTM
julia> box(content) = htm"<div id=$(rand(1:100))>$(content)</div>"
box (generic function with 1 method)
julia> b = box("Hello HTM.jl๐!")
<div id="23">Hello HTM.jl๐!</div>
HTM.jl is JSX-like syntax for Julia. It is backend-agnostic but uses Hyperscript.jl for generating HTML elements by default:
julia> dump(b, maxdepth=1)
Hyperscript.Node{Hyperscript.HTMLSVG}
context: Hyperscript.HTMLSVG
tag: String "div"
children: Array{Any}((1,))
attrs: Dict{String, Any}
(One of the advantages of using Hyperscript.jl is that objects are lazily rendered.)
And since @htm_str
is a macro, parsing happens at compile time:
julia> @macroexpand htm"<div id=$(rand(1:100))>$(content)</div>"
:(create_element("div", process(Dict(("id" => rand(1:100),))), (content,)))
Syntax
The syntax was inspired by JSX, lit-html, htm
, and Hypertext Literal:
- Spread attributes:
htm"<div $(attrs)></div>"
- Self-closing tags:
htm"<div />"
- Multiple root elements (fragments):
htm"<div /><div />"
- Short circuit rendering:
htm"<div>$(hidefruit || '๐')</div>"
- Boolean attributes:
htm"<div draggable />"
orhtm"<div draggable=$(true) />"
- HTML optional quotes:
htm"<div class=fruit></div>"
- Styles:
htm"<div style=$(style)></div>"
- Universal end-tags:
htm"<div>๐<//>"
- HTML-style comments:
htm"<div><!-- ๐ --></div>"
Furthermore, the components can be constructed using Julia's display system: htm"$(Fruit(\"pineapple\", '๐'))"
.
Installation
HTM.jl can be installed using the Julia package manager. From the Julia REPL, type ]
to enter the Pkg REPL mode and run:
pkg> add https://github.com/schneiderfelipe/HTM.jl
Usage
See the documentation (I hope you like pineapples).
Project status
HTM.jl is a small (<400 lines of code) open-source Julia project. It was once called JSX.jl. Its main goal is to create a fully-featured, backend-agnostic (any library that produces HTML elements can be used as a backend) alternative to the @html_str
macro. I also wanted @md_str
-like string interpolations, JSX-like syntax, and full compatibility with Julia objects through Julia's display system.
HTM.jl is a work in progress but is already quite usable and fast. It may not be ready for production use yet though. Please help me improve it by sharing your feedback. ๐