Playground

Abrir el Playground →

El Playground es el propio go-slides, v0.20.2, compilado a WebAssembly y ejecutándose en su navegador. Escriba una presentación a la izquierda; las diapositivas la siguen a la derecha. No se envía nada a ningún servidor: ni la presentación, ni un enlace para compartir.

La interfaz del Playground (cinta, ayuda, mensajes) habla el idioma de la página: abra /es/playground/ para el español, y así con los doce idiomas de este sitio. El selector de idioma de la página lo cambia y su elección se conserva en este navegador; un enlace que nombra un idioma siempre prevalece. Las presentaciones de ejemplo siguen en inglés. El ucraniano, el ruso, el chino, el japonés y el coreano se dibujan con un subconjunto de Noto Sans (de 0,06 a 2,3 MiB) que la página descarga solo para esos idiomas.

Qué ofrece

• Vista previa en vivo de cada diapositiva, renderizada fuera del hilo de la página (un Web Worker), de modo que escribir nunca espera por ella. Haga clic en una diapositiva para llevar el editor a su línea; mueva el cursor y la vista previa se desplaza a su diapositiva.

• Pase de diapositivas: la propia presentación, con el teclado, el controlador en pantalla y las transiciones.

• Vista del presentador: Present (o p en el pase de diapositivas) la abre en una segunda ventana: la diapositiva actual, el paso siguiente, las notas del orador (los <!-- comments --> de la presentación), un reloj y un cronómetro. Las teclas de flecha, Espacio, Inicio y Fin funcionan en cualquiera de las dos ventanas, y cada una sigue a la otra, también cuando se edita la presentación. Si la ventana no se abre, permita las ventanas emergentes para el sitio. La vista general (o) solo está en la página descargada.

• Autocompletado mientras escribe: claves de directivas (las de una sola diapositiva, con _, en los comentarios), los valores de kind, theme, size, paginate, y las funciones de plantilla y los campos de datos dentro de {{ }}.

• Ayuda sobre lo que hay bajo el cursor: una directiva, un kind (tipo de diapositiva; qué fija), una función de plantilla. El panel de ayuda enlaza también con estas páginas. Desde v0.16.0 la ayuda de las directivas sigue el idioma de la interfaz, en 11 idiomas.

• Problemas en su línea: los errores de plantilla, de YAML y de HCL se resaltan en el editor y se listan debajo, y la vista previa conserva la última presentación que se renderizó.

• Ejemplos: una presentación de bienvenida, plantillas que generan diapositivas, kinds de diapositiva, un front matter en HCL, temas y directivas de una sola diapositiva, y matemáticas, imágenes y fondos (![bg], un fondo dividido ![bg left:40%], filtros).

• Archivos: el panel a la izquierda del editor es el proyecto de la presentación, organizado como lo leen el comando y la extensión de VS Code: deck.md, slides.yaml, themes/, kinds/, media/.

  • Haga clic en un archivo para editarlo. El editor lo colorea según su lenguaje (Markdown, YAML, HCL, JSON, CSS) y marca sus problemas.
  • Clic derecho (o Mayús+F10) para New File, New Folder, Rename (F2), Delete (pregunta antes) y New theme / New kind. Arrastre un archivo a una carpeta para moverlo. El teclado sigue el patrón de árbol de WAI-ARIA, incluida la búsqueda al escribir.
  • Project ▸ New theme crea themes/my-gaia.css (o a partir de default, uncover): un @import del tema incorporado y las reglas que usted añada. Se incorpora a la lista de temas. New kind y New data file también parten de plantillas. Cada uno se lista en slides.yaml, de modo que slides build deck.md lo encuentra.
  • Project ▸ Download project (.zip) lo guarda todo. Una vez descomprimido, slides build deck.md lo construye. Open project recupera un .zip o una carpeta. Se rechaza un archivo comprimido que salga de su carpeta (.., rutas absolutas), que contenga más de 256 archivos o más de 8 MiB en un archivo, o que se descomprima a más de 100 veces su tamaño.
  • Todo se conserva en este navegador junto con el borrador. Un proyecto admite hasta 64 MiB, y la línea bajo los archivos indica cuánto se usa.

