!@thi.ng/rdom-forms

!npm downloads

> [!NOTE]
> This is one of 214 standalone projects, maintained as part
> of the @thi.ng/umbrella monorepo
> and anti-framework.
>
> 🚀 Please help me to work full-time on these projects by sponsoring me on
> GitHub. Thank you! ❤️

- About
- Examples
- Login form
- Status
- Related packages
- Installation
- Dependencies
- Usage examples
- API
- Authors
- License

About

Data-driven declarative & extensible HTML form generation. This is a support package for @thi.ng/rdom.

This package uses vanilla JS objects to define component specs for various types
of form elements (various factory functions are provided). These specs can then
be passed to the polymorphic & dynamically extensible
compileForm()
function to generate the actual form elements/components in hiccup format, which
can then be used with
thi.ng/rdom or
for static (or SSR) HTML generation via
thi.ng/hiccup.

All generated form elements are unstyled by default, but can be fully customized
(in various stages) via user-provided options.

Examples

Please see the rdom-formgen example
project,
which demonstrates all supported elements and various customization
options...

$3

``ts tangle:export/readme1.ts
import {
compileForm, form, hidden, password, str, submit
} from "@thi.ng/rdom-forms";

// compile form from given field descriptions
const loginForm = compileForm(
form({ action: "/login", method: "post" },
// string input
str({ id: "user", label: "Username", desc: "or email address" }),
// password
password({ id: "pass", label: "Password", desc: "min. 8 characters", min: 8 }),
// hidden form value
hidden({ name: "target", value: "user-home" }),
submit({ title: "Login", label: "" })
),
{
// disable reactive value subscriptions
behaviors: { values: false },
// customize attribs for label descriptions
descAttribs: { class: "desc" }
}
);

// use thi.ng/hiccup to serialize as HTML
import { serialize } from "@thi.ng/hiccup";

console.log(serialize(loginForm));
`

Resulting output (reformatted):

`html


`bash
yarn add @thi.ng/rdom-forms
`

ESM import:

`ts
import * as rf from "@thi.ng/rdom-forms";
`

Browser ESM import:

`html

`

JSDelivr documentation

Package sizes (brotli'd, pre-treeshake): ESM: 2.30 KB

Dependencies

- @thi.ng/api
- @thi.ng/checks
- @thi.ng/defmulti
- @thi.ng/hiccup-html
- @thi.ng/rdom
- @thi.ng/rstream

Note: @thi.ng/api is in _most_ cases a type-only import (not used at runtime)

Usage examples

Nine projects in this repo's
/examples
directory are using this package:

| Screenshot | Description | Live demo | Source |
|:-------------------------------------------------------------------------------------------------------------------------|:----------------------------------------------------------------------------|:--------------------------------------------------------|:-------------------------------------------------------------------------------------|
| | Large ASCII font text generator using @thi.ng/rdom | Demo | Source |
| | Interactive & reactive image blurhash generator | Demo | Source |
| | Color palette generation via dominant color extraction from uploaded images | Demo | Source |
| | Matrix-based image color adjustments | Demo | Source |
| | Interactive pixel sorting tool using thi.ng/color & thi.ng/pixel | Demo | Source |
| | Basic usage of the declarative rdom-forms generator | Demo | Source |
| | rdom & hiccup-canvas interop test | Demo | Source |
| | Interactive ridge-line plot | Demo | Source |
| | Interactive scatter & line plot of low-discrepancy samples | Demo | Source |

API

Generated API docs

TODO

Authors

- Karsten Schmidt

If this project contributes to an academic publication, please cite it as:

`bibtex
@misc{thing-rdom-forms,
title = "@thi.ng/rdom-forms",
author = "Karsten Schmidt",
note = "https://thi.ng/rdom-forms",
year = 2023
}
``

License

© 2023 - 2026 Karsten Schmidt // Apache License 2.0