{"id":13581495,"url":"https://github.com/dashborg/hibiki","last_synced_at":"2025-04-06T10:32:32.785Z","repository":{"id":43270303,"uuid":"426423770","full_name":"dashborg/hibiki","owner":"dashborg","description":"Hibiki HTML","archived":false,"fork":false,"pushed_at":"2022-10-02T18:01:34.000Z","size":1460,"stargazers_count":469,"open_issues_count":1,"forks_count":6,"subscribers_count":4,"default_branch":"main","last_synced_at":"2024-11-05T21:44:42.470Z","etag":null,"topics":["ajax","frontend","javascript","typescript","webdev"],"latest_commit_sha":null,"homepage":"https://www.hibikihtml.com/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dashborg.png","metadata":{"files":{"readme":"README.md","changelog":"changelog.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-11-09T23:51:38.000Z","updated_at":"2024-10-17T18:56:06.000Z","dependencies_parsed_at":"2023-01-19T02:15:41.345Z","dependency_job_id":null,"html_url":"https://github.com/dashborg/hibiki","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dashborg%2Fhibiki","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dashborg%2Fhibiki/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dashborg%2Fhibiki/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dashborg%2Fhibiki/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dashborg","download_url":"https://codeload.github.com/dashborg/hibiki/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247470354,"owners_count":20944146,"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":["ajax","frontend","javascript","typescript","webdev"],"created_at":"2024-08-01T15:02:03.457Z","updated_at":"2025-04-06T10:32:31.956Z","avatar_url":"https://github.com/dashborg.png","language":"TypeScript","readme":"# Hibiki HTML\n\nHibiki HTML is a new web framework for creating modern front-end applications,\nwithout scaffolding or setting up a JavaScript stack,\nthat can be fully [scripted and controlled by backend code](#hibiki-actions).\n\nHibiki HTML is compatible with any backend language or framework, any\nCSS framework, and any existing backend template language.\n\nFor an interactive walkthrough please check out the \n[Hibiki HTML Interactive Tutorial](https://playground.hibikihtml.com/tutorial/).\n\n## Hibiki HTML Resources\n\n* **Source Code on GitHub** - https://github.com/dashborg/hibiki\n* **Tutorial** - https://playground.hibikihtml.com/tutorial/\n* **Playground** - https://playground.hibikihtml.com\n* **Codepen Template** - https://codepen.io/pen/?template=QWMBgPg\n* **Issue Tracker** https://github.com/dashborg/hibiki/issues\n* **Homepage** - https://hibikihtml.com\n* **Reference Documentation** - https://docs.hibikihtml.com\n* **Join Discord for Questions** - https://discord.gg/zbWV6ueED7\n\nHibiki was featured in [Console](https://console.substack.com/p/console-99), a great newsletter for learning about open-source projects!\n\n## Getting Started\n\nGetting started is easy.  There is no JavaScript stack to set up, no boilerplate/scaffolding, and\nno build tools to download and run.\nJust add one script tag to the top of your page or template:\n\n```\n\u003cscript src=\"https://cdn.hibikihtml.com/hibiki/v0.3.4/hibiki-prod.min.js\"\u003e\u003c/script\u003e\n```\n\nWrap any portion of your content with a \u0026lt;template hibiki\u0026gt; tag and you have your first\nHibiki HTML app.  All plain HTML content is rendered as is, and because Hibiki HTML uses the browser's HTML parser,\nit follows the same rules as standard browser HTML.\n\nNote that all these code examples can be viewed and edited in the \n[Hibiki HTML Playground](https://playground.hibikihtml.com).\n\n```\n\u003ctemplate hibiki\u003e\n  \u003ch1 class=\"title\"\u003e\u0026#x1f338; Hibiki HTML\u003c/h1\u003e\n  \u003cp\u003eHibiki HTML \u003ci\u003eis\u003c/i\u003e HTML\u003c/p\u003e\n\u003c/template\u003e\n```\n(Playground Link - https://playground.hibikihtml.com/?codeid=readme-gs)\n\nAs of v0.3.3, you may also wrap your Hibiki code in a \u0026lt;script type=\"text/hibiki-html\"\u0026gt; tag and optionally reference your Hibiki src code and initial data as remote URLs:\n\n```\n\u003c!-- standard way with template tag --\u003e\n\u003ctemplate hibiki\u003e ... Hibiki HTML code here \u003c/template\u003e\n\n\u003c!-- inline code, wrapped in script tag (protected from crawler indexing) --\u003e\n\u003cscript type=\"text/hibiki-html\"\u003e ... Hibiki HTML code here ... \u003c/script\u003e\n\n\u003c!-- load code from remote URL --\u003e\n\u003cscript type=\"text/hibiki-html\" src=\"/url/to/hibiki/src.html\"\u003e\u003c/script\u003e\n\n\u003c!-- load code and data from remote URLs (data must be type 'application/json') --\u003e\n\u003cscript type=\"text/hibiki-html\" src=\"/url/to/hibiki/src.html\" datasrc=\"/url/to/data.json\"\u003e\u003c/script\u003e\n```\n\n## Data / Rendering Dynamic Content\n\nHibiki HTML applications have a built-in frontend data model.  You can initialize it with\nany JSON object using the ```\u003chibiki-data\u003e``` tag.  To render text use\nthe ```\u003ch-text\u003e``` tag or inline ```{{ ... }}``` syntax.  Attributes and style properties\nare evaluated dynamically if they start with a ```*```.\n\n```\n\u003ctemplate hibiki\u003e\n  \u003chibiki-data\u003e\n    {\"color\": \"blue\", \"name\": \"Mike\"}\n  \u003c/hibiki-data\u003e\n  \u003cp\u003e\n    {{ $.name }}'s favorite color is \n    \u003cspan style=\"font-weight: bold; color: *$.color\"\u003e{{ $.color }}\u003c/span\u003e\n  \u003c/p\u003e\n\u003c/template\u003e\n```\n(Playground Link - https://playground.hibikihtml.com/?codeid=readme-data-1)\n\nHibiki HTML supports a full expression language, including all of the standard conditional and arithmetic\noperators.  Additional classes can be turned on/off using the shorthand\nattribute syntax ```class.[class-name]=\"true/false expression\"```.\n```\n\u003ctemplate hibiki\u003e\n  \u003chibiki-data\u003e\n    {\"numlights\": 4, \"selected\": true, \"index\": 5, \"isprimary\": true}\n  \u003c/hibiki-data\u003e\n  \u003cdiv class=\"box\" style=\"font-weight: *($.selected ? 'bold' : 'normal')\"\u003e\n    Bold Text (if selected)\n  \u003c/div\u003e\n  \u003cdiv class=\"box\"\u003eIndex: \u003ch-text bind=\"$.index + 1\"\u003e\u003c/h-text\u003e\u003c/div\u003e\n  \u003cdiv class=\"box\"\u003e\n    There are {{$.numlights}} light{{$.numlights \u003e 1 ? 's' : ''}}\n  \u003c/div\u003e\n  \u003cdiv class=\"box\"\u003e\n    \u003cbutton class=\"button\" class.is-primary=\"*$.isprimary\"\u003ePrimary Button\u003c/button\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n(Playground Link - https://playground.hibikihtml.com/?codeid=readme-data-2)\n\nYou can conditionally include elements using the ```if``` attribute.  Looping\nis handled by the ```foreach``` attribute.  You can loop over arrays or\nobjects.  The foreach attribute uses a special syntax of ```@item in $.array```,\nwhere every iteration ```@item``` will be assigned to an element of the array or object.\nIf you provide a second variable it will capture the array index or element key:\n```(@item, @key) in $.object``` or ```(@item, @idx) in $.array```.\n\n```\n\u003ctemplate hibiki\u003e\n  \u003chibiki-data\u003e\n    {\"fruits\": [{\"name\": \"apple\", \"emoji\": \"\u0026#127822;\"},\n                {\"name\": \"banana\", \"emoji\": \"\u0026#127820;\"}, \n                {\"name\": \"blueberry\", \"emoji\": \"\u0026#129744;\"}], \n     \"selected\": \"banana\"}\n  \u003c/hibiki-data\u003e\n  \u003cdiv class=\"content box\"\u003e\n    \u003cul\u003e\n      \u003cli foreach=\"@fruit in $.fruits\"\u003e\n        {{ @fruit.name }} {{ @fruit.emoji }}\n        \u003cspan if=\"@fruit.name == $.selected\"\u003e(selected)\u003c/span\u003e\n      \u003c/li\u003e\n    \u003c/ul\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n(Playground Link - https://playground.hibikihtml.com/?codeid=readme-data-3)\n\n## Handlers\n\nTo update data (and dynamically change content), Hibiki HTML supports *handlers*.  Basic handlers respond to\nevents like *click*, *mount*, *submit*, *change*, etc.\n\n```\n\u003ctemplate hibiki\u003e\n  \u003chibiki-data\u003e{\"color\": \"blue\"}\u003c/hibiki-data\u003e\n  \u003cdiv class=\"box\" style=\"background-color: *$.color; color: white\"\u003e\n    The color is {{$.color}}\n  \u003c/div\u003e\n  \u003cbutton class=\"button\" click.handler=\"$.color = 'green'\"\u003eChange Color\u003c/button\u003e\n\u003c/template\u003e\n```\n(Playground Link - https://playground.hibikihtml.com/?codeid=readme-handlers-1)\n\nYou can make remote AJAX calls for JSON data using a remote handler.  In this example\nthe call to https://testapi.hibikihtml.com/api/get-color-1 will return the JSON\nresponse ```{\"color\": \"purple\"}```.  We assign it to a *context variable* ```@resp``` and\nthen assign ```$.color = @resp.color```.\n\n```\n\u003ctemplate hibiki\u003e\n  \u003chibiki-data\u003e{\"color\": \"blue\"}\u003c/hibiki-data\u003e\n  \u003cdiv class=\"box\" style=\"background-color: *$.color; color: white\"\u003e\n    The color is {{$.color}}\n  \u003c/div\u003e\n  \u003cbutton class=\"button\" click.handler=\"$.color = 'green'\"\u003eChange Color\u003c/button\u003e\n  \u003cbutton class=\"button\"\n    click.handler=\"@resp = GET https://testapi.hibikihtml.com/api/get-color-1; $.color = @resp.color;\"\u003e\n    GET /api/get-color-1\n  \u003c/button\u003e\n\u003c/template\u003e\n```\n(Playground Link - https://playground.hibikihtml.com/?codeid=readme-handlers-2)\n\nYou can make GET, POST, PUT, PATCH, or DELETE requests by changing the verb in front of the URL.  You can\npass query arguments (or JSON data bodies) by passing arguments to your handler by using ```(arg1=val1, arg2=val2...)``` (complex arguments will be JSON encoded), and you can define local handlers using the ```define-handler``` tag for convenience and reuse.\n\n```\n\u003ctemplate hibiki\u003e\n  \u003chibiki-data\u003e{\"color\": \"blue\"}\u003c/hibiki-data\u003e\n  \u003cdefine-handler name=\"//@local/get-color\"\u003e\n    @resp = GET https://testapi.hibikihtml.com/api/get-color-1(name=\"Michelle\");\n    $.color = @resp.color;\n  \u003c/define-handler\u003e\n  \u003cdiv class=\"box\" style=\"background-color: *$.color; color: white\"\u003e\n    The color is {{$.color}}\n  \u003c/div\u003e\n  \u003cbutton class=\"button\" click.handler=\"$.color = 'green'\"\u003eChange Color\u003c/button\u003e\n  \u003cbutton class=\"button\" click.handler=\"//@local/get-color\"\u003e\n    Get Michelle's Color\n  \u003c/button\u003e\n\u003c/template\u003e\n```\n(Playground Link - https://playground.hibikihtml.com/?codeid=readme-handlers-3)\n\nConnecting to an existing API?  Don't worry, Hibiki HTML handlers support advanced options\nlike CORS, CSRF, parameter encodings, BLOB results, and multipart file uploads.\n\n## Hibiki Actions\n\nThe magic of Hibiki HTML is that every handler is really just a series of actions.  *Hibiki Actions*\nare primitives like *setdata*, *if*, *callhandler*, *fireevent*, *invalidate*, *html*, etc.  Every action\nthat can you can write in a handler, also has a JSON representation.\n\nThis means we can write a *backend* handler that returns a JSON response that scripts\nand updates the frontend!  Here's an example JSON response that is equivalent to running\n```$.color = 'DeepSkyBlue'``` on the frontend:\n\n```\n{\"hibikiactions\": [\n    {\"actiontype\": \"setdata\", \"setpath\": \"$.color\", \"data\": \"DeepSkyBlue\"}\n]}\n```\n\nI've set up https://testapi.hibikihtml.com/api/set-color-action to return just that.  Now\nif we have our click handler call that URL, we'll see the color change automatically.\n\n```\n\u003ctemplate hibiki\u003e\n  \u003chibiki-data\u003e{\"color\": \"red\"}\u003c/hibiki-data\u003e\n  \u003cdiv class=\"box\" style=\"background-color: *$.color; color: white\"\u003e\n    The color is {{$.color}}\n  \u003c/div\u003e\n  \u003cbutton class=\"button\" click.handler=\"$.color = 'green'\"\u003eChange Color\u003c/button\u003e\n  \u003cbutton class=\"button\" click.handler=\"GET https://testapi.hibikihtml.com/api/set-color-action;\"\u003e\n    Backend Set Color Action\n  \u003c/button\u003e\n\u003c/template\u003e\n```\n(Playground Link - https://playground.hibikihtml.com/?codeid=readme-actions-1)\n\nBackend handlers are *very* powerful.  You can set return values, return data and BLOBs (like images) in\none request, mix frontend and backend data with expressions, conditionally execute actions, and more.\nYou can also use backend handlers to create multi-page Hibiki HTML applications by returning a\nnew HTML template to be rendered.\n\n## Components and Libraries\n\nHibiki HTML makes it easy to use, share, and bundle components for easy reuse.  The ecosystem is just getting \nstarted, but you can write native Hibiki HTML components, link to 3rd party JavaScript (D3, CodeMirror, etc.),\nand import ReactJS components.\n\n```\n\u003ctemplate hibiki\u003e\n  \u003cdefine-component name=\"colorbox\"\u003e\n    \u003cdiv class=\"box\" style=\"background-color: *$args.color; color: white\"\u003e\n      The color is {{$args.color}}\n    \u003c/div\u003e\n  \u003c/define-component\u003e\n  \n  \u003clocal-colorbox color=\"green\"\u003e\u003c/local-colorbox\u003e\n  \u003clocal-colorbox color=\"blue\"\u003e\u003c/local-colorbox\u003e\n  \u003clocal-colorbox color=\"purple\"\u003e\u003c/local-colorbox\u003e\n\u003c/template\u003e\n```\n(Playground Link - https://playground.hibikihtml.com/?codeid=readme-comps-1)\n\n## Bulma UI Component Library\n\nI've released a Hibiki wrappers for the excellent [Bulma UI Library](https://bulma.io).\nIt can easily be included in any Hibiki template by adding:\n```\n\u003cimport-library lib=\"hibiki/bulma@v0.1.0\" prefix=\"b\"\u003e\u003c/import-library\u003e\n```\n\nDocumentation for the Hibiki+Bulma library can be found at https://libs.hibikihtml.com/test-bulma.html .\nIt includes many interactive controls including tabs, menus, cards, dropdowns, form controls, and\na data table that supports sorting and pagination.\n\n## Interactive Tutorial\n\nWant to learn more?  Check out the [Interactive Tutorial](https://playground.hibikihtml.com/tutorial/).\n\n---\n\n## Open Source\n\nThe source code for Hibiki HTML is available on GitHub at at: https://github.com/dashborg/hibiki .  It is licensed under the Mozilla Public License v2.0 -- https://mozilla.org/MPL/2.0/ .\n\nMozilla has an excellent [FAQ](https://www.mozilla.org/en-US/MPL/2.0/FAQ/), but basically this license allows you to use Hibiki HTML in any project (personal, commercial, or open-source).  The only restriction is if you modify any of the *Hibiki HTML source files* you must make the source code of those changes available.\n\n## Credits\n\nHibiki HTML is an open source version of the frontend language originally built and designed for\nthe [Dashborg](https://dashborg.net) internal tools framework.  The Hibiki HTML core is built in [TypeScript](https://www.typescriptlang.org/), using\n[React](https://reactjs.org/), [MobX](https://mobx.js.org/), and [Nearley](https://nearley.js.org/). \nThe Hibiki HTML playground is built in Hibiki HTML, also using \n[CodeMirror](https://codemirror.net/) and [Bulma](https://bulma.io).\n\n## Support and Help\n\nHibiki HTML is under active development.  Please contact me by email [mike (at) hibikihtml.com] \nor on Discord if you have a question, to report a bug, need help, or would like to contribute.\n\nI'm excited to see Hibiki HTML working in the real world.  If you have an application that you're\nthinking about using Hibiki HTML for, please reach out.  I'm happy to help, build out additional\nfunctionality/components, or do team training.\n\n[Join the Hibiki HTML Discord Server](https://discord.gg/zbWV6ueED7)\n\n\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdashborg%2Fhibiki","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdashborg%2Fhibiki","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdashborg%2Fhibiki/lists"}