Guía de uso — IHTML (Interactive HTML)

1. Primeros pasos

1. Descargá e instalá IHTML (Windows, macOS, Linux o Android), o cloná el repo y corré npm install y npm run dev.
2. El lienzo central es tu escena (uno o más artboards, ver más abajo). La barra superior tiene las herramientas de selección/creación; la barra lateral izquierda muestra tus Capas; la derecha es el Inspector de propiedades del elemento seleccionado; abajo está la Timeline.

Idioma y tema

Arriba a la derecha, junto a las herramientas del lienzo, hay dos selectores:

• Idioma — 8 disponibles (English, Español, Português, Français, Deutsch, Italiano, 日本語, 中文): traduce toda la navegación principal y el Inspector completo (Design/Data/Actions/Physics).
• Tema — seis temas entre claros y oscuros (gris oscuro por defecto).

Los dos se recuerdan entre sesiones (quedan en tu navegador) y son una preferencia del editor — nunca se guardan dentro del proyecto .ihtml ni afectan el HTML exportado.

Crear un elemento

Usá las herramientas de la barra superior (o el panel Elementos de la izquierda) para añadir texto, formas, botones, inputs, tarjetas, navbars y otros componentes ya diseñados. El nuevo elemento aparece seleccionado, con su bounding box visible.

Las herramientas de la barra superior

Herramienta	Qué hace
Select (V)	Seleccionar, arrastrar; arrastrar sobre el fondo dibuja un recuadro de selección múltiple.
Shape (S)	Arrastrá para dibujar un rectángulo vectorial; con Alt sale una elipse.
Text (T)	Un clic crea un elemento de texto en ese punto.
Zoom (Z)	Clic acerca, Alt+clic aleja.
Hand (H)	Panear sin tener que mantener la barra espaciadora.
Pen (P)	Dibujar un path a mano (ver abajo).

Shape y Text vuelven solas a Select después de crear, para que el siguiente clic no cree otro elemento sin querer.

Vectores (formas dibujadas)

Las formas del Shape tool —y las tarjetas de la categoría Shapes del panel Elementos (Rectangle, Ellipse, Triangle, Polygon, Star, Spiral)— son elementos vectoriales de verdad: se exportan como un <svg> con un <path> real, no como un div con bordes redondeados. Triangle/Polygon nacen como polígonos regulares (3 y 6 lados), Star como estrella de 5 puntas, Spiral como espiral abierta. El número de lados/puntas queda fijo al crearlas; para una forma distinta, ajustá los nodos a mano.

• Fill, Stroke y Stroke width se editan en Element Properties, dentro de la pestaña Data del Inspector (aceptan none para dejar sin relleno o sin trazo) — no en la sección Fill/Background de Design, que para un vector no aparece: esa sección pinta el fondo del recuadro que envuelve al dibujo, no el <path> en sí.
• Fill y Stroke traen un swatch de color al lado del campo. El campo de texto sigue mandando (podés seguir escribiendo none para sacar el relleno).
• Los campos numéricos (Stroke width, min/max de un slider, buffer de un Canvas...) se pueden arrastrar para cambiar el valor (icono ⇄ al lado del campo): Shift más fino, Alt más grueso.
• Redimensionar el elemento escala el dibujo: la geometría vive en su propio espacio y el viewBox la estira a la caja.
• La elipse se guarda como cuatro segmentos bezier reales, no como un círculo CSS.
• Clip children to shape (Data > Element Properties): los elementos anidados dentro de este vector quedan invisibles fuera del área del polígono — una máscara de recorte (CSS puro con clip-path). Solo tiene efecto si el vector tiene hijos.
• Animate points (botón ◆ al final de sus propiedades): un vector puede animar su forma entera con keyframes. Toca el botón en distintos puntos de la Timeline tras editar nodos y quedará grabada esa forma como keyframe; el editor interpola cada nodo por separado (morphing suave). Solo interpola bien entre dos formas con la misma cantidad de nodos.

La herramienta Pen (dibujar un path)

