htmlxify - A simplified web markup language compiler that transpiles to HTML, CSS, and JavaScript

These details have not been verified by PyPI

Project links

Homepage

Project description

HTMLXIFY - Web Markup Compiler

A complete, production-ready compiler for HTMLXIFY - a simplified web markup language that transpiles to clean HTML, CSS, and JavaScript with no configuration needed.

Write cleaner, faster markup. Build modern web pages in seconds.

🌟 What is HTMLXIFY?

HTMLXIFY is a lightweight markup language designed to make web development faster and cleaner. Instead of writing verbose HTML, you write simple, intuitive markup that compiles to production-ready HTML, CSS, and JavaScript.

Before (Regular HTML):

<!DOCTYPE html>
<html>
<head>
  <title>My Page</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div id="app" class="container">
    <h1 class="title">Welcome</h1>
    <p class="subtitle">This is a paragraph</p>
    <button class="primary" onclick="trackClick()">Click Me</button>
  </div>
  <script src="app.js"></script>
</body>
</html>

After (HTMLXIFY):

Write this in a file named page.HTMLXIFY:

html {
  head {
    meta(charset: "UTF-8")
    meta(name: "viewport", content: "width=device-width, initial-scale=1.0")
    title { My Page }
    link(rel: "stylesheet", href: "page.css")
  }
  body {
    div#app.container {
      h1.title { Welcome }
      p.subtitle { This is a paragraph }
      button.primary(⚡-call: "trackClick") { Click Me }
    }
    script(src: "page.js") { }
  }
}

Then compile:

HTMLXIFY page.HTMLXIFY output/

Result: Identical output to the "Before" HTML code!

All the boilerplate (doctype, html, head, meta tags) is generated automatically
Responsive CSS is auto-generated (7+ KB)
JavaScript handlers are auto-generated (10+ KB)

71% less code to write. Same semantic HTML output. Zero boilerplate.

✨ Key Features

✅ Simple Syntax - Intuitive markup language easy to learn
✅ No Configuration - Works out of the box with sensible defaults
✅ Auto-Generated CSS - Comprehensive stylesheet automatically created
✅ API Integration - Built-in support for backend calls with ⚡-call
✅ Dynamic Data Binding - Connect UI to data with ⚡-data
✅ Responsive Design - Mobile-first CSS with breakpoints
✅ XSS Protection - Automatic HTML escaping for security
✅ Fast Compilation - Single-pass compiler, instant results
✅ Production Ready - Generates clean, optimized code
✅ Void Elements - Proper <br>, <img>, <input>, <meta>, etc. handling
✅ Escape Sequences - Support for /{, /}, /(, /)
✅ Boolean Attributes - HTML5 booleans like disabled, checked, required

📋 Implementation Status

Feature	Status
Parser	✅ Complete (13/13 tests passing)
HTML Generator	✅ Complete (20+ KB output)
CSS Generator	✅ Complete (7.3 KB with defaults)
JavaScript Generator	✅ Complete (10.6 KB with API handlers)
CLI Tool	✅ Complete & tested
Standalone Executable	✅ Built for distribution (PyPI package)
Backend Integration	✅ Complete (API calls with ⚡-call)
Semantic Validator	✅ Complete
VS Code Extension	🔄 Planned
Language Server	🔄 Planned

🚀 Quick Start

Installation

Option 1: Install from TestPyPI (Recommended)

pip install -i https://test.pypi.org/simple/ HTMLXIFY

Then use the command:

HTMLXIFY myfile.HTMLXIFY output/
HTMLXIFY hello.HTMLXIFY output/ --verbose  # With verbose output
HTMLXIFY --version                   # Check version
HTMLXIFY --help                      # View help

Option 2: Install from Source (For Development)

# 1. Install dependencies
pip install -r requirements.txt

# 2. Install package in development mode
pip install -e .

# 3. Use the command
HTMLXIFY myfile.HTMLXIFY output/

Option 3: Run Python CLI Directly

# 1. Install dependencies
pip install -r requirements.txt

# 2. Run the CLI
python cli.py myfile.HTMLXIFY output/
python cli.py hello.HTMLXIFY output/ --verbose  # With verbose output

