{"id":39774716,"url":"https://github.com/jfftck/xynhtml","last_synced_at":"2026-02-22T23:02:00.357Z","repository":{"id":310666522,"uuid":"1035305350","full_name":"jfftck/XynHTML","owner":"jfftck","description":null,"archived":false,"fork":false,"pushed_at":"2026-02-17T00:55:20.000Z","size":348,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-02-17T07:22:58.518Z","etag":null,"topics":["javascript-library","library","reactive","signals","web"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jfftck.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-08-10T05:25:48.000Z","updated_at":"2026-02-17T00:53:26.000Z","dependencies_parsed_at":null,"dependency_job_id":"fc76c0a6-a9dc-4473-89cf-8bb7800b6e15","html_url":"https://github.com/jfftck/XynHTML","commit_stats":null,"previous_names":["jfftck/xynhtml"],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/jfftck/XynHTML","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jfftck%2FXynHTML","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jfftck%2FXynHTML/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jfftck%2FXynHTML/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jfftck%2FXynHTML/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jfftck","download_url":"https://codeload.github.com/jfftck/XynHTML/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jfftck%2FXynHTML/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29730224,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-22T20:09:16.275Z","status":"ssl_error","status_checked_at":"2026-02-22T20:09:13.750Z","response_time":110,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript-library","library","reactive","signals","web"],"created_at":"2026-01-18T11:54:19.119Z","updated_at":"2026-02-22T23:02:00.347Z","avatar_url":"https://github.com/jfftck.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# XynHTML\n\n\u003e ⚠️ **Warning**: This library is unstable and still under active development. APIs may change without notice. Use at your own risk in production environments.\n\nA lightweight, reactive library for building web applications using a declarative syntax. XynHTML is inspired by jQuery, but focuses on simplicity and performance with built-in reactive signals.\n\n## Features\n\n- **Reactive Signals**: Create reactive data that automatically updates the UI\n- **Effects**: Run side effects when signals change\n- **Derived Values**: Compute values based on other signals\n- **Declarative Components**: Build UI components with tagged template literals using `tag` function\n- **Conditional Rendering**: Show/hide elements based on signal values\n- **Form Validation**: Build reactive forms with real-time validation\n- **No Build Step**: Works directly in the browser with ES modules\n\n## Implementation Status\n\nBelow is the current implementation status of XynHTML's planned features:\n\n### Core Reactivity\n- ✅ **Signal System** - Basic reactive state management with subscription/notification\n- ✅ **Effect System** - Automatic side effect execution when signals change\n- ✅ **Derived Values** - Computed signals that update based on dependencies\n\n### Component System\n- ✅ **DOM Element Components** - Function for creating reactive HTML elements\n- ✅ **Dynamic Text Rendering** - Template literal text nodes with signal interpolation\n- ✅ **Switch DOM Elements** - Container for creating reactive switcher of multiple HTML elements\n- ✅ **HTML Fragments** - Document fragment support for efficient DOM updates\n- 🟥 **Map an Iterable to Elements** - Utilize a list signal to reactively generate updates to a list of elements\n- ✅ **CSS Selector Based Component Creation** - Function for creating a whole HTML node tree by using a syntax like CSS selectors\n    - ✅ **HTML DOM Elements** - Creating a basic HTML element and setting CSS classes, IDs, attributes, and events\n    - ✅ **Text Nodes** - Adding text nodes with reactive text\n    - 🟥 **Switch Element** - Make a switchable container that reactively selects an element\n    - 🟥 **List of Elements** - Generate a list of elements based on a reactive list\n\n### Advanced Data Structures\n- 🟥 **List Signal** - Reactive arrays with built-in list operations\n- 🟥 **Map Signal** - Reactive key-value stores with object-like interface\n\n### Addtional Components\n- ⌛️ **Route Signal** - Reactive state management based on page route, this will parse the query parameters\n- ⌛️ **Animation Signal** - Reactive state management based on the last animation state\n- ⌛️ **Transition Signal** - Reactive state management that returns the last state of transitions\n\n### Developer Experience \u0026 Tooling\n- 🚧 **Code Parser with Syntax Highlighting** - Parse and highlight JavaScript, HTML, CSS, and other languages within XynTag components\n- 🚧 **Widget System** - Pre-built reactive components (buttons, forms, modals, tooltips, etc.) for rapid development\n    - 🚧 **Button** - A simple syntax for creating the different types of buttons\n    - 🚧 **Input** - Support all kinds of text input with a single function\n    - 🚧 **Check/Radio** - Made as an easy way to add selectable elements\n    - 🚧 **Dropdown List** - Create dropdown lists that support single value and multiple values\n    - 🚧 **Slider** - Add and extend sliders with reactive data\n    - 🚧 **Time and Date** - Reactive clocks and calendars\n    - 🚧 **Combo Lists** - Add a text input to any control with reactive values\n    - 🚧 **Tooltips** - Add reactive tooltips and error messages to other reactive elements\n    - 🚧 **Windows** - Dialog windows that are modal and free floating are handled with this control\n    - 🚧 **Layout Container** - A reactive container designed to be used with the Theme Manager\n    - 🚧 **Theme Manager** - A reactive and injected set of styles based on community developed themes\n\n### Routing \u0026 Navigation\n- 🚧 **Client-Side Routing** - Hash-based and history API routing for single-page applications\n- 🚧 **Route Parameters** - Dynamic route segments with parameter extraction\n- 🚧 **Route Guards** - Authentication and authorization checks before route activation\n- 🚧 **Nested Routing** - Hierarchical route structures for complex applications\n- 🚧 **Route Transitions** - Animated transitions between routes with lifecycle hooks\n\n### Legend\n- ✅ **Implemented** - Feature is complete and functional\n- 🟥 **Planned** - Feature is planned but not yet implemented\n- ⌛️ **In Progress** - Feature is currently being worked on and is completely untested\n- 🏢 **Wishlist Completed** - Wishlist feature that has been implemented\n- 🚧 **Wishlist Incomplete** - Wishlist feature ideas that might be completed in the future, but no commitment is made\n\n## Quick Start\n\n1. Import XynHTML in your project:\n\n```javascript\nimport { signal, effect, derived, tag, text, mountNext, mountRoot } from \"./xyn_html.js\";\n```\n\n2. Create reactive signals:\n\n```javascript\nconst counter = signal(0);\nconst message = signal(\"Hello World!\");\n```\n\n3. Build UI components:\n\n```javascript\nconst button = tag`button`;\nbutton.children.add(text`Count: ${counter}`);\nbutton.event.add(\"click\", () =\u003e counter.value++);\n\nmountNext(button, document.body);\n```\n\n## Core Concepts\n\n### Signals\nSignals are reactive data containers that notify subscribers when their value changes:\n\n```javascript\nconst name = signal(\"John\");\nname.value = \"Jane\"; // Triggers updates\n```\n\n### Effects\nEffects run functions when dependent signals change:\n\n```javascript\nconst unsubscribe = effect(() =\u003e {\n    console.log(`Name is: ${name.value}`);\n}, [name]);\n```\n\n### Derived Values\nCreate computed values that update automatically:\n\n```javascript\nconst fullName = derived(() =\u003e {\n    return `${firstName.value} ${lastName.value}`;\n}, [firstName, lastName]);\n\n// Clean up when done\nfullName.unsubscribeDerived();\n```\n\n### XynHTML Components\nBuild HTML elements with reactive content:\n\n```javascript\nconst container = tag`div`;\nconst title = tag`h1`;\ntitle.children.add(text`Welcome, ${userName}!`);\ncontainer.children.add(title);\n\nmountNext(container, \"body\"); // Can also get the by selector strings\n```\n\n## Examples\n\nTo see XynHTML in action with comprehensive examples, visit the [examples page](https://jfftck.github.io/XynHTML) in this repository. The examples cover:\n\n- Basic signal usage and subscription\n- Multiple signals and effects\n- Derived values and computed properties\n- Complex state management\n- DOM creation and manipulation\n- Conditional rendering\n- Form validation\n- Performance optimization\n- Theme switching\n\n## API Reference\n\n### signal(initialValue)\nCreates a new reactive signal.\n\n### effect(callback, dependencies)\nRuns a callback when any of the dependency signals change.\n\n### derived(callback, dependencies)\nCreates a computed signal that updates based on other signals. Returns a signal with an additional `unsubscribeDerived()` method for cleanup.\n\n### tag(tagName, ...{XynHTML.tag | Object\u003cstring, any\u003e}) | tag\\`tagName\\`\nCreates a new HTML element component.\n\n### text\\`template\\`\nCreates reactive text content with signal interpolation.\n\n### mountNext(component, selector) | mountRoot(component, selector)\nBoth mount a component to a DOM element, with the only difference of `mountRoot` will clear the contents and then mount it, and mountNext just appends it.\n\n#### Derived Signal Methods\n- **unsubscribeDerived()**: Cleans up the derived signal's internal effect subscription.\n\n## Browser Support\n\nXynHTML works in all modern browsers that support ES modules and Proxy objects:\n- Chrome 61+\n- Firefox 60+\n- Safari 10.1+\n- Edge 16+\n\n## Getting Started\n\n1. Clone or download this repository\n2. Open `index.html` in your browser to see the examples\n3. Start building your own reactive applications with XynHTML!\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjfftck%2Fxynhtml","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjfftck%2Fxynhtml","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjfftck%2Fxynhtml/lists"}