Running an applet with CheerpJ
In this tutorial you will learn how to run a Java applet in a modern browser by integrating CheerpJ within your page.View demo
For this tutorial we will use the Pitch applet from NASA’s Beginner’s Guide to Aeronautics. This applet shows an interactive animation of an aircraft’s pitch motion. See more.
The template project has the following structure:
1. Run a web server
To view the example, we need to host the files on a web server. Vite is a convenient tool for this, as it automatically reloads the page when the files change.
Alternatively you can also use the http-server utility.
Open a browser tab pointing to your localhost such as
2. Creating a classic HTML document
The provided template contains the final
index.html file. You can delete its content and start it from scratch to follow the next steps.
A basic HTML file would look like this:
3. Add your applet content
The next step is to add the applet tag with its parameters, just like they used to be integrated on web pages. We will also add some titles, descriptions and styles.
Go to your browser and refresh the page. You will see the titles and text you just added. As expected, the applet will not be on display, instead there is the message Your browser cannot handle the applet tag!
4. Integrating CheerpJ
Integrating CheerpJ in your page is as simple as adding a
<script> with the CheerpJ loader url. This will be placed within the document’s
<head> tag. Next, we need to call
cheerpjInit() in another script block.
Your document will look like this:
Refresh your page and now you will be able to see your applet running!
You can also replace the
<cheerpj-applet>to avoid potential conflicts with native Java
Your final page will look like this:
Find the full source code in GitHub
The applet used for this tutorial belongs to the NASA’s Beginner’s Guide to Aeronautics and it is available at their GitHub repository.
To continue learning about CheerpJ, visit the reference.