htmleez

Htmleez

Template-less. Type safe. Simple. Familiar. Pure Dart.

Install

dart pub add htmleez

Quick Start

import "package:htmleez/htmleez.dart";

void main() {
  print(btn().toHtml());
}

HTML btn() => button([
    $("type")("button"),
    $("class")("btn btn-primary"),
    raw$("onclick")("console.log('Clicked')"),
    "Click me!".t
  ]);

Core Concepts

  • Tags, Attributes and Events: simple way to mirror HTML elements in Dart.
const div = Tag("div");
const img = Tag("img", true); // renders a void tag <img />

$("id")("main"); // escaped attribute: id="main"
$("disabled")(); // flag attribute: disabled
raw$("onclick")("console.log('Clicked')"); // raw attribute for static JS/events
$classes(["btn", "btn-primary"]); // class="btn btn-primary"

  • Text & Raw:

    • Safe text: .t escapes HTML in text. div(["Hello".t]) -> <div>Hello</div>
    • Raw content: Raw() inserts unescaped content. script([Raw("alert('Hi')")]) -> <script>alert('Hi')</script>

  • Text Extension: "Text".t creates escaped text content.

  • API:

    • <HTML>.add() to append children after creation.

  • Tag names: all W3C Webref HTML elements are available as tag constants. Names match HTML elements 1:1, except main is mainTag and var is varTag because both are Dart keywords.

For the full list of tags and extensions, see the API Reference.

Libraries

htmleez
HTML easy