# Encuentra tu camino en el editor

Conozca Structure, pestañas de edición, vistas previas y datos de entrada para saber por dónde empezar en el editor.

Al abrir una plantilla se reúnen su estructura, herramientas de edición y vista previa. Seleccione una parte para editar, luego mire la vista previa para ver el resultado sin salir del editor.

Comience en **Structure** para seleccionar qué editar, use las pestañas al lado para realizar cambios, luego abra **Run** para generar un PDF. Las siguientes ilustraciones muestran cada área en contexto.

## 1. Structure: elige qué editar

**Structure** está a la izquierda. Muestra las páginas y secciones que componen la plantilla. Al seleccionar un elemento se abren sus opciones de edición en el panel al lado.

- **Global** contiene configuraciones compartidas en toda la plantilla.
- **Página** representa una página en el diseño, con sus secciones dentro.
- **Sección** es un bloque de contenido, como detalles del cliente o una tabla de servicios.
- **Encabezado/pie de página** contiene contenido del encabezado o pie de página cuando la plantilla lo usa.

Por ejemplo, seleccione **Partes de facturación** para editar etiquetas en la sección de detalles del cliente. Seleccione **Global** para configuraciones compartidas como fuentes o el fondo.

<figure class="doc-sim data-assets-illustration tour-illustration" aria-label="Structure → seleccione una sección para abrir sus herramientas de edición">
<div class="sim-stage"><div class="sim-panel tour-tree"><div class="ds-head"><strong>ESTRUCTURA</strong><span class="sim-control">＋</span></div><div class="tour-tree-row">⌄   Global <span class="sim-badge">1/2</span></div><div class="tour-tree-row tour-child">▤   Pie de página</div><div class="tour-tree-row">⌄   01 Página <span class="sim-badge">3</span></div><div class="tour-tree-row tour-child">▤   Título</div><div class="tour-tree-row tour-child sim-selected sim-focus">▤   Contenido <span class="sim-badge">4p</span></div><div class="tour-tree-row tour-child">▤   Resumen</div></div></div>
<figcaption>Structure → seleccione una sección para abrir sus herramientas de edición</figcaption>
</figure>

## 2. HTML, CSS, Props y Config

Después de seleccionar un elemento en Structure, el siguiente panel muestra sus pestañas disponibles:

- **HTML**: el contenido y estructura de la sección.
- **CSS**: presentación, como colores, tamaños de fuente y espaciado.
- **Props**: valores guardados con la plantilla, a menudo etiquetas, colores o texto reutilizable.
- **Config**: configuración para el elemento seleccionado, como márgenes, fondos o saltos de página.

Con una plantilla existente, abra **Props** para cambiar una etiqueta sin editar HTML/CSS. La siguiente ilustración muestra un puntal `heading` en la sección seleccionada; su HTML lee el valor a través de `{{ props.heading }}`.

Las pestañas disponibles dependen de su selección. **Global** tiene Props y Config, mientras que una sección puede tener HTML, CSS, Props y Config. Una variante que hereda de la base puede ofrecer menos opciones de edición.

<figure class="doc-sim data-assets-illustration tour-illustration" aria-label="Sección → Props → valor utilizado en HTML">
<div class="sim-stage"><div class="sim-panel"><div class="sim-tabs tour-tabs"><span>HTML</span><span>CSS</span><span class="sim-active">Props</span><span>Config</span></div><div class="ds-head"><strong>SECCIÓN · Contenido</strong></div><div class="sim-prop-card ds-field"><div class="sim-prop-name"><b>título</b><span class="ds-type">Texto</span></div><div class="sim-prop-value"><small class="sim-label">VALOR</small><span class="sim-input sim-focus">Título del documento</span><span class="sim-embed">{{ props.heading }}</span></div></div></div></div>
<figcaption>Sección → Props → valor utilizado en HTML</figcaption>
</figure>

## 3. Diseño y PDF: ver el resultado

La vista previa al lado del panel de edición tiene dos modos: **Diseño** y **PDF**.

**Diseño** te ayuda a ver cómo encajan las secciones mientras trabajas. **PDF** muestra el documento como páginas, lo que resulta útil para comprobar los márgenes, encabezados, pies de página y el contenido que pasa a la página siguiente.

En **Diseño**, trabajas con las páginas y secciones de la plantilla. **PDF** muestra el resultado paginado, incluidas las hojas adicionales creadas cuando el contenido se extiende más allá de una página.

