fluent-dom-esm
A remarkably simple but surprisingly powerful DOM element creation library with an easy-to-use syntax inspired by the classic JS libraries of yesterday.
When you don't need a whole framework (or JSX), but also don't want to spend all day typing document.createElement or document.getElementById, fluent-dom-esm may just be the thing you need.
Installation
- Grab the latest copy of the
fluent-dom-esm.jsfile, either by downloading it or doing agit cloneand pulling it out of thedistfolder. - Add the newly acquired file to your static site / progressive web app / over-engineered blog.
- Import it as an ESM module (
import $d from "./src/fluent-dom-esm.js"). - Profit!
With JSR
This package can also be installed from JSR:
yarn add jsr:@itsericwoodward/fluent-dom-esm
Occasionally Asked Questions
- How can I use this in Node? You can't, AFAIK. It requires access to the HTML
Documentobject from the browser. - How can I minify or bundle this? You shouldn't, IMHO. JavaScript is meant to be read by humans AND machines. If you want to go further down this path, I can't help you.
Building / Modifying
The source exists as a couple of TypeScript files which are "bundled" into a traditional JS file (along with TS definitions).
Building
To build new versions of the fluent-dom-esm.js file:
git clonethis project.cd fluent-dom-esmyarnyarn build
If everything goes as expected, you should have a newly built fluent-dom-esm.js file in the dist folder.
Modifying
To edit the source of the fluent-dom-esm.js file:
git clonethis project.cd fluent-dom-esmyarnyarn dev- Make your changes to
fluent-dom-esm.ts. - When you're happy with it, do a
yarn build.
If everything goes as expected, you should have a newly built fluent-dom-esm.js file in the dist folder with your changes.
Examples
All assume that $d is the default function from fluent-dom-esm:
import $d from "@itsericwoodward/fluent-dom-esm";
- For more examples, see the
demo.htmlfile in thedistfolder.
Create a Paragraph
$d(document.body).app($d
.c("p")
.s("background-color", "yellow")
.s("color", "black")
.t("The quick brown fox jumped over the lazy, sleeping dog.")
);
renders (with added spaces) as
<body>
<p style="background-color: yellow; color: black;">
The quick brown fox jumped over the lazy, sleeping dog.
</p>
</body>
Create a List
const $ul = $d
.c("ul")
.id("example-list")
.cls("example-list");
[
"List Item 1",
"List Item 2",
"List Item 3",
].forEach((reason, idx) => {
$ul.app(
$d
.c("li")
.id(`fluentDom-example-list-item${idx + 1}`)
.t(reason),
);
});
$d(document.body).app($ul);
renders (with added spaces) as
<body>
<ul class="example-list" id="example-list">
<li id="fluentDom-example-list-item1">List Item 1</li>
<li id="fluentDom-example-list-item2">List Item 2</li>
<li id="fluentDom-example-list-item3">List Item 3</li>
</ul>
</body>
Access via QuerySelector
Given the example list above:
$d('#example-list')
.app($d
.c("li")
.id(`fluentDom-example-list-item4`)
.t("List Item 4")
);
renders (with added spaces) as
<body>
<ul class="example-list" id="example-list">
<li id="fluentDom-example-list-item1">List Item 1</li>
<li id="fluentDom-example-list-item2">List Item 2</li>
<li id="fluentDom-example-list-item3">List Item 3</li>
<li id="fluentDom-example-list-item4">List Item 4</li>
</ul>
</body>
License
Copyright © 2025 Eric Woodward
Based on original source, copyright © 2009 Tommy Montgomery.
This program is free software. It comes without any warranty, to the
extent permitted by applicable law. You can redistribute it and/or
modify it under the terms of the following license:
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
Version 2, December 2004
Copyright (C) 2004 Sam Hocevar <sam@hocevar.net>
Everyone is permitted to copy and distribute verbatim or modified
copies of this license document, and changing it is allowed as long
as the name is changed.
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
0. You just DO WHAT THE FUCK YOU WANT TO.