[!NOTE] This is one of 190 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
• Status
• Installation
• Dependencies
• Usage examples
• API
  • Canvas
  • Form elements
  • Links
  • Other
• Authors
• License

About

Raw, skinnable UI & SVG components for @thi.ng/hdom.

A growing collection of unstyled, re-usable & customizable components for use with @thi.ng/hdom & @thi.ng/hiccup.

Please see ADR-0002 and onwards for detailed discussion about the design intentions of these components. Feedback welcome!

Status

BETA - possibly breaking changes forthcoming

Search or submit any issues for this package

Installation

yarn add @thi.ng/hdom-components
Copy

ES module import:

<script type="module" src="https://cdn.skypack.dev/@thi.ng/hdom-components"></script>
Copy

Skypack documentation

For Node.js REPL:

const hdomComponents = await import("@thi.ng/hdom-components");
Copy

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

Dependencies

• @thi.ng/api
• @thi.ng/canvas
• @thi.ng/checks
• @thi.ng/math
• @thi.ng/transducers
• @thi.ng/transducers-stats

Usage examples

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

Screenshot	Description	Live demo	Source
	Figlet-style bitmap font creation with transducers	Demo	Source
	Canvas based dial widget	Demo	Source
	2D transducer based cellular automata	Demo	Source
	Basic crypto-currency candle chart with multiple moving averages plots	Demo	Source
	hdom update performance benchmark w/ config options	Demo	Source
	Various hdom-canvas shape drawing examples & SVG conversion / export	Demo	Source
	Custom dropdown UI component for hdom	Demo	Source
	Custom dropdown UI component w/ fuzzy search	Demo	Source
	Customizable slide toggle component demo	Demo	Source
	Worker based, interactive Mandelbrot visualization	Demo	Source
	Triple store query results & sortable table	Demo	Source
	WebGL cube maps with async texture loading	Demo	Source

API

Generated API docs

Canvas

• Canvas types (WebGL, WebGL2 & Canvas2D)

Form elements

• Button
• Button group
• Dropdown
• Pager

Links

• Link types

Other

• FPS counter
• Notification
• Sparkline
• Title

Authors

• Karsten Schmidt

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

@misc{thing-hdom-components,
  title = "@thi.ng/hdom-components",
  author = "Karsten Schmidt",
  note = "https://thi.ng/hdom-components",
  year = 2018
}
Copy

License

© 2018 - 2024 Karsten Schmidt // Apache License 2.0