AppML – Hello World Example: Your First Minimal AppML Project
Introduction – Say Hello to AppML in One Minute
If you’re new to AppML (Application Modeling Language), the best way to get started is with a simple “Hello World” example. AppML lets you build data-driven web applications using just HTML and structured data (JSON/XML)—without any JavaScript coding.
This example will show you how to:
- Set up the AppML framework
- Display “Hello, World” using a data model
- Understand how
appml-dataand{{placeholders}}work
By the end of this article, you’ll be able to:
- Load external data using AppML
- Dynamically bind data to your HTML view
- Create your first working AppML page in seconds
Step-by-Step: Create a Hello World AppML Page
1. Folder Structure (Minimal)
Create the following folder setup:
/appml-hello-world
├── index.html
├── data/
│ └── hello.json
2. Create the JSON Model (hello.json)
Inside the data/ folder, add this content:
[
{ "message": "Hello, World!" }
]
This serves as the Model (data layer) for AppML to render.
3. Write the HTML (View)
In index.html, write the following code:
<!DOCTYPE html>
<html>
<head>
<title>Hello AppML</title>
<script src="https://www.w3schools.com/appml/2.0.3/appml.js"></script>
</head>
<body>
<h2>AppML Hello World Example</h2>
<div appml-data="data/hello.json">
<p>{{message}}</p>
</div>
</body>
</html>
What This Does:
- Loads the
appml.jsscript from W3Schools CDN. - Fetches
hello.jsonusingappml-data. - Replaces
{{message}}with the value from the JSON.
Output in the Browser
When you open index.html in your browser, you’ll see:
AppML Hello World Example
Hello, World!
No JavaScript written. No frameworks installed. Just clean, data-bound HTML.
Breakdown of Key Components
| Element | Function |
|---|---|
<script src="..."> | Loads AppML functionality |
appml-data="..." | Declares the data source (model) |
{{message}} | Placeholder for dynamic content |
hello.json | Contains the actual text to render |
Expand Your Hello World Example
You can add more messages or fields in your JSON like this:
[
{ "message": "Hello, AppML!" },
{ "message": "Welcome to data-driven HTML!" }
]
And your HTML will automatically render both entries:
<div appml-data="data/hello.json">
<p>{{message}}</p>
</div>
AppML loops through each record and renders a new <p> element for each message.
Summary – Recap & Key Takeaways
This “Hello World” project shows how powerful yet simple AppML can be. You’ve just built a dynamic app that reads from a JSON model and renders HTML content—with zero JavaScript.
Key Takeaways:
- AppML loads structured data using
appml-data - Uses
{{field}}to bind data directly into HTML - Ideal for static websites, prototypes, and teaching data binding
- No JavaScript, no build tools, no libraries required
You’re now ready to build more complex apps using AppML’s MVC architecture.
FAQs – Hello World with AppML
Do I need a local server for this example?
No. You can open the index.html directly in your browser if using static JSON. For dynamic data (PHP/MySQL), you’ll need a local server.
Can I add multiple messages in my JSON?
Yes! AppML will repeat the HTML block for each object in the JSON array.
What happens if the JSON file is empty?
AppML won’t render anything inside the appml-data block if there’s no data. Always validate your JSON.
Can I change the placeholder to something else?
No. AppML uses {{field}} syntax exclusively for dynamic data binding.
Is AppML suitable for beginners?
Absolutely. AppML is perfect for learners, educators, and non-coders looking to build real web apps quickly.
Share Now :
