# Rendera en UI Builder-design på din egen sida

> Visa en sparad design var som helst med webbkomponenten j-uibuilder och adressen till dess JSON-fil, med jComponent 20 som enda krav.

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

En design är en JSON-fil ([formatet](/en/uibuilder/the-ui-json-format/)), och att rendera den är en enda komponent. Editorns README visar det med webbkomponenten [j-uibuilder](https://componentator.com/components/j-uibuilder/):

```html
<ui-component name="uibuilder" config="url:https://uibuilder.totaljs.com/render.json"></ui-component>
```

`config="url:..."` är adressen till designens JSON-fil. Sidan behöver jComponent 20 och komponenten `uibuilder`; editorn själv serverar en färdig sida för detta (`public/render.txt`) som laddar jComponent från CDN:

```html
<link href="https://cdn.componentator.com/spa.min@20.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.componentator.com/spa.min@20.js"></script>
```

Sedan visas designen där du placerar taggen: ett formulär, en instrumentpanel, en tavla för ett flöde. Eftersom designen är data kan din applikation avgöra vilken fil som ska visas per användare eller per kund.

## Vad Forges sida redan ger dig

- Forges komponentkatalog har sidan [uibuilder](/en/components/uibuilder/), genererad från komponentförrådet, med dess readme och exempel.
- I editorn är listan över komponenter som en design använder den i dess fält `components`; en design kan bara renderas där dessa komponenter går att nå.

## Bra att veta

- Du behöver inte editorn för att rendera: vilken sida som helst med jComponent 20 kan göra det.
- Körtiden som renderar en design är `cdn/uibuilder.min@1.js` i editorns förråd.
- UI Studio, som finns bland Total.js appmallar, bygger på samma idé ([Total.js-appar](https://www.totaljs.com/apps/)).