https://github.com/tendry-lab/device-ui
Web UI foundation for device monitoring and control. Preact components, TypeScript, tested core logic. Complete interfaces under 50KB gzipped.
https://github.com/tendry-lab/device-ui
embedded-ui monitoring preact typescript webgui
Last synced: 22 days ago
JSON representation
Web UI foundation for device monitoring and control. Preact components, TypeScript, tested core logic. Complete interfaces under 50KB gzipped.
- Host: GitHub
- URL: https://github.com/tendry-lab/device-ui
- Owner: tendry-lab
- License: apache-2.0
- Created: 2025-09-01T06:46:19.000Z (9 months ago)
- Default Branch: master
- Last Pushed: 2025-12-26T15:56:33.000Z (5 months ago)
- Last Synced: 2025-12-28T03:42:31.830Z (5 months ago)
- Topics: embedded-ui, monitoring, preact, typescript, webgui
- Language: TypeScript
- Homepage: https://tendry-lab.com/developers/
- Size: 357 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## Introduction
[](https://github.com/tendry-lab/bonsai-zero-a-1-k-web-gui/actions/workflows/build.yml)
Web UI foundation for device monitoring and control. Preact components, TypeScript, tested core logic. Complete interfaces under 50KB gzipped.
## Features
- Preact + TypeScript
- System and network configuration
- Sensor monitoring components
- OTA firmware update
- Notification system
- Offline device documentation
- Responsive design
## Preview
## Development
**Install dependencies**
All dependencies should be installed locally, use `npm install --save-dev`.
```sh
npm install
```
**Build Web GUI**
Before writing Web GUI to the device, make sure it's been built.
```sh
npm run build
```
**Run tests**
Cover your code with unit test, both logic and UI components. We use [vitest](https://vitest.dev/).
```
npm run test
npm run test:coverage
npm run test:watch
```
**Format code**
Make sure your code is properly formatted. We use [eslint](https://eslint.org/).
```sh
npm run fmt
```
**Compress assets**
- By default everything that is inside HTML, CSS, JS are compressed during the build process, see vite.config.js for more details.
- SVG files should be pre-compressed with [SVGO](https://github.com/svg/svgo) as `npx svgo example.svg -o example.compressed.svg`, `SVGO` is available after running `npm install`. After SVG is pre-compressed it should be inlined in the source code directly or as JSX component.
## Contribution
- [Preact JS Framework](https://preactjs.com/) is used for development, please refer to its official documentation for more details.
- `master` - stable and ready-to-use branch. [Semver](https://semver.org/) is used for versioning.
- Try to keep PR small.
- New code should be similar to existing code. Use the [Google TypeScript Style Guide](https://google.github.io/styleguide/tsguide.html).
## License
This project is licensed under the Apache 2.0 License - see the LICENSE file for details.