# Crea tu primer PDF

Renderice un PDF a partir de una plantilla HTML/CSS existente: pruebe los datos, publique y descargue el resultado.

## Antes de empezar
Para ayudarlo a familiarizarse con Tembuilder, lo guiaremos en la creación de su primer PDF a partir de una plantilla de factura existente. Intentará editar el contenido, cambiar los datos y obtener una vista previa del resultado antes de generar un PDF, todo dentro de la aplicación.

Antes de comenzar, inicia sesión y ve al panel de control **Plantillas**. Puede agregar una plantilla a su proyecto utilizando cualquiera de los métodos siguientes.

## 1. Elige y abre una plantilla
Utilice un archivo ZIP existente o elija una plantilla de Gallery.

### Método 1: Importar un archivo ZIP

[Descargue la plantilla de factura (.zip)](/docs/examples/invoice-template.zip), haga clic en **Importar** en **Plantillas** y seleccione el archivo descargado. Ingrese un nombre y un slug para la plantilla, luego espere a que finalice la importación.

<figure class="doc-sim" aria-label="Importe el ZIP, luego abra la nueva plantilla en Plantillas.">
<div class="sim-location"><span>Plantillas</span><span>TEMBUILDER</span></div>
<div class="sim-stage"><div class="sim-template-head"><strong>Plantillas</strong><div class="sim-actions"><span class="sim-control sim-focus">↥   Importar</span><span class="sim-control sim-dark">＋   Nueva plantilla</span></div></div><div class="sim-template-card"><span class="sim-file">▤</span><div><strong>Mi primera factura</strong><small>mi-primera-factura</small></div><span class="sim-badge">Borrador</span><span class="sim-arrow">↗</span></div></div>
<figcaption>Plantillas · Importar</figcaption>
</figure>

### Método 2: Elija una plantilla de Gallery

Abra **Gallery**, seleccione una plantilla de factura y obtenga una vista previa del diseño. Agréguelo a su proyecto, ingrese un nombre y un slug, y espere a que se complete.

<figure class="doc-sim" aria-label="Obtenga una vista previa de una plantilla Gallery y seleccione Usar plantilla para agregarla a su proyecto.">
<div class="sim-stage"><div class="sim-gallery-dialog"><div class="sim-gallery-heading"><div><strong>Factura de servicio monocromática</strong><small>Gallery · Factura</small></div><span aria-hidden="true">×</span></div><div class="sim-gallery-preview"><div class="sim-paper"><div class="sim-paper-brand">Tembuilder</div><div class="sim-invoice-title">FACTURA <small>TB-2026-0042</small></div><div class="sim-bill"><small>FACTURAR A</small><b>Tembuilder</b></div><div class="sim-paper-lines"><i></i><i></i><i></i></div><div class="sim-total"><small>TOTAL VENCIDO</small><b>$597.20</b></div></div></div><div class="sim-gallery-footer"><small>A4 · 1 página</small><span class="sim-control sim-dark sim-focus">Usar plantilla</span></div></div></div>
<figcaption>Gallery → Usar plantilla</figcaption>
</figure>

### Abre la plantilla en el editor

Después de agregar una plantilla usando cualquiera de los métodos, ábrala en **Plantillas** para comenzar a editar.

En el editor, seleccione una sección en **Structure**. Las pestañas HTML, CSS, Props y Config disponibles dependen de su selección. Intente cambiar una etiqueta en Props si la plantilla proporciona ese campo, luego verifique la vista previa.

<figure class="doc-sim" aria-label="Seleccione Partes de facturación en Structure → abra Props → edite el valor de etiqueta.">
<div class="sim-location"><span>Editor / Structure → Props</span><span>TEMBUILDER</span></div>
<div class="sim-stage"><div class="sim-editor"><div class="sim-tree"><div class="sim-panel-title">▦   ESTRUCTURA <span>＋</span></div><div class="sim-tree-row">⌄   Global</div><div class="sim-tree-child sim-muted">▤   Pie de página</div><div class="sim-tree-row">⌄ 01 Factura <small>5</small></div><div class="sim-tree-child sim-muted">▤   Cabecera de factura</div><div class="sim-tree-child sim-selected">▤   Partes de facturación <small>4p</small></div><div class="sim-tree-child sim-muted">▤   Elementos de factura</div></div><div class="sim-properties"><div class="sim-tabs"><span>HTML</span><span>CSS</span><span class="sim-active">{} Props</span><span>Config</span></div><div class="sim-prop-body"><small class="sim-label">SECCIÓN</small><strong>Partes de facturación</strong><div class="sim-prop-card"><div class="sim-prop-name"><b>deEtiqueta</b><small>Texto <svg class="sim-chevron" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="m4 6 4 4 4-4" /></svg></small></div><div class="sim-prop-value"><small class="sim-label">VALOR</small><span class="sim-input sim-focus">DE TEMBUILDER</span><div class="sim-embed">{{ props.fromLabel }}</div></div></div></div></div></div></div>
<figcaption>Structure → Props</figcaption>
</figure>

## 2. Pruebe los datos y obtenga una vista previa
Abra **Parameters → Schema** para inspeccionar los nombres de campo y los valores predeterminados. Mantenga los nombres sin cambios. **Diseño** muestra las ediciones de diseño actuales.

**Guarde** la plantilla antes de abrir **PDF**. La vista previa de PDF utiliza el contenido de la plantilla guardada y los valores de los parámetros del editor, inicialmente completados desde Defaults. Después de guardar otro cambio, regenera el PDF para verlo; la vista previa anterior no se actualiza automáticamente. La vista previa no consume cuota de renderizado.

