{"id":19346741,"url":"https://github.com/lume/live-code","last_synced_at":"2025-09-01T13:42:32.137Z","repository":{"id":66258303,"uuid":"204275082","full_name":"lume/live-code","owner":"lume","description":"`\u003clive-code\u003e` element to display editable code with live output. Demo:","archived":false,"fork":false,"pushed_at":"2024-05-01T22:48:05.000Z","size":1990,"stargazers_count":9,"open_issues_count":3,"forks_count":3,"subscribers_count":8,"default_branch":"main","last_synced_at":"2024-05-22T08:35:18.594Z","etag":null,"topics":["code-editor","custom-elements","live-code-editor","lume","text-editor","web-components"],"latest_commit_sha":null,"homepage":"https://codepen.io/trusktr/pen/PogvVBj","language":"TypeScript","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/lume.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-08-25T09:47:51.000Z","updated_at":"2024-05-03T10:14:21.000Z","dependencies_parsed_at":"2023-12-10T07:30:29.200Z","dependency_job_id":"f20b2222-e51f-4869-a055-60e1ee4bf67e","html_url":"https://github.com/lume/live-code","commit_stats":{"total_commits":108,"total_committers":2,"mean_commits":54.0,"dds":0.01851851851851849,"last_synced_commit":"b9def668965b069b61ae3b3bdbd8ba9d2b65dc4f"},"previous_names":[],"tags_count":23,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lume%2Flive-code","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lume%2Flive-code/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lume%2Flive-code/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lume%2Flive-code/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lume","download_url":"https://codeload.github.com/lume/live-code/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223909960,"owners_count":17223592,"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":["code-editor","custom-elements","live-code-editor","lume","text-editor","web-components"],"created_at":"2024-11-10T04:12:11.880Z","updated_at":"2025-04-23T05:30:59.648Z","avatar_url":"https://github.com/lume.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @lume/live-code\n\nA `\u003clive-code\u003e` HTML element that gives you a code editor with live results as you type.\n\n\u003ca href=\"https://codepen.io/trusktr/pen/PogvVBj\" target=\"_blank\"\u003e\n\u003cimg width=\"801\" alt=\"Screenshot 2024-05-01 at 3 34 28 PM\" src=\"https://github.com/lume/live-code/assets/297678/177d0cd8-118e-416d-9b0f-bb9237b3ce9f\"\u003e\n\u003c/a\u003e\n\n#### `npm install @lume/live-code`\n\nCompatible with Solid.js, Svelte, Vue, Angular, Ember, jQuery, React, Astro, Qwik.js, and every other web framework or library for creating HTML-based applications.\n\n## Examples:\n\n- CodePen: https://codepen.io/trusktr/pen/PogvVBj\n- Live demos on Lume's docs site are made with `\u003clive-code\u003e`: https://docs.lume.io/examples/hello-world/\n\n## Run the examples\n\n```\nnpm install \u0026\u0026 npm start\n```\n\n## Usage\n\nSpecify content with the `content` attribute:\n\n```html\n\u003clive-code content=\"console.log('hello')\" mode=\"script\u003eiframe\" /\u003e\n\n\u003cscript type=\"importmap\"\u003e\n\t... Set up an import map, or if you use a build tool like Webpack, Vite, Parcel, Rollup,\n\t esbuild, swc, etc, skip this part. See examples/index.html for an importmap example, or\n\t use a tool to generate an import map such as @jsenv/importmap-node-module. ...\n\u003c/script\u003e\n\n\u003cscript type=\"module\"\u003e\n\timport '@lume/live-code' // defines the element\n\u003c/script\u003e\n```\n\nSpecify content with the `content` property:\n\n```html\n\u003clive-code id=\"editor\" mode=\"script\u003eiframe\" /\u003e\n\n\u003cscript type=\"importmap\"\u003e\n\t...\n\u003c/script\u003e\n\n\u003cscript type=\"module\"\u003e\n\timport '@lume/live-code' // defines the element\n\n\tconst editor = document.querySelector('#editor')\n\teditor.content = `\n    if (true)\n      console.log('hello')\n  `\n\u003c/script\u003e\n```\n\nThe `content` attribute or JS property is more useful for short pieces of text,\nor for programmatically setting from a string, and with template systems that\nset attributes from JS variables.\n\nHere's a JSX example (useful in React, Preact, Solid.js, etc, requires using a compiler such as Babel, TypeScript, or ESBuild):\n\n```js\nfunction SomeComponent(props) {\n\t// Set the content from a variable.\n\treturn \u003clive-code content={props.someCode} /\u003e\n}\n```\n\nHere's a Lit `html` example (does not require any build step):\n\n```js\nrender() {\n  return html`\u003clive-code content=${this.someCode}\u003e\u003c/live-code\u003e`\n}\n```\n\nHere's a Solid.js `html` example in a Lume `Element` (does not require any build step):\n\n```js\ntemplate() {\n  return html`\u003clive-code content=${() =\u003e this.someCode}\u003e\u003c/live-code\u003e`\n}\n```\n\nEtc. `\u003clive-code\u003e` can be used in Vue, Svelte, Angular, and all the rest.\n\nSpecify a file with the `src` attribute or JS property, and text content will be fetched from that file:\n\n```html\n\u003clive-code src=\"./path/to/file.js\" mode=\"script\u003eiframe\" /\u003e\n```\n\nLastly, use a `\u003ctemplate\u003e` to specify text content inline. This can be cleaner\nthan placing multiline text inside the `content` attribute by hand:\n\n```html\n\u003clive-code\u003e\n\t\u003ctemplate\u003e\n\t\t\u003ch1\u003eExample\u003c/h1\u003e\n\t\t\u003cscript\u003e\n\t\t\tconst h1 = document.querySelector('h1')\n\t\t\th1.style.color = 'royalblue'\n\t\t\u003c/script\u003e\n\t\u003c/template\u003e\n\u003c/live-code\u003e\n```\n\nNote that if `src` or `content` are specified, those take priority over the\n`\u003ctemplate\u003e` method.\n\nNote that `\u003ctemplate\u003e` currently only works when it is initially present, but\nnot if it is added later. If you're doing things programmatically, then send the\ncontent in via the `content` property instead of appending a `\u003ctemplate\u003e` (f.e.\n`editor.content = template.innerHTML`).\n\n### Attributes\n\nEach attribute has a respective JS property of the same name (but camelCase instead of dash-case).\n\n- `content` - Either a string of text, or a class or ID selector starting with\n  `.` or `#`. The given text string, or the text content of the selected element,\n  will appear in the editor. Any time the user resets the editor with the Reset\n  button or `reset()` method, the text in the editor will reset to the initial\n  value specified by this.\n  - Default: `\"\"` which is ignored.\n- `src` - Specify a file from which to get text content from. If `content` is\n  also specified, content loaded from `src` will have priority and `content` will\n  be overridden.\n  - Default: `\"\"` which is ignored.\n- `autorun` - A boolean. If true, editing the text will cause the preview area\n  to automatically re-run based on the new content. The `Rerun` button will always force a\n  rerun.\n  - Default: `true`.\n- `strip-indent` - A boolean. If true, the given code will be unindented, which\n  is useful for template strings that are indented within the source where they\n  are defined.\n  - Default: `true`.\n- `trim` - A boolean. If true, leading and trailing white space will be removed.\n  - Default: `true`.\n- `debounce` - A number. If `autorun` is true, then autorun is debounced by\n  this amount in milliseconds after a user types into the code editor.\n  - Default: `1000`.\n- `mode` - The mode specifies which type of content the editor will execute.\n  Possible values are the following strings:\n\n  - `\"html\u003eiframe\"` - The content will be treated as HTML and placed in an iframe.\n  - `\"script\u003eiframe\"` - The content is executed as a `\u003cscript\u003e` inside an iframe.\n\n  Default: `\"html\u003eiframe\"`\n\n## Methods\n\n### `reset()`\n\nResets the text content back to the original before it was modified. This is the same thing the `Reset` button does.\n\n### `copy()`\n\nCopy the current text to the system clipboard. This is the same thing the `Copy` button does.\n\n### `rerun()`\n\nReruns the live output. This is the same thing the `Rerun` button does.\n\n### `toggleFullscreen()`\n\nToggles fullscreen mode. This is the same thing the `Toggle Fullscreen` button does.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flume%2Flive-code","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flume%2Flive-code","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flume%2Flive-code/lists"}