Your First HTMLXIFY File

Create a file named hello.HTMLXIFY:

div#app.container {
  h1 { Hello World }
  p { Welcome to HTMLXIFY }
}

Compile it:

# Using installed package (recommended)
HTMLXIFY hello.HTMLXIFY output/

# Or using Python directly
python cli.py hello.HTMLXIFY output/

This generates:

output/hello.html - Clean, semantic HTML (20+ KB)
output/hello.css - Responsive stylesheet (7.3 KB)
output/hello.js - JavaScript handlers (10.6 KB)
output/hello.html.map - Source map for debugging

Open output/hello.html in your browser and you're done! 🎉

That's it! No configuration, no build tools. Just HTML, CSS, and JS.

📖 Language Syntax Guide

Basic Elements

// Single elements
div { Content }
p { Paragraph }
h1 { Heading }
button { Click Me }

// Void elements (no closing tag)
br
img(src: "photo.jpg", alt: "Photo")
input(type: "text")
meta(charset: "UTF-8")

Classes & IDs

// Single class
div.container { ... }

// Multiple classes
button.primary.large { ... }

// IDs
div#main { ... }

// Classes and IDs together
div.card#featured { ... }

Attributes

// String attributes
button(onclick: "handleClick") { Click }
a(href: "https://example.com", target: "_blank") { Link }