• Cada clic sobre el lienzo agrega un vértice recto (esquina).
• Clic y arrastrar le da a ese vértice tiradores bezier simétricos — el gesto clásico para un nodo "suave".
• Enter cierra el path como abierto (una línea).
• Un clic cerca del primer vértice lo cierra como polígono.
• Escape descarta el dibujo entero — no crea ningún elemento.

Al terminar, el path queda directo en modo edición de nodos.

Editar los nodos de un vector existente

Doble clic sobre cualquier elemento vectorial entra en modo edición: un punto blanco arrastrable por cada nodo y un punto azul por cada tirador bezier.

• Arrastrar un nodo (blanco) lo mueve — la curva se mueve entera con él.
• Arrastrar un tirador (azul) cambia solo esa curva.
• Delete borra el nodo seleccionado (nunca por debajo de lo que necesita un path válido: 2 nodos abierto, 3 cerrado).
• Escape sale del modo edición y vuelve a los tiradores normales.

Mover, redimensionar, rotar

• Arrastrá para mover, o usá las flechas (Shift + flecha = 10px). Con varios seleccionados, se mueve todo el grupo junto.
• Tiradores de la bounding box para redimensionar: Shift mantiene proporción, Alt desde el centro, Ctrl ajusta a la grilla.
• El tirador circular rota el elemento.
• Un elemento anidado en un padre rotado/escalado sigue al mouse o las flechas en su propio eje visual, no en el eje de la pantalla.
• Snapping inteligente: se engancha solo al borde/centro de elementos cercanos o a guías manuales, con línea rosa/celeste mientras dura el enganche. Ctrl fuerza el ajuste a la grilla (mutuamente excluyente).
• Regla y guías: arrastrando desde la barra gris de arriba o de la izquierda del lienzo se crea una guía manual (línea celeste). Doble clic la borra; arrastrarla la reposiciona.

Artboards (mesas de trabajo múltiples)

Podés tener más de un artboard en el mismo lienzo, cada uno con su propio tamaño y fondo. El botón "Agregar Artboard" (o el menú contextual del fondo) crea uno nuevo al lado del activo.

• Un clic en el fondo de un artboard lo activa (los elementos nuevos van ahí).
• Arrastrar su etiqueta lo mueve; arrastrar su tirador de esquina lo redimensiona.
• Con flechas y nada seleccionado se mueve el artboard activo; Delete sin selección lo borra (nunca el último que quede).
• Export HTML siempre exporta solo el artboard activo, no el proyecto entero.

Menú contextual (clic derecho)

Un mismo menú compartido, con opciones según dónde hagas clic: sobre un elemento (duplicar, eliminar, copiar/pegar, traer al frente/enviar atrás...), sobre el fondo vacío (pegar, seleccionar todo, agregar artboard), sobre el fondo de un artboard puntual (renombrar, duplicar, eliminar ese), o sobre una tarjeta del panel Elementos (agregarla al lienzo).

• Con 2+ seleccionados: grilla de alineación (izquierda/centro/derecha, arriba/medio/abajo) contra el rectángulo que envuelve a toda la selección.
• Con 3+: además distribuir espaciado horizontal/vertical (el primero y el último quedan fijos y el resto se reparte con huecos idénticos).
• Con 2+ vectores hermanos: grilla de operaciones booleanas (Union, Subtract, Intersect, Exclude) usando fill-rule y clip-path nativos del SVG. El resultado renderiza exacto y anima/exporta como cualquier vector, pero no queda como una sola curva simple editable nodo por nodo.

El Inspector (panel derecho)

Cuatro pestañas exclusivas — Design, Data, Actions y Física: solo se ve una a la vez.