<figure class="doc-sim data-assets-illustration tour-illustration" aria-label="El diseño muestra la estructura · PDF muestra hojas paginadas">
<div class="sim-stage"><div class="sim-panel"><div class="sim-tabs tour-tabs"><span>Diseño</span><span class="sim-active sim-focus">PDF</span></div><div class="tour-sheets"><div><small>Página 1</small><div class="tour-sheet"><b>Tembuilder</b><span class="tour-line"></span><span class="tour-line"></span><span class="tour-line"></span><span class="tour-line"></span><small>1 / 2</small></div></div><div><small>Página 2</small><div class="tour-sheet"><b>Tembuilder</b><span class="tour-line"></span><span class="tour-line"></span><span class="tour-line"></span><span class="tour-line"></span><small>2 / 2</small></div></div></div></div></div>
<figcaption>El diseño muestra la estructura · PDF muestra hojas paginadas</figcaption>
</figure>

**Diseño** refleja tus ediciones actuales. **PDF** muestra el contenido de la plantilla guardada, así que guarde el diseño y regenere la vista previa de PDF después de los cambios. Los parámetros de vista previa provienen de los valores del editor, inicialmente Defaults; Los valores ingresados ​​en Run se aplican solo a los trabajos Run. Una vista previa anterior de PDF no se actualiza automáticamente.

## 4. Parameters: datos de cada documento

**Parameters** está a la derecha. Muestra los datos que acepta la plantilla, como el nombre del cliente, el número de factura o la lista de servicios.

Elija **Schema** para inspeccionar campos, tipos y valores predeterminados. Elija **Payload** para ver los datos como JSON. Los nombres de los campos deben coincidir con las expresiones utilizadas en el HTML de la plantilla.

Por ejemplo, un campo llamado `recipient` proporciona la expresión `{{ params.recipient }}` para su HTML. Su valor predeterminado se encuentra en Schema; Los datos para cada PDF se ingresan en Run.

Consulte [Parameters y Props](/docs/es/data/parameters-props/) para obtener ayuda para decidir cuál usar.

<figure class="doc-sim data-assets-illustration tour-illustration" aria-label="Parameters → Schema / Payload">
<div class="sim-stage"><div class="sim-panel"><div class="ds-head"><strong>Parameters</strong><span class="sim-control">＋ Agregar</span></div><div class="sim-tabs"><span class="sim-active">Schema</span><span>Payload</span></div><div class="sim-prop-card ds-field"><div class="sim-prop-name"><b>destinatario</b><span class="ds-type">Texto</span></div><div class="sim-prop-value"><small class="sim-label">PREDETERMINADO</small><span class="sim-input sim-focus">Tembuilder</span><span class="sim-embed">{{ params.recipient }}</span></div></div></div></div>
<figcaption>Parameters → Schema / Payload</figcaption>
</figure>

## 5. Run y la historia

Después de guardar y publicar la plantilla, abra **Run** para elegir una clave, versión y variante, e ingrese datos para generar un PDF. Siga [Crea tu primer PDF](/docs/es/getting-started/first-pdf/) cuando quieras probar ese flujo de trabajo.

Cuando revise su trabajo, use el historial de la plantilla para los cambios de diseño guardados y **Renders** para los trabajos PDF y sus resultados. Esto le ayuda a encontrar la versión de diseño o el archivo generado que necesita.

<figure class="doc-sim data-assets-illustration tour-illustration" aria-label="Guardar → Publicar → Run · Renders mantiene los resultados">
<div class="sim-stage"><div class="sim-panel"><div class="ds-head"><strong>Mi plantilla <span class="sim-badge">v1</span></strong><div class="tour-actions"><span class="sim-control">Guardar</span><span class="sim-control sim-dark">Publicar</span></div></div><div class="ds-head"><strong>CORRER</strong><span class="sim-control sim-focus">ϟRun</span></div><div class="ds-run-fields"><div><small>VERSIÓN</small><span class="sim-input">v1</span></div><div><small>VARIANTE</small><span class="sim-input">Estándar</span></div></div><div class="ds-code"><code>{ "recipient": "Tembuilder" }</code></div><div class="ds-rows"><div><span>Renders</span><small>PDF · Completado ↗</small></div></div></div></div>
<figcaption>Guardar → Publicar → Run · Renders mantiene los resultados</figcaption>
</figure>