Advanced Documentation viewer

This example is a bit more sophisticated as it will use a FAST Api server and a database in order to store version of the documentation.

Database structure will be defined when the server will start.

First create the page object:

page = pk.Page()

Create a bespoke CSS inline object:

css = pk.CssInline()
css.margin_bottom = 5
css.margin_left = 5
css.important(["margin_bottom", "margin_left"])

Create an autocomplete input components and change some options:

autocomp = page.ui.inputs.autocomplete(placeholder="script name", html_code="name", options={"borders": "bottom"}) = True
version =, 'px'), html_code="selected_version")

Add the CSS object to this components with a specific name:

version.options.noneSelectedText = "None"

Add components to the page:

button = page.ui.buttons.colored("Load") = 10
page.ui.navbar(components=[autocomp, version, button])
script = page.ui.text("script name", html_code="script")
script.options.editable = True
pkg_version = page.ui.text("Version")
pkg_number = page.ui.text("0.0.0", html_code="version")

Change css styles and options:

pkg_number.options.editable = True = 10
v = page.ui.div([pkg_version, pkg_number], width="auto") = "right" = "inline-block"

Add icon components:

i1 = page.ui.icon("fas fa-edit")
i2 = page.ui.icon("fas fa-lock")
i3 = page.ui.icon("fas fa-save")
actions = page.ui.div([i1, i2, i3], width=(20, 'px'))

Add CSS style properties using = "absolute" = 60 = 0 = "3px" = "5px 0 0 5px" = page.theme.greys[3]

header = page.ui.div([script, v]) = page.theme.greys[2] = "block" = 15

title = page.ui.title("Documentation Viewer", html_code="title")
title.options.editable = True
content =, html_code="content")
content.options.editable = True

banner = page.ui.text("Editable", width=(75, 'px')) = page.theme.success[1] = "0 0 20px 0" = 10 = page.theme.greys[-1] = "absolute" = 0 = 0

container = page.ui.div([banner, header, title, content, actions])"white") = "relative" = 30

updt ="right", html_code="last_update")

Add events to the components:[

Call an underlying service in the FAST API server:"/save", components=[banner, script, pkg_number, title, content, updt]).onSuccess([

Add click event on to the first icon:[

Change the dom properties using the common JavaScript features dom.setAttribute:

script.dom.setAttribute("contenteditable", True).r,
pkg_number.dom.setAttribute("contenteditable", True).r,
title.dom.setAttribute("contenteditable", True).r,
content.dom.setAttribute("contenteditable", True).r,

Display a temporary message in the page:

page.js.msg.text("Components editable"),

Update the banner component:"Editable"),
banner.dom.css({"background": page.theme.success[1], "color": page.theme.greys[-1]})

In the same way click events are added on the other components:[
  script.dom.setAttribute("contenteditable", False).r,
  pkg_number.dom.setAttribute("contenteditable", False).r,
  title.dom.setAttribute("contenteditable", False).r,
  content.dom.setAttribute("contenteditable", False).r,
  page.js.msg.text("Components locked"),"Locked"),
  banner.dom.css({"background": page.theme.colors[-1], "color": page.theme.greys[0]})

autocomp.enter(["/versions", components=[autocomp]).onSuccess([["versions"]),
])["/details", components=[autocomp, version]).onSuccess([["title"]),["content"]),["script"]),["number"]),["last_date"]),

Add an body.onReady to load the autocompletion when the page is ready:


This example is available here

More example of the templates on Github