> ## Documentation Index
> Fetch the complete documentation index at: https://puzzlet-9ba7bb98.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Quickstart

> Install TemplateDX and render your first prompt template.

Install TemplateDX and render a `.mdx` template against a `props` object. The snippets below use the **Node** API (`load` + `transform` + `stringify`). If your runtime can't read templates from disk (browser, edge), precompile them to JSON ASTs at build time; see the last section.

## Install

<Tabs>
  <Tab title="npm">
    ```bash theme={null}
    npm install @agentmark-ai/templatedx
    ```
  </Tab>

  <Tab title="yarn">
    ```bash theme={null}
    yarn add @agentmark-ai/templatedx
    ```
  </Tab>

  <Tab title="pnpm">
    ```bash theme={null}
    pnpm add @agentmark-ai/templatedx
    ```
  </Tab>
</Tabs>

## Render a template (Node)

Given `my-template.mdx`:

```mdx my-template.mdx theme={null}
Hi {props.name}, welcome to TemplateDX.
```

Run it:

```typescript theme={null}
import { load, transform, stringify } from "@agentmark-ai/templatedx";

const ast = await load("./my-template.mdx");
const rendered = await transform(ast, { name: "Jim" });
console.log(stringify(rendered));
```

Output:

```text theme={null}
Hi Jim, welcome to TemplateDX.
```

* `load(path)`: parses the `.mdx` file from disk into an AST.
* `transform(ast, props)`: evaluates expressions and tag plugins against `props`.
* `stringify(ast)`: serializes the rendered AST back to a Markdown/text string.

## Render a precompiled template (browser / edge)

`transform()` consumes a TemplateDX AST, not a compiled MDX component. Standard MDX loaders (`@mdx-js/loader`, `@next/mdx`, Vite MDX plugins) compile `.mdx` into a component function, which `transform()` can't use. To render templates where you can't read from disk, precompile them to JSON in a build step:

```typescript precompile.ts theme={null}
import { load, compressAst } from "@agentmark-ai/templatedx";
import fs from "node:fs";

const ast = await load("./my-template.mdx");
compressAst(ast); // strips positions and other parse-only metadata in place
fs.writeFileSync("./my-template.json", JSON.stringify(ast));
```

At runtime, import the JSON and skip `load`:

```typescript render.ts theme={null}
import { transform, stringify } from "@agentmark-ai/templatedx";
import ast from "./my-template.json";

const rendered = await transform(ast, { name: "Jim" });
console.log(stringify(rendered));
// Hi Jim, welcome to TemplateDX.
```

`load` bundles imported components into the AST, so precompiled templates keep working when they import other `.mdx` files.

## Next steps

<CardGroup cols={2}>
  <Card title="Syntax" icon="code" href="/templatedx/syntax">
    Tags, expressions, components, and XML passthrough
  </Card>

  <Card title="Variables" icon="brackets-curly" href="/templatedx/variables">
    Props and scope resolution
  </Card>

  <Card title="Custom tags" icon="puzzle-piece" href="/templatedx/tags">
    Write your own `<Tag>` plugins
  </Card>

  <Card title="Custom filters" icon="filter" href="/templatedx/filters">
    Extend expression evaluation with filters
  </Card>
</CardGroup>