Autype for VS Code

Write professional documents in Markdown — export as PDF, DOCX & ODT

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 and get your API key in seconds.

Demo

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

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

How to Open the Preview

1. Open any .md or .mdd file inside a folder that contains an autype.json
2. Click the Autype icon in the editor title bar — or run Autype: Show Preview from the command palette
3. The preview panel opens with a Render button and an insert toolbar on the side
4. Click Render to generate the PDF, then Ctrl+Scroll (Cmd+Scroll on macOS) to zoom

How to Set Your API Key

Click the Autype button in the VS Code status bar to open the quick-pick menu:

1. Click Autype in the bottom status bar — or open the command palette with Ctrl+Shift+P (Cmd+Shift+P on macOS)
2. Select Set API Key from the menu
3. Paste your API key (starts with ak_) — get one free at app.autype.com
4. The key is stored securely in VS Code's secret storage

Getting Started

1. Install & Sign Up

1. Install this extension from the VS Code Marketplace
2. Create a free account at app.autype.com
3. Copy your API key (starts with ak_)
4. Run Autype: Set API Key from the command palette (Ctrl+Shift+P / Cmd+Shift+P)

2. 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.

3. Configure autype.json

{
  "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 for page sizes, fonts, headers, footers, variables, and more.

4. Write & Preview

1. Open any .md file in the project folder
2. Click the Autype icon in the editor title bar (or run Autype: Show Preview)
3. Click Render in the preview panel
4. Ctrl+Scroll (or Cmd+Scroll) to zoom the PDF
5. Choose a format from the dropdown and click Export

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. Available on paid plans with a 10-second cooldown.

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.

Autype Markdown — Quick Reference

Autype extends standard Markdown with optional attributes and directives. Everything below is in addition to standard Markdown — all regular syntax works as-is.

Inline Formatting

**bold**  *italic*  ~~strikethrough~~  ++underline++  ==highlight==
`inline code`  [link](https://github.com/centerbitco/autype-vscode/blob/HEAD/url)  {{variableName}}

Images with Attributes

![Dashboard](https://github.com/centerbitco/autype-vscode/raw/HEAD/images/dashboard.png){width=500 align=center}
![](https://github.com/centerbitco/autype-vscode/raw/HEAD/images/logo.png){width=200 caption="Company Logo"}

Charts

:::chart{type="bar" title="Revenue by Quarter" caption="Quarterly Revenue"}
labels: Q1, Q2, Q3, Q4
dataset: 2024 | 150, 180, 220, 195 | #3b82f6
dataset: 2023 | 120, 140, 170, 160 | #94a3b8
:::

Supported types: bar, line, pie, doughnut, radar, scatter, bubble, polarArea

Math Equations

$$
\int_{0}^{\infty} e^{-x^2} dx = \frac{\sqrt{\pi}}{2}
$$

Styled Tables

:::table{caption="Sales Data" headerBg="#1e293b" headerColor="#ffffff" rowAltBg="#f8fafc"}
| Product | Q1    | Q2    | Q3    |
|---------|-------|-------|-------|
| Alpha   | 1,200 | 1,500 | 1,800 |
| Beta    | 800   | 950   | 1,100 |
:::

Page Breaks & Layouts

---pagebreak{orientation="landscape"}---

---page{align=center}---
# Cover Page Title
---/page---

---columns{count=2 separate=true}---
Two-column content here...
---/columns---

Auto-Generated Indices

::toc{title="Table of Contents" maxLevel=3}
::listOfFigures{title="List of Figures"}
::listOfTables{title="List of Tables"}

QR Codes

:::qrcode{type="url" size=150 align=center}
https://autype.com
:::

Variables & Dates

Dear {{customerName}}, your invoice from {{date/DD.MM.YYYY}} is attached.

For the complete syntax reference, see docs.autype.com.

Plans & Pricing

Free plan — unlimited preview renders, PDF exports with daily limit. No credit card required.

Upgrade at app.autype.com.

Commands

Settings

Examples

This 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.

Links

• Autype Website
• Documentation
• Markup Reference
• Get Your Free API Key

License

Proprietary — see LICENSE for details.