Introduction

Welcome to the ActiveUI tutorial!

Learn by doing

Let's build a beautiful, interactive dashboard using ActiveUI!

In this tutorial we will:

  1. Install the ActiveUI Starter.
  2. Create a custom widget.
  3. Register our widget as a plugin thereby extending ActiveUI.
  4. Build and attach a Content Editor so users can change what information our widget displays.
  5. Wire our widget so it can interact with other widgets on a dashboard.

What we are building

So what will our dashboard do?

We are going to help make our human presence on Earth more sustainable using data!

Ok, ok… that might be a slight overstatement, but we will be building an interactive dashboard showing the recent impact of humans on our planet, using React and ActiveUI!

It will be based on this dataset from the Organisation for Economic Cooperation and Development (OECD).

Finished Product

Sometimes its better to visualize where we are going before we set off.

Take a quick peek at the finished product.

Prerequisites

In order to make the best of this tutorial, we recommend you have some notions of both atoti and React.

Ready to become an ActiveUI pro? Let's get to it!