Skip to content

Latest commit

 

History

History

hdom-components

@thi.ng/hdom-components

npm version npm downloads Mastodon Follow

Note

This is one of 199 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

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

ESM import:

import * as hc from "@thi.ng/hdom-components";

Browser ESM import:

<script type="module" src="https://esm.run/@thi.ng/hdom-components"></script>

JSDelivr documentation

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

Dependencies

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

Usage examples

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

Screenshot Description Live 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

Form elements

Links

Other

Authors

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
}

License

© 2018 - 2024 Karsten Schmidt // Apache License 2.0