AppML Your First Page
This page builds one complete, working AppML page end to end: a template, a model, and the data it renders.
Building a Minimal AppML Page
The example below lists books from a data source, showing a title and author for each one, with a fallback message if the list comes back empty.
- Create a model file describing the books data source and a list action
- Create an HTML page with an appml-data attribute pointing at that model
- Add an appml-repeat block with {{field}} placeholders for the values you want shown
- Add an appml-if block for the empty-list case
- Open the page in a browser
Example: index.html
<!DOCTYPE html>
<html>
<body>
<div appml-data="model.json">
<h2>Book List</h2>
<div appml-repeat="books">
<p><b>{{title}}</b> by {{author}}</p>
</div>
<p appml-if="books.length == 0">No books found.</p>
</div>
<script src="appml.js"></script>
</body>
</html>Example: model.json
{
"database": "library",
"table": "books",
"actions": [
{ "name": "list", "sql": "select * from books" }
]
}Loading index.html triggers the flow from How It Works: appml.js finds appml-data="model.json", fetches that file, runs its list action against the books table, and binds each returned row into the appml-repeat block.
Common Beginner Mistakes
Note: appml-if isn't just for empty states - use it anywhere a piece of markup should only appear when a condition on the current data is true, such as hiding an 'edit' control for records the current view shouldn't expose.
The Getting Started exercises give you a similar page to build from scratch.
Exercise: AppML Getting Started
What's the first step to use AppML on a page?