• Design — todo lo visual en un solo scroll continuo: Posición/Tamaño/ Origen/Espaciado, Flex/Grid Layout (aparece al poner Display en Flex o Grid), Apariencia (Relleno, Opacidad, Blend Mode, Borde, Radio, Sombra), Tipografía (incluye buscador de fuentes web, color de texto, text shadow) y Efectos (escala, inclinación, 3D, filtros CSS). Cada sección es un acordeón que arranca abierto solo si ya tiene un valor propio. Alémás, Relleno/Opacidad/Blend Mode/Borde/Radio/Sombra se adaptan al tipo de elemento: un vector no muestra Relleno/Borde/Radio (viven en Data > Element Properties), un texto no muestra Borde/Blend Mode, una imagen/video no muestra Relleno. Si una sección ya tiene un valor real, igual aparece — nunca se pierde acceso a algo en uso.
• Data — propiedades HTML: Element Info (ID/Type/Name), selector de Estado (Normal/Hover/Active), CSS Classes, Element Properties, Custom Attributes y Accessibility.
• Actions — interacciones sin código (sección 4).
• Física — simulación real (sección 4).

Display (Block/Flex/Grid) se elige con 3 botones de ícono; las variantes menos comunes (Inline Block/Flex/Grid, None) viven en el selector "···" al lado. Flex/Grid Layout (Direction, Wrap, Justify, Align, Align Self) y Stroke Style (Solid/Dashed/Dotted/Double) también se eligen con botones de ícono.
Columns/Rows de Grid se editan como lista de pistas arrastrables ("+ Track" agrega, la × saca; mínimo 1); valores tipo auto o minmax(...) se editan como texto normal.
Un hijo de un contenedor Flex/Grid respeta de verdad el layout del padre y mantiene su ancho/alto (no se encoge en silencio).

Propiedades propias del tipo de elemento

En Data, debajo de CSS Classes, aparece Element Properties con las propiedades HTML reales del tipo seleccionado. Ejemplos:

La sección no aparece para tipos sin propiedades propias (Div, Texto). Lo que no está en la lista se sigue editando con Custom Attributes (data-*, aria-*, role, title...). Un valor igual al default no se guarda ni sale en el HTML exportado.

Importar un archivo local (Image/Picture/Video/Audio)

El campo Source (y Poster en Video) trae un botón Choose File: el archivo queda incrustado como data: URI real — portátil entre tu PC y la web sin depender de servidores externos (la app no tiene backend). También podés pegar con Ctrl+V una imagen copiada del navegador o del explorador de archivos: si ya tenés una Image/Picture/Video seleccionada la reemplaza; si no, crea una Image nueva. Pegar un elemento copiado dentro del editor sigue funcionando igual (el editor mira primero si hay imagen en el portapapeles del sistema).

Texto editable en componentes decorativos

Badge, Avatar, Tooltip, Alert Box, Tab Bar y Breadcrumb editan su texto con el campo Content (Design). Tab Bar y Breadcrumb usan una lista separada por comas — Overview,Pricing,FAQ da tres pestañas. Card, Pricing, Navbar y Pagination siguen con contenido de ejemplo fijo (tienen más de un texto propio; queda pendiente una pasada dedicada). Tooltip es un mockup estático para diseñar el aspecto; para un tooltip real armá el par con Acciones (hover → Show / mouseLeave → Hide, con el Tooltip arrancando oculto).

Contenedores semánticos (Header, Footer, Aside, Nav, Main...)

La categoría Semantic (Header, Nav, Main, Aside, Footer, Section, Article, Figure, Figcaption) exporta con su etiqueta HTML real (<header>, <aside>...) — importa para SEO/accesibilidad. Los cinco landmarks (Header/Nav/Main/Aside/Footer) nacen ocupando un borde real del artboard; son solo un punto de partida: se editan como cualquier otro elemento y no traen color ni borde.

Accesibilidad

Debajo de Custom Attributes, la sección Accessibility aplica a cualquier elemento: ARIA Label, ARIA Role (con roles comunes y "(automatic)"), Hide from screen readers (aria-hidden) y Keyboard focusable (tabindex="0"). Los cuatro salen como atributos HTML reales — en el lienzo y en el archivo exportado — sin una sola línea de JavaScript. Para algo más específico (aria-describedby, aria-live...) seguís teniendo Custom Attributes.

Relleno (Fill): color sólido, degradado o imagen

El campo Fill es un botón-resumen (swatch + etiqueta) que abre un popover con pestañas — Solid / Linear / Radial / Conic / Image:

