Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wokwi/wokwi-elements
Web Components for Electronics and IoT Parts
https://github.com/wokwi/wokwi-elements
arduino electronics lit-element web-components
Last synced: 3 months ago
JSON representation
Web Components for Electronics and IoT Parts
- Host: GitHub
- URL: https://github.com/wokwi/wokwi-elements
- Owner: wokwi
- License: mit
- Created: 2019-12-06T21:14:12.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2024-06-26T09:00:03.000Z (5 months ago)
- Last Synced: 2024-08-02T08:51:24.170Z (3 months ago)
- Topics: arduino, electronics, lit-element, web-components
- Language: TypeScript
- Homepage: https://elements.wokwi.com/
- Size: 6.98 MB
- Stars: 176
- Watchers: 8
- Forks: 48
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- awesome-lit - Wokwi Elements - Web Components for Arduino and various electronic parts. (Component Libraries)
- awesome-web-components - Wokwi Elements - Web Components for Arduino and various electronic parts. (Real World / Component Libraries)
README
# Wokwi Elements
Web Components for Arduino and various electronic parts.
[](https://www.npmjs.com/package/@wokwi/elements)
[](https://gitpod.io/#https://github.com/wokwi/wokwi-elements)
Check out [the component catalog](https://elements.wokwi.com).
Note: 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.
## Using Wokwi Elements
You can install the package with `npm` and then import it into your code:
```js
import '@wokwi/elements';
```
Alternatively, you can load the Wokwi Elements bundle from unpkg's CDN:
```html
```
Replace 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.
## Local development
To prepare for local development, clone this repo, and then install
the dependencies:
```
npm install
```
Then start storybook:
```
npm run storybook
```
This will open a local dev server at http://localhost:6006, where you
can interact with the elements and see your changes live, similar to
https://elements.wokwi.com.
## Creating a new element
The easiest way to create a new element is to run the generator:
```
npm run new-element --name demo
```
This will generate a new element called `demo`. It will also
create a storybook file, so you will be able to see the new element
in storybook (see the "Local development" section above).
Note: updates the docstrings in the code will not be reflected
in Storybook's Docs tab unless you restart Storybook, or run the
following command manually and refresh the page:
```
npm run analyze-components
```
Check out the [Contributing Guide](CONTRIBUTING.md) for more details.
## Learn how to create elements
### Video tutorial
The [Membrane keypad element live-coding tutorial](https://www.youtube.com/watch?v=gh27icNatwA) walks
through the complete process behind creating an element: research, drawing, and writing the code /
stories.
### Blog posts
* [Recreating The Arduino Pushbutton Using SVG And <lit-element>](https://www.smashingmagazine.com/2020/01/recreating-arduino-pushbutton-svg/)
* [Turning Arduino OLED Display into a Web Component](https://blog.wokwi.com/making-an-arduino-ssd1306-lit-element/)
## License
Wokwi Elements are released under the [MIT license](LICENSE).