# Czym jest UI Builder: projektuj interfejsy jako plik JSON

> UI Builder to wizualny edytor Total.js dla interfejsów użytkownika: aplikacji webowych, dashboardów, flowboardów i części, opisanych plikiem JSON i renderowanych przez web component, bez kodu po stronie serwera.

Framework: uibuilder
Product: UI Builder (uibuilder@1)
Language: pl
Content-SHA256: d15eaefd2fc745d47473686500c718edac2cf92e1ff0dbcb60d087fbc49ee8cb
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: 
Review: not-recorded

UI Builder to **wizualny edytor interfejsów użytkownika**. Przeciągasz komponenty na płótno, konfigurujesz je i łączysz, a wynikiem nie jest kod, lecz **plik JSON** opisujący interfejs. Mały web component renderuje ten plik wszędzie, więc projekt UI Builder nie wymaga implementacji po stronie serwera. Jest open source na **licencji MIT**; edytorem jest repozytorium [totaljs/uibuilder](https://github.com/totaljs/uibuilder), a wersji chmurowej możesz używać pod adresem [uibuilder.totaljs.com](https://uibuilder.totaljs.com).

Te strony opisują UI Builder (rewizja `620107a` repozytorium).

## Do czego służy

Szablony edytora pokazują rodzaje interfejsów, które buduje:

| Szablon | Zastosowanie |
|---|---|
| Web app | klasyczna aplikacja webowa |
| Dashboard | dashboard z widżetami danych |
| Flowboard | tablica połączona z przepływem danych (działa z [Total.js Flow](https://www.totaljs.com/flow/)) |
| Part | wielokrotnego użytku fragment interfejsu |

Edytor wymienia też szablony aplikacji mobilnych i paneli HMI, które w tej wersji są wyłączone. Total.js prezentuje UI Builder do formularzy WWW, dashboardów, intranetów, ekranów IoT oraz interfejsów ERP i CRM.

## Dlaczego pasuje do Total.js

- **Projekt to dane.** Plik JSON łatwo zapisać w bazie danych, wersjonować, generować i przekazać innemu narzędziu.
- **Nie wymaga specjalnego środowiska.** Renderer to web component jComponent, więc każda strona może pokazać projekt.
- **Własne komponenty.** Komponent to jeden plik HTML ze stylem, kodem i formularzem ustawień ([tworzenie komponentu](/en/uibuilder/build-a-component/)).
- **Integruje się** z [Flow](https://www.totaljs.com/flow/) i z [OpenPlatform](/en/openplatform/what-is-openplatform/) oraz obsługuje lokalizację.

Przejdź do [uruchamiania edytora](/en/uibuilder/run-the-designer/), [formatu JSON](/en/uibuilder/the-ui-json-format/) i [renderowania projektu na Twojej stronie](/en/uibuilder/render-an-app-in-your-page/). Oficjalna dokumentacja jest pod adresem [docs.totaljs.com/uibuilder](https://docs.totaljs.com/uibuilder/).