• Solid — un color, con el picker.
• Linear / Radial / Conic — lista de stops (2+ colores con posición 0-100%, "+ Add Stop"), más Angle (Lineal/Cónico) o Center X/Y (Radial).
• Image — una URL o importar un archivo local (data: URI).

El picker de color (el mismo en Fill, Border, Shadow, Text Color, Text Shadow y stops) trae cuadrado Saturación/Luminosidad, slider de Hue y de Alpha (con fondo a cuadros), y un campo de texto que cicla HEX → RGBA → HSLA con un clic — pegar cualquiera de los tres formatos también funciona. En Fill/Border/Text Color/Vector Fill-Stroke, con Solid activo el picker se muestra solo, pegado justo debajo del popover — un único clic para verlo entero, sin tener que abrir el swatch chico aparte.

Línea de degradado sobre el lienzo (con un elemento de Fill Lineal o Radial): arrastrás la línea directo sobre el dibujo, estilo Affinity Designer. Con el checkbox Automático del popover activado (por defecto), elegir Linear o Radial ya la muestra sola, sin apretar nada más; volver a Solid la oculta. La tecla G sigue funcionando como entrada/salida manual, aparte de eso. Lineal = dos puntas arrastrables (la línea deja de estar atada al centro de la caja, limitación real de la sintaxis CSS sorteada con un degradado SVG por detrás); Radial = un tirador central y uno de borde (un círculo, no una elipse); en ambos modos hay un punto por stop (arrastralo para moverlo, doble clic sobre la línea agrega un stop); Escape sale. Escribir un número en Angle/Center X/Y vuelve al modo centrado de siempre. Cónico se queda con el campo de ángulo numérico.

Estados: Normal / Hover / Active

En la pestaña Data, encima de CSS Classes, hay un selector de tres botones. Mientras esté en Hover o Active, todo lo que cambies en Typography/Colors/Borders/Effects/Layout (en Design) se guarda para ese estado. El lienzo lo muestra en vivo (el elemento seleccionado se "fuerza" a mostrar el estado). Se exporta como regla CSS real — #id:hover{...} / #id:active{...} — sin JavaScript.

2. Capas

El panel izquierdo (pestaña Capas) muestra la jerarquía de elementos. Podés agrupar, desagrupar, promover/degradar y reordenar por z-index (traer al frente / enviar atrás).

• Click normal selecciona un solo elemento.
• Ctrl/Cmd+click suma o saca un ítem puntual.
• Shift+click selecciona el rango visible (respeta el anidado).

Ctrl+C / Ctrl+X / Ctrl+V copian, cortan y pegan (con el foco en el lienzo o en Capas). Copiar un padre con su hijo mantiene el vínculo en el pegado. Pegar varias veces separa cada copia un poco en vez de apilarlas encima.

Arrastrar para anidar: soltar un elemento sobre otro lo vuelve su hijo, salvo que el destino sea un "void element" real (<img>, <input>, <br>, <hr>... — no pueden tener contenido); soltarlo ahí lo reordena como hermano. Cualquier otro tipo (<div>, <button>, <section>, <a>...) sí puede ser padre.

Bloquear capas y Guide Layers (estilo After Effects)

• Bloquear (candado en cada fila de Capas): impide seleccionar, mover, redimensionar o rotar ESE elemento desde el lienzo — seguís pudiendo seleccionarlo desde el propio panel de Capas.
• Marcar como Guide Layer (menú contextual): visible y editable en el editor, pero excluido por completo del HTML exportado (junto con cualquier hijo suyo) — útil para reglas, notas o referencias de diseño.

3. Animación (Timeline)

Con muchas capas, la lista de la izquierda (nombres) y las pistas de la derecha (keyframes) se scrollean verticalmente en conjunto, dentro de su franja de altura fija.

Varias animaciones nombradas independientes

IHTML permite timelines separadas e independientes:

