Skip to content

pyhoon/MiniHtml-B4X

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

MiniHtml-B4X

Generate HTML from B4X code
Supports HTMX hx-* attributes

Preview

MiniHTML

Sample:

Sub GenerateHtml As String
	Dim html1 As Tag = Html.lang("en")
	html1.comment(" generated by MiniHTML ")
	Dim head1 As Tag = Head.up(html1).responsive
	head1.title("MiniHTML Demo")
	head1.linkcss("css/bootstrap.min.css")
	head1.script("js/bootstrap.bundle.min.js")
	Dim main1 As Tag = Body.up(html1).add(Html.create("main"))
	main1.cls("container").sty("margin-top: 30px")
	H1.text("Hello, World!").up(main1)
	Dim card1 As Tag = Div.cls("card").up(main1)
	Dim form1 As Tag = Div.cls("card-body").up(card1).add(Form.init).hxGet("#")
	Dim group1 As Tag = Div.cls("form-group").up(form1)
	Label.forId("email").text("Email").up(group1)
	Input.typeOf("email").id("email").cls("form-control").required.up(group1)
	Dim div1 As Tag = Div.cls("text-center").up(form1)
	Button.typeOf("submit").text("Submit").cls("btn btn-primary mt-3 text-center").up(div1)
	Dim p1 As Tag = Paragraph.text("This is a ").up(main1)
	p1.add(Span.cls("text-danger").text("red text"))
	p1.text(" in  a ").add(Bold.text("paragraph"))
	Return html1.Build
End Sub

Output:

<!DOCTYPE html>
<html lang="en">
  <!-- generated by MiniHTML -->
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>MiniHTML Demo</title>
    <link href="css/bootstrap.min.css" rel="stylesheet"/>
    <script src="js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <main class="container" style="margin-top: 30px">
      <h1>Hello, World!</h1>
      <div class="card">
        <div class="card-body">
          <form hx-get="#">
            <div class="form-group">
              <label for="email">Email</label>
              <input type="email" id="email" class="form-control" required>
            </div>
            <div class="text-center">
              <button type="submit" class="btn btn-primary mt-3 text-center">Submit</button>
            </div>
          </form>
        </div>
      </div>
      <p>This is a <span class="text-danger">red text</span> in  a <b>paragraph</b></p>
    </main>
  </body>
</html>

About

Generate HTML from B4X code

Topics

Resources

License

Stars

Watchers

Forks

Sponsor this project

Packages

No packages published

Contributors 2

  •  
  •  

Languages