UPML — Universal Page Markup Language

UPML (Universal Page Markup Language) is a lightweight markup language and framework designed to simplify the development of web applications using a declarative page and component system.

UPML allows developers to define pages, templates, and reusable UI components using simple markup syntax. These definitions are parsed by a runtime engine and rendered dynamically in the browser.

The goal of UPML is to provide a clean structure for building web interfaces without the complexity of large frontend frameworks.

---

Features

• Declarative page definition
• Component-based architecture
• Template-based rendering
• Hash-based routing
• Lightweight runtime engine
• CLI development server
• Modular project structure

---

Example UPML Page

Example of a page definition in UPML:

<page class=@login start>@templates/login.html
  <component class=@login-form>@components/login-form.html</component>
  <component class=@register-link>@components/register-link.html</component>
</page>

Explanation:

• <page> defines a route
• class=@login defines the page name
• start marks the default page
• @templates/login.html defines the page template
• <component> injects reusable UI elements

---

Architecture

UPML follows a simple modular runtime architecture.

              UPML APPLICATION
                     │
                     ▼
               pages.upml
                     │
                     ▼
               parser.js
     (Extract pages and components)
                     │
                     ▼
              Page Objects
                     │
                     ▼
              renderer.js
     (Load templates and components)
                     │
                     ▼
               HTML UI Render
                     │
                     ▼
                Browser DOM

Runtime modules:

• parser.js → Reads the UPML file and extracts page definitions
• renderer.js → Loads templates and injects components
• upml.js → Controls routing and runtime execution

---

Project Structure

A typical UPML project looks like this:

UPML-PROJECT
│
├── upml
│   ├── cli.py
│   └── __init__.py
│
├── runtime
│   ├── upml.js
│   ├── parser.js
│   └── renderer.js
│
├── templates
│   ├── login.html
│   ├── register.html
│   └── index.html
│
├── components
│   ├── login-form.html
│   ├── register-link.html
│   └── footer.html
│
├── pages.upml
├── index.html
└── setup.py

Folder descriptions:

Folder	Purpose
upml	Python CLI tool
runtime	UPML runtime engine
templates	Page templates
components	Reusable UI components
pages.upml	Application page definitions

---

Installation

Clone the repository

git clone https://github.com/yourusername/upml.git

Navigate into the project directory:

cd upml

Install the framework locally:

pip install -e .

---

Running UPML

Start the development server:

upml start

This command will:

1. Launch a local server
2. Open the browser automatically
3. Load the UPML runtime engine

Example URL:

http://localhost:3000

---

Routing System

UPML currently uses hash-based routing.

Example URLs:

http://localhost:3000/#login
http://localhost:3000/#home
http://localhost:3000/#register

Navigation example:

<a href="#home">Home</a>
<a href="#login">Login</a>

When the route changes:

1. The runtime detects the URL hash change
2. The router finds the corresponding page
3. The renderer loads the template and components

---

Development Workflow

Typical UPML workflow:

Write pages.upml
        │
        ▼
Run: upml start
        │
        ▼
UPML CLI starts server
        │
        ▼
Browser loads runtime
        │
        ▼
UPML parsed and rendered

---

Example Template

Example template:

<h1>Login Page</h1>

<div data-component="login-form"></div>
<div data-component="register-link"></div>

Components are injected dynamically into placeholders.

---

License

This project is licensed under the MIT License.

You are free to use, modify, and distribute this software under the conditions of the MIT license.

---

Contributing

Contributions are welcome.

Possible improvements:

• Layout system
• Improved routing
• State management
• Component props
• Hot reload development server

---

Author

Created by Charan

UPML is an experimental framework exploring how a custom markup language can simplify component-based web development.