BioUI Web Overview
BioUI Web
BioUI Web is a framework-agnostic widget library for digital health applications. It provides drop-in Web Components that handle check-ins, progress tracking, and task management — so you can embed patient-reported outcome (PRO) workflows into any web app with a few lines of HTML.
Architecture
BioUI Web is built on modern web standards:
- Web Components — Custom elements that work in any framework (React, Vue, Angular, plain HTML)
- Lit — Lightweight rendering library for fast, reactive components
- Light DOM — Widgets render into the light DOM so your stylesheets apply naturally
- Lazy loading — Only the widgets you use are fetched and registered
- CSS custom properties — Theming via standard
--bio-*custom properties
Widget Catalog
Phase 1
| Component | Description |
|---|---|
<bio-provider> | Auth context provider — wraps all other widgets |
<bio-checkin> | PRO check-in questionnaire (FHIR QuestionnaireResponse) |
<bio-task-list> | Displays outstanding tasks for the current user |
<bio-progress-ring> | Animated circular progress indicator |
<bio-progress-mountain> | Multi-day progress visualization as a mountain chart |
Auth Model
BioUI Web uses a service-to-service auth model. Your application provides three identifiers:
| Attribute | Purpose |
|---|---|
api-key | Organization developer key (sent as a Bearer token) |
project-key | Identifies the project within your organization |
xuser-id | Your app's external user ID, resolved to an AnyBio UUID on the server |
There is no end-user login. Your application owns the identity and passes it through <bio-provider>. See the Authentication guide for details.
Distribution
BioUI Web is distributed via CDN. Add a single script tag to get started:
<script src="https://cdn.anybio.com/bioui-web/v1/bioui.js"></script>Next Steps
- Quickstart — Display a widget in under 10 lines of code
- Authentication — How credentials and user identity work
- Check-in Integration — Build a PRO check-in workflow