Created by AbdulAziz, CEO of XantrailStudio

Build Web Apps That Are
Lightning-Fast.

XYONL is a build-time meta-framework that combines SPA ergonomics with static file performance. Write template files with scoped styling, execute sandboxed scripts at compile time, and deliver pages with zero client-side hydration overhead.

Get Started Explore Features

Production ready. Built-in optimizer. SPA navigation.

<app title="XYONL Home" description="Speed matters">

    <script>
        // Evaluated at build time on Node.js VM
        const authors = ["Alice", "Bob", "Charlie"];
        output = "<ul>" + authors.map(a => `<li>${a}</li>`).join("") + "</ul>";
        
        userHeading = "Dynamic Page Content";
        count = 1024;
    </script>

    <div class="card">
        <h1>{{ userHeading }}</h1>
        <p>Active Members: <strong xy-model="count">{{ count }}</strong></p>
        <input type="text" xy-model="userHeading" />
    </div>

</app>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="Speed matters">
    <title>XYONL Home</title>
</head>
<body>
    <div class="card">
        <h1><span data-xy-bind="userHeading">Dynamic Page Content</span></h1>
        <p>Active Members: <strong data-xy-model="count" value="1024">1024</strong></p>
        <input type="text" data-xy-model="userHeading" value="Dynamic Page Content" />
    </div>
    
    <!-- Zero Hydration Reactivity Agent Injected -->
    <script>
        /* proxy reactivity client-side library... */
    </script>
</body>
</html>

{
  "title": "XYONL Home",
  "content": "<div class=\"card\"><h1><span data-xy-bind=\"userHeading\">Dynamic Page Content</span></h1><p>Active Members: <strong data-xy-model=\"count\" value=\"1024\">1024</strong></p><input type=\"text\" data-xy-model=\"userHeading\" value=\"Dynamic Page Content\" /></div>",
  "initialState": {
    "userHeading": "Dynamic Page Content",
    "count": 1024
  }
}

Framework Core

Architectural Excellence

XYONL pushes computation to compile time, resulting in instantaneous page responses and lightweight deployment bundles.

Zero Hydration Overhead

No massive runtime library parsing in client engines. Reactivity state bindings are identified at compile time and managed by a tiny 100-line ES6 Proxy listener.

Build-Time Sandbox

Evaluate Javascript data lookups, file operations, or API queries during compile time inside isolated Node `vm` sandboxes. Keep runtime bundles completely clean.

Hybrid SPA Routing

Provides SSG SEO capability with fast client-side SPA routing. Link hovers trigger pre-fetches of small fragment payloads (`.frag`) to redraw content seamlessly.

Asset Compression Pipeline

An automated media optimization pipeline. Scans layout assets and converts images to WebP format using `sharp` compiler utilities to decrease loading footprints.

Scoped Component Templates

Organize interfaces modularly. Utilize `` declarations to resolve components with slots and evaluate template expressions locally at compile time.

SSE Hot-Reload Watcher

A zero-latency watcher server. Detects filesystem updates to source blocks and propagates updates to active tabs with Server-Sent Events (SSE).

Pipeline

The Compilation Journey

How your `.xyonl` code is transformed into a high-performance production site.

Syntax Pre-Checks

The compiler scans layout tags and checks project directories. Verifies standard requirements and registers layout templates to ensure smooth imports.

Node VM Sandbox Execution

Executes server scripts inside Node `vm` sandboxes. Initial parameters are gathered for runtime state while compilation replaces sandboxed tag outputs.

Reactivity Directive Translation

Converts `{{variable}}` string markers into `data-xy-bind` tags and translates interactive `xy-model` tags into reactive dataset structures.

Fragment & Shell Writing

Writes `.frag` payload structures (for client SPA navigation routing) alongside static `.html` layout bundles inside output distribution directories.

About XYONL

Meet the Founder

The driving vision behind compile-time web meta-framework designs.

AbdulAziz Memon

Founder & CEO, XantrailStudio

AbdulAziz Memon is a visionary software engineer, ethical hacker, and the founder and CEO of Xantrailstudio. Driven by a passion for advanced systems architecture and developer tooling, he specializes in compiler design and the creation of high-performance markup languages—including the open-source project XYONL. As a young industry leader, AbdulAziz is dedicated to scaling innovative software solutions, pushing the boundaries of web architecture, and shaping the future of next-generation digital ecosystems through cutting-edge engineering and strategic open-source collaboration.

Get in touch

Connect with XantrailStudio

Have questions, feedback, or collaboration proposals? Reach out to us directly.

Email Us xantrailstudio@gmail.com

Call Us +92 300 3089553

Open Source github.com/xantrailstudio/xyonl

Accelerate Web Speed

Develop using standard web mechanics. Start building fast HTML structures compiled through secure pipelines.

npx xyonl@latest --run

Build Web Apps That Are Lightning-Fast.