Documentación de Strata

Utilice un mapa blog: en el primer bloque de metadatos YAML para diseñar una entrada publicada. El panel de apariencia modifica ese mismo texto y conserva las claves y los comentarios ajenos.

La vista previa sigue al borrador. Publicar guarda el diseño completo, incluidos los valores heredados de la publicación; los cambios posteriores del borrador o del tema del perfil no modifican esa versión. Las presentaciones usan sus propios ajustes. Los metadatos se ocultan en las páginas públicas y las descripciones.

Las claves desconocidas en blog:, el YAML mal formado, los valores inválidos, las referencias ausentes o duplicadas y el contraste insuficiente impiden publicar. Corrija todos los errores; las ediciones del agente devuelven resultados blogValidation. Restablezca un ajuste para heredar su valor predeterminado. Por defecto, el índice está oculto y la superficie de lectura es opaca.

El resumen admite 160 caracteres; las etiquetas, 10 entradas de 32 caracteres. El nombre de una serie admite 80 caracteres y requiere un orden entero positivo. Los nombres exactos agrupan entradas; los órdenes duplicados generan advertencias. noindex mantiene la entrada en el perfil y los feeds, pero la elimina del mapa del sitio y solicita que no se indexe. cover nombra una imagen del documento; asígnele un nombre con <!-- strata:name=cover --> justo antes de la imagen.

Los colores requieren valores #RRGGBB entre comillas para los modos claro y oscuro. background colorea la superficie de lectura y, sin fondo decorativo, la página. El texto y los enlaces accent deben alcanzar un contraste de 4.5:1 sobre la superficie real en ambos modos. Las fuentes se eligen de la lista siguiente. La superficie translúcida tiene un 88% de opacidad y solo se admite sobre colores o degradados cuyo contraste sea suficiente en todo el degradado.

Elija un solo tipo de fondo. Los degradados admiten entre 2 y 5 colores; los patrones usan los nombres siguientes. El fondo de imagen nombra una imagen del documento. El fondo HTML nombra un bloque html y requiere un color o una imagen de respaldo. Se ejecuta tras el artículo en el entorno aislado existente, no recibe clics ni foco y se detiene cuando se oculta la pestaña. El movimiento o los datos reducidos, los dispositivos limitados, las vistas HTML desactivadas y los fallos activan el respaldo. La impresión y el PDF omiten el fondo. No se admite HTML o CSS directo en la página ni entradas completamente HTML.

Los bloques HTML con uses="frontmatter" leen strata.data.get("frontmatter").values. Las claves resueltas son blog.typography, blog.palette, blog.readingWidth, blog.blockControls, blog.tableOfContents, blog.readingSurface, blog.accent, blog.background, blog.fonts.heading y blog.fonts.body. Los colores corresponden al modo actual. Se omiten las fuentes no configuradas. Los bloques publicados solo reciben estos valores de diseño; los demás metadatos escalares están disponibles únicamente en el editor. El fondo solo recibe estos valores y el modo de color, nunca otros datos del documento.

Campos y valores permitidos

blog.typography

modern | editorial | expressive | technical

blog.palette

strata | paper

blog.readingWidth

focused | comfortable | wide | full

blog.blockControls

visible | hidden

blog.tableOfContents

visible | hidden

blog.accent

{ light: "#RRGGBB", dark: "#RRGGBB" }

blog.background

{ light: "#RRGGBB", dark: "#RRGGBB" }

blog.fonts.heading, blog.fonts.body

Manrope | Syne | Fira Code | Georgia | Times New Roman | Arial | Helvetica | Verdana | Trebuchet MS | Palatino | Courier New | IBM Plex Mono

blog.summary

string (1…160)

blog.cover

image.name

blog.tags

string[] (0…10 × 1…32)

blog.noindex

true | false

blog.series

{ name: string (1…80), order: integer (≥1) }

blog.wallpaper.color

{ light: "#RRGGBB", dark: "#RRGGBB" }