Las entradas en **Run** están separadas de la vista previa de PDF. Para probar nuevos valores de Run, renderice e inspeccione el resultado de ese trabajo en los pasos 3 y 4.

<figure class="doc-sim" aria-label="Parameters muestra la estructura de datos. La vista previa de PDF muestra el diseño de PDF.">
<div class="sim-location"><span>Editor / Parameters → Vista previa de PDF</span><span>TEMBUILDER</span></div>
<div class="sim-stage"><div class="sim-preview-layout"><div class="sim-data"><div class="sim-tabs"><span class="sim-active">Parameters <small>11</small></span></div><div class="sim-schema-tabs"><span>⚙Schema</span><span>{} Payload</span></div><div class="sim-fields"><div><b>Número de factura</b><small>Texto</small></div><span class="sim-input">TB-2026-0042</span><div><b>cliente</b><small>Objeto</small></div><div class="sim-nested"><b>empresa</b><span class="sim-input">Tembuilder</span></div><div><b>elementos de línea</b><small>Matriz</small></div></div></div><div class="sim-preview"><div class="sim-tabs"><span>Diseño</span><span class="sim-active">PDF</span></div><div class="sim-paper"><div class="sim-paper-brand">Tembuilder</div><div class="sim-invoice-title">FACTURA <small>TB-2026-0042</small></div><div class="sim-bill"><small>FACTURAR A</small><b>Tembuilder</b></div><div class="sim-paper-lines"><i></i><i></i><i></i></div><div class="sim-total"><small>TOTAL VENCIDO</small><b>$597.20</b></div></div></div></div></div>
<figcaption>Parameters · Schema → PDF</figcaption>
</figure>

La [muestra JSON](/docs/examples/invoice-data.json) usa `invoiceNumber`, `seller`, `customer` y `lineItems`, que coinciden con el ZIP anterior. Para otras plantillas, consulte su propio Parameters. Al llamar a API, coloque el objeto de datos dentro de `parameters`.

## 3. Guardar, publicar y generar
1. **Guarde** sus cambios, seleccione la versión correcta y **publíquela**.
2. Cree una clave API de proyecto con permiso `template:render` si es necesario.
3. Abra **Run**, seleccione la clave, versión y variante e ingrese los datos.
4. Haga clic en **Renderizar** y espere a que finalice.

<figure class="doc-sim" aria-label="Guarde y publique la versión → seleccione una clave, versión y variante en Run → Renderizar.">
<div class="sim-location"><span>Editor / Publicar → Run</span><span>TEMBUILDER</span></div>
<div class="sim-stage"><div class="sim-publish-bar"><div><strong>Mi primera factura</strong><span class="sim-badge">v1</span></div><div class="sim-actions"><span class="sim-control">Guardar</span><span class="sim-control sim-dark sim-focus">Publicar</span></div></div><div class="sim-run"><div class="sim-panel-title">ϟ   CORRER</div><div class="sim-run-body"><div class="sim-pickers"><div><small class="sim-label">LLAVE API</small><span class="sim-input">Clave de mi proyecto <svg class="sim-chevron" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="m4 6 4 4 4-4" /></svg></span></div><div><small class="sim-label">VERSIÓN</small><span class="sim-input">v1 <svg class="sim-chevron" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="m4 6 4 4 4-4" /></svg></span></div><div><small class="sim-label">VARIANTE</small><span class="sim-input">Estándar <svg class="sim-chevron" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="m4 6 4 4 4-4" /></svg></span></div></div><div class="sim-code"><span>{</span><span>  "NúmeroFactura": "TB-2026-0042",</span><span>  "cliente": {</span><span>    "empresa": "Tembuilder"</span><span>  }, …</span><span>}</span></div><div class="sim-render-footer"><span class="sim-badge sim-success">● Publicado</span><span class="sim-control sim-dark sim-focus">ϟ   Renderizar</span></div></div></div></div>
<figcaption>Publicar → Run → Renderizar</figcaption>
</figure>

> Los renders reales requieren una versión publicada. Cada renderizado exitoso consume cuota; una vista previa funcional por sí sola no significa que una plantilla esté lista para renderizarse.

## 4. Descargue y verifique
Después del éxito, abra el resultado y descargue PDF. También puedes encontrar el trabajo en **Renders**. Verifique la primera página, la última página y las filas de datos en el archivo descargado.

<figure class="doc-sim" aria-label="Abra un renderizado completo para descargar el PDF. Encuentra resultados anteriores en Renders.">
<div class="sim-location"><span>Run / Historia · Renders</span><span>TEMBUILDER</span></div>
<div class="sim-stage"><div class="sim-result"><div class="sim-result-top"><span class="sim-success-mark">✓</span><div><strong>Mi primera factura</strong><small>v1 · Estándar</small></div><span class="sim-badge sim-success">Completado</span></div><div class="sim-result-file"><span class="sim-file">PDF</span><div><strong>factura.pdf</strong><small>solicitud/pdf</small></div><span class="sim-control sim-dark sim-focus">↓   Descargar</span></div></div></div>
<figcaption>Renders → Descargar</figcaption>
</figure>

Si falla, lea los detalles del error antes de volver a intentarlo. Cada clic en Render puede crear un nuevo trabajo. Consulte [errores comunes](/docs/es/help/common-errors/) si no puede identificar la causa.