{"id":29167290,"url":"https://github.com/eclipse-thingweb/ui-wot","last_synced_at":"2025-10-11T23:32:15.275Z","repository":{"id":300225706,"uuid":"997385821","full_name":"eclipse-thingweb/ui-wot","owner":"eclipse-thingweb","description":"Independent UI components library to build interfaces for IoT applications","archived":false,"fork":false,"pushed_at":"2025-07-29T16:20:58.000Z","size":92,"stargazers_count":0,"open_issues_count":4,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-04T05:29:05.109Z","etag":null,"topics":["components","iot","ui","web","web-of-things","wot"],"latest_commit_sha":null,"homepage":"https://thingweb.io","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/eclipse-thingweb.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-06-06T12:45:56.000Z","updated_at":"2025-07-29T16:21:04.000Z","dependencies_parsed_at":"2025-07-31T12:50:12.096Z","dependency_job_id":"8c6b06c3-c9af-4dd4-9c22-878418b6e73d","html_url":"https://github.com/eclipse-thingweb/ui-wot","commit_stats":null,"previous_names":["eclipse-thingweb/ui-wot"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/eclipse-thingweb/ui-wot","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eclipse-thingweb%2Fui-wot","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eclipse-thingweb%2Fui-wot/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eclipse-thingweb%2Fui-wot/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eclipse-thingweb%2Fui-wot/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/eclipse-thingweb","download_url":"https://codeload.github.com/eclipse-thingweb/ui-wot/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eclipse-thingweb%2Fui-wot/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279009392,"owners_count":26084580,"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","status":"online","status_checked_at":"2025-10-11T02:00:06.511Z","response_time":55,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["components","iot","ui","web","web-of-things","wot"],"created_at":"2025-07-01T09:09:25.631Z","updated_at":"2025-10-11T23:32:15.268Z","avatar_url":"https://github.com/eclipse-thingweb.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1\u003e\n  \u003cpicture\u003e\n  \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://raw.githubusercontent.com/eclipse-thingweb/thingweb/master/brand/logos/ui-wot_for_dark_bg.svg\"\u003e\n  \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"https://raw.githubusercontent.com/eclipse-thingweb/thingweb/master/brand/logos/ui-wot.svg\"\u003e\n  \u003cimg title=\"ThingWeb ui-wot\" alt=\"Thingweb ui-wot logo\" src=\"https://raw.githubusercontent.com/eclipse-thingweb/thingweb/master/brand/logos/ui-wot.svg\" width=\"300\"\u003e\n\u003c/picture\u003e\n\u003c/h1\u003e\n\n\u003e A comprehensive toolkit for building interactive user interfaces from Web of Things (WoT) Thing Descriptions. Whether you're a developer integrating IoT controls into an existing application or someone who wants to quickly create dashboards without coding, UI-WoT is for you.\n\nBuilding user interfaces for IoT devices can be time-consuming and repetitive. You need to handle device connections, parse Thing Descriptions, create appropriate UI controls, and manage real-time data updates. UI-WoT solves these challenges by providing ready-to-use Web Components and a visual dashboard generator that automatically generates interfaces from standard Thing Descriptions.\n\nThe toolkit consists of two complementary packages that can be used together or independently, depending on the project needs.\n\n## Packages\n\n### Components Library\n\nLocation: [`packages/components/`](packages/components/)\n\nThe Components Library is a collection of Web Components designed specifically for WoT device interaction. If you're building a custom application and need to add IoT device controls, these components can save you significant development time. Simply drop them into your existing HTML, React, Vue, or Angular project.\n\nEach component understands Thing Description affordances and can automatically connect to device properties, actions, and events. For example, a `\u003cui-toggle\u003e` can bind to a boolean property and stay in sync with the device state in real-time.\n\n**What makes these components special:**\n\n- Framework-agnostic, meaning it will work anywhere from vanilla html to any framework\n- Smart connection strategies that can observe device changes or poll for updates\n- Built-in status indicators so users know when something is loading, connected, or has an error\n- Comprehensive theming system with dark mode support\n- Full keyboard accessibility for all components\n\n**Available components cover common IoT use cases:**\n\n- **Input Controls:** Toggle switches, sliders, number inputs, text fields, checkboxes, file uploads, color pickers, and date/time selectors\n- **Action Triggers:** Buttons that can invoke device actions with visual feedback\n- **Data Display:** Event monitors and notification systems for real-time device updates\n\n**Getting started with the library:**\n\n```bash\ncd packages/components\nnpm install\nnpm run build\nnpm start  # Demo server at http://localhost:3333\n```\n\nThe demo server showcases all available components with interactive examples.\n\n**[View detailed Components Documentation](packages/components/README.md)**\n\n### Dashboard Generator\n\nLocation: [`packages/generator/`](packages/generator/)\n\nThe Dashboard Generator is a complete web application that turns Thing Descriptions into interactive dashboards without requiring any programming knowledge. It's designed for system integrators, device manufacturers, researchers, and anyone who needs to quickly create functional interfaces for IoT devices.\n\nSimply provide a Thing Description URL or upload a TD file, and the generator automatically creates appropriate UI components for all available device features. You can then arrange these components on a visual canvas, customize their appearance and behavior, and save the resulting dashboard for later use or sharing.\n\n**What you can do with the generator:**\n\n- Load Thing Descriptions from device URLs or local files\n- Automatically generate UI components for all device properties, actions, and events\n- Arrange components using an intuitive drag-and-drop interface with grid snapping\n- Combine multiple devices into a single unified dashboard\n- Configure how components update (real-time observation vs. periodic polling)\n- Customize themes, colors, labels, and other visual properties\n- Save dashboard configurations as JSON files for sharing or backup\n- Export working dashboards that others can import and use immediately\n\n**Perfect for these scenarios:**\n\n- Quickly prototyping IoT interfaces during device development\n- Creating test dashboards for system integration and validation\n- Building end-user device management interfaces without custom development\n\n**Getting started with the generator:**\n\n```bash\ncd packages/generator\nnpm install\nnpm run dev  # Application opens at http://localhost:5173\n```\n\nThe generator includes built-in example Thing Descriptions so you can explore its features even without real devices.\n\n**[View comprehensive Generator Documentation](packages/generator/README.md)**\n\n## Getting Started\n\n**Prerequisites:** You'll need Node.js version 18 or higher and npm version 8 or higher installed on your system.\n\n**Initial setup:**\n\n```bash\n# Clone the repository\ngit clone https://github.com/eclipse-thingweb/ui-wot.git\ncd ui-wot\n\n# Install dependencies and build both packages\nnpm install\nnpm run build\n```\n\n**To explore the Dashboard Generator:**\nThis is the fastest way to see UI-WoT in action. The generator provides a complete visual interface for creating IoT dashboards.\n\n```bash\ncd packages/generator\nnpm run dev\n```\n\nThen open your browser to http://localhost:5173. You'll see the dashboard generator with example Thing Descriptions you can load immediately.\n\n**To explore the Components Library:**\nIf you want to see all available components and their capabilities:\n\n```bash\ncd packages/components\nnpm start\n```\n\nOpen http://localhost:3333 to view the component showcase with interactive demos.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feclipse-thingweb%2Fui-wot","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feclipse-thingweb%2Fui-wot","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feclipse-thingweb%2Fui-wot/lists"}