&lt; !DOCTYPE html &gt; &lt; html &gt; &lt; head &gt; &lt; title &gt; PyLFG &lt; /title&gt; &lt; link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css" &gt; &lt; script src = "https://cdn.jsdelivr.net/npm/@htmx/htmx.min.js" &gt; &lt; /script&gt; &lt; /head&gt; &lt; body &gt; &lt; section class = "section" &gt; &lt; div class = "container" &gt; &lt; nav class = "level" &gt; &lt; div class = "level-left" &gt; &lt; div class = "level-item" &gt; &lt; h1 class = "title" &gt; PyLFG &lt; /h1&gt; &lt; /div&gt; &lt; /div&gt; &lt; div class = "level-right" &gt; &lt; div class = "level-item" &gt; &lt; a class = "button is-primary" hx - get = "/new-grammar" hx - target = "#grammar-form" &gt; New Grammar &lt; /a&gt; &lt; /div&gt; &lt; div class = "level-item" &gt; &lt; a class = "button is-primary" hx - get = "/new-lexicon" hx - target = "#lexicon-form" &gt; New Lexicon &lt; /a&gt; &lt; /div&gt; &lt; /div&gt; &lt; /nav&gt; &lt; /div&gt; &lt; /section&gt; &lt; section class = "section" &gt; &lt; div class = "container" &gt; &lt; div class = "columns" &gt; &lt; div class = "column is-one-third" &gt; &lt; nav class = "panel" &gt; &lt; p class = "panel-heading" &gt; Grammars &lt; /p&gt; &lt; div class = "panel-block" id = "grammar-list" &gt; &lt; /div&gt; &lt; /nav&gt; &lt; /div&gt; &lt; div class = "column is-one-third" &gt; &lt; nav class = "panel" &gt; &lt; p class = "panel-heading" &gt; Lexicons &lt; /p&gt; &lt; div class = "panel-block" id = "lexicon-list" &gt; &lt; /div&gt; &lt; /nav&gt; &lt; /div&gt; &lt; div class = "column" &gt; &lt; div id = "grammar-form" &gt; &lt; /div&gt; &lt; div id = "lexicon-form" &gt; &lt; /div&gt; &lt; /div&gt; &lt; /div&gt; &lt; /div&gt; &lt; /section&gt; &lt; section class = "section" &gt; &lt; div class = "container" &gt; &lt; div class = "columns" &gt; &lt; div class = "column" &gt; &lt; form id = "parse-form" class = "form" &gt; &lt; div class = "field" &gt; &lt; label class = "label" &gt; Sentence &lt; /label&gt; &lt; div class = "control" &gt; &lt; textarea class = "textarea" name = "sentence" &gt; &lt; /textarea&gt; &lt; /div&gt; &lt; /div&gt; &lt; div class = "field" &gt; &lt; div class = "control" &gt; &lt; button class = "button is-link" hx - post = "/parse" hx - target = "#parse-result" &gt; Parse &lt; /button&gt; &lt; /div&gt; &lt; /div&gt; &lt; /form&gt; &lt; /div&gt; &lt; div class = "column" &gt; &lt; div id = "parse-result" &gt; &lt; /div&gt; &lt; /div&gt; &lt; /div&gt; &lt; /div&gt; &lt; /section&gt; &lt; section class = "section" &gt; &lt; div class = "container" &gt; &lt; div class = "columns" &gt; &lt; div class = "column is-one-third" &gt; &lt; nav class = "panel" &gt; &lt; p class = "panel-heading" &gt; Test Suites &lt; /p&gt; &lt; div class = "panel-block" id = "test-suite-list" &gt; &lt; /div&gt; &lt; div class = "panel-block" &gt; &lt; a class = "button is-link" hx - get = "/new-test-suite" hx - target = "#test-suite-form" &gt; New Test Suite &lt; /a&gt; &lt; /div&gt; &lt; /nav&gt; &lt; /div&gt; &lt; div class = "column is-two-thirds" &gt; &lt; div id = "test-suite-form" &gt; &lt; /div&gt; &lt; /div&gt; &lt; /div&gt; &lt; /div&gt; &lt; /section&gt; &lt; section class = "section" &gt; &lt; div class = "container" &gt; &lt; div class = "columns" &gt; &lt; div class = "column" &gt; &lt; nav class = "panel" &gt; &lt; p class = "panel-heading" &gt; Groups &lt; /p&gt; &lt; div class = "panel-block" id = "group-list" &gt; &lt; /div&gt; &lt; div class = "panel-block" &gt; &lt; a class = "button is-link" hx - get = "/new-group" hx - target = "#group-form" &gt; New Group &lt; /a&gt; &lt; /div&gt; &lt; /nav&gt; &lt; /div&gt; &lt; div class = "column" &gt; &lt; div id = "group-form" &gt; &lt; /div&gt; &lt; /div&gt; &lt; /div&gt; &lt; /div&gt; &lt; /section&gt; &lt; script &gt; htmx.on('load', function() { // Code to run on page load }); &lt; /script&gt; &lt; /body&gt; &lt; /html&gt;