[](#%5F%5Fcodelineno-11-10) Current heart rate
[](#%5F%5Fcodelineno-11-11) {{ heartRate() ?? '--' }}
[](#%5F%5Fcodelineno-11-12)
`
The following code goes to your `src/app/home/home.page.scss` file:
`[](#%5F%5Fcodelineno-12-1)ion-content {
[](#%5F%5Fcodelineno-12-2) text-align: center;
[](#%5F%5Fcodelineno-12-3)}
[](#%5F%5Fcodelineno-12-4)
[](#%5F%5Fcodelineno-12-5).title {
[](#%5F%5Fcodelineno-12-6) font-size: 32px;
[](#%5F%5Fcodelineno-12-7) margin-top: 36px;
[](#%5F%5Fcodelineno-12-8)}
[](#%5F%5Fcodelineno-12-9)
[](#%5F%5Fcodelineno-12-10).body {
[](#%5F%5Fcodelineno-12-11) font-size: 64px;
[](#%5F%5Fcodelineno-12-12) font-weight: bold;
[](#%5F%5Fcodelineno-12-13) margin-top: 48px;
[](#%5F%5Fcodelineno-12-14)}
`
That's it! Now everything is set up to build and run the app. 🎉
## Run the app[¶](#run-the-app "Permanent link")
To run your app on Android, use the following command:
`[](#%5F%5Fcodelineno-13-1)npx ionic cap run android
`
To run your app on iOS, use the following command:
`[](#%5F%5Fcodelineno-14-1)npx ionic cap run ios
`
## Reading the Device's Built-In Sensors[¶](#reading-the-devices-built-in-sensors "Permanent link")
The heart rate monitor above reads data from an external sensor over [Bluetooth Low Energy](/docs/sdks/capacitor/bluetooth-low-energy/). But every phone also ships with a set of built-in sensors you can read directly, no pairing required. If your app needs motion, orientation, or environmental data, these plugins expose them behind the same simple, listener-based API:
* **[Compass](/docs/sdks/capacitor/compass/)** — read the device heading and listen for live updates, including true north on iOS.
* **[Gyroscope](/docs/sdks/capacitor/gyroscope/)** — real-time rotation rate measurements for motion-based interactions.
* **[Proximity Sensor](/docs/sdks/capacitor/proximity-sensor/)** — detect nearby objects, for example to blank the screen during a call.
* **[Light Sensor](/docs/sdks/capacitor/light-sensor/)** — read ambient illuminance in lux to adapt your UI to the surroundings (Android).
* **[Barometer](/docs/sdks/capacitor/barometer/)** — obtain static air pressure and altitude from the barometer sensor.
* **[Thermal State](/docs/sdks/capacitor/thermal-state/)** — react to the device thermal state before the OS throttles your app during heavy work.
## FAQ[¶](#faq "Permanent link")
### Do I need a physical device to build this heart rate monitor?[¶](#do-i-need-a-physical-device-to-build-this-heart-rate-monitor "Permanent link")
Yes. Bluetooth Low Energy talks to real hardware, so you need to run the app on a physical Android or iOS device — the iOS Simulator and Android emulator don't expose Bluetooth. You also need an actual BLE heart rate sensor, such as a chest strap or a compatible smartwatch.
### Does the Capacitor Bluetooth Low Energy plugin work on both Android and iOS?[¶](#does-the-capacitor-bluetooth-low-energy-plugin-work-on-both-android-and-ios "Permanent link")
Yes, on both. Each platform requires the appropriate Bluetooth permissions in its native configuration; see the [Installation](/docs/sdks/capacitor/bluetooth-low-energy/#installation) section of the plugin documentation for the exact setup.
### My app can't find the heart rate sensor — what's wrong?[¶](#my-app-cant-find-the-heart-rate-sensor-whats-wrong "Permanent link")
The usual causes are missing Bluetooth (and, on Android, location) permissions, a sensor that isn't in pairing mode, or scanning for the wrong service. Double-check the permissions and confirm you're filtering for the Heart Rate service (`0x180D`).
### Can I read sensors that don't use Bluetooth?[¶](#can-i-read-sensors-that-dont-use-bluetooth "Permanent link")
Yes. The phone's built-in sensors — compass, gyroscope, proximity, ambient light, barometer, and thermal state — are available directly without pairing. See [Reading the Device's Built-In Sensors](#reading-the-devices-built-in-sensors) above.
## Conclusion[¶](#conclusion "Permanent link")
In this guide, we learned how to build a simple heart rate monitor app with Capacitor. We used the [Capacitor Bluetooth Low Energy plugin](/docs/sdks/capacitor/bluetooth-low-energy/) to connect to a heart rate sensor and receive the heart rate measurements. If you have any questions, just [create a discussion](https://github.com/capawesome-team/capacitor-plugins) in the GitHub repository. Make sure you follow Capawesome on [X](https://twitter.com/capawesomeio) so you don't miss any future updates.
July 15, 2026
Back to top
```json
{
"@context": "https://schema.org",
"@type": "BlogPosting",
"headline": "How to Build a Heart Rate Monitor with Capacitor",
"description": "Learn how to build a simple heart rate monitor app with Capacitor and the Bluetooth Low Energy plugin in just 15 minutes.",
"image": "https://capawesome.io/assets/banners/cloud-build-and-deploy-capacitor-apps.png",
"datePublished": "2024-08-05T00:00:00+00:00",
"dateModified": "2026-07-14T00:00:00+00:00",
"author": [
{
"@type": "Person",
"name": "Robin Genz",
"url": "https://github.com/robingenz"
}
],
"publisher": {
"@type": "Organization",
"name": "Capawesome",
"url": "https://capawesome.io",
"logo": {
"@type": "ImageObject",
"url": "https://capawesome.io/assets/images/logo.svg"
}
},
"articleSection": "Capacitor",
"keywords": ["Capacitor", "Guides", "SDKs"],
"isPartOf": {
"@type": "Blog",
"@id": "https://capawesome.io/blog/#blog"
},
"mainEntityOfPage": "https://capawesome.io/blog/how-to-build-a-heart-rate-monitor-with-capacitor/",
"url": "https://capawesome.io/blog/how-to-build-a-heart-rate-monitor-with-capacitor/"
}
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Home",
"item": "https://capawesome.io/"
},
{
"@type": "ListItem",
"position": 2,
"name": "Blog",
"item": "https://capawesome.io/blog/"
},
{
"@type": "ListItem",
"position": 3,
"name": "How to Build a Heart Rate Monitor with Capacitor",
"item": "https://capawesome.io/blog/how-to-build-a-heart-rate-monitor-with-capacitor/"
}
]
}
{"@context": "https://schema.org", "@type": "FAQPage", "mainEntity": [{"@type": "Question", "name": "Do I need a physical device to build this heart rate monitor?", "acceptedAnswer": {"@type": "Answer", "text": "Yes. Bluetooth Low Energy talks to real hardware, so you need to run the app on a physical Android or iOS device — the iOS Simulator and Android emulator don't expose Bluetooth. You also need an actual BLE heart rate sensor, such as a chest strap or a compatible smartwatch."}}, {"@type": "Question", "name": "Does the Capacitor Bluetooth Low Energy plugin work on both Android and iOS?", "acceptedAnswer": {"@type": "Answer", "text": "Yes, on both. Each platform requires the appropriate Bluetooth permissions in its native configuration; see the Installation section of the plugin documentation for the exact setup."}}, {"@type": "Question", "name": "My app can't find the heart rate sensor — what's wrong?", "acceptedAnswer": {"@type": "Answer", "text": "The usual causes are missing Bluetooth (and, on Android, location) permissions, a sensor that isn't in pairing mode, or scanning for the wrong service. Double-check the permissions and confirm you're filtering for the Heart Rate service ( 0x180D)."}}, {"@type": "Question", "name": "Can I read sensors that don't use Bluetooth?", "acceptedAnswer": {"@type": "Answer", "text": "Yes. The phone's built-in sensors — compass, gyroscope, proximity, ambient light, barometer, and thermal state — are available directly without pairing. See Reading the Device's Built-In Sensors above."}}], "url": "https://capawesome.io/blog/how-to-build-a-heart-rate-monitor-with-capacitor/"}
```