• El selector del encabezado muestra la animación activa; al lado están "+" (Add Animation) — que crea una nueva y pide nombre —, el lápiz (Rename) y el tacho (Delete). No se puede borrar la última (el botón queda deshabilitado); borrar una pierde sus keyframes en todos los elementos y pide confirmación.
• Loop y Auto son de la animación seleccionada: Loop vuelve a empezar al llegar al final (apagado, se detiene en el último frame); Auto arranca sola al cargar la página exportada. Una animación nueva no arranca sola: la idea de tener varias es dispararlas con acciones Play Timeline.
• Los keyframes quedan asociados SOLO a la animación activa: la misma propiedad puede tener un keyframeado distinto en cada animación.
• Cambiar de animación refresca la Timeline, el lienzo y el playhead.

Marcadores de acción en la Timeline

El botón del rayo (o doble clic sobre la banda fina bajo la regla) agrega un marcador en la posición del playhead: dispara una acción cuando la reproducción llega a ese milisegundo, sin que el visitante toque nada.

• Se edita en el mismo panel Actions del Inspector (mismos tipos; la fila Trigger desaparece: el "cuándo" es la posición del marcador).
• Se arrastra para moverlo y se borra con Delete del mismo panel.
• Dispara una vez por pasada (con Loop, vuelve a dispararse en cada vuelta).

Para keyframear una propiedad

1. Elegí (o creá) la animación en la que querés trabajar.
2. Seleccioná un elemento y hacé clic en el diamante (◆) junto a la propiedad a animar (posición, opacidad, color, escala...) para activar el seguimiento de keyframes de esa propiedad.
3. Movete a otro punto de la timeline (arrastrando el playhead) y cambiá el valor: se crea un keyframe automáticamente si el modo Auto-Keyframe (botón rojo ◆, atajo R) está activo; si no, usá "Add Keyframe at Playhead".
4. Doble clic sobre un keyframe cicla su curva de easing (linear, ease-in/out, cúbica, back, bounce, elástica...).
5. Espacio reproduce/pausa; los botones de cuadro anterior/siguiente avanzan frame a frame; la duración total se controla en el campo Dur (por animación).

Grabación automática (REC / Auto-Keyframe)

Con R activo, IHTML crea un keyframe en el tiempo del playhead cada vez que modificás una propiedad ya en seguimiento — incluye nodos y handles de un vector (arrastrar un punto o su manija bezier graba el nodo completo). Mientras REC está activo, un badge rojo parpadeante ("● REC") aparece arriba a la derecha.

Seleccionar, arrastrar y copiar/pegar keyframes

• Click en un keyframe lo selecciona; Shift+click suma/saca; marquee sobre espacio vacío selecciona todos los que toque.
• La barra plana entre dos keyframes consecutivos también es seleccionable y arrastrable: mueve el segmento entero conservando el intervalo.
• Arrastrar cerca del playhead o de otro keyframe engancha exacto a ese tiempo (guía verde).
• Ctrl+C/Ctrl+V copian/pegan los keyframe(s) seleccionados en el tiempo del playhead (además de los botones Copiar/Pegar/Duplicar junto al selector de easing); con varios, se conserva su espaciado relativo.

Menú contextual de la Timeline (clic derecho)

• Sobre un keyframe: Copiar, Duplicar, Eliminar, Interpolación (rejilla visual de curvas) y Mover al cabezal.
• Sobre el segmento: Copiar, Duplicar, Eliminar (aplican a los dos extremos como grupo).
• Sobre espacio vacío de una pista: Pegar, en el tiempo bajo el cursor.
• Sobre el nombre de un elemento: el mismo menú de elemento que Capas y el lienzo.
• Sobre la regla: "Extender +1s" agrega un segundo a la duración total.

Archivos (conectado a tu carpeta real)

Junto a la pestaña Timeline está Archivos: un gestor conectado DIRECTO a una carpeta real de tu computadora, como el panel FileSystem de Godot/Unreal/Unity. Elegir carpeta pide la carpeta del sistema (una vez por sesión); click en una imagen, video o audio del árbol lo agrega directo al lienzo como elemento nuevo. Usa la File System Access API: solo Chrome/Edge/Opera por ahora — en Firefox o Safari el botón aparece deshabilitado con una nota.

4. Acciones interactivas (sin código)

