> ## Documentation Index
> Fetch the complete documentation index at: https://docs.autype.com/llms.txt
> Use this file to discover all available pages before exploring further.

# VS Code Extension

> Write professional documents in Markdown and export as PDF, DOCX & ODT — directly from VS Code

## Overview

The [Autype VS Code Extension](https://marketplace.visualstudio.com/items?itemName=centerbit.autype) lets you write reports, papers, invoices, API docs, and any other document using an extended Markdown syntax. Render a live PDF preview side-by-side with your editor, then export to **PDF**, **DOCX**, or **ODT** with a single click.

**Free to use** — sign up at [app.autype.com](https://app.autype.com) and get your API key in seconds.

## Demo

![Autype VS Code Extension demo](https://autype.com/vscode/vscode-demo.gif)

## What You Can Build

Autype goes far beyond plain Markdown. Write professional documents with:

* **Charts** — bar, line, pie, doughnut, radar, scatter, bubble, polar area
* **Math equations** — LaTeX syntax rendered as images (`$$E = mc^2$$`)
* **Styled tables** — captions, colored headers, alternating rows, images in cells
* **Code blocks** — syntax-highlighted, optionally rendered as images
* **Table of Contents** — auto-generated from headings with page numbers
* **List of Figures / Tables** — auto-numbered figure and table indices
* **QR codes** — URL, WiFi, vCard
* **Page layouts** — page breaks, orientation changes, spacers, cover pages
* **Multi-column layouts** — two- or three-column sections (like academic papers)
* **Variables** — dynamic placeholders like `{{companyName}}` or `{{date/DD.MM.YYYY}}`
* **Cross-references** — link to headings, figures, and tables by anchor
* **Headers & footers** — with page numbers, logos, and dynamic content
* **Images** — local images auto-uploaded with hash-based caching

The extension includes three example projects (business report, API documentation, scientific paper) so you can see everything in action.

## Getting Started

<Steps>
  <Step title="Install & Sign Up">
    Install the extension from the [VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=centerbit.autype). Create a **free account** at [app.autype.com](https://app.autype.com) and copy your API key (starts with `ak_`).
  </Step>

  <Step title="Set Your API Key">
    Run **Autype: Set API Key** from the command palette (`Ctrl+Shift+P` / `Cmd+Shift+P`), or click the **Autype** button in the VS Code status bar and select **Set API Key**. The key is stored securely in VS Code's secret storage.

    ![The Autype status bar button opens a menu — use "Set API Key" to store your key](https://autype.com/vscode/bottombar-autype-open-menu.png)

    ![Autype quick-pick menu with all commands — "Set API Key" highlighted](https://autype.com/vscode/set-api-key-vscode.png)
  </Step>

  <Step title="Create a Project">
    Create a folder with an `autype.json` config file and a `.md` content file:

    ```
    my-document/
    ├── autype.json       # Document configuration (required)
    ├── document.md       # Your content
    └── images/           # Local images (optional)
        └── logo.png
    ```

    Or right-click any folder in the Explorer and select **Autype: Create New Document** to scaffold a project automatically.
  </Step>

  <Step title="Configure autype.json">
    ```json theme={null}
    {
      "document": {
        "type": "pdf",
        "size": "A4",
        "orientation": "portrait",
        "marginTop": 2.5,
        "marginBottom": 2.5,
        "marginLeft": 2.0,
        "marginRight": 2.0,
        "title": "My Document"
      },
      "defaults": {
        "fontFamily": "Arial",
        "fontSize": 11,
        "lineHeight": 1.15
      }
    }
    ```

    See the full [configuration reference](/getting-started/concepts/document-config) for page sizes, fonts, headers, footers, variables, and more.
  </Step>

  <Step title="Open the Preview & Export">
    Open any `.md` file in the project folder, then click the **Autype icon** in the editor title bar (or run `Autype: Show Preview`).

    ![Click the Autype icon or the Render button in the editor title bar to open the preview panel](https://autype.com/vscode/open-preview-vscode.png)

    Click **Render** to generate the PDF, then **Ctrl+Scroll** (Cmd+Scroll on macOS) to zoom. Choose a format from the dropdown and click **Export**.
  </Step>
</Steps>

## Features

### Live PDF Preview

Render your document and view the result side-by-side with the editor. The preview uses PDF.js for fast, native rendering with text selection and zoom.

### Insert Toolbar

A vertical toolbar next to the preview gives you one-click access to all formatting options — headings, bold, italic, underline, strikethrough, highlight, links, images, tables, code blocks, math, charts, QR codes, variables, page breaks, columns, TOC, and more.

### Auto-Rerender

Enable auto-rerender to automatically re-render the preview whenever you edit the Markdown or `autype.json`. 10-second cooldown between renders.

### Syntax Highlighting

The extension registers a dedicated `autype-markdown` language for `.mdd` files with a custom TextMate grammar that highlights Autype-specific syntax like variables (`{{name}}`), page breaks, directives, and more.

### Image Caching

Local images are uploaded to the Autype API with SHA-256 hash-based deduplication. Unchanged images are not re-uploaded, making repeated renders fast.

## Commands

| Command                       | Description                         |
| ----------------------------- | ----------------------------------- |
| `Autype: Show Preview`        | Open the preview panel              |
| `Autype: Render Document`     | Render the current document         |
| `Autype: Export as PDF`       | Export as PDF                       |
| `Autype: Export as DOCX`      | Export as DOCX                      |
| `Autype: Export as ODT`       | Export as ODT                       |
| `Autype: Clean Image Cache`   | Clear cached image uploads          |
| `Autype: Create New Document` | Scaffold a new project in a folder  |
| `Autype: Set API Key`         | Store your API key securely         |
| `Autype: Remove API Key`      | Delete the stored API key           |
| `Autype: Open Menu`           | Quick-pick menu from the status bar |

## Settings

| Setting                   | Default                             | Description                                    |
| ------------------------- | ----------------------------------- | ---------------------------------------------- |
| `autype.apiBaseUrl`       | `https://api.autype.com/api/v1/dev` | Autype Developer API base URL                  |
| `autype.toolbar.visible`  | `true`                              | Show the insert toolbar in the preview panel   |
| `autype.toolbar.iconSize` | `small`                             | Toolbar icon size (`small`, `medium`, `large`) |

## Plans & Pricing

All VS Code extension features are available on every plan, including Free. Rendering and exports consume credits from your monthly allowance.

| Feature                 | All plans               |
| ----------------------- | ----------------------- |
| Preview rendering       | Unlimited (watermarked) |
| PDF / DOCX / ODT export | 5 credits per render    |
| Auto-rerender           | Included                |

See [Pricing](/getting-started/pricing) for credit details.

## Example Projects

The extension ships with three example projects in the `example/` folder:

* **`business-report/`** — A quarterly business report with TOC, list of figures, charts, styled tables, and images
* **`api-documentation/`** — REST API documentation with code blocks, endpoint tables, and request/response examples
* **`scientific-paper/`** — A two-column academic paper with equations, citations, bibliography, and figures

Open any example folder, set your API key, and click Render to see it in action.