---
title: Conceptos básicos de MDX
description: Escribe documentación en Markdown con componentes React integrados como Card, Tabs y Accordion — la sintaxis detrás de cada página de Jamdesk.
---

Cada página de Jamdesk es un archivo `.mdx` — Markdown estándar con componentes JSX como `<Card>`, `<Tabs>` y `<Accordion>`.

## ¿Qué es MDX?

MDX combina la simplicidad de Markdown con el poder de JSX. Escribe encabezados, listas y bloques de código en Markdown, luego agrega componentes como `<Card>` o `<Tabs>` donde necesites interactividad.

MDX es también uno de los mejores formatos para documentación que necesita ser legible por IA. Es texto plano (por lo que las herramientas de IA pueden leerlo y escribirlo de forma nativa), versionable en Git y suficientemente estructurado para componentes sin requerir un formato propietario.

```mdx
# Welcome to My Docs

This is regular **Markdown** with a component below:

<Card title="Quickstart" icon="rocket" href="/quickstart">
  Jump right in with our quickstart guide.
</Card>
```

## Estructura de la página

Cada página MDX comienza con frontmatter — metadatos entre triples guiones:

```mdx
---
title: My Page Title
description: A brief description for search and previews
---

Your content starts here...
```

<Note>
El `title` y la `description` aparecen en los resultados de búsqueda, pestañas del navegador y previews en redes sociales. Escríbelos con cuidado.
</Note>

## Fundamentos de Markdown

### Encabezados

Usa `##` para las secciones principales y `###` para las subsecciones. Jamdesk genera automáticamente una tabla de contenidos a partir de tus encabezados.

```markdown
## Main Section
Content under the main section.

### Subsection
More detailed content here.
```

<Tip>
Comienza con `##` (h2) para tu primer encabezado. El título de la página del frontmatter sirve como h1.
</Tip>

### Formato de texto

| Sintaxis | Resultado |
|--------|--------|
| `**bold**` | **bold** |
| `*italic*` | *italic* |
| `~~strikethrough~~` | ~~strikethrough~~ |
| `` `inline code` `` | `inline code` |

### Listas

```markdown
Unordered list:
- First item
- Second item
  - Nested item

Ordered list:
1. First step
2. Second step
3. Third step
```

### Citas en bloque

```markdown
> This is a blockquote. Use it for callouts or
> highlighting important information.
```

> Esto es una cita en bloque. Úsala para llamadas de atención o para destacar información importante.

## Agregar componentes

Los componentes son elementos JSX que puedes usar en cualquier lugar de tu MDX. Pueden ser auto-cerrados o envolver contenido:

```mdx
{/* Self-closing component */}
<Card title="Example" icon="star" href="/introduction" />

{/* Component wrapping content */}
<Accordion title="Click to expand">
  This content is inside the accordion.
</Accordion>
```

### Componentes disponibles

Jamdesk ofrece un rico conjunto de componentes integrados:

<Columns cols={2}>
  <Card title="Cards" icon="square" href="/es/components/card">
    Destaca funcionalidades y crea navegación
  </Card>
  <Card title="Tabs" icon="table-columns" href="/es/components/tabs">
    Organiza el contenido en paneles intercambiables
  </Card>
  <Card title="Accordion" icon="chevron-down" href="/es/components/accordion">
    Secciones plegables para contenido opcional
  </Card>
  <Card title="Steps" icon="list-ol" href="/es/components/steps">
    Procedimientos numerados y tutoriales
  </Card>
</Columns>

## Tablas

Las tablas estándar de Markdown funcionan de inmediato:

```markdown
| Feature | Free | Pro |
|---------|------|-----|
| Pages | 10 | Unlimited |
| Custom domain | No | Yes |
```

| Feature | Free | Pro |
|---------|------|-----|
| Pages | 10 | Unlimited |
| Custom domain | No | Yes |

Para funciones avanzadas como resaltado de filas, alineación de celdas y spanning, usa el componente Table:

<Table striped>
  <Row header>
    <Cell>Feature</Cell>
    <Cell align="center">Free</Cell>
    <Cell align="center">Pro</Cell>
  </Row>
  <Row>
    <Cell>Pages</Cell>
    <Cell align="center">10</Cell>
    <Cell align="center" highlight highlightColor="success">Unlimited</Cell>
  </Row>
  <Row>
    <Cell>Custom domain</Cell>
    <Cell align="center">No</Cell>
    <Cell align="center" highlight highlightColor="success">Yes</Cell>
  </Row>
</Table>

<Note>
Consulta [Tables](/es/components/tables) para la documentación completa del componente, incluyendo resaltado de filas/celdas, spanning de columnas y opciones de estilo.
</Note>

## Comentarios

Agrega comentarios que no aparecerán en la salida renderizada:

```mdx
{/* This is a comment - it won't be visible to readers */}
```

## ¿Qué sigue?

<Columns cols={2}>
  <Card title="Optimización SEO" icon="magnifying-glass-chart" href="/es/content/seo">
    Mejora el descubrimiento y los metadatos
  </Card>
  <Card title="Frontmatter" icon="file-lines" href="/es/content/frontmatter">
    Define títulos, descripciones y campos SEO
  </Card>
</Columns>