tessl/pypi-brython
Python-to-JavaScript transpiler that enables Python 3 development in web browsers with full DOM integration and standard library support
—
Pending
Quality
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
html-elements.mddocs/
HTML Elements
Python classes for all HTML5 elements with attribute management, styling, and event handling capabilities. Each HTML element is represented as a Python class that can be instantiated, configured, and manipulated using standard Python syntax.
Capabilities
Element Creation
All standard HTML5 elements are available as Python classes that can be instantiated with content and attributes.
class Element:
"""Base class for all HTML elements."""
def __init__(self, content: str = "", **attrs):
"""
Create HTML element.
Args:
content: Text content or child elements
**attrs: HTML attributes as keyword arguments
"""
# Content manipulation
def __le__(self, other) -> Element: ... # element <= content
def __lt__(self, other) -> Element: ... # element < content
def clear(self) -> Element: ...
# Styling and attributes
def bind(self, event: str, callback: Callable) -> Element: ...
def unbind(self, event: str, callback: Callable = None) -> Element: ...
# Properties
text: str # Text content
html: str # HTML content
style: CSSStyle # CSS styling
classList: ClassList # CSS class managementText and Content Elements
Elements for text content, headings, and content organization.
class P(Element):
"""Paragraph element."""
def __init__(self, text: str = "", **attrs): ...
class DIV(Element):
"""Division/container element."""
def __init__(self, content: str = "", **attrs): ...
class SPAN(Element):
"""Inline span element."""
def __init__(self, text: str = "", **attrs): ...
class H1(Element):
"""Main heading element."""
def __init__(self, text: str = "", **attrs): ...
class H2(Element):
"""Secondary heading element."""
def __init__(self, text: str = "", **attrs): ...
class H3(Element):
"""Tertiary heading element."""
def __init__(self, text: str = "", **attrs): ...
class H4(Element):
"""Fourth-level heading element."""
def __init__(self, text: str = "", **attrs): ...
class H5(Element):
"""Fifth-level heading element."""
def __init__(self, text: str = "", **attrs): ...
class H6(Element):
"""Sixth-level heading element."""
def __init__(self, text: str = "", **attrs): ...Usage:
from browser.html import DIV, P, H1, SPAN
# Create elements with content
title = H1("Welcome to My Site")
paragraph = P("This is some paragraph text.")
container = DIV()
# Add content to container
container <= title
container <= paragraph
container <= SPAN("Additional info", Class="highlight")Interactive Elements
Elements for user interaction including buttons, inputs, and forms.
class BUTTON(Element):
"""Button element."""
def __init__(self, text: str = "", **attrs): ...
class INPUT(Element):
"""Input form element."""
def __init__(self, type: str = "text", **attrs): ...
# Properties
value: str # Current input value
checked: bool # For checkboxes/radio buttons
disabled: bool # Disabled state
class TEXTAREA(Element):
"""Multi-line text area."""
def __init__(self, content: str = "", **attrs): ...
value: str # Current text content
class SELECT(Element):
"""Select dropdown element."""
def __init__(self, **attrs): ...
selectedIndex: int # Selected option index
value: str # Selected option value
class OPTION(Element):
"""Option element for SELECT."""
def __init__(self, text: str = "", value: str = None, **attrs): ...
selected: bool # Selection state
value: str # Option value
class FORM(Element):
"""Form element."""
def __init__(self, **attrs): ...
def submit(self) -> None: ...
def reset(self) -> None: ...Usage:
from browser.html import FORM, INPUT, BUTTON, SELECT, OPTION
from browser import bind
# Create form
form = FORM(action="/submit", method="post")
# Add form controls
name_input = INPUT(type="text", name="name", placeholder="Enter name")
email_input = INPUT(type="email", name="email", required=True)
# Select dropdown
country_select = SELECT(name="country")
country_select <= OPTION("USA", value="us")
country_select <= OPTION("Canada", value="ca")
submit_btn = BUTTON("Submit", type="submit")
# Assemble form
form <= name_input
form <= email_input
form <= country_select
form <= submit_btn
# Handle form submission
@bind(form, "submit")
def handle_submit(event):
event.preventDefault()
name = name_input.value
email = email_input.value
print(f"Submitted: {name}, {email}")Navigation and Links
Elements for navigation, links, and document structure.
class A(Element):
"""Anchor/link element."""
def __init__(self, text: str = "", href: str = "#", **attrs): ...
href: str # Link target
target: str # Link target window
class NAV(Element):
"""Navigation section element."""
def __init__(self, **attrs): ...
class UL(Element):
"""Unordered list element."""
def __init__(self, **attrs): ...
class OL(Element):
"""Ordered list element."""
def __init__(self, **attrs): ...
class LI(Element):
"""List item element."""
def __init__(self, content: str = "", **attrs): ...Usage:
from browser.html import NAV, UL, LI, A
# Create navigation menu
nav = NAV()
menu = UL()
menu <= LI(A("Home", href="/"))
menu <= LI(A("About", href="/about"))
menu <= LI(A("Contact", href="/contact"))
nav <= menuMedia Elements
Elements for images, audio, video, and other media content.
class IMG(Element):
"""Image element."""
def __init__(self, src: str = "", alt: str = "", **attrs): ...
src: str # Image source URL
alt: str # Alternative text
width: int # Image width
height: int # Image height
class VIDEO(Element):
"""Video element."""
def __init__(self, **attrs): ...
src: str # Video source
controls: bool # Show controls
autoplay: bool # Auto-play video
def play(self) -> None: ...
def pause(self) -> None: ...
class AUDIO(Element):
"""Audio element."""
def __init__(self, **attrs): ...
src: str # Audio source
controls: bool # Show controls
def play(self) -> None: ...
def pause(self) -> None: ...
class CANVAS(Element):
"""Canvas element for graphics."""
def __init__(self, width: int = 300, height: int = 150, **attrs): ...
width: int # Canvas width
height: int # Canvas height
def getContext(self, type: str) -> CanvasContext: ...Usage:
from browser.html import IMG, VIDEO, CANVAS
# Image with error handling
img = IMG(src="photo.jpg", alt="Profile photo")
@bind(img, "error")
def handle_error(event):
img.src = "placeholder.jpg"
# Video player
video = VIDEO(controls=True, width=640, height=480)
video.src = "movie.mp4"
# Canvas for drawing
canvas = CANVAS(width=800, height=600)
ctx = canvas.getContext("2d")Table Elements
Elements for creating data tables with proper semantic structure.
class TABLE(Element):
"""Table element."""
def __init__(self, **attrs): ...
class THEAD(Element):
"""Table header section."""
def __init__(self, **attrs): ...
class TBODY(Element):
"""Table body section."""
def __init__(self, **attrs): ...
class TFOOT(Element):
"""Table footer section."""
def __init__(self, **attrs): ...
class TR(Element):
"""Table row."""
def __init__(self, **attrs): ...
class TH(Element):
"""Table header cell."""
def __init__(self, text: str = "", **attrs): ...
class TD(Element):
"""Table data cell."""
def __init__(self, content: str = "", **attrs): ...Usage:
from browser.html import TABLE, THEAD, TBODY, TR, TH, TD
# Create data table
table = TABLE()
thead = THEAD()
tbody = TBODY()
# Header row
header_row = TR()
header_row <= TH("Name")
header_row <= TH("Age")
header_row <= TH("City")
thead <= header_row
# Data rows
data_row = TR()
data_row <= TD("John")
data_row <= TD("25")
data_row <= TD("New York")
tbody <= data_row
table <= thead
table <= tbodySemantic Elements
HTML5 semantic elements for better document structure and accessibility.
class HEADER(Element):
"""Header section element."""
def __init__(self, **attrs): ...
class FOOTER(Element):
"""Footer section element."""
def __init__(self, **attrs): ...
class MAIN(Element):
"""Main content element."""
def __init__(self, **attrs): ...
class ARTICLE(Element):
"""Article element."""
def __init__(self, **attrs): ...
class SECTION(Element):
"""Section element."""
def __init__(self, **attrs): ...
class ASIDE(Element):
"""Aside/sidebar element."""
def __init__(self, **attrs): ...Element Manipulation
Content Operations
# Add content (multiple ways)
element <= "Text content" # Add text
element <= other_element # Add child element
element < "Replace content" # Replace content
# Clear content
element.clear()
# Set HTML content
element.html = "<strong>Bold text</strong>"
# Set text content
element.text = "Plain text"Styling and Classes
# CSS styling
element.style.color = "red"
element.style.backgroundColor = "yellow"
element.style.fontSize = "16px"
# CSS classes
element.classList.add("highlight")
element.classList.remove("hidden")
element.classList.toggle("active")
# Check classes
if "active" in element.classList:
print("Element is active")Attributes
# Set attributes during creation
img = IMG(src="photo.jpg", alt="Photo", Class="thumbnail")
# Set attributes after creation
img.src = "new-photo.jpg"
img.setAttribute("data-id", "123")
# Get attributes
src = img.getAttribute("src")Event Handling
# Bind events
@bind(button, "click")
def handle_click(event):
print("Clicked!")
# Multiple events
@bind(input_field, "focus blur")
def handle_focus_change(event):
if event.type == "focus":
input_field.classList.add("focused")
else:
input_field.classList.remove("focused")This comprehensive HTML element system provides a complete Python interface to HTML5, enabling developers to create complex web interfaces using familiar Python syntax while maintaining full access to all HTML capabilities.
Install with Tessl CLI
npx tessl i tessl/pypi-brython