{"id":35128942,"url":"https://github.com/oncebuilder/xon","last_synced_at":"2026-04-01T18:24:51.101Z","repository":{"id":330360142,"uuid":"1121624965","full_name":"oncebuilder/xon","owner":"oncebuilder","description":"Modern Declarative JavaScript Framework. Build interactive web applications with HTML attributes. No built process required.","archived":false,"fork":false,"pushed_at":"2025-12-27T12:18:31.000Z","size":62,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-01-02T15:04:26.249Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://xonjs.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/oncebuilder.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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-12-23T09:35:02.000Z","updated_at":"2025-12-27T23:03:10.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/oncebuilder/xon","commit_stats":null,"previous_names":["oncebuilder/xon"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/oncebuilder/xon","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oncebuilder%2Fxon","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oncebuilder%2Fxon/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oncebuilder%2Fxon/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oncebuilder%2Fxon/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/oncebuilder","download_url":"https://codeload.github.com/oncebuilder/xon/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oncebuilder%2Fxon/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31018544,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-27T03:51:26.850Z","status":"ssl_error","status_checked_at":"2026-03-27T03:51:09.693Z","response_time":164,"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":[],"created_at":"2025-12-28T04:27:20.960Z","updated_at":"2026-03-27T04:02:35.455Z","avatar_url":"https://github.com/oncebuilder.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n\u003ch1 align=\"center\"\u003e⚡ XON Framework vBeta Reference\u003c/h1\u003e\n\n\u003ch1 align=\"center\"\u003e⚡ XON Framework v1.0.0 Release in January \u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cstrong\u003eBuild reactive web applications with HTML attributes only.\u003c/strong\u003e\u003cbr\u003e\n  No build process. No complex configuration. Pure declarative JavaScript.\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/oncebuilder/xonjs/releases\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/version-Beta-brightgreen.svg\" alt=\"Version Beta\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/oncebuilder/xonjs/issues\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/issues/oncebuilder/xonjs\" alt=\"GitHub Issues\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/oncebuilder/xonjs/stargazers\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/stars/oncebuilder/xonjs\" alt=\"GitHub Stars\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"#browser-compatibility\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/browser-Chrome%2060%2B,%20Firefox%2055%2B,%20Safari%2010%2B-brightgreen.svg\" alt=\"Browser Support\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"#-features\"\u003eFeatures\u003c/a\u003e •\n  \u003ca href=\"#-installation\"\u003eInstallation\u003c/a\u003e •\n  \u003ca href=\"#-quick-start\"\u003eQuick Start\u003c/a\u003e •\n  \u003ca href=\"#-documentation\"\u003eDocumentation\u003c/a\u003e •\n  \u003ca href=\"#-examples\"\u003eExamples\u003c/a\u003e •\n  \u003ca href=\"#-api-reference\"\u003eAPI\u003c/a\u003e •\n  \u003ca href=\"#-contributing\"\u003eContributing\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://oncebuilder.github.io/xonjs\" target=\"_blank\"\u003e📚 Live Documentation\u003c/a\u003e •\n  \u003ca href=\"https://oncebuilder.github.io/xonjs/examples\" target=\"_blank\"\u003e🚀 Live Examples\u003c/a\u003e •\n  \u003ca href=\"https://github.com/oncebuilder/xonjs/issues/new\" target=\"_blank\"\u003e🐛 Report Bug\u003c/a\u003e\n\u003c/p\u003e\n\n---\n\n# ✨ Why XON Framework?\n\n\nXON Framework enables you to build modern, reactive web applications using only HTML attributes. It brings the power of reactive programming to vanilla HTML without the complexity of build tools or configuration files.\n\n\n## 🚀 XON Framework JSON Approach\n\n\n```\n\u003c!-- Just HTML with data-xon attributes --\u003e\n\u003cdiv data-xon='{\"$state\":{\"count\":0},\"$bind\":{\"count\":\".display\"}}'\u003e\n\n  \u003cdiv class=\"display\"\u003e\u003c/div\u003e\n\n  \u003cbutton data-xon=\"@click$state.count++\"\u003eIncrement\u003c/button\u003e\n\n\u003c/div\u003e\n\u003cscript src=\"xon.js\"\u003e\u003c/script\u003e\n```\n\n## ✨ Features\n\n\n\u003ctable\u003e \u003ctr\u003e \u003ctd\u003e\u003cstrong\u003e🚀 Declarative Syntax\u003c/strong\u003e\u003c/td\u003e \u003ctd\u003eBuild apps with HTML attributes, no JavaScript configuration needed\u003c/td\u003e \u003c/tr\u003e \u003ctr\u003e \u003ctd\u003e\u003cstrong\u003e⚡ Reactive State\u003c/strong\u003e\u003c/td\u003e \u003ctd\u003eAutomatic DOM updates with computed properties and memoization\u003c/td\u003e \u003c/tr\u003e \u003ctr\u003e \u003ctd\u003e\u003cstrong\u003e🔗 Auto-Binding\u003c/strong\u003e\u003c/td\u003e \u003ctd\u003eDOM elements automatically sync with state changes\u003c/td\u003e \u003c/tr\u003e \u003ctr\u003e \u003ctd\u003e\u003cstrong\u003e🎯 Enhanced Events\u003c/strong\u003e\u003c/td\u003e \u003ctd\u003eDelegated events with context variables ($this, $event, $data)\u003c/td\u003e \u003c/tr\u003e \u003ctr\u003e \u003ctd\u003e\u003cstrong\u003e📦 Component System\u003c/strong\u003e\u003c/td\u003e \u003ctd\u003eAuto-rendering components with file loading\u003c/td\u003e \u003c/tr\u003e \u003ctr\u003e \u003ctd\u003e\u003cstrong\u003e🛡️ Security First\u003c/strong\u003e\u003c/td\u003e \u003ctd\u003eBuilt-in sanitization and dangerous pattern blocking\u003c/td\u003e \u003c/tr\u003e \u003ctr\u003e \u003ctd\u003e\u003cstrong\u003e📄 Template Engine\u003c/strong\u003e\u003c/td\u003e \u003ctd\u003ePowerful templating with form integration\u003c/td\u003e \u003c/tr\u003e \u003ctr\u003e \u003ctd\u003e\u003cstrong\u003e🔄 Built-in Router\u003c/strong\u003e\u003c/td\u003e \u003ctd\u003eClient-side routing with history management\u003c/td\u003e \u003c/tr\u003e \u003ctr\u003e \u003ctd\u003e\u003cstrong\u003e⚙️ Performance\u003c/strong\u003e\u003c/td\u003e \u003ctd\u003eMemoization, batching, and template caching\u003c/td\u003e \u003c/tr\u003e \u003ctr\u003e \u003ctd\u003e\u003cstrong\u003e🌐 Modern Browsers\u003c/strong\u003e\u003c/td\u003e \u003ctd\u003eWorks in Chrome 60+, Firefox 55+, Safari 10+, Edge 79+\u003c/td\u003e \u003c/tr\u003e \u003c/table\u003e\n\n\n# 🚀 Quick Start\n\n\n## CDN (Recommended)\n\n\n\u003c!-- Latest version from CDN --\u003e\n```\n\u003c!--- comming soon --\u003e\n\n```\n\n\n## Local Installation\n\n\n### Download the file:\n```\nhttps://raw.githubusercontent.com/oncebuilder/xonjs/vBeta/xon.js\n```\n\n### Using curl\n```\ncurl -O https://raw.githubusercontent.com/oncebuilder/xonjs/vBeta/xon.js\n```\n\n### Using wget\n```\nwget https://raw.githubusercontent.com/oncebuilder/xonjs/vBeta/xon.js\n```\n\n### Include in your HTML:\n\n```\n\u003cscript src=\"xon.js\"\u003e\u003c/script\u003e\n```\n\n###  NPM (Coming Soon) Planned for future release\n```npm install xonjs```\n\n\n# 🚀 Quick Start\n\n\n## 📦 Examples\n\n\n### Basic Counter\n```\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n    \u003ctitle\u003eXON Counter App\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003c!-- Reactive counter --\u003e\n    \u003cdiv data-xon='{\"$state\":{\"count\":0},\"$bind\":{\"count\":\".display\"}}'\u003e\n        \u003ch2\u003eCount: \u003cspan class=\"display\"\u003e\u003c/span\u003e\u003c/h2\u003e\n        \u003cbutton data-xon=\"@click$state.count++\"\u003eIncrement\u003c/button\u003e\n        \u003cbutton data-xon=\"@click$state.count--\"\u003eDecrement\u003c/button\u003e\n        \u003cbutton data-xon=\"@click$state.count(0)\"\u003eReset\u003c/button\u003e\n    \u003c/div\u003e\n\n    \u003cscript src=\"xon.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n### Todo List App\n```\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n    \u003ctitle\u003eXON Todo App\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003c!-- Todo List Container --\u003e\n    \u003cdiv data-xon='{\n        \"$state\": {\n            \"todos\": [],\n            \"newTodo\": \"\"\n        },\n        \"$bind\": {\n            \"newTodo\": \"#new-todo\"\n        }\n    }'\u003e\n        \u003ch1\u003eTodo List\u003c/h1\u003e\n        \n        \u003c!-- Add Todo Form --\u003e\n        \u003cinput id=\"new-todo\" placeholder=\"Add a new todo...\"\u003e\n        \u003cbutton data-xon=\"@click$state.todos.push({text: $state.newTodo, done: false}); $state.newTodo('')\"\u003e\n            Add Todo\n        \u003c/button\u003e\n        \n        \u003c!-- Todo List --\u003e\n        \u003cdiv data-xon=\"%todoTemplate\"\u003e\n            \u003cdiv class=\"todo-item\"\u003e\n                \u003cinput type=\"checkbox\" data-xon=\"@change$state.todos[$index].done($this.checked)\"\u003e\n                \u003cspan style=\"text-decoration: {$done ? 'line-through' : 'none'}\"\u003e\n                    {$text}\n                \u003c/span\u003e\n                \u003cbutton data-xon=\"@click$state.todos.splice($index, 1)\"\u003e❌\u003c/button\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n        \n        \u003c!-- Todo Template Data --\u003e\n        \u003cscript type=\"application/json\" id=\"todoTemplate\"\u003e\n        {\n            \"items\": [],\n            \"template\": [\"text\", \"done\"]\n        }\n        \u003c/script\u003e\n    \u003c/div\u003e\n\n    \u003cscript src=\"xon.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n### User Profile with Components\n```\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n    \u003ctitle\u003eXON User Profile\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003c!-- Load header component --\u003e\n    \u003cdiv data-xon=\"#header\"\u003e\u003c/div\u003e\n    \n    \u003c!-- User Profile Container --\u003e\n    \u003cdiv data-xon='{\n        \"$state\": {\n            \"user\": {\n                \"name\": \"John Doe\",\n                \"email\": \"john@example.com\",\n                \"avatar\": \"https://i.pravatar.cc/150?img=1\"\n            }\n        },\n        \"$bind\": {\n            \"user.name\": \".user-name\",\n            \"user.email\": \".user-email\"\n        }\n    }'\u003e\n        \u003cdiv class=\"profile-card\"\u003e\n            \u003cimg src=\"{$user.avatar}\" alt=\"Avatar\" class=\"avatar\"\u003e\n            \u003ch2 class=\"user-name\"\u003e\u003c/h2\u003e\n            \u003cp class=\"user-email\"\u003e\u003c/p\u003e\n            \u003cbutton data-xon=\"@click$state.user.name('Jane Smith')\"\u003e\n                Change Name\n            \u003c/button\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n    \n    \u003c!-- Load footer component --\u003e\n    \u003cdiv data-xon=\"#footer\"\u003e\u003c/div\u003e\n\n    \u003cscript src=\"xon.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n# 📖 Documentation\n\n\n## Core Syntax\n### Event Handling\n\n```\n\u003c!-- Basic click event --\u003e\n\u003cbutton data-xon=\"@click$showAlert('Hello!')\"\u003eClick Me\u003c/button\u003e\n\n\u003c!-- Multiple events --\u003e\n\u003cbutton data-xon=\"@click$submit @mouseover$highlight @mouseout$unhighlight\"\u003e\n    Submit\n\u003c/button\u003e\n\n\u003c!-- With context variables --\u003e\n\u003cbutton data-xon=\"@click$processData($this, $event, $data)\"\u003e\n    Process\n\u003c/button\u003e\n\n\u003c!-- Delegated events --\u003e\n\u003cdiv data-xon=\"@click~\u003e.item$selectItem($this)\"\u003e\n    \u003cdiv class=\"item\" data-id=\"1\"\u003eItem 1\u003c/div\u003e\n    \u003cdiv class=\"item\" data-id=\"2\"\u003eItem 2\u003c/div\u003e\n\u003c/div\u003e\n```\n\n### State Management\n\n```\n\u003c!-- State assignment --\u003e\n\u003cbutton data-xon=\"@click$state.count(5)\"\u003eSet to 5\u003c/button\u003e\n\u003cbutton data-xon=\"@click$state.count++\"\u003eIncrement\u003c/button\u003e\n\u003cbutton data-xon=\"@click$state.count--\"\u003eDecrement\u003c/button\u003e\n\n\u003c!-- Nested state --\u003e\n\u003cbutton data-xon=\"@click$state.user.name('John')\"\u003eSet Name\u003c/button\u003e\n\u003cbutton data-xon=\"@click$state.user.email('john@example.com')\"\u003eSet Email\u003c/button\u003e\n\n\u003c!-- Array operations --\u003e\n\u003cbutton data-xon=\"@click$state.items.push({id: 1, name: 'Item'})\"\u003e\n    Add Item\n\u003c/button\u003e\n\u003cbutton data-xon=\"@click$state.items.splice(0, 1)\"\u003e\n    Remove First\n\u003c/button\u003e\n```\n\n\n### Templates\n\n```\n\u003c!-- Simple template --\u003e\n\u003ctemplate id=\"userTemplate\"\u003e\n{\n    \"items\": [\n        {\"name\": \"John\", \"email\": \"john@example.com\", \"age\": 30},\n        {\"name\": \"Jane\", \"email\": \"jane@example.com\", \"age\": 25}\n    ]\n}\n\u003c/template\u003e\n\n\u003cdiv data-xon=\"%userTemplate\"\u003e\n    \u003cdiv class=\"user-card\"\u003e\n        \u003ch3\u003e{$name}\u003c/h3\u003e\n        \u003cp\u003e{$email}\u003c/p\u003e\n        \u003cp\u003eAge: {$age}\u003c/p\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n\n\u003c!-- Form templates --\u003e\n\u003cbutton data-xon=\"@click%%userData~\u003e#userForm\"\u003e\n    Load Form Data\n\u003c/button\u003e\n```\n\n\n### File Loading\n\n\n```\n\u003c!-- Load component (auto-rendered) --\u003e\n\u003cdiv data-xon=\"#header\"\u003e\u003c/div\u003e\n\n\u003c!-- Load HTML file --\u003e\n\u003cdiv data-xon=\"#modal.html~\u003e.modal-content\"\u003e\u003c/div\u003e\n\n\u003c!-- Load CSS --\u003e\n\u003cdiv data-xon=\"#styles.css\"\u003e\u003c/div\u003e\n\n\u003c!-- Load JavaScript --\u003e\n\u003cdiv data-xon=\"#utils.js\"\u003e\u003c/div\u003e\n```\n\n\n### Routing\n\n\n```\n\u003c!-- Simple routing --\u003e\n\u003cbutton data-xon=\"@click~/home\"\u003eGo Home\u003c/button\u003e\n\u003cbutton data-xon=\"@click~/dashboard\"\u003eDashboard\u003c/button\u003e\n\n\u003c!-- Combine with file loading --\u003e\n\u003cbutton data-xon=\"@click#dashboard.html~\u003e#content~/dashboard\"\u003e\n    Load Dashboard\n\u003c/button\u003e\n\n\u003c!-- Direct route links --\u003e\n\u003ca href=\"#\" data-xon=\"~/home\"\u003eHome\u003c/a\u003e\n\u003ca href=\"#\" data-xon=\"~/about\"\u003eAbout\u003c/a\u003e\n```\n\n\n# JSON Reactivity Containers\n\n\nXON's most powerful feature is JSON Reactivity Containers:\n\n```\n\u003cdiv data-xon='{\n    \"$state\": {\n        \"count\": 0,\n        \"name\": \"XON Application\",\n        \"user\": {\n            \"id\": 1,\n            \"email\": \"user@example.com\",\n            \"profile\": {\n                \"avatar\": \"default.jpg\",\n                \"bio\": \"Software developer\"\n            }\n        },\n        \"items\": [\n            { \"id\": 1, \"name\": \"Item 1\", \"price\": 10 },\n            { \"id\": 2, \"name\": \"Item 2\", \"price\": 20 }\n        ],\n        \"settings\": {\n            \"theme\": \"dark\",\n            \"notifications\": true\n        }\n    },\n    \"$bind\": {\n        \"count\": \".count-display\",\n        \"name\": \".app-title\",\n        \"user.email\": \".email-display\",\n        \"user.profile.bio\": \".bio-display\",\n        \"settings.theme\": \".theme-indicator\"\n    },\n    \"$computed\": {\n        \"itemCount\": \".item-count\",\n        \"totalPrice\": \".total-price\"\n    }\n}'\u003e\n    \u003c!-- Auto-bound elements --\u003e\n    \u003ch1 class=\"app-title\"\u003e\u003c/h1\u003e\n    \u003cdiv class=\"count-display\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"email-display\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"bio-display\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"theme-indicator\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"item-count\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"total-price\"\u003e\u003c/div\u003e\n    \n    \u003c!-- State manipulation --\u003e\n    \u003cbutton data-xon=\"@click$state.count++\"\u003eIncrement\u003c/button\u003e\n    \u003cbutton data-xon=\"@click$state.user.email('new@example.com')\"\u003e\n        Update Email\n    \u003c/button\u003e\n    \u003cbutton data-xon=\"@click$state.settings.theme('light')\"\u003e\n        Toggle Theme\n    \u003c/button\u003e\n\u003c/div\u003e\n```\n\n### Context Variables\nXON provides enhanced context variables available in all event handlers:\n\n| Variable   | Description                         | Example                                   |\n|-----------|-------------------------------------|--------------------------------------------|\n| `$this`    | Current element                     | `$this.classList.add('active')`            |\n| `$source`  | Source element with `data-xon`       | `$source.dataset.id`                       |\n| `$target`  | Target element                      | `$target.innerHTML`                        |\n| `$event`   | Native event object                 | `$event.preventDefault()`                 |\n| `$document`| Document object                     | `$document.title`                         |\n| `$window`  | Window object                       | `$window.scrollTo(0, 0)`                  |\n| `$data`    | Element dataset                     | `$data.id`                                |\n| `$value`   | Element value / text                | `$value.trim()`                           |\n| `$index`   | Element index (templates)           | `Item {$index + 1}`                       |\n| `$parent`  | Parent element                      | `$parent.removeChild($this)`              |\n| `$children`| Child elements                      | `$children.length`                        |\n| `$xon`     | XON framework instance              | `$xon.debug.log('test')`                  |\n| `$state`   | Global reactive state               | `$state.count++`                          |\n| `$bind`    | Binding system                      | `$bind.username = '.new-display'`         |\n\n\n# 🔧 API Reference\n\n## Core API\n\n```\n// Initialize framework\nxon.init();\n\n// Render specific elements\nxon.render('#app');\nxon.render(document.getElementById('container'));\n\n// Load resources\nxon.loadScript('app.js', callback, true);\nxon.loadStyle('styles.css', callback);\nxon.loadJSON('data.json', callback, null, 'users');\n\n// Query shortcuts\nxon.by('#id');                    // querySelector\nxon.byAll('.class');              // querySelectorAll\nxon.byId('element');              // getElementById\nxon.byClass('items');             // getElementsByClassName\nxon.byTag('div');                 // getElementsByTagName\n```\n\n### Reactivity API\n\n\n```\n// Create reactive state\nxon.reactivity.createState('app', {\n    counter: 0,\n    user: { name: '', email: '' }\n});\n\n// Create state with computed properties\nxon.reactivity.createStateWithComputed('cart', {\n    items: [],\n    taxRate: 0.1\n}, {\n    itemCount() { return this.items.length; },\n    subtotal() { \n        return this.items.reduce((sum, item) =\u003e sum + item.price, 0);\n    },\n    tax() { return this.subtotal * this.taxRate; },\n    total() { return this.subtotal + this.tax; }\n});\n\n// Memoization for expensive calculations\nconst result = xon.reactivity.memo(\n    ['calculation', param1, param2],\n    () =\u003e expensiveOperation(param1, param2),\n    10000  // Cache for 10 seconds\n);\n\n// Batch multiple updates\nxon.reactivity.batch(() =\u003e {\n    state.a = 1;\n    state.b = 2;\n    state.c = 3;\n    // Only one DOM update\n});\n\n// Clear cache\nxon.reactivity.clearCache();                    // All cache\nxon.reactivity.clearCache('specificKey');       // Specific key\n```\n\n# Template API\n\n```\n// Render template to element\nxon.template.renderTo('templateName', targetElement, form, priority, customHTML);\n\n// Render large datasets in chunks\nxon.template.renderLarge('bigTemplate', '#container', 50); // 50 items per chunk\n\n// Populate form with template data\nxon.template.populateForm(formElement, 'templateName');\n\n// Clear template cache\nxon.template.clearCache();          // Clear all cache\nxon.template.clearCache('template'); // Clear specific template\n```\n\n# Router API\n\n```\n// Navigate to route\nxon.router.routeTo('/dashboard');\n\n// Get current route\nconst current = xon.router.getCurrent();\n\n// Enable/disable router\nxon.router.enable(true);\nxon.router.enable(false);\n\n// Listen to route changes\nwindow.addEventListener('xonroutechange', (e) =\u003e {\n    console.log('Route changed:', e.detail.path);\n});\n\nwindow.addEventListener('xonroutepopstate', (e) =\u003e {\n    console.log('Browser navigation:', e.detail.path);\n});\n```\n\n# DOM API\n\n```\n// CSS class operations\nxon.dom.addClass('active', '.btn');\nxon.dom.removeClass('hidden', '#element');\nxon.dom.toggleClass('selected', element);\n\n// Query with caching\nxon.dom.all('.items'); // Returns NodeList, caches results\n```\n\n# Security API\n\n```\n// Add allowed namespaces\nxon.security.allowed.add('myApp');\nxon.security.allowed.add('utils');\n\n// Check security\nxon.security.isSafe('myApp.function');    // true\nxon.security.isSafe('eval.something');    // false\nxon.security.isDangerous('innerHTML');    // true\n\n// Sanitization\nconst safeHTML = xon.security.sanitizeHTML(userInput);\nconst safeText = xon.security.sanitizeTextContent(userInput);\nconst safeCode = xon.security.sanitizeJSCode(jsCode);\n```\n\n\n# Registration API\n\n\n\n```\n// Register functions for data-xon\nwindow.xonRegister('app.sayHello', function(message) {\n    console.log('Hello:', message);\n});\n\n// Register variables\nwindow.xonRegisterVar('app.config', {\n    version: 'Beta',\n    debug: true,\n    apiUrl: 'https://api.example.com'\n});\n\n// Register classes\nwindow.xonRegisterClass('App.User', class User {\n    constructor(name, email) {\n        this.name = name;\n        this.email = email;\n    }\n    \n    display() {\n        return `${this.name} \u003c${this.email}\u003e`;\n    }\n});\n```\n\n\n## Allow namespace\n\n\n```\nwindow.xonAllowNamespace('myNamespace');\n\n```\n\n\n## Auto-register namespace\n\n\n```\nwindow.xonRegisterNamespace('myNamespace');\n```\n\n\n# Debugging API\n\n\n## Enable debug mode\n\n```\nxon.debug.toggle(true);\n```\n\n\n## Debug logs\n\n\n```\nxon.debug.log('Message');\nxon.debug.warn('Warning');\nxon.debug.error('Error');\n```\n\n## Debug utilities\n\n```\nxon.demoComputedProperties();     // Demo reactivity system\nxon.testMemoization();            // Test memoization\nxon.debugComputedProperties();    // Show computed properties\n```\n\n## Console utilities\n```\nconsole.getHistory();      // Get console history (last 50 entries)\nconsole.showHistory();     // Show console history```\n```\n\n### Press F1 to clear console\n\n\u003cp align=\"center\"\u003e Made with ❤️ for the web development community \u003c/p\u003e\u003cp align=\"center\"\u003e \u003csub\u003eIf you find XON useful, please consider giving it a ⭐ on GitHub!\u003c/sub\u003e \u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foncebuilder%2Fxon","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foncebuilder%2Fxon","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foncebuilder%2Fxon/lists"}