# Renderizar un diseño de UI Builder en tu propia página

> Muestra un diseño guardado en cualquier sitio con el web component j-uibuilder y la dirección de su archivo JSON, con jComponent 20 como único requisito.

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

Un diseño es un archivo JSON ([el formato](/en/uibuilder/the-ui-json-format/)), y renderizarlo es un solo componente. El README del editor lo muestra con el 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:..."` es la dirección del archivo JSON del diseño. La página necesita jComponent 20 y el componente `uibuilder`; el propio editor sirve una página lista para esto (`public/render.txt`) que carga jComponent desde la 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>
```

Entonces el diseño aparece donde pongas la etiqueta: un formulario, un panel, un tablero de un flujo. Como el diseño son datos, tu aplicación puede decidir qué archivo mostrar por usuario o por cliente.

## Lo que ya te da la página de Forge

- El catálogo de componentes de Forge tiene la página [uibuilder](/en/components/uibuilder/), generada a partir del repositorio de los componentes, con su readme y ejemplo.
- En el editor, la lista de componentes que usa un diseño es la de su campo `components`; un diseño solo puede renderizarse donde se pueda llegar a esos componentes.

## Conviene saber

- No necesitas el editor para renderizar: cualquier página con jComponent 20 puede hacerlo.
- El runtime que renderiza un diseño es `cdn/uibuilder.min@1.js` en el repositorio del editor.
- UI Studio, que aparece entre las plantillas de aplicaciones de Total.js, se apoya en la misma idea ([aplicaciones de Total.js](https://www.totaljs.com/apps/)).