blog.wallpaper.gradient

{ type: linear | radial, stops: [{ light: "#RRGGBB", dark: "#RRGGBB" }, …] } (2…5)

blog.wallpaper.pattern

{ name: dots | grid | lines | paper | topographic | stars, tint: { light: "#RRGGBB", dark: "#RRGGBB" } }

blog.wallpaper.image

image.name

blog.wallpaper.html

codeBlock.name (language: html)

blog.wallpaper.fallback

{ color: { light: "#RRGGBB", dark: "#RRGGBB" } } | { image: image.name }

blog.readingSurface

opaque | translucent

Ejemplo completo de fondo HTML

---
blog:
  typography: editorial
  palette: paper
  readingWidth: comfortable
  blockControls: hidden
  tableOfContents: visible
  accent: { light: "#8a3515", dark: "#ffb788" }
  background: { light: "#fffdf8", dark: "#272119" }
  fonts: { heading: Georgia, body: Georgia }
  summary: "An astronomy journal about the night sky."
  tags: [astronomy, observation]
  noindex: false
  series: { name: "Night notes", order: 1 }
  readingSurface: opaque
  wallpaper:
    html: starfield
    fallback:
      color: { light: "#e7e0d4", dark: "#111827" }
---

# Night notes

Our first observing session began at twilight.

## The northern sky

The article stays on an opaque reading surface above the animation.

```html name=starfield uses="frontmatter"
<style>
  html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }
  canvas { display: block; width: 100%; height: 100%; }
</style>
<canvas id="sky"></canvas>
<script>
  const canvas = document.getElementById('sky');
  const ctx = canvas.getContext('2d');
  let color = '#8a3515';
  function readDesign() {
    const source = strata.data.get('frontmatter');
    if (source?.kind === 'frontmatter') color = source.values['blog.accent'];
  }
  readDesign();
  window.addEventListener('strata:data', readDesign);
  function paint(time) {
    const width = canvas.clientWidth, height = canvas.clientHeight;
    if (canvas.width !== width || canvas.height !== height) {
      canvas.width = width;
      canvas.height = height;
    }
    ctx.clearRect(0, 0, width, height);
    ctx.fillStyle = color;
    for (let i = 0; i < 90; i++) {
      ctx.globalAlpha = 0.25 + 0.25 * Math.sin(time / 1800 + i);
      ctx.beginPath();
      ctx.arc((i * 137.508 % 100) / 100 * width,
        (i * 71.37 % 100) / 100 * height, 1 + i % 2, 0, Math.PI * 2);
      ctx.fill();
    }
    requestAnimationFrame(paint);
  }
  requestAnimationFrame(paint);
</script>
```

Los bloques de código etiquetados como html se muestran como vistas previas en vivo y aisladas en el editor de Strata y en los PDF exportados — gráficos, diagramas, escenas 3D y pequeños widgets interactivos, escritos como código delimitado normal.

Escribe un bloque de código delimitado con la etiqueta de lenguaje html. Su marcado, estilos y scripts se ejecutan automáticamente en una vista previa aislada; cada edición vuelve a renderizar desde un estado limpio, y los lectores pueden alternar entre la vista previa y el código fuente.

La vista previa está completamente aislada: sin cookies ni almacenamiento, sin acceso a la página que la contiene y sin URL externas. WebSocket, beacons y envíos de formulario se eliminan por completo, y fetch solo alcanza los recursos verificados de /sandbox/ que se enumeran abajo, que es como el motor de Doom carga sus propios datos de juego. Todo lo que incumpla estas restricciones falla dentro de su propia vista previa y en ningún otro sitio.

Los tokens de diseño de Strata vienen precargados: variables CSS como var(--color-foreground), var(--color-muted-foreground), var(--color-primary) y var(--color-border) coinciden con el tema de la aplicación, y la vista previa sigue automáticamente el modo claro u oscuro del lector. Los colores que definas se usan exactamente como los escribes y nunca se ajustan, así que define juntos el fondo y el texto — un bloque que solo define uno de los dos puede acabar siendo ilegible en el modo que no hayas probado.