• Medios: suelte o pegue una imagen, un vídeo o un sonido en el editor y pasa a media/, y la presentación lo nombra: ![](media/photo.png). Suelte archivos sobre una carpeta del panel para ponerlos allí. La presentación sigue siendo pequeña y legible, y no se sube nada. El entorno aislado de la vista previa los carga sin abrirse (la página le entrega los bytes). Save as ▸ HTML page los incluye en la página. Las imágenes https: también funcionan, pero el navegador las obtiene de su servidor, que entonces ve su dirección. La vista previa no envía referrer.

• Paneles redimensionables: el panel de archivos, el editor, las miniaturas de las diapositivas, la vista previa y la ayuda están separados por barras que se pueden arrastrar (el puntero se convierte en un cursor de redimensionado sobre una de ellas). El panel junto a la barra se queda con el espacio y los demás conservan su tamaño. Haga doble clic en una barra, o pulse Intro sobre ella, para cerrar el panel y volver a abrirlo. Con el teclado, F6 pasa de una barra a otra, las teclas de flecha mueven una barra 16 px, Inicio y Fin llevan el panel anterior a su tamaño mínimo y máximo, y Escape vuelve al editor. La pestaña View sigue pudiendo desactivar paneles. Los tamaños que fije se conservan en este navegador, con el borrador; los tamaños por defecto (190, 168 y 280 px, y el editor y la vista previa se reparten el resto en proporción 6 a 5) nunca se almacenan.

• Cerrar un panel: cada panel tiene un pequeño botón × en su encabezado, con información emergente. Los demás se reparten su espacio y el panel vuelve con el ancho que tenía. Para volver a abrirlo, use su interruptor en la pestaña View (cada panel tiene uno). El editor y la vista previa pueden cerrarse cada uno, pero nunca los dos: el último se niega, su botón aparece atenuado y su información emergente explica por qué. Con el teclado, F6 y luego Tab o Mayús+Tab llevan a un botón ×, e Intro o Espacio cierra el panel; el teclado vuelve al editor. Los paneles abiertos se conservan en este navegador junto con los tamaños (Versions, GitHub y el editor de temas, abiertos para una tarea, empiezan cerrados).

• Formato: la pestaña Format edita el Markdown por usted, y cada pulsación es un paso de Deshacer.

  • Texto: Bold, Italic, Strikethrough e Inline code actúan sobre la selección o la palabra bajo el cursor y se alternan (Ctrl+B, Ctrl+I, Ctrl+Shift+X y Ctrl+E; Cmd en un Mac). Un botón aparece pulsado cuando el cursor está dentro de sus marcas. Markdown no tiene subrayado: Underline (Ctrl+U) envuelve el texto en <u>…</u>, una etiqueta que la lista de permitidos de HTML por defecto de Marp conserva, así que funciona con el HTML sin procesar desactivado.
  • Párrafo: Heading 1 a 3 (Ctrl+Alt+1..3), viñetas (Ctrl+Shift+8), numeración (Ctrl+Shift+7) y una cita actúan sobre las líneas seleccionadas y se alternan. La regla horizontal es la etiqueta <hr>: ---, *** y ___ iniciarían cada una una nueva diapositiva en Marp.
  • Tabla: una cuadrícula elige las columnas y las filas. Con el cursor en una tabla se añade o se elimina una fila o una columna y se alinea la columna (:--, :-:, --:); la tabla se reescribe alineada tras cada edición.
  • Slide text a la izquierda, al centro o a la derecha escribe un bloque <style scoped> en la diapositiva actual. Marp no tiene sintaxis de alineación, y un atributo style no pasa la lista de permitidos de HTML por defecto, pero el bloque con ámbito sí, de modo que funciona con el HTML sin procesar desactivado y se ve en la vista previa, la página HTML y el PDF.
  • Link (Ctrl+K) escribe [text](url) con la url seleccionada.

• Resaltado de las claves del front matter a cualquier profundidad, en YAML (también en mapas {a: 1}) y en HCL.

• Selector de tema: default, gaia, uncover, los temas del proyecto (themes/*.css) y los temas que define la presentación (/* @theme name */ en un <style>). Escribe theme: en el front matter, YAML o HCL, de modo que un enlace compartido lo conserva, y sigue al front matter cuando lo edita.

• La vista previa mantiene su posición mientras escribe: solo se sustituyen las diapositivas que cambiaron, y un cambio de tema reabre la vista previa en la misma diapositiva.

