# Vad UI Builder är: designa gränssnitt som en JSON-fil

> UI Builder är Total.js visuella editor för användargränssnitt: webbappar, instrumentpaneler, flowboards och delar, beskrivna av en JSON-fil och renderade av en webbkomponent, utan serverkod.

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

UI Builder är en **visuell editor för användargränssnitt**. Du drar komponenter till en arbetsyta, konfigurerar och kopplar ihop dem, och resultatet är inte kod utan en **JSON-fil** som beskriver gränssnittet. En liten webbkomponent renderar den filen var som helst, så en UI Builder-design behöver ingen implementation på serversidan. Den är öppen källkod under **MIT-licensen**; editorn är förrådet [totaljs/uibuilder](https://github.com/totaljs/uibuilder), och du kan använda molnversionen på [uibuilder.totaljs.com](https://uibuilder.totaljs.com).

De här sidorna beskriver UI Builder (revision `620107a` av förrådet).

## Vad den är till för

Editorns mallar visar vilka slags gränssnitt den bygger:

| Mall | Användning |
|---|---|
| Web app | en klassisk webbapplikation |
| Dashboard | en instrumentpanel med datawidgetar |
| Flowboard | en tavla kopplad till ett dataflöde (den fungerar med [Total.js Flow](https://www.totaljs.com/flow/)) |
| Part | en återanvändbar bit gränssnitt |

Editorn listar också mallar för mobilappar och HMI-paneler, som är avstängda i den här versionen. Total.js presenterar UI Builder för webbformulär, instrumentpaneler, intranät, IoT-skärmar samt ERP- och CRM-gränssnitt.

## Varför den passar Total.js

- **Designen är data.** En JSON-fil är lätt att lagra i en databas, versionshantera, generera och ge till ett annat verktyg.
- **Den behöver ingen särskild miljö.** Renderaren är en jComponent-webbkomponent, så vilken sida som helst kan visa en design.
- **Dina egna komponenter.** En komponent är en HTML-fil med sin stil, sin kod och sitt inställningsformulär ([bygga en komponent](/en/uibuilder/build-a-component/)).
- **Den integreras** med [Flow](https://www.totaljs.com/flow/) och med [OpenPlatform](/en/openplatform/what-is-openplatform/), och stöder lokalisering.

Fortsätt med [köra editorn](/en/uibuilder/run-the-designer/), [JSON-formatet](/en/uibuilder/the-ui-json-format/) och [rendera en design på din sida](/en/uibuilder/render-an-app-in-your-page/). Den officiella dokumentationen finns på [docs.totaljs.com/uibuilder](https://docs.totaljs.com/uibuilder/).