This is a mock-up of something you can make in Browsergui. This page is not made with Browsergui: Browsergui does not compile to JavaScript. But everything here functions pretty much the same as it would if you were running a GUI with Browsergui.

Here is a list of all the kinds of Element available to you. See the classes' documentation for more detailed information on them.

  1. Text of many flavors:

    Code Result 
    Text("some plain text")
    		some plain text 
    Container(Paragraph("one"), Paragraph("two"))

    one

    two

    		 
    EmphasizedText("some bold text")
    		some bold text 
    CodeSnippet("some code")
    		some code 
    CodeBlock("one\ntwo")

    one
two

    Link("google", url="http://google.com")
    		google

  2. Input of many flavors:

    Code Result 
    click_count = Text('0')
button = Button('Click me!')
@button.def_callback
def button_clicked():
  n = int(click_count.text)
  click_count.text = str(n+1)

Container(click_count, button)
    0 
    slider_value_squared = Text('')
slider = FloatSlider(min=0, max=10)
@slider.def_change_callback
def slider_changed():
  if slider.value is None:
    slider_value_squared.text = ''
  else:
    slider_value_squared.text = '{:.3g}'.format(slider.value ** 2)
slider.value = 3

Container(slider, slider_value_squared)
    9 
    reversed_text_field_contents = Text('')
text_field = TextField()
@text_field.def_change_callback
def text_field_changed():
  reversed_contents = ''.join(reversed(text_field.value))
  reversed_text_field_contents.text = reversed_contents
text_field.value = "Reversed"

Container(text_field, reversed_text_field_contents)
    desreveR 
    reversed_text_field_contents = Text('')
text_field = BigTextField()
@text_field.def_change_callback
def text_field_changed():
  reversed_contents = ''.join(reversed(text_field.value))
  reversed_text_field_contents.text = reversed_contents
text_field.value = "Reversed"

Container(text_field, reversed_text_field_contents)
    desreveR 
    selected_dropdown_item = Text('')
dropdown = Dropdown(['Dr', 'op', 'do', 'wn'])
@dropdown.def_change_callback
def _():
  selected_dropdown_item.text = dropdown.value
dropdown.value = "wn"

Container(dropdown, selected_dropdown_item)
    wn 
    number_field_squared = Text('')
number_field = NumberField()
@number_field.def_change_callback
def number_changed():
  if number_field.value is None:
    number_field_squared.text = ''
  else:
    number_field_squared.text = str(number_field.value ** 2)
number_field.value = 12

Container(number_field, number_field_squared)
    144.0 
    colored_text = Text('colored')
color_field = ColorField()
@color_field.def_change_callback
def color_changed():
  color = color_field.value
  color_hex = '#{:02x}{:02x}{:02x}'.format(*color)
  colored_text.css['color'] = color_hex
color_field.value = (0, 0, 255)

Container(color_field, colored_text)
    colored 
    weekday_text = Text('...')
DAYS = ('Monday', 'Tuesday', 'Wednesday', 'Thursday',
        'Friday', 'Saturday', 'Sunday')
date_field = DateField()
@date_field.def_change_callback
def date_changed():
  if date_field.value is None:
    weekday_text.text = ''
  else:
    weekday_text.text = DAYS[date_field.value.weekday()]

Container(date_field, weekday_text)
    ...

  3. Structural elements of many flavors:

    Code Result 
    Container(Text("one"), CodeSnippet("two"))
    onetwo 
    Viewport(
  CodeBlock('\n'.join(50*'viewport ' for _ in range(100))),
  width=400, height=200)

    

                  
    List(items=[Text("one"), Text("two")])
    1. one
    2. two
    		 
    Grid(cells=[
  [Text("00"), Text("01")],
  [Text("10"), Text("11")]])
    00 01
    10 11

  4. Other:

    Code Result 
    Image(os.path.join(os.path.dirname(__file__), 'tour-image.png'))