Una vista previa empieza con unos 360 píxeles de alto y luego se adapta a su contenido: un contenido más alto hace crecer el bloque y uno más corto lo encoge. Esa altura inicial es también la referencia con la que se resuelven las unidades relativas, así que height: 100%, 100vh y window.innerHeight funcionan todos — que es justo lo que suelen usar las escenas de three.js y los gráficos que ocupan todo el bloque.

Los errores de script, los rechazos de promesas no gestionados y la salida de console.error/console.warn producidos dentro de la vista previa se recopilan y se muestran debajo de ella, con los números de línea cuando el navegador los indica. Una vista previa no tiene herramientas de desarrollo propias, así que este panel es donde un bloque explica por qué no se ha renderizado.

Graficar datos del documento

Un bloque puede leer datos que ya viven en el mismo documento, de modo que un gráfico concuerda con las cifras que sus lectores ven. Se pueden nombrar cuatro tipos de fuente. Un bloque de código json, csv, tsv o yaml se nombra en su propia línea de apertura, por ejemplo con name=sales. Una tabla se nombra mediante una línea de comentario HTML colocada inmediatamente encima: <!-- strata:name=headcount -->. El frontmatter del documento siempre está disponible bajo el nombre reservado frontmatter, solo con campos escalares. Una imagen del documento se nombra igual que una tabla, con una línea de comentario HTML colocada inmediatamente encima: <!-- strata:name=hero -->. En el editor, selecciona la imagen y usa Nombre para datos. Esos cuatro tipos son los únicos datos a los que un bloque puede vincularse. Un nombre empieza por una letra, continúa con letras, dígitos, guiones o guiones bajos, ocupa como máximo 64 caracteres y debe ser único dentro del documento.

Un bloque html declara lo que consume en su propia línea de apertura, por ejemplo con uses="sales,headcount". El bloque recibe únicamente las fuentes que nombra y nunca el resto del documento, no puede alcanzar datos de otro documento y no le llega nada que su lector no pueda ver ya en este. Editar el código del bloque o su declaración recarga la vista previa desde un estado limpio. Editar solo los datos detrás de un nombre ya declarado actualiza la vista previa en marcha sin reiniciarla. Un bloque declara ocho nombres como máximo, y cualquier nombre a partir del noveno llega como unavailable con el motivo oversize en lugar de descartarse en silencio.

Dentro de la vista previa, los datos declarados se instalan como strata.data antes de que se ejecuten tus propios scripts. strata.data.get(name) devuelve una fuente y strata.data.names enumera los nombres declarados por el bloque, en el orden de la declaración. Una fuente json, csv, tsv o yaml llega sin analizar como { kind: 'text', format, text }, así que el bloque la analiza con el analizador que prefiera. Una tabla llega como { kind: 'table', columns, rows } con cada celda como texto plano y sin conversión numérica ni de fechas. El frontmatter llega como { kind: 'frontmatter', values }. Todos los valores entregados están congelados en profundidad. Cuando una fuente vinculada cambia, Strata envía una instantánea nueva y dispara el evento strata:data en window, cuyo detail lleva los datos nuevos. strata.data.get ya devuelve esa instantánea cuando el evento se dispara. La vista previa nunca pide datos por su cuenta, así que un bloque que ignore el evento sigue funcionando con lo que recibió al principio.

