{"id":13805416,"url":"https://github.com/wokwi/wokwi-elements","last_synced_at":"2025-05-15T14:05:24.955Z","repository":{"id":38314437,"uuid":"226412003","full_name":"wokwi/wokwi-elements","owner":"wokwi","description":"Web Components for Electronics and IoT Parts","archived":false,"fork":false,"pushed_at":"2025-02-20T09:16:52.000Z","size":9371,"stargazers_count":205,"open_issues_count":17,"forks_count":53,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-05-07T22:17:51.940Z","etag":null,"topics":["arduino","electronics","lit-element","web-components"],"latest_commit_sha":null,"homepage":"https://elements.wokwi.com/","language":"TypeScript","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/wokwi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","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":"2019-12-06T21:14:12.000Z","updated_at":"2025-05-04T03:12:03.000Z","dependencies_parsed_at":"2022-07-11T19:52:34.017Z","dependency_job_id":"7c90ce76-7187-4d97-8619-b343eaf42700","html_url":"https://github.com/wokwi/wokwi-elements","commit_stats":null,"previous_names":[],"tags_count":149,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wokwi%2Fwokwi-elements","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wokwi%2Fwokwi-elements/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wokwi%2Fwokwi-elements/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wokwi%2Fwokwi-elements/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wokwi","download_url":"https://codeload.github.com/wokwi/wokwi-elements/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254355334,"owners_count":22057354,"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":["arduino","electronics","lit-element","web-components"],"created_at":"2024-08-04T01:01:00.949Z","updated_at":"2025-05-15T14:05:24.910Z","avatar_url":"https://github.com/wokwi.png","language":"TypeScript","readme":"# Wokwi Elements\n\nWeb Components for Arduino and various electronic parts.\n\n[![NPM Version](https://img.shields.io/npm/v/@wokwi/elements)](https://www.npmjs.com/package/@wokwi/elements)\n[![Gitpod ready-to-code](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/#https://github.com/wokwi/wokwi-elements)\n\nCheck out [the component catalog](https://elements.wokwi.com).\n\nNote: these elements only provide the presentation and display of the represented hardware. They do not provide the functional simulation code of the hardware. That is dependant on the application (simulator) that you wish to use these with, and thus up to you to create. \n\n## Using Wokwi Elements\n\nYou can install the package with `npm` and then import it into your code:\n\n```js\nimport '@wokwi/elements';\n```\n\nAlternatively, you can load the Wokwi Elements bundle from unpkg's CDN:\n\n```html\n\u003cscript src=\"https://unpkg.com/@wokwi/elements@0.48.3/dist/wokwi-elements.bundle.js\"\u003e\u003c/script\u003e\n```\n\nReplace 0.48.3 with the latest version number. You can find a list of all the versions in the [releases](https://github.com/wokwi/wokwi-elements/) page.\n\n## Local development\n\nTo prepare for local development, clone this repo, and then install\nthe dependencies:\n\n```\nnpm install\n```\n\nThen start storybook:\n\n```\nnpm run storybook\n```\n\nThis will open a local dev server at http://localhost:6006, where you\ncan interact with the elements and see your changes live, similar to\nhttps://elements.wokwi.com.\n\n## Creating a new element\n\nThe easiest way to create a new element is to run the generator:\n\n```\nnpm run new-element --name demo\n```\n\nThis will generate a new element called `demo`. It will also\ncreate a storybook file, so you will be able to see the new element\nin storybook (see the \"Local development\" section above).\n\nNote: updates the docstrings in the code will not be reflected\nin Storybook's Docs tab unless you restart Storybook, or run the\nfollowing command manually and refresh the page:\n\n```\nnpm run analyze-components\n```\n\nCheck out the [Contributing Guide](CONTRIBUTING.md) for more details.\n\n## Learn how to create elements\n\n### Video tutorial\n\nThe [Membrane keypad element live-coding tutorial](https://www.youtube.com/watch?v=gh27icNatwA) walks\nthrough the complete process behind creating an element: research, drawing, and writing the code /\nstories.\n\n### Blog posts\n\n* [Recreating The Arduino Pushbutton Using SVG And \u0026lt;lit-element\u0026gt;](https://www.smashingmagazine.com/2020/01/recreating-arduino-pushbutton-svg/) \n* [Turning Arduino OLED Display into a Web Component](https://blog.wokwi.com/making-an-arduino-ssd1306-lit-element/)\n\n## License\n\nWokwi Elements are released under the [MIT license](LICENSE).\n","funding_links":[],"categories":["Real World","Component Libraries","TypeScript"],"sub_categories":["Component Libraries"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwokwi%2Fwokwi-elements","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwokwi%2Fwokwi-elements","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwokwi%2Fwokwi-elements/lists"}