Skip to main content
Home
Browse packagesDocsSign in

@itsericwoodward/fluent-dom-esm@2.3.0

latest

Fluent DOM Manipulation, adapted to ESM and cranked up to v2.3(.0).

This package works with BrowsersIt is unknown whether this package works with Cloudflare Workers, Node.js, Deno, Bun
It is unknown whether this package works with Cloudflare Workers
It is unknown whether this package works with Node.js
It is unknown whether this package works with Deno
It is unknown whether this package works with Bun
This package works with Browsers
JSR Score
94%
Published
2 months ago (2.3.0)

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

  1. Grab the latest copy of the fluent-dom-esm.js file, either by downloading it or doing a git clone and pulling it out of the dist folder.
  2. Add the newly acquired file to your static site / progressive web app / over-engineered blog.
  3. Import it as an ESM module (import $d from "./src/fluent-dom-esm.js").
  4. 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 Document object 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:

  1. git clone this project.
  2. cd fluent-dom-esm
  3. yarn
  4. yarn 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:

  1. git clone this project.
  2. cd fluent-dom-esm
  3. yarn
  4. yarn dev
  5. Make your changes to fluent-dom-esm.ts.
  6. 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.html file in the dist folder.

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.

New Ticket: Report package

Please provide a reason for reporting this package. We will review your report and take appropriate action.

Please review the JSR usage policy before submitting a report.

Add Package

deno add jsr:@itsericwoodward/fluent-dom-esm

Import symbol

import * as fluent_dom_esm from "@itsericwoodward/fluent-dom-esm";
or

Import directly with a jsr specifier

import * as fluent_dom_esm from "jsr:@itsericwoodward/fluent-dom-esm";

Add Package

pnpm i jsr:@itsericwoodward/fluent-dom-esm
or (using pnpm 10.8 or older)
pnpm dlx jsr add @itsericwoodward/fluent-dom-esm

Import symbol

import * as fluent_dom_esm from "@itsericwoodward/fluent-dom-esm";

Add Package

yarn add jsr:@itsericwoodward/fluent-dom-esm
or (using Yarn 4.8 or older)
yarn dlx jsr add @itsericwoodward/fluent-dom-esm

Import symbol

import * as fluent_dom_esm from "@itsericwoodward/fluent-dom-esm";

Add Package

vlt install jsr:@itsericwoodward/fluent-dom-esm

Import symbol

import * as fluent_dom_esm from "@itsericwoodward/fluent-dom-esm";

Add Package

npx jsr add @itsericwoodward/fluent-dom-esm

Import symbol

import * as fluent_dom_esm from "@itsericwoodward/fluent-dom-esm";

Add Package

bunx jsr add @itsericwoodward/fluent-dom-esm

Import symbol

import * as fluent_dom_esm from "@itsericwoodward/fluent-dom-esm";