App Inventor and HTML/JavaScript

A powerful Label Alternative including touch gestures using the Webviewer, some HTML/jQuery and Hammer.js

There have been questions like this in the forum: I'm trying to find out how to format the text in a Label. I would like to be able to, at least, make certain words bold and use various font-sizes. Ideally, I would like to have HTML-style markup or similar.

Yes, we can use the Webviewer component and some HTML and get a nice Label alternative! And together with Hammer.js we can add touch gestures to our webviewer, which means, as I set it up in the example, a swipe left shows the next page, a swipe right shows the previous page and tap displays a notifier.


What does this solution offer?

App Inventor Blocks

In the example below I first read a text file using the File component with the pages to display. Each row of the text file represents one page. There are 3 rows in the text file.

<h1>Lorem Ipsum</h1><h2>Page 1</h2><p><img src="1.png" width="48" height="48" alt="" title="">Lorem ipsum dolor sit amet...</p>
<h1>Lorem Ipsum</h1><h2>Page 2</h2><p><img src="2.png" width="48" height="48" alt="" title="">Maecenas consectetur ...</p>
<h1>Lorem Ipsum</h1><h2>Page 3</h2><p><img src="3.png" width="48" height="48" alt="" title="">Cras felis ligula,...</p>

The text was created using the text generator at
The tools extension offers the method PathToAssets which always returns the correct path to the assets.

For questions about App Inventor,
please ask in the App Inventor community.Thank you.


After buying the example, you will see, how the HTML/Javascript file looks like. This file is essential for the app to be able to work correctly, but you do not have to worry about: for your own app you only have to provide the text file with some HTML tags.

Are you currently not familiar with HTML/CSS/JavaScript?

Test the functionality of the "A powerful Label Alternative" example project

The test app is available in Google Play. You can test the example following these steps

  1. Follow the opt-in URL to get access to the app and to be able to download it to your device. It might take a few hours for Google to enable you as beta tester!
  2. Start testing.

Buy the source code for App Inventor

You can buy the source code of this project.
With your payment you accept the terms and conditions below.

Payment options

1. Paypal

Please transfer 12 USD via Paypal
to Pura Vida Apps

2. Bitcoin

After having received your payment I will be happy to send the download link to you. Please let me know your Google account! I usually will send the download link not later than 24 hours after having received your payment.

Thank you! Taifun

Terms and Conditions

Back to top of page ...

Home | Snippets | Tutorials | Extensions | Links | Search | Privacy Policy | Contact