# Rendre un design UI Builder dans votre propre page

> Affichez un design enregistré n’importe où avec le web component j-uibuilder et l’adresse de son fichier JSON, avec jComponent 20 comme seule exigence.

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

Un design est un fichier JSON ([le format](/en/uibuilder/the-ui-json-format/)), et le rendre ne demande qu’un composant. Le README de l’éditeur le montre avec le web component [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:..."` est l’adresse du fichier JSON du design. La page a besoin de jComponent 20 et du composant `uibuilder` ; l’éditeur lui-même sert une page prête pour cela (`public/render.txt`) qui charge jComponent depuis le 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>
```

Le design apparaît alors là où vous placez la balise : un formulaire, un tableau de bord, un tableau d’un flux. Comme le design est une donnée, votre application peut décider quel fichier afficher par utilisateur ou par client.

## Ce que la page de Forge vous donne déjà

- Le catalogue de composants de Forge a la page [uibuilder](/en/components/uibuilder/), générée à partir du dépôt des composants, avec son readme et son exemple.
- Dans l’éditeur, la liste de composants qu’un design utilise est celle de son champ `components` ; un design ne peut être rendu que là où ces composants sont accessibles.

## Bon à savoir

- Vous n’avez pas besoin de l’éditeur pour rendre : toute page avec jComponent 20 peut le faire.
- Le runtime qui rend un design est `cdn/uibuilder.min@1.js` dans le dépôt de l’éditeur.
- UI Studio, listé parmi les modèles d’applications de Total.js, repose sur la même idée ([apps Total.js](https://www.totaljs.com/apps/)).