Why PH7?

  • Native to python
  • More code modularity
  • Easy to write reusable components
  • Out of the box editor support
    • Syntax highlighting
    • Code navvigation tools
    • Auto-completion
  • Type safety using MyPy

Install

pip3 install ph7

Quickstart

Write your first block of markup

from ph7.html import body, div, html

template = html(
    body(
        div(
            "Hello, World!",
        )
    )
)

print(template)

<html>
  <body>
    <div>Hello, World!</div>
  </body>
</html>

Or write a CSS class

from ph7.css import CSSObject


class flex_center(CSSObject):
    display = "flex"
    align_items = "center"
    justify_content = "center"


print(flex_center())

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

Or use python function as JavaScript function

from ph7.js import as_js, console, document, fetch


async def fetchDog():
    response = await fetch(
        "https://dog.ceo/api/breeds/image/random",
        {"method": "GET"},
    )
    if response.status != 200:
        response_body = await response.text()
        console.log(f"Error fetching dog; {response_body}")
        return
    data = await response.json()
    document.getElementById("image").src = data.message


print(as_js(fetchDog))

async function fetchDog() {
  let response = await fetch('https://dog.ceo/api/breeds/image/random', {
    'method': 'GET'
  });
  if (response.status != 200) {
    let response_body = await response.text();
    console.log('Error fetching dog; ' + response_body);
    return;
  };
  let data = await response.json();
  document.getElementById('image').src = data.message;
};

Next Steps