• Enlace para compartir: la presentación viaja en el propio enlace (en su parte #, comprimida), así que abrir el enlace abre la presentación. Los enlaces admiten hasta 64 KiB comprimidos, y solo la presentación: cuando el proyecto contiene más (temas, kinds, medios), Share lo indica y ofrece el .zip.

• Save as:

  • la página HTML, la misma que escribe slides deck.md;
  • un PDF (vectorial, con el texto seleccionable, con índice);
  • una presentación PowerPoint u OpenDocument editable.

  Se generan en su navegador, con el mismo código que slides --pdf, --pptx y --odp: el PDF de la presentación de prueba de 100 diapositivas es idéntico byte a byte al del comando. La primera exportación descarga el motor de exportación (unos 5 MiB, una sola vez; su navegador lo conserva hasta la siguiente actualización), con una línea de progreso, y lo compila a medida que llega. Después solo descarga las fuentes que dibujan sus diapositivas. Con un enlace de 3 MB/s, el primer PDF de la presentación de bienvenida está listo en menos de 3 segundos. La presentación de 100 diapositivas tarda entonces unos 3 segundos. Una imagen https: solo se incluye si su servidor lo permite (CORS); las imágenes data: siempre se incluyen.

• Su borrador se conserva:

  • La presentación se guarda en este navegador mientras escribe (IndexedDB, solo para este sitio) y reaparece al recargar. No se envía nada a ninguna parte. Los archivos de texto del proyecto (temas, kinds, datos, slides.yaml) se conservan del mismo modo, incluso si cierra la pestaña justo después de escribir; los medios se almacenan en cuanto se sueltan.
  • Un enlace compartido abre su presentación y conserva su borrador: Draft ▸ Restore my draft lo recupera.
  • Un ejemplo, Draft ▸ Reset to the example (que pregunta antes) y otra pestaña tampoco lo borran nunca: Draft ▸ Restore replaced lo recupera.
  • Draft ▸ Forget my drafts borra todo lo almacenado.

Toda exportación renderiza el proyecto que muestra la vista previa: su slides.yaml, temas, kinds, archivos de datos y medios, con los medios dentro del documento.

Las imágenes como archivos (--images de slides) no se generan en el navegador: use el comando o la extensión de VS Code.

Editor de temas

Inicio ▸ Aspecto ▸ Editor de temas abre un panel que edita uno de los temas del proyecto con controles, y la vista previa lo sigue. El tema se guarda como una carpeta de paquete, theme-src/<name>/; la hoja que leen la vista previa y las exportaciones, themes/<name>.css, se compila a partir de ella: lo que ve es lo que exporta. Un paquete de tema que importa (Importar… en el panel, Añadir medios… o arrastrándolo) conserva allí sus archivos, así que puede editarlo.

• Paleta: los colores de fondo, texto, títulos, acento y enlaces. Elija un color o escríbalo (#1a2b3c, rgb(), hsl() o un nombre).
• Tipografía: las fuentes del texto, los títulos y el código, con sus tamaños y grosores. Las fuentes son las genéricas y las comunes, y las que añada (Añadir fuente…: .woff2, .woff, .ttf o .otf).
• Logotipo: una imagen (.svg, .png), dónde va (una esquina o todo el fondo) y su tamaño. Número de página y pie: dónde va el número de página, y los tamaños y la alineación.
• Detalles: lo que dice theme.hcl: versión, descripción, autores, licencia, página web, el tema base (extends) y la versión de go-slides que necesita.
• Contraste (WCAG): para cada texto sobre su fondo, la razón y su nivel, AA o AAA, o «No cumple», en vivo. Los títulos cuentan como texto grande (3:1 basta para AA; el texto normal necesita 4,5:1).

Editar CSS muestra la hoja del tema en el editor. Los controles solo escriben dentro de un bloque delimitado por dos comentarios gsta:visual, y lo vuelven a leer cuando edita sus valores a mano. Lo que escribe fuera del bloque nunca se toca. Si añade dentro del bloque algo que los controles no pueden mostrar, dejan de escribir y el panel lo dice; Restaurar el bloque lo reescribe a partir de los valores que contiene y nada más.

Importar… abre un .gsta.xz o un .css suelto. Un paquete se comprueba como lo comprueba slides theme verify, con los mismos límites: un paquete que no es seguro (una ruta que sale de él, un enlace, un script en un SVG, una url() remota, una suma de comprobación que no coincide) se rechaza con su código theme.*, en Problemas, y no cambia nada. En una hoja suelta, un @import "gaia"; pasa a ser el tema base (extends), porque un paquete nombra allí su base. Una fuente que añade tiene la licencia LicenseRef-unspecified hasta que la indique en Detalles.

Exportar .gsta.xz construye el paquete en su navegador y lo vuelve a leer como lo hace slides theme verify, de modo que el archivo lo supera; Exportar CSS descarga la hoja compilada. No se sube nada. Cada edición es un paso de Deshacer (las ediciones de un mismo control seguidas son un paso) y conserva lo que sustituye como versión; Guardar versión guarda el tema y su versión, con su nombre, en el panel Versiones.

Deshacer, rehacer y versiones

Undo y Redo (deshacer y rehacer) están en la pestaña Home y en Ctrl+Z, Ctrl+Mayús+Z o Ctrl+Y (Cmd en un Mac). Deshacen la última edición del archivo mostrado (cada archivo tiene su propio historial) y, después, la última operación sobre todo el proyecto: un ejemplo elegido, Reset, un .zip o una carpeta abiertos, un borrador restaurado, un archivo o una carpeta eliminados o renombrados, una versión restaurada. Redo devuelve todo tal como estaba cuando se pulsó Undo.

Las versiones guardan todo el proyecto en este navegador, sin enviar nada a ninguna parte. Se guarda una poco después de que deje de escribir (como máximo cada 2 minutos), antes de cada operación sobre todo el proyecto y en cada exportación y enlace para compartir. Save version… guarda una con un nombre. Home ▸ Versions abre el panel Versions:

• Preview muestra una versión en la vista previa.
• Compare with now muestra los cambios de cada archivo línea a línea, en línea o en paralelo; F7 y Mayús+F7 pasan de un cambio a otro.
• Restore devuelve una versión; Undo deshace la restauración.
• Delete elimina una versión.

Qué se conserva: las 20 versiones automáticas más recientes, luego una por hora durante un día y una por día durante un mes. Las versiones con nombre se quedan hasta que las elimine (50 como máximo). Todas las versiones juntas ocupan como máximo 96 MiB, y los archivos que no cambiaron se almacenan una sola vez. Cuando el almacenamiento del navegador está lleno, las versiones automáticas más antiguas se van primero.

GitHub

Home ▸ History ▸ GitHub abre un panel que carga la carpeta de una presentación desde un repositorio de GitHub y propone sus cambios de vuelta como una pull request. Rellene:

• Repositorio (propietario/nombre);
• Rama (vacía: la predeterminada);
• Carpeta (vacía: la raíz): la carpeta debe contener un deck.md.

Encima de estos campos el panel muestra el marco git: un pequeño panel en el que elige la forja, escribe el token (enmascarado), marca Recordar en este dispositivo y pulsa Conectar (o Iniciar sesión con GitLab) o Desconectar. El marco es una página de otro sitio, go-slides-usercontent.github.io, incrustada en el playground: la página del playground nunca ve su token.

El token es un token de acceso personal de grano fino (crear uno), limitado a los repositorios elegidos, con los permisos Contents de lectura y escritura y Pull requests de lectura y escritura (Metadata de lectura va implícito). Después:

• Cargar sustituye el proyecto por la carpeta de GitHub. Undo lo deshace, y el proyecto tal como estaba se conserva como versión «Desde GitHub».
• Proponer cambios… pide un título, crea una rama nueva slides/<título>-<fecha-hora> y abre una pull request. Nunca escribe en una rama existente ni en la rama predeterminada. Abrir la pull request le lleva a ella.
• Buscar cambios compara la versión más reciente de GitHub con la suya en la vista Compare. Tomar los suyos la carga.

No se usa ningún proxy para GitHub: el marco habla directamente con él.

El token se escribe en el marco y permanece en su sitio. La página del playground no puede leerlo (el marco es otro origen, con almacenamiento propio), ningún comando que la página pueda enviar lo devuelve, y la Content Security Policy de la página no le permite ninguna conexión a GitHub ni a GitLab. El marco envía el token solo a api.github.com (o gitlab.com). Nunca se guarda en el borrador, las versiones, los enlaces para compartir ni las exportaciones, y nunca llega a la vista previa de las diapositivas ni al worker de renderizado. Recordar en este dispositivo lo guarda en el localStorage propio del marco, en go-slides-usercontent.github.io, no en el almacenamiento del playground, hasta Desconectar (o Forget my drafts).

Si usó una versión anterior: un token que esta guardaba en el propio almacenamiento de la página del playground se elimina la primera vez que abre esta versión, y el panel se lo indica. Vuelva a escribirlo en el marco (y marque Recordar si quiere conservarlo).

Proponer cambios… escribe, así que el marco le pregunta antes: muestra el título, el repositorio y el número de archivos, y espera su clic en su propio botón Permitir (dos minutos como máximo, una propuesta a la vez). No se escribe nada antes de que haga clic.

Quedan dos riesgos, porque son inherentes a una página que incrusta un marco. Un script inyectado en la página del playground puede leer el nonce del marco y enviar los comandos del marco: leer la carpeta que cargó, o pedir una propuesta (que usted aún debe permitir en el marco). Y puede dibujar un panel falso sobre el marco y pedirle el token por su cuenta: si el marco se ve raro o no está donde debería, no escriba el token. Ninguno de los dos le permite leer el token que guarda el marco. Prefiera un token limitado a los repositorios que necesite. Para equipos, el modo servidor autoalojado (próximamente) mantiene los tokens en el servidor.

GitLab.com

El panel tiene una lista de forjas: GitHub y GitLab.com. Para GitLab, indique un token de acceso personal con el alcance api, o pulse Iniciar sesión con GitLab (código de autorización OAuth con PKCE, sin secreto). El inicio de sesión abre una pequeña ventana del sitio del marco y vuelve a él; la página del playground en la que trabaja no se abandona. Sus tokens quedan solo en la memoria del marco (nunca se recuerdan en el dispositivo, ni siquiera con Recordar en este dispositivo), se renuevan solos antes de caducar, y Desconectar los revoca en GitLab. Un inicio de sesión no iniciado por el marco, o un enlace reutilizado, se rechaza. El inicio de sesión está disponible cuando la aplicación de GitLab del sitio está registrada; mientras tanto, use un token de acceso personal.

Las peticiones van solo a api.github.com y gitlab.com, y solo desde el marco: la página del playground no hace ninguna y no envía referrer.

¿Por qué api? La tabla de alcances de GitLab dice de write_repository «Does not support API authentication»: sirve solo para git sobre HTTP, que GitLab ofrece sin CORS, así que un navegador no puede usarlo. Las propuestas usan la API REST, que exige api, «complete read and write access to the API». Un token api robado puede hacer todo lo que su usuario puede hacer por la API, en todos los proyectos a los que ese usuario llega. Prefiera un token de acceso de proyecto o de grupo limitado a los repositorios de las presentaciones, o una cuenta de GitLab dedicada que sea solo miembro de los proyectos de las presentaciones.

Seguridad

La presentación se muestra en un iframe aislado, sin el origen de la página: no puede alcanzar ni el Playground ni su almacenamiento, no puede enviar ningún formulario y no navega a ninguna parte. Su página lleva una Content Security Policy que ejecuta solo sus propios scripts. El HTML sin procesar de la presentación sigue la lista de permitidos de Marp, como hace slides por defecto. Un renderizado que dure más de 5 segundos (una plantilla que entra en bucle) se detiene.

La ventana del presentador mantiene ese aislamiento. La abre el propio Playground y muestra la presentación en un iframe aislado de la misma manera. Los dos iframes no pueden compartir almacenamiento, así que el Playground retransmite el número de diapositiva entre ellos mediante mensajes. Ningún marco que ejecute la presentación obtiene el origen del Playground.

Los medios del proyecto llegan a los marcos aislados como bytes en un mensaje, y cada marco crea con ellos sus propias URL blob:, en su propio origen. Una URL blob: creada por el Playground no se carga allí, y la política de los marcos solo añade blob: para medios y fuentes.

El Playground puede servirse desde su propio equipo, detrás de un inicio de sesión: consulte Autoalojamiento.

Tamaño y velocidad

El módulo pesa 8,8 MiB tal como lo sirve GitHub Pages (gzip; Pages no sirve brotli). Se descarga una sola vez con una barra de progreso y luego el navegador lo conserva en caché hasta el siguiente despliegue. En un Apple M4 Max con Chrome 155, medido sobre la página en línea, el editor está listo 2,1 s después de abrir la página, 1,5 s de los cuales son la descarga, y las primeras diapositivas aparecen a los 2,4 s. Un cambio en la presentación de prueba de 100 diapositivas llega a la vista previa en unos 30 ms: go-slides renderiza solo las diapositivas que cambiaron, y solo esas se sustituyen en la vista previa.