wui_builder 0.7.1

  • Readme
  • Changelog
  • Installing
  • 34

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.

Syntax #

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.

0.7.0 #


  • 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

0.6.0 #


  • 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

0.5.0 #


  • 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

0.4.3 #

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

0.4.2 #


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

0.4.1 #


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

0.4.0 #


  • 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

0.3.1 #

  • 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

0.3.0 #

  • 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.

0.2.1 #

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

0.2.0 #

  • 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';
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 11, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.6.1
  • pana: 0.12.21

Health issues and suggestions

Document public APIs. (-0.35 points)

2933 out of 2999 API elements have no dartdoc comment.Providing good documentation for libraries, classes, functions, and other API elements improves code readability and helps developers find and use your API.

Fix lib/vhtml.dart. (-70.86 points)

Analysis of lib/vhtml.dart reported 246 hints, including:

line 37 col 9: DO use curly braces for all flow control structures.

line 72 col 37: Unnecessary new keyword.

line 190 col 9: DO use curly braces for all flow control structures.

line 272 col 35: Unnecessary new keyword.

line 390 col 9: DO use curly braces for all flow control structures.

Fix lib/vsvg.dart. (-27.08 points)

Analysis of lib/vsvg.dart reported 63 hints, including:

line 10 col 32: Unnecessary new keyword.

line 15 col 38: Unnecessary new keyword.

line 20 col 44: Unnecessary new keyword.

line 26 col 47: Unnecessary new keyword.

line 34 col 37: Unnecessary new keyword.

Fix lib/src/wui_builder/update_children.dart. (-4.89 points)

Analysis of lib/src/wui_builder/update_children.dart reported 10 hints, including:

line 44 col 11: DO use curly braces for all flow control structures.

line 46 col 11: DO use curly braces for all flow control structures.

line 63 col 17: DO use curly braces for all flow control structures.

line 65 col 17: DO use curly braces for all flow control structures.

line 104 col 12: DO use curly braces for all flow control structures.

Fix additional 16 files with analysis or formatting issues. (-23.29 points)

Additional issues in the following files:

  • lib/src/functional/lifecycle.dart (8 hints)
  • lib/src/components/routing.dart (6 hints)
  • lib/src/wui_builder/component/component.dart (6 hints)
  • lib/src/wui_builder/velement/velement.dart (6 hints)
  • lib/src/functional/with_state.dart (3 hints)
  • lib/src/wui_builder/update_processor.dart (3 hints)
  • lib/src/functional/with_context.dart (2 hints)
  • lib/src/functional/with_ref.dart (2 hints)
  • lib/src/wui_builder/component/update.dart (2 hints)
  • lib/src/wui_builder/velement/update.dart (2 hints)
  • lib/src/wui_builder/viterable/update.dart (2 hints)
  • lib/src/components/hocs.dart (1 hint)
  • lib/src/wui_builder/component/create.dart (1 hint)
  • lib/src/wui_builder/create_nodes.dart (1 hint)
  • lib/src/wui_builder/update_queue.dart (1 hint)
  • lib/src/wui_builder/vtext/create.dart (1 hint)

Maintenance suggestions

Package is getting outdated. (-34.25 points)

The package was last published 70 weeks ago.

Maintain an example.

None of the files in the package's example/ directory matches known example patterns.

Common filename patterns include main.dart, example.dart, and wui_builder.dart. Packages with multiple examples should provide example/README.md.

For more information see the pub package layout conventions.


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=1.23.0 <3.0.0
meta ^1.0.0 1.1.8
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