// Boolean attributes (no value)
input(type: "checkbox", checked)
input(type: "text", disabled)
button(disabled) { Can't Click }
form(novalidate) { ... }

Escape Sequences

When you need characters that conflict with syntax, use escape sequences:

// Escaped curly braces
p { JSON: /{ "key": "value" /} }

// Escaped parentheses  
code { function/(/)/() /{ return true; /} }

// Real-world example
p { Price: $99.99 (50% off) and formula: x^2 }

Nesting

div.container {
  h1 { Title }
  p { First paragraph }
  p { Second paragraph }
  button { Action }
}

Text Content

// Simple text
p { This is a paragraph }

// Multiple lines of text (preserved)
p {
  This is a longer
  paragraph spanning
  multiple lines
}

// Mixed content (elements and text)
div {
  h1 { Title }
  This is text after heading
  p { Another element }
}

🔥 Advanced Features

Backend Integration

button(⚡-call: "selectPlan", data-plan: "starter") {
  Select Plan
}

This generates:

HTML: <button data-api-call="selectPlan" data-plan="starter">
JS: Auto-triggers mock API handler with sample response

Available endpoints with mock data:

trackCTAClick - CTA click tracking
submitForm - Form submission handler
selectPlan - Plan selection
contactSales - Sales inquiry
getData - Generic data retrieval

Dynamic Data Binding

div(⚡-data: "userData") {
  p { User information }
}

In JavaScript, update it dynamically:

updateBinding('userData', 'new value');

Semantic HTML

header.navbar {
  nav { Links }
}

main {
  article.post { Content }
}

footer { Copyright }

Common Patterns

Navigation Bar

nav.navbar {
  div.brand { Logo }
  div.menu {
    a(href: "/") { Home }
    a(href: "/about") { About }
    a(href: "/contact") { Contact }
  }
}

Hero Section

div.hero {
  h1.hero-title { Welcome }
  p.hero-subtitle { Get started today }
  button.cta(⚡-call: "trackCTAClick") { Learn More }
}

Feature Grid

div.feature-grid {
  div.feature-card {
    h3 { Feature 1 }
    p { Description }
  }
  div.feature-card {
    h3 { Feature 2 }
    p { Description }
  }
  div.feature-card {
    h3 { Feature 3 }
    p { Description }
  }
}

Pricing Cards

div.pricing-grid {
  div.pricing-card {
    h3 { Starter }
    p.price { $9/month }
    button(⚡-call: "selectPlan", data-plan: "starter") { Choose }
  }
  div.pricing-card.featured {
    h3 { Pro }
    p.price { $29/month }
    button(⚡-call: "selectPlan", data-plan: "pro") { Choose }
  }
}

Comparison Table

table.comparison {
  thead {
    tr {
      th { Feature }
      th { Starter }
      th { Pro }
    }
  }
  tbody {
    tr {
      td { Users }
      td { Up to 10 }
      td { Unlimited }
    }
  }
}

💻 CLI Usage

Basic Compilation

# Using executable (recommended - no Python needed)
HTMLXIFY.exe input.HTMLXIFY output/
HTMLXIFY.exe input.HTMLXIFY output/ --verbose
HTMLXIFY.exe --version
HTMLXIFY.exe --help

# Or using Python (if you prefer)
python cli.py input.HTMLXIFY output/
python cli.py input.HTMLXIFY output/ --verbose
python cli.py --version
python cli.py --help

Note: Both commands do exactly the same thing. The .exe is faster and doesn't require Python installed.

Output Files

For input file mypage.HTMLXIFY, the compiler generates:

output/
├── mypage.html         # Semantic HTML structure
├── mypage.css          # Responsive stylesheet (7+ KB)
├── mypage.js           # JavaScript handlers & utilities
└── mypage.html.map     # Source map for debugging

📂 Project Structure

HTMLXIFY/
├── HTMLXIFY/                         # Main compiler package
│   ├── cli.py                     # Command-line interface
│   ├── parser/
│   │   ├── grammar.lark           # HTMLXIFY grammar
│   │   ├── ast_builder.py         # Parse tree to AST converter
│   │   └── indent_processor.py    # Indentation hierarchy
│   ├── generators/
│   │   ├── html_gen.py            # HTML output generator
│   │   ├── css_gen.py             # CSS output generator (650+ lines)
│   │   └── js_gen.py              # JavaScript output generator
│   ├── validator/
│   │   └── semantic.py            # Semantic validation
│   └── utils/
├── tests/
│   └── unit/test_parser.py        # 13 comprehensive tests
├── example.HTMLXIFY                     # Full feature demonstration
├── language_server/               # Future LSP support (planned)
├── dist/
│   └── HTMLXIFY.exe                  # Standalone executable (Windows)
├── build/
│   └── HTMLXIFY/                     # Build directory with dependencies
├── example_backend.py             # Example Flask backend
├── setup.py                       # Package configuration for PyPI
├── requirements.txt               # Python dependencies
└── README.md                      # This file

🧪 Testing

The compiler includes comprehensive tests:

# Run all tests
pytest tests/unit/test_parser.py -v

# Run specific test
pytest tests/unit/test_parser.py::test_basic_element -v

# Run with coverage report
pytest tests/unit/ --cov=HTMLXIFY --cov-report=html

Test Coverage:

Basic elements (div, p, button, etc.)
Classes (single and multiple)
IDs
Attributes
Special attributes (⚡-call, ⚡-data)
Nesting and hierarchy
Text content handling
Mixed content (text + elements)
Complex real-world structures

📊 Output Examples

Generated HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page</title>
  <link rel="stylesheet" href="page.css">
</head>
<body>
  <div id="app" class="container">
    <h1 class="title">Hello World</h1>
    <p>Welcome to HTMLXIFY</p>
  </div>
  <script src="page.js"></script>
</body>
</html>

Generated CSS (650+ lines of defaults)

/* Reset & Base Styles */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto; }

/* Typography */
h1 { font-size: 2.5rem; font-weight: 600; }
h2 { font-size: 2rem; font-weight: 600; }

/* Responsive Design */
@media (max-width: 768px) {
  .feature-grid { grid-template-columns: 1fr; }
  body { font-size: 14px; }
}

/* And much more... */

Generated JavaScript

// Smart API URL Detection (4-level priority)
const API_BASE_URL = window.API_BASE_URL 
  || (function() {
    const meta = document.querySelector('meta[name="api-url"]');
    if (meta) return meta.getAttribute('content');
    if (window.location.hostname !== 'localhost') {
      return '/api';  // Same domain backend
    }
    return 'http://localhost:5000/api';  // Local development
  })();

// API Handlers (auto-wired to buttons with ⚡-call attribute)
const apiHandlers = {
  'trackCTAClick': async function(element) { ... },
  'selectPlan': async function(element) { ... },
  'submitForm': async function(element) { ... },
  // ... more handlers
};

// Data Bindings
const dataBindings = { ... };

