wui_builder 0.7.1

  • README.md
  • Installing
  • Versions
  • 65

A dart library for building user interfaces for the web, inspired by reactjs


For building declarative, component based web user interfaces in dart.

Provides a rich library of typed virtual elements for svg & standard html.

Supports defining custom components with an interface similar to react. All of the same lifecycle methods are supported.

Built with async rendering in mind from the start.

Fully compliant with dart 2, strong mode, and the DDC.

Documentation and examples

Check out the documentation on github pages for an in depth look at the framework

What makes this virtual dom framework different?

It's written in dart. Plus:

Generated virtual dom elements

The generator is the most unique feature of wui_builder. The generator generates virtual dom element builder for each Element type definied in the dart html and svg packages. Each virtual dom element builder provides the same typed setters as its corresponding html/svg Element. This makes it easy to write resilient componenents.

Configurable Update Scheduling

Next, wui_builder supports iterative rendering to avoid blocking the main thread on large updates. Iterative updates only processes on idle callbacks, which means the rendering job & layout will be split across multiple frames. wui_builder gives power to the developer to decide when components should render. It allows the developer can decide if a component updates syncronously,on animation frame, or on and idle callback. Ideally, a component will either:

  • render on animation frame for high priority updates that must finish. updates from mulitiple components can be batch rendered on animation frames.
  • render on idle callbacks for low priority updates that can be split across frames.

However, syncronous updates are also allowed to run on demand, without waiting for an animation frame or idle callback.

Smart Update Batching

Finally, wui_builder prevents uneccessary updates when multiple updates to the same component are queued before any can process. For example, say I have a component that updates on animation frame using setStateOnAnimationFrame. If setStateOnAnimationFrame is called twice between frames the update process will only be run once while allowing both state setter functions to be executed.

Note, requestIdleCallback is not currently supported by all browsers and wui_builder does NOT include a polyfill at this time. Synchronous rendering still works on all browsers. See a compatability chart here.


class HelloWorldProps {
    String text;

class HelloWorld extends PComponent<HelloWorldProps> {
    HelloWorld(props) : super(props);

    VNode render() => VDivElement()
        ..text = props.text;

// instantiate the component, pass it an instance of HelloWorldProps
final component = HelloWorld(
        ..text = 'Hello world',

// render the virtual element into a container
render(component, querySelector('#container'));

Check out the documentation on github pages for more in depth examples.



  • Breaking changes
  • History is now an interface and is implemented by PushHistory and HashHistory. HashHistory plays nice with the webdev pub package and github pages.


  • Breaking changes:
    • withState now takes named parameters



  • use build_runner test in travis


  • fix vIterable issues
  • Breaking changes
    • Viterable now requires children be passed to its constructor


  • fix issue where adding fields did not work


  • remove usage of new keyword to construct vnodes
  • add viterable example



  • fix casting issues due to dart 2s new type system (internals only)
    • _setSubs is now dynamic in VElement
    • _pendingStateSetter is now dynamicly typed
  • Added vif parameter to Component, which can be used for easy conditional rendering
  • Added VText vNode, which can be used to render text nodes without additional elements being added to the DOM
  • Added VIterable vNode, which can be used to return a list of VNodes from a render function. This is experimental and has known issues.


  • Breaking changes:
    • The following classes now take named required/optional parameters in constructor:
      • ContextSetter
      • UpdateBlocker
      • Pure
      • Perf
      • HistoryProvider
      • Router
      • Route
  • Added UpdateDebugger, which prints props & state changes in componentWillUpdate


  • Added createEventHandler function which can be used to memoize inline functions in functional components
  • Added withContext HOC
  • Added withHistory HOC


  • fix bug where ref was not set after component updates caused change in ref



  • fix issue around remove and readding event subscriptions on dom elements



  • Added router component that lets you decalare which components to render for a given route



  • Breaking changes:
    • Changed StyleBuilder from a typedef to an Object
  • Keyed children can now be moved amongst their siblings while maintaining their state
  • added an exported function, unmount, which disposes a vnode and removes it from the dom.


  • added NComponent and NCComponent for when you want a component with Null prop and state types.


  • Breaking changes:
    • removed element generic from withRef
    • removed added update type to withState hoc

performance audit:

  • move to usage of maps for set properties on velements
  • move to usage of custom attribute diffing
  • use ele.text = ''; to remove all children from an element
  • use node.firstChild rather than node.children.first
  • use ++i and --i instead of i++ and i--

bug fixes:

  • correctly clean up beforeAnimationFrame callbacks after components are unmounted


  • Add changelog.
  • Move home_page into example and rename to docs.
  • fix issue where removing some, but not all, children caused errors
  • Added Perf HOC


  • Breaking changes:
    • Made functional library's HOC classes private.
    • componentDidMount is now called after the new element is actually appended to the dom.
  • Added docs
  • Made child public on the component api.
  • Key change now forces a rerender.
  • Added a virtual element factory for every tag supported in HTML5.


  • Added updateOnAnimationFrame to the component api.
  • Added setStateOnAnimationFrame to the component api.
  • Added beforeAnimationFrame to the component api.


  • Added should abort option to updateOnIdle.
  • Added setState and setStateOnIdle.
  • Added component package.

Use this package as a library

1. Depend on it

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

  wui_builder: ^0.7.1

2. Install it

You can install packages from the command line:

with pub:

$ pub get

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

3. Import it

Now in your Dart code, you can use:

import 'package:wui_builder/wui_builder.dart';
Version Uploaded Documentation Archive
0.7.1 Aug 8, 2018 Go to the documentation of wui_builder 0.7.1 Download wui_builder 0.7.1 archive
0.7.0 Jul 24, 2018 Go to the documentation of wui_builder 0.7.0 Download wui_builder 0.7.0 archive
0.6.0 Jul 8, 2018 Go to the documentation of wui_builder 0.6.0 Download wui_builder 0.6.0 archive
0.5.0 Jun 12, 2018 Go to the documentation of wui_builder 0.5.0 Download wui_builder 0.5.0 archive
0.4.3 Feb 27, 2018 Go to the documentation of wui_builder 0.4.3 Download wui_builder 0.4.3 archive
0.4.2 Jan 31, 2018 Go to the documentation of wui_builder 0.4.2 Download wui_builder 0.4.2 archive
0.4.1 Jan 29, 2018 Go to the documentation of wui_builder 0.4.1 Download wui_builder 0.4.1 archive
0.4.0 Jan 24, 2018 Go to the documentation of wui_builder 0.4.0 Download wui_builder 0.4.0 archive
0.3.1 Dec 31, 2017 Go to the documentation of wui_builder 0.3.1 Download wui_builder 0.3.1 archive
0.3.0 Dec 11, 2017 Go to the documentation of wui_builder 0.3.0 Download wui_builder 0.3.0 archive

All 15 versions...

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: web

Primary library: package:wui_builder/wui_builder.dart with components: html.

Health issues and suggestions

Document public APIs (-9.76 points)

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

Maintenance suggestions

Maintain an example.

None of the files in your example/ directory matches a known example patterns. Common file name patterns include: main.dart, example.dart or you could also use wui_builder.dart. Packages with multiple examples should use example/readme.md.


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=1.23.0 <3.0.0
meta ^1.0.0 1.1.6
Dev dependencies
analyzer ^0.32.0
build_runner ^0.9.0
build_test ^0.10.2
build_web_compilers ^0.4.0
test ^1.0.0