hyper

Hyper makes it easy to build HTML using Dart. It's intentionally kept simple, and produces nothing but strings of HTML.

Usage

import 'package:hyper/hyper.dart';

main() {
  // Create elements using `hyper`, a tag name, attributes, and a list of
  // child elements.
  var header = hyper(
    'h1',
    attrs: {'class': 'header'},
    children: [
      // `t` produces a special element that does not use a tag. Use it for
      // text nodes.
      t('Hello, world!'),
    ],
  );
  print(header); // <h1 class="header">Hello, world!</h1>
}

Hyper Elements

hyper also has an optional export that includes all of the HTML tags as individual functions. This makes it a little easier to ensure that you're not doing something silly like passing a child element to an img tag.

import 'package:hyper/hyper.dart';
import 'package:hyper/elements.dart' as h;

main() {
  var header = h.h1(
    attrs: {
      'class': 'header',
    },
    children: [
      t('Hello, world!'),
    ],
  );
  print(header); // <h1 class="header">Hello, world!</h1>

  // This won't even compile!
  // var invalidElement = h.img(children: [t('Not gonna work!')]);
}

Hyper Strict Elements

Hyper's Strict Elements are a variant of Elements that include keyword arguments for all available HTML attributes for a given element.

import 'package:hyper/hyper.dart';
import 'package:hyper/strict_elements.dart' as h;

main() {
  var link = h.a(
    href: 'https://google.com',
    children: [
      t('Hello, world!'),
    ],
  );
  print(link); // <a href="https://google.com">Hello, world!</h1>

  // You can still use `attrs` to pass in custom HTML attributes.
  var header = h.h1(
    attrs: {
      'role': 'heading',
      'aria-level': '1',
    },
    children: [
      t('Hello, world!'),
    ],
  );
  print(header); // <h1 role="heading" aria-level="1">Hello, world!</h1>
}

What this package isn't

hyper is a tool to make it easier to generate static HTML. It doesn't provide anything exciting like virtual DOM or event listeners. It's simple, and just generates a text HTML string.

Prior Art

hyper was heavily inspired by HyperScript.

Libraries

hyper
Hyper is a library that makes it easy to build strings of HTML using Dart. [...]
hyper_elements
Hyper Elements is a collection of pre-made functions that make it a bit easier to work with the standard HTML tags. It also prevents passing children to void elements like hr and img.
hyper_strict_elements
Hyper Strict Elements is a variation of Hyper Elements that offers an API that is more strict. Each element has optional arguments that match the possible attributes from the HTML specification.