En la pestaña Actions del inspector definís qué pasa cuando el usuario interactúa con un elemento en el HTML exportado, sin escribir JavaScript:

• Disparadores: click, hover, mouse enter/leave, doble clic, On Drag Start / On Drag End (un clic normal sin mover no cuenta como arrastre), tecla presionada, scroll, entrar en el viewport, después de un delay, al cargar la página.
• Acciones: mostrar/ocultar/alternar visibilidad, agregar/quitar/alternar una clase CSS, animar una propiedad CSS, reproducir / pausar / ir a un tiempo de una animación nombrada puntual (campo "Animation"), hacer scroll hacia un elemento, fijar un estilo inline, ir a una Página.
• Objetivo: el propio elemento, su contenedor padre, todos los elementos, o un elemento concreto elegido por nombre (el selector Target lista, debajo de las tres opciones fijas, todos los elementos de Capas). No aplica a Play/Pause/Go to Time, Set Variable ni Go to Page: son globales al proyecto.

Páginas (escenas)

La pestaña Páginas del sidebar izquierdo lista los Artboards como páginas navegables — no es un dato nuevo, es una vista dedicada. Clic derecho: mismo menú de Activar/Renombrar/Duplicar/Eliminar que el fondo de un artboard.

• "+ Nueva página" abre un menú: Página en blanco o preset responsive (Tablet vertical/horizontal, Móvil vertical/horizontal).
• Un preset Tablet/Móvil creado con otra página seleccionada queda agrupado como variante responsive de esa página (indentado en Páginas y Capas). Una página en blanco nunca queda anidada. Duplicar una variante mantiene la página padre; borrar una página con variantes las sube a raíz.
• Por defecto solo se ve la página seleccionada (y solo sus capas en Capas). El botón "Solo seleccionada" / "Todas visibles" cambia ambas vistas: con "Todas visibles", las demás páginas se ven en el lienzo como un rectángulo vacío (posición/ tamaño, movible, redimensionable, activable con un clic) sin su contenido real.
• La acción Go to Page oculta la página actual y muestra otra con transición: Fade, Slide (4 direcciones) o instantánea (None), con su duración en ms. En el HTML exportado, solo si el proyecto usa Go to Page en algún lado se empaquetan TODAS las páginas juntas (ocultas salvo la inicial) — un proyecto con varios artboards que no usa Go to Page se exporta exactamente igual que siempre.

Variables de proyecto (contadores y matemáticas)

Arriba de la lista de acciones: Project Variables — valores numéricos con nombre, del proyecto entero. Sirven para contadores, puntajes, pasos de un formulario, etc.

1. Crear la variable con "+ Add Variable" (nombre + valor inicial; el nombre se reduce a letras, números y guiones bajos y no puede romper la sintaxis).
2. Modificarla con Set Variable (math): qué variable, qué operación (= Set to, + Add, − Subtract, × Multiply by, ÷ Divide by, % Remainder of, ⌃ Clamp mínimo, ⌄ Clamp máximo) y con qué número. Dividir por cero deja el valor como estaba.
3. Mostrarla escribiendo {{nombre}} en el campo Content de cualquier elemento: se ve el valor actual en el lienzo y en la página exportada, y se actualiza solo. Un nombre que no corresponde a ninguna variable se deja visible tal cual, para que se note el error.

Un contador completo: variable score = 0, un botón con click → Set Variable → score → + Add → 1, y un texto Puntos: {{score}}. Si ninguna acción modifica una variable, su valor queda horneado en el HTML exportado sin una línea de JavaScript. Los elementos que muestran una variable se repintan en vivo solo si no tienen hijos anidados.

Física (simulación real — gravedad, colisiones, rebote)

La pestaña Física del Inspector le da a cualquier elemento un comportamiento físico real, con el motor Matter.js:

1. Activar física: prende la simulación para ese elemento.
2. Tipo de cuerpo: Dinámico (cae, rebota, choca con otros cuerpos y con los bordes del lienzo) o Estático (fijo — útil como suelo, pared o plataforma).
3. Forma: Rectángulo o Círculo (la forma de colisión, no el aspecto visual).
4. Rebote, Fricción y Densidad: elasticidad, resbalosidad y peso.

