universal_html 2.2.4 copy "universal_html: ^2.2.4" to clipboard
universal_html: ^2.2.4 copied to clipboard

A 'dart:html' that works in all platforms, including Flutter and server-side. Eases cross-platform development and HTML / XML processing.

Pub Package package publisher Github Actions CI

Introduction #

A cross-platform dart:html:

  • Eases cross-platform development
    • You can use this package in browsers, mobile, desktop, and server-side VM, and Node.JS.
    • Just replace dart:html imports with package:universal_html/html.dart. Normal dart:html will continue to be used when application run in browsers.
  • Extensive support for processing HTML and XML documents
  • EventSource streaming support
    • Cross-platform dart:html EventSource ("application/event-stream").
    • If you want to customize EventSource HTTP headers outside browsers, see EventSourceOutsideBrowser.

The project is licensed under the Apache License 2.0. Some of the source code was adopted from the original dart:html in Dart SDK, which is documented in the relevant files.

Documentation #

Similar projects #

Getting started #

1. Add dependency #

In pubspec.yaml:

  universal_html: ^2.2.4

2. Use #

import "package:universal_html/html.dart";

void main() {
  // Create a DOM tree
  final div = DivElement();
    ..appendText("Hello world!"));

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

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

Examples #

Parsing HTML #

Use parseHtmlDocument:

import 'package:universal_html/parsing.dart';

void main() {
  final htmlDocument = parseHtmlDocument('<html>...</html>');

Parsing XML #

Use parseXmlDocument:

import 'package:universal_html/parsing.dart';

void main() {
  final xmlDocument = parseXmlDocument('<xml>...</xml>');

Scraping a website #

Load a Window with WindowController:

import 'dart:io' show Cookie;
import 'package:universal_html/controller.dart';

Future main() async {
  // Load a document.
  final controller = WindowController();
  controller.defaultHttpClient.userAgent = 'My Hacker News client';
  await controller.openHttp(
    method: 'GET',
    uri: Uri.parse("https://news.ycombinator.com/"),
    onRequest: (HttpClientRequest request) {
      // Add custom headers
      request.headers.set('Authorization', 'headerValue');
      request.cookies.add(Cookie('cookieName', 'cookieValue'));
    onResponse: (HttpClientResponse response) {
      print('Status code: ${response.statusCode}');

  // Select the top story using a CSS query
  final titleElements = controller.document.querySelectorAll(".athing > .title");
  final topStoryTitle = titleElements.first.text;

  // Print result
  print("Top Hacker News story is: $topStoryTitle");

EventSource #

EventSource (see mozilla.org) is a browser API for reading "application/event-stream" streams. It has been supported by browsers for a long time.

import 'package:universal_html/html.dart';

Future<void> main() async {
  final eventSource = EventSource('http://example.com/events');
  await for (var message in event.onMessage) {
    print('Event type: ${message.type}');
    print('Event data: ${message.data}');

EventSource requests from real browsers are typically authenticated using cookies. If you want to add cookies or customize other HTTP headers, you need to use EventSourceOutsideBrowser:

import 'package:universal_html/universal_html.dart';
import 'dart:io' show Cookie;

Future<void> main() async {
  final eventSource = EventSource('http://example.com/events');
  // The following block will NOT be executed in browsers.
  // Because compiler can infer instances of EventSourceOutsideBrowser are never constructed,
  // it will not appear in Javascript either.
  if (eventSource is EventSourceOutsideBrowser) {
    eventSource.onHttpClientRequest = (eventSource, request) {
      request.headers.set('Authorization', 'example');
      request.cookies.add(Cookie('name', 'value'));
    eventSource.onHttpClientResponse = (eventSource, request, response) {
      // ...
  await for (var message in eventSource.onMessage) {
    print('  type: ${message.type}');
    print('  data: ${message.data}');

Testing #

import 'package:universal_html/controller.dart';
import 'package:test/test.dart';

void main() {
  setUp(() {
    WindowController.instance = WindowController();
  test('test #1', () {
    // ...
  test('test #2', () {
    // ...
pub points


verified publisherdint.dev

A 'dart:html' that works in all platforms, including Flutter and server-side. Eases cross-platform development and HTML / XML processing.

Repository (GitHub)
View/report issues


API reference


unknown (LICENSE)


async, charcode, collection, csslib, html, meta, source_span, typed_data, universal_io


Packages that depend on universal_html