hyper 1.1.0
hyper: ^1.1.0

Dart native js
Flutter Android iOS web

Hyper is a library that makes it easy to build strings of HTML using Dart.

example/hyper_example.dart

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

main() {
  // Hyper can be used to compose full HTML documents.
  var fullHtmlDoc = hyper('html', children: [
    hyper('head', children: [
      hyper('title', children: [
        t('Hello, world!'),
      ])
    ]),
    hyper('body', children: [
      hyper(
        'h1',
        attrs: {'class': "greeting"},
        children: [
          t('Hello from Hyper!'),
        ],
      )
    ]),
  ]);
  print(fullHtmlDoc);
  // <html>
  //   <head>
  //     <title>Hello, world!</title>
  //   </head>
  //   <body>
  //     <h1 class="greeting">Hello from Hyper!</h1>
  //   </body>
  // </html>

  // You can also use the Elements package to make things a bit easier.
  var header = h.header(
    attrs: {'class': 'heading'},
    children: [
      h.h1(children: [
        // Text nodes can be created using t.
        t('Title'),
      ])
    ],
  );
  print(header);
  // <header class="heading">
  //   <h1>Title</h1>
  // </header>

  // Using the Elements package also makes sure you don't accidentally pass
  // children to a void element. This won't even compile!
  // var invalidElement = h.img(children: [t('Not gonna work!')]);

  // If you want even stricter elements, you can use StrictElements!
  var strictHeader = el.header(
    class_: 'heading',
    children: [
      el.h1(children: [t('Title')]),
    ],
  );
  print(strictHeader);
  // <header class="heading">
  //   <h1>Title</h1>
  // </header>

  // You can also compose Elements together.
  Element container({List<Element> children}) {
    return h.div(attrs: {'class': 'container'}, children: children);
  }

  Element userProfile(String username, String petsName) {
    return h.div(
      attrs: {'class': 'userProfile'},
      children: [
        h.h2(
          attrs: {'class': 'username'},
          children: [
            t(username),
          ],
        ),
        h.p(
          attrs: {'class': 'petsName'},
          children: [
            t("Parent to: $petsName"),
          ],
        ),
      ],
    );
  }

  var userProfiles = container(
    children: [
      userProfile('dstaley', 'Jpeg'),
      userProfile('paddycarver', 'Roxy'),
    ],
  );
  print(userProfiles);
  // <div class="container">
  //   <div class="userProfile">
  //     <h2 class="username">dstaley</h2>
  //     <p class="petsName">Parent to: Jpeg</p>
  //   </div>
  //   <div class="userProfile">
  //     <h2 class="username">paddycarver</h2>
  //     <p class="petsName">Parent to: Roxy</p>
  //   </div>
  // </div>

  var heading = h.h1(
    attrs: {
      'role': 'heading',
      'aria-level': '1',
    },
    children: [
      t('Hello, world!'),
    ],
  );
  print(heading);
  // <h1 role="heading" aria-level="1">Hello, world!</h1>
}
1
likes
110
pub points
15%
popularity

Hyper is a library that makes it easy to build strings of HTML using Dart.

Repository (GitHub)
View/report issues

Documentation

API reference

Uploader

staley.dylan@gmail.com

License

MIT (LICENSE)

More

Packages that depend on hyper