// Animation Utilities
const animationUtils = { ... };

🎯 Real-World Examples

Complete Landing Page

nav.navbar {
  div.brand { MyCompany }
  div.nav-links {
    a(href: "/") { Home }
    a(href: "/features") { Features }
    a(href: "/pricing") { Pricing }
  }
}

div.hero {
  h1 { Build Faster With HTMLXIFY }
  p { Write 72% less code. Ship in days, not weeks. }
  button.cta(⚡-call: "trackCTAClick") { Get Started }
}

div.features {
  div.feature-grid {
    div.feature-card {
      h3 { Fast }
      p { Compiles in milliseconds }
    }
    div.feature-card {
      h3 { Simple }
      p { Intuitive syntax anyone can learn }
    }
    div.feature-card {
      h3 { Powerful }
      p { Generates production-ready code }
    }
  }
}

footer.footer {
  p { Copyright 2025 }
}

🔒 Security

The compiler includes built-in security features:

XSS Prevention: All user content is HTML-escaped automatically
Attribute Validation: Prevents malicious attribute values
Safe Defaults: Strict mode for all generated code
No Inline Scripts: All JavaScript is external and sandboxed

🐛 Troubleshooting

Issue: "File not found" error

# Make sure file has .HTMLXIFY extension
python cli.py myfile.HTMLXIFY output/

# Make sure output directory exists or will be created
python cli.py input.HTMLXIFY ./dist/

Issue: Classes or IDs not styling

Make sure you're using the correct syntax:

// Correct
div.my-class { ... }
div#my-id { ... }

// Wrong (won't work)
div .my-class { ... }
div #my-id { ... }

Issue: Verbose mode not showing errors

Run with --verbose flag:

python cli.py input.HTMLXIFY output/ --verbose

📚 Learning Resources

Start Simple: Try the Quick Start above
Language Syntax: Read the syntax guide section
Advanced Features: Explore ⚡-call and ⚡-data attributes
Real Examples: Check example.HTMLXIFY for a complete demo
Test Suite: Review tests/unit/test_parser.py for patterns

🚀 Distribution & Deployment

Share the Executable

Give users HTMLXIFY.exe from the dist/ folder
Users can compile ANY .HTMLXIFY file with one command:
```
HTMLXIFY.exe mysite.HTMLXIFY output/
```
No Python installation, no dependencies, no configuration needed

Deploy Generated Files

Compile your .HTMLXIFY file to get HTML, CSS, JS

Configure API URL (3 simple ways):

<!-- Option 1: Meta tag -->
<meta name="api-url" content="https://api.yourdomain.com">

<!-- Option 2: Script variable -->
<script>window.API_BASE_URL = 'https://api.yourdomain.com';</script>

<!-- Option 3: Same domain (automatic) -->
<!-- No configuration needed! Uses /api automatically -->

Upload HTML, CSS, JS to any web server
Done! Your site is live 🚀

🎯 Next Steps

After installing and creating your first file:

Create a portfolio page - Use feature cards and hero section
Build a landing page - Try navbar, hero, features, pricing, footer
Make it dynamic - Add ⚡-call endpoints for buttons
Deploy to internet - Upload files and configure API URL
Share the compiler - Give others HTMLXIFY.exe to build their own sites

💡 Tips & Tricks

Reusable Components

Create template files you can copy and modify:

// pricing-card.HTMLXIFY
div.pricing-card {
  h3 { Plan Name }
  p.price { $X/month }
  ul {
    li { Feature 1 }
    li { Feature 2 }
  }
  button(⚡-call: "selectPlan") { Choose }
}

Responsive Images

img(
  src: "image.jpg",
  alt: "Description",
  loading: "lazy"
)

Form Patterns

form {
  input(type: "email", placeholder: "Email", required: true)
  input(type: "password", placeholder: "Password", required: true)
  button(type: "submit") { Sign In }
}

📄 License

This project is licensed under the GNU General Public License v3.0 (GPL-3.0). See the LICENSE file for the full license text and details.

🤝 Contributing

To contribute:

Create a feature branch
Write tests in tests/unit/
Submit a pull request

📞 Support

For questions or issues:

Check the troubleshooting section above
Review the example.HTMLXIFY example
Check generated HTML/CSS/JS for clues

Happy markup writing! 🎉

Made with ❤️ for faster web development

HTMLXIFY - Because simpler markup means faster development. 🚀

Project details

These details have not been verified by PyPI

Project links

Homepage

Release history Release notifications | RSS feed

1.0.2

Nov 30, 2025

This version

1.0.1

Nov 28, 2025

1.0.0

Nov 15, 2025

Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

htmlxify-1.0.1.tar.gz (41.2 kB view details)

Uploaded Nov 28, 2025 Source

Built Distribution

If you're not sure about the file name format, learn more about wheel file names.

The dropdown lists show the available interpreters, ABIs, and platforms. Enable javascript to be able to filter the list of wheel files.

htmlxify-1.0.1-py3-none-any.whl (37.8 kB view details)

Uploaded Nov 28, 2025 Python 3

File details

Details for the file htmlxify-1.0.1.tar.gz.

File metadata

Download URL: htmlxify-1.0.1.tar.gz
Upload date: Nov 28, 2025
Size: 41.2 kB
Tags: Source
Uploaded using Trusted Publishing? No
Uploaded via: twine/6.2.0 CPython/3.14.0

File hashes

Hashes for htmlxify-1.0.1.tar.gz
Algorithm	Hash digest
SHA256	`47756428365512207d64457deca19d8782287497cbb4e4846e8f58033df1ceab`
MD5	`6d62fd91d03590d1c9139d66bc875bb5`
BLAKE2b-256	`6c90bc0c3fff362de43dc8b321e132509522a7c2ca2d5d6689ef4b7a439630bb`

See more details on using hashes here.

File details

Details for the file htmlxify-1.0.1-py3-none-any.whl.

File metadata

Download URL: htmlxify-1.0.1-py3-none-any.whl
Upload date: Nov 28, 2025
Size: 37.8 kB
Tags: Python 3
Uploaded using Trusted Publishing? No
Uploaded via: twine/6.2.0 CPython/3.14.0

File hashes

Hashes for htmlxify-1.0.1-py3-none-any.whl
Algorithm	Hash digest
SHA256	`1f59a6f94b5b92cad287d7391259b9327288538853510a0b92d6bc800e33fd50`
MD5	`c10544edcc242aabd59903aa4c0a9ba6`
BLAKE2b-256	`113662e669f0d3ad1af9570da51f4805d76b15f153952374e254ee31dfb40ec5`

See more details on using hashes here.

htmlxify 1.0.1

Navigation

Verified details

Maintainers

Unverified details

Project links

Meta

Classifiers

Project description

HTMLXIFY - Web Markup Compiler

🌟 What is HTMLXIFY?

Before (Regular HTML):

After (HTMLXIFY):

✨ Key Features

📋 Implementation Status

🚀 Quick Start

Installation

Your First HTMLXIFY File

📖 Language Syntax Guide

Basic Elements

Classes & IDs

Attributes

Escape Sequences

Nesting

Text Content

🔥 Advanced Features

Backend Integration

Dynamic Data Binding

Semantic HTML

Common Patterns

Navigation Bar

Hero Section

Feature Grid

Pricing Cards

Comparison Table

💻 CLI Usage

Basic Compilation

Output Files

📂 Project Structure

🧪 Testing

📊 Output Examples

Generated HTML

Generated CSS (650+ lines of defaults)

Generated JavaScript

🎯 Real-World Examples

Complete Landing Page

🔒 Security

🐛 Troubleshooting

Issue: "File not found" error

Issue: Classes or IDs not styling

Issue: Verbose mode not showing errors

📚 Learning Resources

🚀 Distribution & Deployment

Share the Executable

Deploy Generated Files

🎯 Next Steps

💡 Tips & Tricks

Reusable Components

Responsive Images

Form Patterns

📄 License

🤝 Contributing

📞 Support

Project details

Verified details

Maintainers

Unverified details

Project links

Meta

Classifiers

Release history Release notifications | RSS feed

Download files

Source Distribution

Built Distribution

File details

File metadata

File hashes

File details

File metadata

File hashes