{"id":7288,"library":"htbuilder","title":"htbuilder","description":"htbuilder is a Python library for building HTML strings using a purely functional syntax, akin to JSX rather than traditional templating engines. It allows developers to construct HTML elements and attributes using Python functions, providing a clean and programmatic way to generate markup. The library is currently active, with its latest version being 0.9.0, released in September 2023.","status":"active","version":"0.9.0","language":"en","source_language":"en","source_url":"https://github.com/tvst/htbuilder","tags":["html","builder","functional","jsx","pythonic"],"install":[{"cmd":"pip install htbuilder","lang":"bash","label":"Install htbuilder"}],"dependencies":[],"imports":[{"symbol":"div","correct":"from htbuilder import div"},{"note":"H is an alias for HtmlElement, often used for convenience to access common HTML tags.","symbol":"H","correct":"from htbuilder import H"},{"note":"Used to define inline CSS styles for HTML elements.","symbol":"styles","correct":"from htbuilder import styles"},{"note":"Imports unit helpers for CSS properties, e.g., `px(10)`.","symbol":"px","correct":"from htbuilder.units import px"}],"quickstart":{"code":"from htbuilder import div, p, a, H\n\n# Create a simple div with text\nhello_world = div('Hello, World!')\nprint(hello_world.render())\n# Expected: <div>Hello, World!</div>\n\n# Create an element with attributes and children\nlink_element = a(href='https://github.com/tvst/htbuilder')('htbuilder GitHub')\nparagraph_element = p('Visit the ', link_element, ' for more info.')\n\n# Nest elements using the H (HtmlElement) factory for common tags\npage_content = H.div(id='main-content')(\n    H.h1('Welcome'),\n    paragraph_element\n)\n\nprint(page_content.render())\n","lang":"python","description":"This quickstart demonstrates how to create basic HTML elements, add text content, include attributes, and nest elements using `htbuilder`'s functional syntax. It shows both direct tag imports and the `H` factory for common tags."},"warnings":[{"fix":"Instead of `my-element(foo-bar='value')`, use `my_element(foo_bar='value')`.","message":"When defining HTML tag names or attributes that contain dashes (e.g., `my-element`, `foo-bar`), use underscores instead. Python identifiers do not support dashes, and `htbuilder` automatically converts underscores to dashes during rendering.","severity":"gotcha","affected_versions":"All versions"},{"fix":"Instead of `div(class='my-class')`, use `div(_class='my-class')`.","message":"If you need to use a Python reserved keyword (like `class` or `for`) as an HTML attribute name, prefix it with an underscore. `htbuilder` will strip the leading underscore before rendering the HTML.","severity":"gotcha","affected_versions":"All versions"},{"fix":"Embrace the functional Python syntax for defining elements, attributes, and children. Avoid trying to embed template-like logic.","message":"htbuilder is designed for a purely functional approach to HTML generation, similar to JSX. It is not a templating engine like Jinja2 or Django Templates. Expect to write Python code for all HTML structure rather than using string-based templates.","severity":"gotcha","affected_versions":"All versions"}],"env_vars":null,"last_verified":"2026-04-16T00:00:00.000Z","next_check":"2026-07-15T00:00:00.000Z","problems":[{"fix":"Replace hyphens with underscores. E.g., `from htbuilder import my_component` instead of `my-component`, and `div(data_attribute='value')` instead of `div(data-attribute='value')`.","cause":"Python does not allow hyphens in variable or function names, which are used to represent HTML tags/attributes in `htbuilder`.","error":"SyntaxError: invalid syntax (when using dash in tag or attribute name)"},{"fix":"Prefix the reserved keyword with an underscore. For `class`, use `_class`. Example: `div(_class='my-css-class')`.","cause":"Attempting to use a Python reserved keyword like `class` directly as an HTML attribute name without escaping it.","error":"TypeError: __call__() got an unexpected keyword argument 'class'"}]}