{"id":20170121,"url":"https://github.com/marcodpt/paw","last_synced_at":"2025-12-01T06:04:45.514Z","repository":{"id":203809737,"uuid":"708831752","full_name":"marcodpt/paw","owner":"marcodpt","description":"A low-code, vdom-free hyperscript framework.","archived":false,"fork":false,"pushed_at":"2024-11-19T21:43:44.000Z","size":1287,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-01-13T15:26:45.302Z","etag":null,"topics":["app","bootstrap","components","dashboard","font-awesome","framework","hyperscript","json-schema","low-code","no-vdom","page-builder","router","seo","spa","ssr","themes"],"latest_commit_sha":null,"homepage":"https://marcodpt.github.io/paw/","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/marcodpt.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}},"created_at":"2023-10-23T13:33:00.000Z","updated_at":"2024-11-19T21:43:47.000Z","dependencies_parsed_at":null,"dependency_job_id":"e4292f77-866d-42f1-b3ef-90e0e51a002c","html_url":"https://github.com/marcodpt/paw","commit_stats":null,"previous_names":["marcodpt/app","marcodpt/paw"],"tags_count":67,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcodpt%2Fpaw","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcodpt%2Fpaw/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcodpt%2Fpaw/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcodpt%2Fpaw/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/marcodpt","download_url":"https://codeload.github.com/marcodpt/paw/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241605820,"owners_count":19989612,"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":["app","bootstrap","components","dashboard","font-awesome","framework","hyperscript","json-schema","low-code","no-vdom","page-builder","router","seo","spa","ssr","themes"],"created_at":"2024-11-14T01:17:01.391Z","updated_at":"2025-12-01T06:04:45.450Z","avatar_url":"https://github.com/marcodpt.png","language":"JavaScript","readme":"# ![](favicon.ico) Paw\n  A low-code, vdom-free hyperscript framework.\n\n  [![bundlejs](https://deno.bundlejs.com/badge?q=https://raw.githubusercontent.com/marcodpt/paw/main/index.js\u0026treeshake=[{default}])](https://bundlejs.com/?q=https://raw.githubusercontent.com/marcodpt/paw/main/index.js\u0026treeshake=[{default}])\n  [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n\n  [Demo](https://marcodpt.github.io/paw/)\n\n## ❤️ Features\n - Theme [builder](https://marcodpt.github.io/paw/#/settings) optimized for SEO\n - Built-in [SPA router](https://github.com/marcodpt/wand).\n - No build steps, no vDom, no need to rewrite any JS library!\n - JSON Schema based [forms](https://marcodpt.github.io/paw/#/example/form/4)\n - HTML to Hyperscript [converter](https://marcodpt.github.io/paw/#/converter)\n - [Table](https://marcodpt.github.io/paw/#/users) data with great flexibility\n - [Graph](https://marcodpt.github.io/paw/#/example/graph/0)\n - [Chart](https://marcodpt.github.io/paw/#/example/chart/0)\n - [Barcode](https://marcodpt.github.io/paw/#/example/barcode/0)\n - [Maps](https://marcodpt.github.io/paw/#/example/map/1)\n\n## 💻 Usage\nCopy the [boilerplate](https://github.com/marcodpt/paw/tree/main/boilerplate)\nfolder to your machine and run the command inside it.\n\n```\npython3 -m http.server\n```\n\n[This is what you will get!](https://marcodpt.github.io/paw/boilerplate/)\n\n\nThe folder contains 3 files\n - [favicon.ico](https://raw.githubusercontent.com/marcodpt/paw/main/boilerplate/favicon.ico):\nReplace with your app icon.\n - [app.js](https://github.com/marcodpt/paw/blob/main/boilerplate/app.js):\nThese are your app's routes, modify as you like.\n - [index.html](https://github.com/marcodpt/paw/blob/main/boilerplate/index.html):\nAll navigation was automatically generated using\n[this page](https://marcodpt.github.io/paw/#/settings).\nYou must import the file and edit it using the graphical interface and\nthen modify the `main` tag manually which will be the home page of your app.\n\nThe [demo app](https://marcodpt.github.io/paw/) uses\n[index.html](https://github.com/marcodpt/paw/blob/main/index.html) as the\nhome page and [app.js](https://github.com/marcodpt/paw/blob/main/app.js)\nas the router.\n\nAll routes were distributed across several modules within the\n[views](https://github.com/marcodpt/paw/tree/main/views) folder.\n\nIt can be an excellent practical reference on how to use `Paw` and\nhow to organize the code.\n\n## 🎯 Goals\n - Bring maximum customization via graphical interface.\n - Build a solid, well-tested library of hyperscript components.\n - Simplify the use of third-party libraries with components with sane defaults.\n - Document all code completely and at the same time concisely.\n - Many examples synchronized with the tests.\n\n## 📢 Motivation\n\n### Why are JS frameworks bad?\nFrameworks like:\n\n - [react](https://github.com/facebook/react)\n - [vue](https://github.com/vuejs/core)\n - [angular](https://github.com/angular/angular)\n - [svelte](https://github.com/sveltejs/svelte)\n - [qwik](https://github.com/QwikDev/qwik)\n - [hyperapp](https://github.com/jorgebucaran/hyperapp)\n\nsuffer from the same problem.\n\nWe can argue that vDom is slow so [svelte](https://github.com/sveltejs/svelte)\nsolves the problem by compiling javascript in the build steps.\n\nWe can argue that the frameworks are heavy and\n[svelte](https://github.com/sveltejs/svelte) solves the problem again,\n[qwik](https://github.com/QwikDev/qwik) only loads js on demand,\nand [hyperapp](https://github.com/jorgebucaran/hyperapp) is too minimalistic.\n\nWe can argue that build steps are unecessary complication and \n[hyperapp](https://github.com/jorgebucaran/hyperapp) is the clear winner here.\n\nBut this is getting away from the central problem with these approaches, which\nthey ALL suffer from.\n\nThe problem is that frameworks need to control JavaScript centrally in the\nelements and/or components that are used.\n\nThis implies that the code of a library external to the framework must be\nrewritten.\n\nSee for example the number of existing [Bootstrap](https://getbootstrap.com/)\njavascript implementations:\n \n - [react-bootstrap](https://github.com/react-bootstrap/react-bootstrap)\n - [bootstrap-vue](https://github.com/bootstrap-vue/bootstrap-vue)\n - [ng-bootstrap](https://github.com/ng-bootstrap/ng-bootstrap)\n - [sveltestrap](https://github.com/bestguy/sveltestrap)\n\nThese projects exist for the reason that vDom and the implementation of a\ncomponent library conflict.\n\nIf you need a less popular external library and/or use a framework with a\nsmaller community, you will have to reimplement javascript or wait for someone\nto do it with all the difficulties and bugs involved.\n\n### Why web components are bad?\n\nLibraries like [Shoelace](https://github.com/shoelace-style/shoelace) allow you\nto use reactive components within these frameworks without having to be\nreimplemented.\n\nThe problem is data exchange, two way data binding needs to be implemented\nindividually for each framework.\n\nComponents written in HTML do not have the good parts of these vDom frameworks\nthat allow you to easily pass `objects`, `arrays` and `functions` to them,\ngreatly limiting their capacity and making the API difficult.\n\n### Why I build this project?\n\nI wanted to have components with all the capabilities of javascript frameworks\n(passing `objects`, `arrays` and `functions`).\n\nAnd have a simplified interface to access work done in libraries like\n[Bootstrap](https://getbootstrap.com/) without having to reimplement\njavascript.\n\nThe fact that using hyperscript allows you to encapsulate the logic of the\ncomponents in small modules that make the weight of the vDom unnecessary.\n\nI didn't want to have to deal with the complications of build steps.\n\nAnd I wanted the libraries I used to only be loaded when called (using es6\nmodules or dynamically adding the script to the page).\n\nAnd to achieve good\n[SEO](https://en.wikipedia.org/wiki/Search_engine_optimization),\nproduce an [SSR home page](https://marcodpt.github.io/paw/#/settings)\nwith the customization options that exist in the open source world.\n\nI didn't find anything on github or google that went this route,\nso I created it.\n\n## 🔧 TODO\n - dashboard presentation\n - add body edit functions\n - table engine based on api \n - completely remove functions assign to DOM, fieldset.setProp with resolver\n - highlightjs as a component (js/html)\n - tests as a route and qunit as a component\n - docs as component\n - examples as component\n - formatter should be a component?\n - normalize schema component and used to apply all defaults everywhere.\n - `output` raw referenced in `input`, how to solve that?\n - allow icon with input to avoid unicode and translation\n - separate input and output options\n - allow to see other tests variants\n - dynamic validation with functions\n - input wrapper review\n - remove or minimize lang support\n - remove non bootstrap options support, minimize options and review settings\n - separate outputs\n - better array ctrl support (minimize, up, down, remove, add)\n - finish documentation\n - finish static tests\n - finish dynamic tests\n\n## 🤝 Contributing\nIt's a very simple project.\nAny contribution, any feedback is greatly appreciated.\n\n## ⭐ Support\nIf this project was useful to you, consider giving it a star on github, it's a\nway to increase evidence and attract more contributors.\n\n## 🙏 Acknowledgment\nThis work would not be possible if it were not for these related projects:\n - [FontAwesome](https://fontawesome.com/)\n - [Bootstrap](https://getbootstrap.com/)\n - [Bootswatch](https://bootswatch.com/)\n - [JSON Schema](https://json-schema.org/)\n - [Wand](https://github.com/marcodpt/wand)\n - [HTML5 Boilerplate](https://html5boilerplate.com/)\n - [highlight.js](https://highlightjs.org/)\n - [Cytoscape.js](https://js.cytoscape.org/)\n - [Chart.js](https://www.chartjs.org/)\n - [JsBarcode](https://lindell.me/JsBarcode/)\n - [Leaflet](https://leafletjs.com/)\n - [QUnit](https://qunitjs.com/)\n - [FontIcon](https://gauger.io/fonticon/)\n - [bundlejs](https://bundlejs.com/)\n - [HTML5 Reference](https://www.w3schools.com/TAGS/default.asp)\n - [Unicode Party](https://unicode.party/)\n\nA huge thank you to all the people who contributed to these projects.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarcodpt%2Fpaw","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarcodpt%2Fpaw","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarcodpt%2Fpaw/lists"}