Data-driven declarative & extensible HTML form generation
npm install @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
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 extensiblecompileForm()
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.
Please see the rdom-formgen example
project,
which demonstrates all supported elements and various customization
options...
``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`
ALPHA - bleeding edge / work-in-progress
Search or submit any issues for this package
- @thi.ng/rdom-components - Collection of unstyled, customizable components for @thi.ng/rdom
`bash`
yarn add @thi.ng/rdom-forms
ESM import:
`ts`
import * as rf from "@thi.ng/rdom-forms";
Browser ESM import:
`html`
Package sizes (brotli'd, pre-treeshake): ESM: 2.30 KB
- @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)
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 |
TODO
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
}
© 2023 - 2026 Karsten Schmidt // Apache License 2.0