{"id":22160545,"url":"https://github.com/rozek/hyperscript-examples","last_synced_at":"2026-01-05T09:06:15.997Z","repository":{"id":49438714,"uuid":"517685622","full_name":"rozek/hyperscript-examples","owner":"rozek","description":"a (growing) list of _hyperscript examples","archived":false,"fork":false,"pushed_at":"2022-07-29T10:03:39.000Z","size":96,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-01-29T20:29:49.191Z","etag":null,"topics":["hyperscript"],"latest_commit_sha":null,"homepage":"","language":null,"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/rozek.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-07-25T13:52:46.000Z","updated_at":"2024-10-09T05:15:26.000Z","dependencies_parsed_at":"2022-09-06T17:51:00.663Z","dependency_job_id":null,"html_url":"https://github.com/rozek/hyperscript-examples","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rozek%2Fhyperscript-examples","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rozek%2Fhyperscript-examples/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rozek%2Fhyperscript-examples/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rozek%2Fhyperscript-examples/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rozek","download_url":"https://codeload.github.com/rozek/hyperscript-examples/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245294743,"owners_count":20591914,"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":["hyperscript"],"created_at":"2024-12-02T04:08:42.739Z","updated_at":"2026-01-05T09:06:15.991Z","avatar_url":"https://github.com/rozek.png","language":null,"readme":"# hyperscript-examples #\n\na (growing) list of \\_hyperscript examples\n\n[\\_hyperscript](https://github.com/bigskysoftware/_hyperscript) is a relatively new programming language and, thus, lacks comprehensive documentation, tutorials and examples.\n\nThis repository shall narrow this gap a bit by providing a (growing) number of hopefully useful examples. Most of the examples are served by the [Svelte REPL](https://svelte.dev/repl/4a9706898b88431aaf4887b6f5d3cabe) (see below for an explanation), may be edited from within a browser and will compile on-the-fly.\n\n\u003e Just a small note: if you like this repository and seem to benefit from its contents, consider \"starring\" it (you will find the \"Star\" button on the top right of this page), so that I know which of my repositories to take most care of.\n\n## The Svelte REPL ##\n\n[Svelte](https://svelte.dev/) is a really interesting technology for building compact and performant Web Applications based on HTML, CSS and JavaScript - if you are not just interested in \\_hyperscript, it may well be worth having a look at it.\n\nIn the context of these \\_hyperscript examples, however, we are only interested in the Svelte REPL (Read-Eval-Print-Loop) as it offers a few interesting features:\n\n* an editor window with HTML syntax highlighting allows you to edit any example from within your browser\n* any changes you make will be compiled on-the-fly, showing any results in an output area within a few seconds\n* any console output (e.g., that created using the `log` command) is sent to a \"Console\" section at the bottom of the output area and can be inspected without having to open a browser's developer tools (just click or tap on the \"Console\" title in order to reveal its contents)\n* once you have created an account (for free) and logged-in, you may save any edited example in your own space (i.e., you won't destroy the example of somebody else - it's save to edit any example!)\n* because of the way Svelte works, the editor window contains both the contents of a document `\u003chead\u003e` and `\u003cbody\u003e`\n\n### What you should take care of when editing ###\n\nWhile the contents of your document `\u003cbody\u003e` may be directly written into the Svelte editor, any contents that should go into the document `\u003chead\u003e` have to be enclosed within a `\u003csvelte:head\u003e...\u003c\\svelte:head\u003e` pseudo element (like in the [\"Hello, World\" example](https://svelte.dev/repl/4a9706898b88431aaf4887b6f5d3cabe))\n\nAnything else but your HTML body elements should be placed in the document `\u003chead\u003e` (i.e., within `\u003csvelte:head\u003e...\u003c\\svelte:head\u003e`). This includes\n\n* a reference to \\_hyperscript itself\n* any `\u003cscript\u003e` element (including those of `type=\"text/hyperscript\"`)\n* any `\u003cstyle\u003e` and `\u003clink rel=\"stylesheet\"\u003e` elements\n\nThe Svelte REPL does not allow to place these elements outside of `\u003csvelte:head\u003e...\u003c\\svelte:head\u003e` (as they are relevant for Svelte itself)\n\nAgain, the [\"Hello, World\" example](https://svelte.dev/repl/4a9706898b88431aaf4887b6f5d3cabe) will show you the required structure.\n\n## \\_hyperscript Examples ##\n\n### Basics ###\n\n* [\"Hello, World\"](https://svelte.dev/repl/4a9706898b88431aaf4887b6f5d3cabe) - a very first and very simple example to illustrate how the contents of a \\_hyperscript application should look like in the Svelte REPL\n* [Startup Code](https://svelte.dev/repl/a0fd12167f714920b6b8bfce0bd17c30) - illustrates in which order global and element-specific startup code will be executed\n* [Code for `\u003cbody\u003e` element](https://svelte.dev/repl/fc1a68926334480eabc70f2b004412f6) - code within `\u003cscript type=\"text/hyperscript\"\u003e` elements applies to the document `\u003cbody\u003e` (Note: the first console output of this example proves that `me` refers to the `\u003cbody\u003e` element, but you will have to open your browser's development tools in order to verify. Alternatively, you may just believe the example instead)\n* [DOM references](https://svelte.dev/repl/6a5c210cfc8d4104899caf87e157ff0c) - HTML elements may easily be referenced by  patterns like `#html-id`, `.css-class` or `\u003ccss-query/\u003e`\n\n### Functions ###\n\n* [Functions from outer Elements](https://svelte.dev/repl/309ae1b37fee42acaa2cd8c07d23f1d9) - \\_hyperscript functions defined in outer elements are also available in inner ones (as only [briefly mentioned in the docs](https://hyperscript.org/docs/#functions)). This example illustrates how this important detail works\n\n### Events ###\n\n* [Mouse Events](https://svelte.dev/repl/d78478b486a2458990b1c45885436fcc) - shows the sequence of mouse events fired when moving and clicking the mouse within and outside a specific HTML element (and beware: some mouse events \"bubble\", others do not!) Note: this example may not work on mobile devices unless they have a mouse connected, see the [Pointer Events](https://svelte.dev/repl/cfebf1ddf4b942868f769ddc15ec209d) example instead\n* [Pointer Events](https://svelte.dev/repl/cfebf1ddf4b942868f769ddc15ec209d) - shows the sequence of \"pointer events\" fired when moving and clicking the \"pointer\" (i.e., a mouse, finger or stylus) within and outside a specific HTML element (and beware: some pointer events \"bubble\", others do not!) Note: modern browsers should work right away, for older browsers a [polyfill](https://github.com/Rich-Harris/Points) has been added\n\n### Fetch ###\n\n* [Events sent during \"fetch\"](https://svelte.dev/repl/a310ee9b34a646f1b966abe3d76dcd80) - shows any events sent during a \"fetch\" operation in chronological order (open the browser's developer tools in order to inspect the contens of every event)\n* [accessing \"keyvalue.immanuel.co\"](https://svelte.dev/repl/505039fd942f4ecdb362d84202988b66) - \"keyvalue.immanuel.co\" is an extremely simple free online key-value store. This example shows how to create a new store and set/get values from it\n\n### MD5 Hash Computation ###\n\nMD5 hashes are often used to validate the integrity of file uploads and downloads. The [JavaScript MD5 implementation written by blueimp](https://github.com/blueimp/JavaScript-MD5) may easily be used from within \\_hyperscript:\n\n```\n \u003cscript src=\"https://unpkg.com/browse/blueimp-md5@2.19.0/js/md5.min.js\"\u003e\u003c/script\u003e\n \n \u003cscript type=\"text/hyperscript\"\u003e\n  init\n    log md5('Hello, World!') // 65a8e27d8879283831b664bd8b7f0ad4\n  end\n \u003c/script\u003e\n```\n\nJust pass a string into `md5(...)` and you will get a string back which contains the hexadecimally encoded MD5 hash of the given argument.\n\n## License ##\n\nWhile \\_hyperscript itself is under a [BSD 2-clause license](https://github.com/bigskysoftware/_hyperscript/blob/master/LICENSE), these examples are just MIT-licensed\n\n[MIT License](LICENSE.md)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frozek%2Fhyperscript-examples","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frozek%2Fhyperscript-examples","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frozek%2Fhyperscript-examples/lists"}