Una imagen llega como { kind: 'image', url, width, height, alt }, donde url es una URL de datos que lleva los bytes de la propia imagen, de modo que un bloque puede asignarla directamente a un elemento img sin ningún acceso a la red. Strata obtiene esos bytes con el acceso del propio lector y los incrusta antes de que arranque la vista previa; la vista previa nunca ve un enlace que pudiera seguir ni pide una imagen por su cuenta. Las imágenes tienen un presupuesto aparte: una imagen puede entregar hasta 3 MiB y todas las imágenes de una vista previa hasta 12 MiB en conjunto, descartando primero las más grandes si ese presupuesto se agota. Una imagen cuyos bytes no se pudieron obtener llega como unavailable con el motivo unreachable. Una presentación puede mostrar una imagen nombrada sin nada de código: una línea de apertura de diapositiva escrita como layout=image uses="hero" la dibuja a sangre y toma el pie de foto del cuerpo de la diapositiva.

Qué tipo elegir depende de quién más tiene que leer las cifras. Un bloque json o csv es compacto, se compara bien entre versiones y mantiene una serie larga fuera del texto, pero llega como texto en bruto y es el bloque quien se encarga de analizarlo; partir una línea csv por las comas es el error clásico, porque rompe cualquier campo entre comillas que contenga una. Una tabla con nombre ofrece la contrapartida contraria: los lectores ven una tabla de verdad en lugar de un bloque de código, y el bloque la recibe ya separada, con la primera fila como columns y cada fila siguiente en rows. El frontmatter encaja con valores sueltos, como un título o un objetivo, y no con una serie.

Un nombre declarado que no se puede resolver llega igualmente, como { kind: 'unavailable', reason }, para que el bloque distinga un conjunto de datos vacío de uno que falta. El motivo es unknown cuando ninguna fuente del documento lleva ese nombre, duplicate cuando dos fuentes reclaman el mismo nombre, removed cuando la fuente se eliminó con la vista previa abierta, oversize cuando la fuente supera los límites de entrega y unreachable cuando no se pudieron obtener los bytes de una imagen. Solo se descarta la fuente afectada y las demás siguen llegando, así que comprueba el tipo unavailable y muestra un mensaje en lugar de dar por hecho que los datos están ahí.

Bibliotecas aprobadas

• /sandbox/libs/mermaid.min.js — <script src="/sandbox/libs/mermaid.min.js"></script> then mermaid.initialize({ startOnLoad: false }); mermaid.run()
• /sandbox/libs/d3.min.js — <script src="/sandbox/libs/d3.min.js"></script> — global `d3`
• /sandbox/libs/three.module.min.js — <script type="module">import * as THREE from '/sandbox/libs/three.module.min.js'</script>
• /sandbox/libs/doom.js — <script src="/sandbox/libs/doom.js"></script> is the whole block: it appends its own canvas and boots. Options go on the script tag: data-doom-warp="1,1", data-doom-skill="3", data-doom-manual (call Doom.start() yourself). To place the canvas, supply one with id="canvas". The reader clicks the preview once to give it keyboard focus; arrows move, Ctrl fires, Esc opens the menu. Music is off, sound effects work. First load pulls about 10 MB, then caches. Chocolate Doom compiled to WebAssembly (GPL-2.0-or-later, github.com/cloudflare/doom-wasm) with Freedoom game data (BSD-3-Clause, github.com/freedoom/freedoom). No commercial or shareware WAD is distributed.

Ninguna otra URL externa de script o de estilos se carga dentro de la vista previa. Para fijar una versión, inserta -<version> antes de .min.js (las versiones anteriores siguen disponibles).

Ejemplo

<div id="chart"></div>
<script src="/sandbox/libs/d3.min.js"></script>
<script>
  const data = [4, 8, 15, 16, 23, 42];
  d3.select('#chart')
    .selectAll('div')
    .data(data)
    .join('div')
    .style('height', '18px')
    .style('margin', '2px 0')
    .style('background', 'var(--color-primary, #2c7cb0)')
    .style('width', (d) => d * 6 + 'px');
</script>

Ejemplo: un gráfico vinculado a un bloque json

```json name=sales
[
  { "quarter": "Q1", "revenue": 42 },
  { "quarter": "Q2", "revenue": 58 },
  { "quarter": "Q3", "revenue": 71 }
]
```

