html_builder 1.0.5

  • Installing
  • Versions
  • 60


Pub build status

Build HTML AST's and render them to HTML.

This can be used as an internal DSL, i.e. for a templating engine.


In your pubspec.yaml:

  html_builder: ^1.0.0


import 'package:html_builder/html_builder.dart';

main() {
    // Akin to React.createElement(...);
    var $el = h('my-element', p: {}, c: []);

    // Attributes can be plain Strings.
    h('foo', p: {
        'bar': 'baz'

i    // Null attributes do not appear.
    h('foo', p: {
        'does-not-appear': null

    // If an attribute is a bool, then it will only appear if its value is true.
    h('foo', p: {
        'appears': true,
        'does-not-appear': false
    // Or, a String or Map.
    h('foo', p: {
        'style': 'background-color: white; color: red;'

    h('foo', p: {
        'style': {
            'background-color': 'white',
            'color': 'red'
/        }

    // Or, a String or Iterable.
    h('foo', p: {
        'class': 'a b'

    h('foo', p: {
        'class': ['a', 'b']

Standard HTML5 elements:

import 'package:html_builder/elements.dart';

main() {
    var $dom = html(lang: 'en', c: [
        head(c: [
            title(c: [text('Hello, world!')])
        body(c: [
            h1(c: [text('Hello, world!')]),
            p(c: [text('Ok')])

Rendering to HTML:

String html = new StringRenderer().render($dom);

Example with the Angel server-side framework, which has dedicated html_builder support:

import 'dart:io';
import 'package:angel_framework/angel_framework.dart';
import 'package:html_builder/elements.dart';

configureViews(Angel app) async {
    app.get('/foo/:id', (req, res) async {
        var foo = await app.service('foo').read(req.params['id']);
        return html(c: [
            head(c: [
                title(c: [text(])
            body(c: [
                h1(c: [text(])


  • Added rebuild, rebuildRecursive, and NodeBuilder.


  • Dart 2 ready!


Changed h and the Node constructor to take Iterables of children, instead of just Lists.

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:

  html_builder: ^1.0.5

2. Install it

You can install packages from the command line:

with pub:

$ pub get

with Flutter:

$ flutter packages get

Alternatively, your editor might support pub get or flutter packages get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:

import 'package:html_builder/html_builder.dart';
Version Uploaded Documentation Archive
1.0.5 Jun 26, 2018 Go to the documentation of html_builder 1.0.5 Download html_builder 1.0.5 archive
1.0.4 Jun 25, 2018 Go to the documentation of html_builder 1.0.4 Download html_builder 1.0.4 archive
1.0.3 Jun 23, 2018 Go to the documentation of html_builder 1.0.3 Download html_builder 1.0.3 archive
1.0.2 Jul 23, 2017 Go to the documentation of html_builder 1.0.2 Download html_builder 1.0.2 archive
1.0.1 Jun 6, 2017 Go to the documentation of html_builder 1.0.1 Download html_builder 1.0.1 archive
1.0.0+1 Apr 11, 2017 Go to the documentation of html_builder 1.0.0+1 Download html_builder 1.0.0+1 archive
1.0.0 Apr 11, 2017 Go to the documentation of html_builder 1.0.0 Download html_builder 1.0.0 archive
Describes how popular the package is relative to other packages. [more]
Code health derived from static analysis. [more]
Reflects how tidy and up-to-date the package is. [more]
Weighted score of the above. [more]
Learn more about scoring.

We analyzed this package on Dec 5, 2018, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.1.0
  • pana: 0.12.7


Detected platforms: Flutter, web, other

No platform restriction found in primary library package:html_builder/html_builder.dart.

Health issues and suggestions

Document public APIs (-9.03 points)

140 out of 155 API elements (library, class, field or method) have no adequate dartdoc content. Good documentation improves code readability and discoverability through search.

Fix lib/src/node.dart. (-1 points)

Analysis of lib/src/node.dart reported 2 hints:

line 27 col 17: Always override hashCode if overriding ==.

line 55 col 17: Always override hashCode if overriding ==.

Format lib/html_builder.dart.

Run dartfmt to format lib/html_builder.dart.

Format lib/src/renderer.dart.

Run dartfmt to format lib/src/renderer.dart.

Maintenance suggestions

Maintain an example. (-10 points)

Create a short demo in the example/ directory to show how to use this package. Common file name patterns include: main.dart, example.dart or you could also use html_builder.dart.


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.0.0-dev <3.0.0
collection ^1.0.0 1.14.11
Dev dependencies
html ^0.13.1
test ^0.12.0