Show HN: HSON / Hson-Live

neutralica1 pts0 comments

• HSON (Hypertext Structured Object Notation) is a glue format . Its node graph models JSON values and HTML documents in a common tree representation, and its serialized syntax can express both. HTML can be represented as JSON data, and JSON can be represented as markup. - Uniting two non-interchangeable building blocks of the web suggests new ways of building web content. This is the key insight that powers hson-live.• hson-live is a TypeScript library built to realize HSON. It has two core components:- hson.transform converts JSON and HTML to and from HSON. The 7-step transformer circuit is stable under repeated round trips: after canonicalization, data does not drift across repeated loops. hson-live provides a circuit test diagnostic to verify the parser chain. hson-live supports JSON, HTML/XML, SVG, and HSON.- hson.liveTree is a web-authoring surface built on this operation. At runtime, LiveTree: 1. parses document.body and nested content to a HSON node graph 2. maintains a DOM projection of that graph 3. provides an interface for editing and manipulationLiveTree offers a vision of markup + styling + data in a single source of truth, unified in a low-friction typed ecosystem. LiveTree s API includes: - traversal, creation, and manipulation of the underlying HSON graph with synchronous DOM updates - EventListener management with automated teardown - SVG creation and animation - canvas support - scoped CSS, keyframes, animation, and @property - ergonomic attribute managementLiveDemo, the first website made entirely in hson-live, can be found athson.terminalgothic.comLiveDemo features 1000+ tests, interactive demos highlighting various functionalities, as well as the readme and other documentation.hson-live is in very early stages still.(Disclaimer: I am not a developer but an enthusiastic hobbyist; this is my first library. Please be gentle.)

hson live json graph html livetree

Related Articles