```html uses="sales"
<div id="chart"></div>
<script src="/sandbox/libs/d3.min.js"></script>
<script>
  function render() {
    const source = strata.data.get('sales');
    if (!source || source.kind !== 'text') return;
    d3.select('#chart')
      .selectAll('div')
      .data(JSON.parse(source.text))
      .join('div')
      .style('height', '18px')
      .style('margin', '2px 0')
      .style('background', 'var(--color-primary, #2c7cb0)')
      .style('width', (d) => d.revenue * 6 + 'px');
  }
  render();
  window.addEventListener('strata:data', render);
</script>
```

Ejemplo: un gráfico vinculado a un bloque csv

```csv name=signups
week,signups
"Jan 1, 2026",120
"Jan 8, 2026",148
"Jan 15, 2026",173
"Jan 22, 2026",162
```

```html uses="signups"
<div id="chart"></div>
<script src="/sandbox/libs/d3.min.js"></script>
<script>
  function render() {
    const chart = d3.select('#chart');
    chart.selectAll('*').remove();
    const source = strata.data.get('signups');
    if (!source || source.kind !== 'text') {
      chart.text('No signups data.');
      return;
    }
    // A csv source arrives as raw text. text.split(',') would tear
    // "Jan 1, 2026" in half; d3.csvParse honours the quotes.
    const rows = d3.csvParse(source.text, (row) => ({
      week: row.week,
      signups: Number(row.signups),
    }));
    const scale = d3
      .scaleLinear()
      .domain([0, Math.max(1, d3.max(rows, (d) => d.signups) || 0)])
      .range([0, 100]);
    const line = chart.selectAll('div').data(rows).join('div');
    line
      .style('display', 'flex')
      .style('align-items', 'center')
      .style('gap', '8px')
      .style('margin', '2px 0');
    line
      .append('span')
      .style('flex', '0 0 7rem')
      .style('color', 'var(--color-muted-foreground, #6b7280)')
      .text((d) => d.week);
    line
      .append('span')
      .style('height', '18px')
      .style('background', 'var(--color-primary, #2c7cb0)')
      .style('width', (d) => scale(d.signups) + '%');
    line.append('span').text((d) => d.signups);
  }
  render();
  // Edit a number in the csv block and this chart follows it.
  window.addEventListener('strata:data', render);
</script>
```

Ejemplo: un gráfico vinculado a una tabla del documento

<!-- strata:name=headcount -->

| Team | People |
| --- | --- |
| Growth | 12 |
| Platform | 27 |
| Support | 8 |

```html uses="headcount"
<div id="chart"></div>
<script>
  function render() {
    const chart = document.getElementById('chart');
    chart.textContent = '';
    const source = strata.data.get('headcount');
    if (!source || source.kind !== 'table') {
      chart.textContent = 'No headcount table.';
      return;
    }
    // columns is the table's first row; rows is everything under it, and
    // every cell is a string, so the numbers are yours to convert.
    const team = source.columns.indexOf('Team');
    const people = source.columns.indexOf('People');
    const counts = source.rows.map((row) => Number(row[people]) || 0);
    const widest = Math.max(1, ...counts);
    source.rows.forEach((row, index) => {
      const line = document.createElement('div');
      line.style.display = 'flex';
      line.style.alignItems = 'center';
      line.style.gap = '8px';
      line.style.margin = '2px 0';
      const label = document.createElement('span');
      label.style.flex = '0 0 7rem';
      label.style.color = 'var(--color-muted-foreground, #6b7280)';
      label.textContent = row[team];
      const bar = document.createElement('span');
      bar.style.height = '18px';
      bar.style.width = (counts[index] / widest) * 100 + '%';
      bar.style.background = 'var(--color-primary, #2c7cb0)';
      const value = document.createElement('span');
      value.textContent = row[people];
      line.append(label, bar, value);
      chart.append(line);
    });
  }
  render();
  // Type a new number into the table and this chart follows it.
  window.addEventListener('strata:data', render);
</script>
```

