Skip to content
Fiction

Working with web pages

After you made sure that the webserver is working, you can now edit the example code and change it however your want.

Fiction comes with TailwdindCSS and Lucide Icons built-in.

HTML Structure

Section titled “HTML Structure”

Fiction automatically wraps HTML-like output with <html> and <body> if it’s not present.

You can use <body> or <main> for root component

Terminal window
function main() {
  @return html {
    <main>
      <p class="text-center text-5xl">
        My test page! <i data-lucide="star"></i>
      </p>
    </main>
  }
}

For adding tags to <head> you can use addMeta <tag>, for example:

Terminal window
function main() {
  addMeta '<meta name="description" content="Generated by Fiction">'
  @return html {
    <main>
    ...

}

Introduction to BashX