{"id":25638372,"url":"https://github.com/umamiappearance/jsliveexamples","last_synced_at":"2026-05-16T22:33:38.836Z","repository":{"id":57921653,"uuid":"518870648","full_name":"UmamiAppearance/JSLiveExamples","owner":"UmamiAppearance","description":"Create HTML live examples to demonstrate JavaScript code in action","archived":false,"fork":false,"pushed_at":"2023-07-16T21:48:39.000Z","size":662,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-11-08T15:54:38.319Z","etag":null,"topics":["browser","code","console","demo","examples","html","javascript","live"],"latest_commit_sha":null,"homepage":"","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/UmamiAppearance.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}},"created_at":"2022-07-28T14:05:17.000Z","updated_at":"2023-04-11T15:51:45.000Z","dependencies_parsed_at":"2023-02-10T01:15:59.731Z","dependency_job_id":null,"html_url":"https://github.com/UmamiAppearance/JSLiveExamples","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UmamiAppearance%2FJSLiveExamples","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UmamiAppearance%2FJSLiveExamples/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UmamiAppearance%2FJSLiveExamples/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UmamiAppearance%2FJSLiveExamples/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/UmamiAppearance","download_url":"https://codeload.github.com/UmamiAppearance/JSLiveExamples/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240259427,"owners_count":19773153,"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":["browser","code","console","demo","examples","html","javascript","live"],"created_at":"2025-02-23T02:25:05.640Z","updated_at":"2026-05-16T22:33:38.789Z","avatar_url":"https://github.com/UmamiAppearance.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# JSLiveExamples\n\n[![License](https://img.shields.io/github/license/UmamiAppearance/JSLiveExamples?color=009911\u0026style=for-the-badge)](./LICENSE)\n[![npm](https://img.shields.io/npm/v/js-live-examples?color=%23009911\u0026style=for-the-badge)](https://www.npmjs.com/package/js-live-examples)\n\nCreate HTML live examples to demonstrate JavaScript code for the browser in action.\n\n[![JSLiveExamples-Image](https://github.com/UmamiAppearance/JSLiveExamples/blob/main/media/JSLiveExamples.gif?raw=true)](https://umamiappearance.github.io/JSLiveExamples/examples/demo.html)\n\n## Idea\nThere are countless JavaScript packages out there. For the developer it is always a lot of work to think about how to present it to a possible user. A lot of times apart from the documentation and/or readme file one has to rely on third party services to show live examples to demonstrate the code in action. **JSLiveExamples** makes it possible to keep the creation of live examples of JavaScript code for the browser inside of e.g. your github repository (with GithubPages or with whatever service which is able to serve HTML).  \n  \nA JSLiveExample is just a little template which gets inserted into the HTML code at the place where the example should be, the rest is done by the JavaScript application.  \n  \nThe user can see, change, and run the provided code. The console output gets logged to the page. Optionally it is possible to use the [demo mode](#demo-mode), which includes a typing animation and break points. \n  \nWatch [this example](https://umamiappearance.github.io/JSLiveExamples/examples/demo.html) to see it in action.\n\n#### powered by:\n - [**codejar**](https://github.com/antonmedv/codejar)\n - [**contodo**](https://github.com/UmamiAppearance/contodo)\n - [**prismjs**](https://github.com/PrismJS/prism)\n\n\n## Installation\n### GitHub\n```sh\ngit clone https://github.com/UmamiAppearance/JSLiveExamples.git\n```\n\n### npm\n```sh\nnmp install js-live-examples\n```\n\n## Builds\nBuilds can be find in the directory dist ([github:dist](https://github.com/UmamiAppearance/JSLiveExamples/tree/main/dist)). \n\nYou have two builds available ([esm](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) and [iife](https://developer.mozilla.org/en-US/docs/Glossary/IIFE)), plus a minified version of each. \n* ``js-live-examples.esm.js``\n* ``js-live-examples.esm.min.js``\n* ``js-live-examples.iife.min.js``\n* ``js-live-examples.iife.js``\n\nAlso in subfolder _no-style_ ([github:dist/no-style](https://github.com/UmamiAppearance/JSLiveExamples/tree/main/dist/no-style)), there are builds available without build in css.\n\n\nIf you want to build your own copy run:\n```sh\nnpm run build\n```\n\n\n## Usage\nFirst either [import](#importing) the esm-module or add the iife script tag to the HTML page. After that, the templates for the examples can be [used](#creating-a-live-example) inside of your HTML page.\n\n\n### Importing\n\n#### ES6\n```html\n\u003cscript type=\"module\"\u003e\n    import liveExamples from \"./\u003cpath\u003e/js-live-examples.esm.min.js\";\n\u003c/script\u003e\n```\n##### CDN (jsdelivr)\n```html\n\u003cscript type=\"module\"\u003e\n    import liveExamples from \"https://cdn.jsdelivr.net/npm/js-live-examples@latest/dist/js-live-examples.esm.min.js;\n\u003c/script\u003e\n```\n\n#### IIFE\n```html\n\u003cscript src=\"./\u003cpath\u003e/js-live-examples.iife.min.js\"\u003e\u003c/script\u003e\n```\n\n##### CDN (jsdelivr)\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/js-live-examples@latest/dist/js-live-examples.iife.min.js\"\u003e\u003c/script\u003e\n```\n\n### Creating a Basic Example\nAfter importing, the templates can be used inside of the HTML. A Basic example may look like this:\n\n```html\n\u003ctemplate class=\"live-example\"\u003e\n    \u003ch1\u003eExample: Hello World!\u003c/h1\u003e\n\n    \u003cmeta data-run=\"true\"\u003e\n\n    \u003cscript\u003e\n        const helloWorld = () =\u003e {\n            console.log(\"Hello World!\");\n        };\n        helloWorld();\n    \u003c/script\u003e\n\u003c/template\u003e\n```\n* The result of this code is shown at the very [top](#jsliveexamples)\n* The most important part is the class name `live-example`. This is the property **JSLiveExamples** is looking for.\n* The `\u003ch1\u003e`-tag becomes the title of the example.\n* The `\u003cmeta\u003e`-tag contains [options](#options) (in this case it enables the autostart)\n* The `\u003cscript\u003e`-tag contains initial code of the example.\n* The final example gets inserted directly at the location of the template.\n* Additional class names for the example are possible.\n* Every example gets the id \"live-example-\\\u003cnr\\\u003e\", for a custom id, pass the attribute ``for=\"myId\"`` to the ``\u003ctemplate\u003e``-tag\n* After the code was executed or a demo is done, the ``\u003cexample\u003e`` emits the event ``executed``\n\n### Options\nTo pass options to an example, use a `\u003cmeta\u003e` tag inside of the template and pass arguments in the form of data-attributes.\n\n| key                   | type                   | default     | effect                                                         |\n| --------------------- | ---------------------- | ----------- | -------------------------------------------------------------- |\n| data-buttons          | _Boolean_              | `true`      | removes the buttons if set to false                            |\n| data-caret            | _Boolean_              | `true`      | if true a caret is emulated for the typing animation           |\n| data-demo             | _Boolean_              | `false`     | enables the [demo-mode](#demo-mode) if set to true             |\n| data-execution-delay  | _Number_               | `250`       | delay in _ms_ before current code block is getting executed    |\n| data-indicator        | _Boolean_              | `true`      | if true a blinking dot indicates a running demo or code        |\n| data-run              | _Boolean_              | `false`     | if true the example/demo is started/executed automatically     |\n| data-scroll           | _Boolean_              | `true`      | if false the console node grows infinitely                     |\n| data-transform        | _Boolean (or Keyword)_ | `true`      | if true a demo transforms into a regular example after it is done _(pass the keyword `\"perm\"` to keep it in the regular state)_ |\n| data-typing-speed     | _Number_               | `60`        | value in _ms_ for the speed of the typing emulation            |\n| data-typing-variation | _Number_               | `80`        | value in _ms_ for the randomly added imperfection when typing gets emulated |\n\n\n### Demo-Mode\nThe _Demo-Mode_ is a way to present the code in a much more interesting way. The code is written in front of the eyes of the spectator and can be structured with breakpoints to add pauses. The demo can be paused (or stopped) and resumed at any time. To activate this mode, pass the data-attribute `data-demo=\"true\"` to the `\u003cmeta\u003e`-tag.  \n  \nBreakpoints can be added, by using at least three underscores inside of the `\u003cscript\u003e`-tag at the relevant position in the code.\nThe template node for the [hello-world-example](https://umamiappearance.github.io/JSLiveExamples/examples/demo.html) for instance looks like so:\n```html\n\u003ctemplate class=\"live-example\"\u003e\n    \u003ch1\u003eExample: Hello World!\u003c/h1\u003e\n\n    \u003cmeta data-demo=\"true\"\u003e\n\n    \u003cscript\u003e\n        const helloWorld = () =\u003e {\n            console.log(\"Hello World!\");\n        };\n        ___();\n        helloWorld();\n    \u003c/script\u003e\n\u003c/template\u003e\n```\nThe brackets for the breakpoint are optional, but can be used to pass a number, which is the number of milliseconds before the next codeblock is getting executed (e.g. `___(2000)` for two seconds). The main purpose of a breakpoint is, that the code before the breakpoint is getting executed, before the journey continues.\n  \nYou can use as many breakpoints as you like. The complete line with a breakpoint is getting removed from the visible code.\n\n### Methods\nApart from the buttons, an example-node has direct access to its methods *(note, that demo specific methods are only available if the [demo-mode](#demo-mode) is set)*.\n\n| method                | effect                             |\n| --------------------- | ---------------------------------- |\n| `.run()`              | _executes the code_                |\n| `.reset()`            | _resets the code block_            |\n| `.getCode()`          | _get current code as a string_     |\n| `.updateCode(\u003ccode\u003e)` | _set new code as a string_         |\n| `.runDemo()`          | _runs a demo_                      |\n| `.pauseDemo()`        | _pauses a demo_                    |\n| `.resumeDemo()`       | _resumes a paused demo_            |\n| `.stopDemo()`         | _stops a running or a paused demo_ |\n\nAdditionally, the initial code (the reset state) can be modified in regular mode. It can be accessed with the property `initialCode`.\n\n\n## Code Sharing Service\nIf you like to share some code or want to demonstrate something, use this [Code Sharing Service](https://umamiappearance.github.io/JSLiveExamples/service/). _No account needed, mobile friendly, easy to use._\n\n\n## License\n\n[MIT](https://opensource.org/licenses/MIT)\n\nCopyright (c) 2023, UmamiAppearance\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fumamiappearance%2Fjsliveexamples","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fumamiappearance%2Fjsliveexamples","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fumamiappearance%2Fjsliveexamples/lists"}