Ejemplo: una imagen vinculada a una imagen del documento

<!-- strata:name=hero -->

![The team on launch day](strata://image/img_01ARZ3NDEKTSV4RRFFQ69G5FAV)

```html uses="hero"
<figure id="card" style="margin:0"></figure>
<script>
  function render() {
    const card = document.getElementById('card');
    card.textContent = '';
    const source = strata.data.get('hero');
    if (!source || source.kind !== 'image') {
      card.textContent = 'No hero image.';
      return;
    }
    const image = document.createElement('img');
    // url already carries the bytes, so this needs no network access.
    image.src = source.url;
    image.alt = source.alt;
    image.style.width = '100%';
    image.style.borderRadius = '12px';
    const caption = document.createElement('figcaption');
    caption.style.color = 'var(--color-muted-foreground, #6b7280)';
    caption.textContent = source.width + '×' + source.height;
    card.append(image, caption);
  }
  render();
  // Swap the image in the document and this card follows it.
  window.addEventListener('strata:data', render);
</script>
```

Una definición de agente es un documento Markdown dentro de tu carpeta /Agents. El frontmatter YAML declara la identidad del agente, la lista de herramientas permitidas y la visibilidad ante el orquestador; el cuerpo debajo del frontmatter es el prompt de sistema que el orquestador entrega textualmente a la solicitud del usuario. Cada campo se valida en el servidor al guardar.

Ejemplo

---
name: meeting-notes-summarizer
description: Summarizes meeting notes into a TL;DR with action items.
tools:
  - read_document
  - search_space
model: claude-sonnet-4-6
color: emerald
enabled: true
autoInvokable: false
---

You are a meeting-notes summarizer. Given the document body the
orchestrator hands you verbatim, produce a one-paragraph TL;DR and a
bulleted action-item list…

Una plantilla de prompt es un documento Markdown dentro de tu carpeta /Prompts. El frontmatter YAML declara el nombre, la descripción, los argumentos y la visibilidad ante el orquestador; el cuerpo debajo del frontmatter es la plantilla del prompt — los marcadores {{argumento}} se sustituyen al renderizar. Los valores de los argumentos los recoge la hoja de slash del compositor de chat o la solicitud MCP prompts/get.

PromptArgument

Cada entrada del array `arguments` anterior tiene la siguiente forma:

Ejemplo

---
name: Summarize document
description: Summarize the active document for a chosen audience.
autoInvokable: false
arguments:
  - name: focus
    description: What the assistant should focus on.
    required: true
  - name: audience
    description: Target audience for the summary.
    required: false
---

Summarize this document for {{audience}}, focusing on {{focus}}. Keep
the summary under 200 words and finish with a short action-items list.

Una plantilla de documento es un documento Markdown dentro de una carpeta de plantillas. El frontmatter YAML declara el nombre, las variables tipadas y el contrato de secciones; el cuerpo bajo el frontmatter es el contenido reutilizable — los marcadores {{key}} se sustituyen al crear un documento desde la plantilla, ya sea desde la galería, la acción MCP createFromTemplate o la herramienta de agente create_document_from_template.

TemplateVariable

Cada entrada del array `variables` anterior tiene esta forma:

TemplateSection

Cada entrada del array `sections` anterior tiene esta forma:

Ejemplo

---
name: incident-postmortem
description: Standard postmortem with a verbatim escalation matrix.
variables:
  - key: incident_id
    label: Incident ID
    kind: text
    required: true
  - key: occurred_on
    label: Date of incident
    kind: date
    required: true
sections:
  - title: Timeline
    guidance: Chronological events from first alert to resolution.
    fill: required
  - title: Lessons learned
    guidance: What we change going forward.
    fill: optional
  - title: Escalation matrix
    fill: verbatim
---

## Timeline

Incident {{incident_id}} on {{occurred_on}}.

## Lessons learned

## Escalation matrix

Page the on-call lead, then the service owner…