Guía del Core

Core y lenguaje DEKS

Integra el documento, los comandos y el renderer sin acoplar tu producto a un backend específico.

Última actualización: 22 de agosto de 2026

Un boundary portable

Estos paquetes públicos comparten el mismo contrato y están disponibles en npm. El documento canónico pasa del código al renderer y a React sin adaptadores ni formatos paralelos.

  • @deks-js/document: DeksDocument, comandos, validación, JSON Schema y archivos .deks.
  • @deks-js/renderer-core: snapshots efímeros, preview, onion skin, seek, layout y playback imperativo.
  • @deks-js/react: DeksPresenter declarativo para aplicaciones React.

El movimiento se declara por rol —in, out y morph— y se hereda: el documento lleva una declaración completa en motion, y una slide o el estado de un elemento sólo declaran lo que cambian. No existe un arreglo de transiciones: una frontera son dos slides adyacentes.

Cada rol espera motionBeatMs * delayBeats + delayMs: las dos unidades se suman. La musical sigue el tempo de la presentación, así que «empieza cuando termine la otra» sobrevive a un cambio de ritmo; la absoluta fija un instante. Además de fade,slide y scale, la presencia admite crop, que mueve el contenido dentro de la caja del elemento, y wipe, que deja el elemento quieto y mueve el borde de la máscara sobre él.

JSON es la única fuente de verdad portable. Tablas relacionales, estado del renderer y recursos del host son proyecciones que deben reconstruir el mismo DeksDocument sin pérdida.

Renderiza un documento

render-launch.ts
import {
  DeksPresentation,
  assertDeksDocument
} from "@deks-js/document";
import { RendererCore } from "@deks-js/renderer-core";

const presentation = new DeksPresentation({
  name: "Launch",
  canvas: { width: 1600, height: 900 }
});
const title = presentation.defineElement({
  id: "title", kind: "text", name: "Title",
  defaults: {
    content: "Slides que la IA puede automatizar",
    fontFamily: "Poppins", fontSize: 64, fontWeight: 700,
    lineHeight: 1.1, letterSpacing: 0,
    horizontalAlignment: "left", verticalAlignment: "top",
    overflowMode: "hidden", fill: "#f2f1ec"
  }
});
const cover = presentation.addSlide({ id: "cover", name: "Cover" });
cover.place(title, { x: 96, y: 120, width: 720, height: 120 });

const document = presentation.toDocument();
assertDeksDocument(document);
const renderer = new RendererCore();
renderer.mount(container);
renderer.renderSlide(document, cover.id);

El host conserva la instancia de RendererCore y entrega el documento canónico. No la remonta en cada cambio: así preserva playback, selección y demás estado efímero de la interfaz.

Los assets pertenecen al host

El documento conserva referencias serializables y el host las resuelve antes de renderizar. Una integración puede aceptar Blob, bytes o una URL HTTPS en su facade y convertirlos en una referencia discriminada; el renderer recibe finalmente una URL blob: o HTTPS utilizable y nunca hace fetch por su cuenta.

Si el host crea object URLs, también es responsable de reutilizarlas y ejecutarURL.revokeObjectURL cuando el asset deje de usarse. Consulta la guía de archivos y assets.

Presenter React

Mostrar una presentación es entregar el documento canónico a un componente y elegir sus controles. No hay estado de reproducción que el host tenga que administrar.

deck-preview.tsx
import { DeksPresenter } from "@deks-js/react";
import "@deks-js/react/styles.css";

export function DeckPreview({ presentation }: { presentation: DeksDocument }) {
  return (
    <DeksPresenter
      presentation={presentation}
      variant="embedded"
      initialSlideId="cover"
      showControls
      fullScreen={false}
      onSlideChange={(slideId, index) => track("slide", { slideId, index })}
    />
  );
}

El comportamiento se declara por props: variant elige entre incrustado e inmersivo,showControls apaga la barra cuando el host dirige la navegación,fullScreen hace la pantalla completa declarativa y reversible,initialSlideId abre en un checkpoint concreto y onSlideChange avisa cada cambio. assetResolver mantiene los assets del lado del host: el renderer nunca hace fetch por su cuenta.

El mismo contrato gobierna el modo presentación del editor web, la vista pública de un enlace compartido y los previews de /examples: una sola superficie de presentación, no tres implementaciones parecidas.

Desktop

DEKS Desktop abre y guarda archivos .deks directamente en tu equipo. Su editor y MCP funcionan en local, sin cuenta ni conexión con DEKS Cloud. Los instaladores para macOS, Windows y Linux se distribuyen desde GitHub Releases con checksums públicos.

Descargar DEKS Desktop y conectar su MCP local.

Revisar el Core open source en GitHub.