• Los cuerpos quedan encerrados en su página/artboard: los cuatro bordes actúan como paredes invisibles.
• Un cuerpo Dinámico se puede agarrar y arrastrar en la página exportada o en Preview; al soltarlo sigue con la física real. Uno Estático no se mueve ni aunque lo "agarres".
• Importante: la física no se simula en vivo mientras editás (el elemento se ve en su posición X/Y, para no competir con el arrastre); arranca en Preview o al abrir el HTML exportado. Un proyecto sin Física no descarga ninguna librería de más.

5. Código personalizado

Dos botones de código en la barra superior, con alcance distinto:

• 💻 Code Editor — CSS/JS por el elemento seleccionado: CSS que se agrega inline al elemento, o un script que corre al hacer clic sobre él en el HTML exportado.
• `</>` Live HTML/CSS — vista en vivo del HTML y CSS de todo el proyecto, editable: escribís y tocás "Aplicar Cambios" para volcarlo al proyecto.
  • Un tag con id existente actualiza ese elemento (contenido, atributos, clases, padre).
  • Un tag nuevo necesita data-type="..." para crearse como elemento real; sin eso se ignora con un aviso.
  • Borrar un tag borra ese elemento.
  • Los estilos que borrés del CSS no se borran solos del elemento — usá el botón de reset de esa sección en el Inspector.
  • Un gradiente/filtro/transform escrito a mano que no calce con el formato exacto que genera el panel se ignora (no es un parser CSS completo, es una vista de ida y vuelta del modelo de datos).
  • "Refrescar" descarta cualquier cambio sin aplicar.

6. Exportar

Hay dos rutas: Export HTML para publicar en la web, y Export (.ihtml) para enviar un documento que se abre con IHTML Mirror.

• 🌐 Export HTML — para la web (hosting, CMS, <iframe>...): diálogo con Single HTML file (un único .html estándar y autocontenido, con el motor embebido, SIN datos de proyecto — más liviano) o Separate HTML + CSS + JS. Este .html funciona en cualquier navegador y hosting.
• 💾 Export — descarga project.ihtml: el documento de IHTML. Lleva el proyecto COMPLETO incrustado (elementos, animaciones, keyframes, acciones, capas, fuentes, imágenes, video). Es a la vez el resultado y la fuente: quien lo recibe lo abre con IHTML Mirror (la app gratuita, escritorio o Android) y vos lo reabrís con Import para seguir editando exacto donde lo dejaste. Un .ihtml no es un archivo para hacer doble clic en Chrome: lo abre Mirror, que entiende el formato. Si necesitás que se vea en un navegador sin instalar nada, usá Export HTML.
• ▶ Preview — abre el resultado en una pestaña nueva sin descargar nada, tomado del estado actual del editor.
• 🖼 Exportar imagen / GIF / video — rasteriza el artboard: imagen fija (PNG, WebP, JPEG), GIF animado o video (MP4, WebM). Elegís FPS y escala.
• 📱 Vista previa en el móvil — muestra un QR; escaneás con el teléfono y ves el proyecto en vivo (misma red, recarga sola al editar).

Los dos son independientes del editor: llevan solo un runtime mínimo generado a partir del mismo motor de animación, así que el resultado anima exactamente igual que la vista previa.

7. Importar

📂 Import acepta tanto .ihtml (detecta el proyecto incrustado automáticamente) como un .json exportado con versiones anteriores del editor (compatibilidad hacia atrás). Si el archivo no tiene la forma esperada (le falta elements, o no es un JSON/.ihtml válido), el editor lo rechaza con un mensaje explicando qué está mal, sin tocar el proyecto que tenías abierto.

Además, IHTML puede reconstruir un diseño a partir de otros formatos y traerlo como elementos editables en un artboard nuevo:

• HTML real (clic derecho sobre un .html en el Gestor de Archivos): se mide con un iframe y cada nodo se convierte a su elemento IHTML, conservando jerarquía y estilos.
• SVG (formas, texto e imágenes) — el camino recomendado para traer un frame de Figma (exportalo como SVG).
• Diseños de Sketch (.sketch), Penpot (.penpot) y libros EPUB.

