Skip to main content

UI Composer

What you'll learn
  • what is the Webiny UI Composer

Overview#

Webiny UI Composer is a toolkit which helps you build extendable and completely customizable React UIs. It does not handle state, and you still need to use hooks to handle state, perform API calls, transition between routes, etc. It works as a middle man that sits between your React hooks and the actual React view being rendered, controls the layout, and forwards your hook's contents to your React components.

UI Composer is library agnostic. It is built for React, but it doesn't provide any actual UI components, and it's up to you to develop element classes and implement renderers in React, using the library of choice. You can also use it outside Webiny.

With Webiny Admin Area app, you already get a set of element classes to work with, and you can create your own on top of that.

Why Do We Need It?#

Since React is a declarative tool, once a view is defined, you can't modify it from the outside. If you don't have access to the original code, you can't change input labels, validation rules, position of elements, apply conditional rendering, add more UI elements to it, etc. When you use React components from npm packages, you get a black box.

Even if you do manage to get access to the original code (copying from Github, for example), the only way forward is to reimplement the entire view, add your modifications and then somehow replace the original view with your custom one. By using only native React constructs, there's no solid way of making your app truly customizable.

Webiny comes with several ready-made apps. That does not mean that you shouldn't be able to modify them. On the contrary, we want you to be able to modify every single piece of those apps, and we also want you to do it without spending hours digging through our original code.

In the following articles we'll look at concrete examples of using the UI Composer to build and customize views.

Last updated on by Pavel Denisjuk