{"id":17436373,"url":"https://github.com/aaronleocooper/html-app","last_synced_at":"2025-04-06T16:18:26.659Z","repository":{"id":40951048,"uuid":"163846781","full_name":"AaronLeoCooper/html-app","owner":"AaronLeoCooper","description":"Create interactive web pages with HTML and JavaScript easily!","archived":false,"fork":false,"pushed_at":"2023-01-03T17:13:02.000Z","size":1041,"stargazers_count":2,"open_issues_count":31,"forks_count":1,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-13T13:05:57.620Z","etag":null,"topics":["html","javascript","library","webapp"],"latest_commit_sha":null,"homepage":"https://html-app.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AaronLeoCooper.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}},"created_at":"2019-01-02T13:49:07.000Z","updated_at":"2019-06-16T10:18:32.000Z","dependencies_parsed_at":"2023-02-01T08:01:55.357Z","dependency_job_id":null,"html_url":"https://github.com/AaronLeoCooper/html-app","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AaronLeoCooper%2Fhtml-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AaronLeoCooper%2Fhtml-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AaronLeoCooper%2Fhtml-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AaronLeoCooper%2Fhtml-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AaronLeoCooper","download_url":"https://codeload.github.com/AaronLeoCooper/html-app/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247509241,"owners_count":20950232,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["html","javascript","library","webapp"],"created_at":"2024-10-17T10:09:18.811Z","updated_at":"2025-04-06T16:18:26.640Z","avatar_url":"https://github.com/AaronLeoCooper.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\u003ca href=\"https://html-app.com\"\u003e\u003cimg alt=\"HTMLApp\" src=\"https://www.html-app.com/img/logo.png\"\u003e\u003c/a\u003e\u003c/p\u003e\n\n# HTMLApp\n\n[![npm](https://img.shields.io/npm/v/html-app.svg?style=flat-square)](https://www.npmjs.com/package/html-app)\n[![npm bundle size](https://img.shields.io/bundlephobia/minzip/html-app.svg?style=flat-square)](https://bundlephobia.com/result?p=html-app)\n[![David](https://img.shields.io/david/AaronLeoCooper/html-app.svg?style=flat-square)](https://david-dm.org/aaronleocooper/html-app)\n[![CircleCI branch](https://img.shields.io/circleci/project/github/AaronLeoCooper/html-app/master.svg?style=flat-square)](https://circleci.com/gh/AaronLeoCooper/html-app/tree/master)\n[![NPM](https://img.shields.io/npm/l/html-app.svg?style=flat-square)](https://www.npmjs.com/package/html-app)\n\nNeed just a sprinkling of JS to enhance your HTML pages? ✨\n\nCreate a HTML page, stick this JavaScript somewhere and off you go. Simple web apps done *simply*.\n\n[Check out the docs!](https://html-app.com).\n\n## Example\n\nDefine your view with HTML:\n\n```html\n\u003cbody\u003e\n  \u003c!-- define your app view --\u003e\n  \u003cdiv data-htmlapp\u003e\n    \u003cinput data-ha=\"userName\" /\u003e\n    \u003cspan data-ha=\"userNameError\"\u003e\u003c/span\u003e\n  \u003c/div\u003e\n\n  \u003cscript src=\"html-app.browser.min.js\"\u003e\u003c/script\u003e\n  \u003cscript src=\"app.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n```\n\nDefine your app logic with JavaScript:\n\n```js\n// app.js\nnew HTMLApp({\n  eventHandlers: [\n    {\n      id: 'userName',\n      onChange: function(e, el, app) {\n        if (!e.target.value) {\n          app.getEl('userNameError').setText('This field is required!');\n  \n          el.addClass('has-error');\n        } else {\n          app.getEl('userNameError').setText('');\n  \n          el.removeClass('has-error');\n        }\n      }\n    }\n  ]\n});\n```\n\nJob done! 🎉\n\n## Features\n\n- HTML is your view, JavaScript is your controller/model (the way we used to do web development!)\n- Easily react to as many events as required with no drop in performance\n- Thin DOM element wrappers provide just the right amount of helper methods for your app logic\n- Dependency-free and super small: [less than 2kb gzipped](https://bundlephobia.com/result?p=html-app)\n- No build/transpilation/configuration setup needed— stick it in a HTML page and off you go! 🚀\n\n## Installation\n\nThe compressed library JavaScript file can downloaded and included in your HTML pages, or\nlinked to directly via the Unpkg CDN:\n\n```html\n\u003cscript src=\"https://unpkg.com/html-app/dist/html-app.browser.min.js\"\u003e\u003c/script\u003e\n```\n\nOr alternatively if you're compiling your JS files with a bundler like Parcel or Webpack, it\ncan be installed via NPM and included as an ES6 import in your JavaScript files:\n\n```bash\nnpm i html-app\n```\n\n```js\nimport HTMLApp from 'html-app';\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faaronleocooper%2Fhtml-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faaronleocooper%2Fhtml-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faaronleocooper%2Fhtml-app/lists"}