8. Formato del proyecto (incrustado en .ihtml, o el .json viejo)

Referencia rápida de la estructura:

// project: name, version, artboards[], animations[], grid, classes
{
  "project": { "name": "Mi Proyecto", "artboards": [ ... ], "animations": [ ... ], ... },
  "activeArtboardId": "artboard-1",
  "activeAnimationId": "anim-1",
  "elements": [
    {
      "id": "elem-172...-a1b2c", "type": "text",
      "parentId": null, "artboardId": "artboard-1",
      "styles": { "left": 100, "top": 50, "width": 300, ... },
      "keyframes": { "anim-1": { "opacity": [
        { "time": 0, "value": 0, "easing": "linear" },
        { "time": 1000, "value": 1, "easing": "easeOutCubic" } ] } },
      "actions": [ { "trigger": "click", "type": "toggleClass", ... } ]
    }
  ]
}

Todos los valores numéricos de styles/keyframes van sin unidad (left: 100, no "100px"); el editor agrega px/deg/etc. Al importar, el editor normaliza valores con unidad y migra proyectos viejos (artboard único, animaciones planas) automáticamente.

9. Atajos de teclado

10. API pública en tiempo de ejecución

Cuando el proyecto tiene alguna animación o acción, el HTML/.ihtml exportado expone window.ihtmlDocument — una API pública, estable y documentada para controlarlo desde FUERA del propio no-code (un script tuyo, una página que lo embebe, o automatización de navegador):

ihtmlDocument.playTimeline('Bounce'); // reproduce esa animación nombrada
ihtmlDocument.pauseTimeline('Bounce');
ihtmlDocument.gotoTimeInTimeline(500, 'Bounce'); // ms, nombre
ihtmlDocument.isTimelinePlaying('Bounce'); // true/false
ihtmlDocument.timelineNames(); // ['Animation 1', 'Bounce', ...]
ihtmlDocument.getElementById('elem-172...'); // el nodo DOM real
ihtmlDocument.triggerAction('elem-172...', 'click'); // dispara sus acciones "click"
ihtmlDocument.triggerAction('elem-172...', 'keydown', 'Escape');

ihtmlDocument.getVariable('score'); // valor actual
ihtmlDocument.setVariable('score', 10); // lo cambia y repinta los {{score}}
ihtmlDocument.variableNames(); // ['score', ...]

Los nombres son los que pusiste en el editor (selector de la Timeline, panel Project Variables), no los ids internos.

Embebido por <iframe> del mismo origen (la página que lo embebe y el archivo exportado sirven desde el mismo dominio):

const win = document.getElementById('miIframe').contentWindow;
win.ihtmlDocument.playTimeline('Bounce');

11. MCP — control por agentes de IA

IHTML expone un servidor MCP (Model Context Protocol) que le da a un agente de IA — Claude Code u otro cliente MCP — control directo sobre el editor ya abierto (el navegador en desarrollo, o la app de escritorio), sin simular clics de mouse contra una ventana: el mismo patrón que ya usan editores como Godot o Blender.

Para activarlo, un archivo .mcp.json en la raíz del proyecto apunta al servidor:

{
  "mcpServers": {
    "ihtml-editor": { "command": "node", "args": ["bridge/mcp-server.js"] }
  }
}

Con el editor abierto (navegador o app de escritorio), el agente ya puede llamar herramientas como:

• get_scene — lee el artboard activo y todos los elementos.
• add_element / set_text / set_style / delete_element — crea y edita elementos (set_style acepta un breakpoint para escribir un override responsive en vez del valor base).
• set_breakpoint / select_element — cambia el breakpoint activo o la selección, igual que un click real.
• set_canvas_size / fit_canvas_height — redimensiona el artboard (alto propio por breakpoint) o lo ajusta al contenido real.
• apply_template — carga una plantilla del catálogo.
• get_html — devuelve el HTML/CSS/JS que exportaría el proyecto, sin escribir ningún archivo.