Rendering Components

HTML Rendering

To convert components to the HTML representation, use the render method. This method returns a string containing the HTML representation of the component. For example, to render a page with the Card example component, you can use the following code:

Rendering the page as HTML

from seamless import render
from seamless.components import Page
from card import Card

card = Card(title="Card Title")(
    "This is the content of the card"
)

html = render(Page(card))

print(html)

This will output the following HTML:

HTML render result

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Page</title>
    </head>
    <body dir="ltr">
        <div class="card">
            <div class="card-title">
                Card Title
            </div>
            <div class="card-content">
                This is the content of the card
            </div>
        </div>
    </body>
</html>

The render method can pretty-print the HTML by setting the pretty parameter to True.

JSON Rendering

To convert components to the JSON representation, use the to_dict method from seamless.renderer. This method returns a dict containing the JSON representation of the component.

Rendering the page as JSON

from json import dumps
from seamless.renderer import to_dict
from card import Card

card = Card(title="Card Title")(
    "This is the content of the card"
)

json = to_dict(card)

print(dumps(json))

This will output the following JSON:

JSON representation of the page

{
  "type": "div",
  "children": [
    {
      "type": "div",
      "children": [
        "Card Title"
      ],
      "props": {
        "class": "card-title"
      }
    },
    {
      "type": "div",
      "children": [
        "This is the content of the card"
      ],
      "props": {
        "class": "card-content"
      }
    }
  ],
  "props": {
    "class": "card"
  }
}

This dict can be used to render components on the client side after the initial server-side rendering.

It also corresponds to React’s virtual DOM representation of the component.

Props Rendering

When rendering components, some props names are converted to another name in the HTML representation. For example, the class_name prop is converted to the class attribute in the HTML representation.

The full list of prop names and their corresponding HTML attributes is as follows:

class_name -> class
html_for -> for
accept_charset -> accept-charset
http_equiv -> http-equiv
access_key -> accesskey
content_editable -> contenteditable
cross_origin -> crossorigin
tab_index -> tabindex
use_map -> usemap
col_span -> colspan
row_span -> rowspan
char_set -> charset

All on_ props that are python functions are converted to event listeners in the HTML representation and will not be rendered as attributes.