Pub Package


Cross-platform dart:html. Works in browser, server-side (Dart VM or Node.JS), and Flutter.

The project is licensed under the Apache License 2.0.


  • This is an open-source project that welcomes new contributors. Don't be afraid to change things. Both small and big changes are welcome.
  • Bugs and enhancements are discussed in the Github issue tracker.
  • Have a contribution? Create a pull request. A contributor may be welcomed to become an administrator who can push changes without code review process.


Similar projects

Getting started

1. Add dependency

In pubspec.yaml:

  universal_html: ^1.1.0

Now you can replace usage of "dart:html" with "package:universal_html/html.dart".

2. Choose library

Option 1

import 'package:universal_html/prefer_sdk/html.dart';

This library exports dart:html by default. The library exports our implementation only when dart:io is available.

If you use this library, your package will not compile in Node.JS. Dart tools may also mistakenly think that your package is not compatible with VM/Flutter.

Option 2

import 'package:universal_html/prefer_universal/html.dart';

This library exports our implementation by default. The library exports dart:html only in browsers.

Getting warnings? In some cases, when you mix universal_io classes with dart:html classes, your IDE produces type warnings ("universal_html Element is not dart:html Element"). Your application should still compile (in Dart2js, universal_html classes will be dart:html classes).

Proposed future method

Dart SDK feature request #37232 proposes that developers could supply missing dart:html in VM/Flutter in pubspec.yaml.

3. That's it!

import "package:universal_html/html.dart";

void main() {
  // Create a DOM tree
  final divElement = new DivElement();
  divElement.append(new Element.tag("h1")
    ..appendText("Hello world!"));

  // Print outer HTML
  // --> <div><h1>Hello world</h1></div>

  // Do a CSS query
  print(divElement.querySelector("div > .greeting").text);
  // --> Hello world


Server-side rendering

The package comes with ServerSideRenderer, which is a web server for rendering your web application in the server-side.

import 'package:universal_html/driver.dart';
import 'package:universal_html/html.dart';

void main() {
  final renderer = new ServerSideRenderer(webAppMain);
  renderer.bind("localhost", 12345);

void webAppMain() {
  document.body.appendText("Hello world!");

Creating and using browser simulators

import 'package:universal_html/driver.dart';
import 'package:universal_html/html.dart';

Future main() async {
  // Construct a driver
  final driver = new HtmlDriver(userAgent:"My Hacker News bot");
  // Load a document.
  await driver.setDocumentFromUri(Uri.parse(""));
  // Select top story
  final topStoryTitle = driver.document.querySelectorAll(".athing > .title").first.text;
  print("Top Hacker News story is: ${topStoryTitle}");

Implemented APIs


  • Our goal is that universal_html behaves identically to dart:html running in Chrome.
  • contains automatically generated list of dart:html APIs that are not yet declared by this package.
  • Some APIs are declared, but not implemented. These will either throw UnimplementedError or (when appropriate) fail silently.


  • Document nodes
    • All core classes (Node, Element, etc.)
    • All HtmlElement subclasses (AnchorElement, ResetButtonElement, etc.)
    • Most class members. For example, anchorElement.href returns the resolved URI. Only a few class members are still missing (see
  • DOM parsing
  • DOM printing
    • element.innerHtml, element.outerHtml
  • DOM events
    • For example, element.onClick.listen(...) receives invocation of


  • Much of the CSS classes (CssStyleDeclaration, etc.)
  • CSS queries
    • Methods element.querySelector(..), element.querySelectorAll(..), element.matchesSelector(..)
    • Element name (table)
    • Element ID (#id)
    • Element class (.classA.classB)
    • Combinators:
      • element.class#id
      • s0 s1 s2
      • s0 s1 s2
      • s0 > s1 > s2
      • s0 ~ s1 ~ s2
      • s0 + s1 + s2
    • Pseudoselectors:
      • :disabled
      • :first-child
      • :last-child
      • :not(x)
      • :nth-child(5)
      • :nth-child(even)
      • :nth-child(3n+1)
      • :only-child
      • :root
    • Attribute selectors:
      • [name]
      • [name=value]
      • [name~=value]
      • [name|=value]
      • [name^=value]
      • [name$=value]
      • [name*=value]


Currently, the library does not attempt to calculate layout for the elements.

Every DOM element has a private field RenderData, which you can get with BrowserImplementationUtils.getRenderData(...)). When a property such as element.offset is called, the RenderData instance is responsible for evaluating the answer. The default implementation generally returns 0. If you want to implement layout engine, you can override BrowserImplementation.newRenderData(element).


Currently, networking classes don't implement same-origin policies, CORS, and other security specifications. We hope to fix this in future.

The package supports:

  • HttpRequest
    • Full support.
  • EventSource
    • Full support.

Various browser APIs

  • Navigator
    • locale, userAgent, etc.
  • Window
    • console
    • history
      • back(...), pushState(...), etc.
    • location
      • origin, href, etc.
    • localStorage / sessionStorage
      • Stores values in the heap.

Other SDK libraries

We wrote mock implementation of the following SDK libraries:

  • dart:indexed_db
  • dart:js
  • dart:js_util
  • dart:svg
  • dart:web_gl

Any attempt to use these APIs will ead to UnimplementedException. The libraries are available in:

  • package:universal_html/(libraryName).dart
  • package:universal_html/prefer_sdk/(libraryName).dart
  • package:universal_html/prefer_universal/(libraryName).dart


Implements dart:html in VM and Flutter. In browser, this library exports "dart:html". [...]
Creates and controls browser simulators.
Implements dart:indexed_db in VM and Flutter. In browser, this library exports "dart:indexed_db".
Implements dart:js in VM and Flutter. In browser, this library exports "dart:js". [...]
Implements dart:js_util in VM and Flutter. In browser, this library exports "dart:js_util". [...]
Implements dart:svg in VM and Flutter. In browser, this library exports "dart:svg".
Implements dart:web_gl in VM and Flutter. In browser, this library exports "dart:web_gl".