Skip to main content

Introduction

Welcome to the ActiveUI tutorial!

Learn by doing#

We are going to 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?

It's 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!