Add introduction and Library Mode reference to "Run a Java Library" (#293)

rijulshrestha · web-flow · commit 7496b5edf559 · 2025-10-27T10:18:45.000+01:00
diff --git a/sites/cheerpj/src/content/docs/10-getting-started/02-Java-library.md b/sites/cheerpj/src/content/docs/10-getting-started/02-Java-library.md
@@ -3,32 +3,82 @@ title: Run a Java library
 description: Use Java classes in JavaScript
 ---
 
-## 1. Include CheerpJ on your page
+CheerpJ can load and run Java libraries directly in the browser, allowing you to call Java classes and methods from JavaScript with no modifications to your original code. This page will help you get started with CheerpJ and show you how to use an existing Java library (`.jar` file) within a web application.
 
-```html
-<script src="https://cjrtnc.leaningtech.com/4.2/loader.js"></script>
+Java source code is not required to use CheerpJ. If you are using your own library, you should already have its compiled `.jar` file available.
+
+**To get started you will need:**
+
+- Your `.jar` file.
+- An HTML file where your Java app will be wrapped.
+- A simple HTTP server to test your webpage locally.
+
+## 1. Create a Project Directory
+
+Let's start by creating a project folder where all your files will be. Copy your java and future HTML files here.
+
+```shell
+mkdir directory_name
 ```
 
-## 2. Initialize CheerpJ and load your Java library
+## 2. Create a Basic HTML File
+
+Let's create a basic HTML file and include and initialize CheerpJ on your page. The `cheerpjInit` command initialises the CheerpJ runtime environment.
 
-```js
-await cheerpjInit();
-const cj = await cheerpjRunLibrary("/app/library.jar");
+```html title="index.html" {6, 10}
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<title>CheerpJ Library Mode Test</title>
+		<script src="https://cjrtnc.leaningtech.com/4.2/loader.js"></script>
+	</head>
+	<body>
+		<script>
+			await cheerpjInit();
+		</script>
+	</body>
+</html>
 ```
 
-> [!help] Don't forget to use the /app/ prefix
-> It is common for first-time users to forget to add the prefix “/app/” when passing the JAR location to cheerpJRunLibrary().
+## 3. Load and Call the Java Library From Java
 
-This will load `library.jar` from the root of your web server.
+Now we can load your Java library by calling `cheerpjRunLibrary` which will load the library from the root of your web server. We are assuming your HTML file and your `.jar` files are under the project directory you just created.
 
-## 3. Call Java from JavaScript
+```html title="index.html" {12-15}
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<title>CheerpJ Library Mode Test</title>
+		<script src="https://cjrtnc.leaningtech.com/4.2/loader.js"></script>
+	</head>
+	<body>
+		<script>
+			await cheerpjInit();
+			// Example classes and methods — replace these with those from your own library
+			const cj = await cheerpjRunLibrary("/app/library.jar");
+			const MyClass = await cj.com.library.MyClass;
+			const obj = await new MyClass();
+			await obj.myMethod();
+		</script>
+	</body>
+</html>
+```
+
+## 3. Host your page
+
+You can now serve this web page on a simple HTTP server, such as the http-server utility.
 
-```js
-const MyClass = await cj.com.library.MyClass;
-const obj = await new MyClass();
-await obj.myMethod();
+```shell
+npx http-server -p 8080
 ```
 
+## The Result
+
+You will see CheerpJ initialize in your browser and load the Java library. Once loaded, the methods from your library can be called directly from JavaScript, just as in the example above. Depending on the size of your library and the optimizations applied, this may take just a few seconds before your code begins executing.
+
 ## Further reading
 
+- [Learn more about Library Mode](/docs/guides/library-mode)
 - [`cheerpjRunLibrary` reference](/docs/reference/cheerpjRunLibrary)
