Skip to main content

​
Overview

The Autype VS Code Extension 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

Autype VS Code Extension 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
The extension includes three example projects (business report, API documentation, scientific paper) so you can see everything in action.

​
Getting Started

1

Install & Sign Up

Install the extension from the VS Code Marketplace. Create a free account at app.autype.com and copy your API key (starts with ak_).
2

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 keyAutype quick-pick menu with all commands — "Set API Key" highlighted
3

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

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

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 panelClick Render to generate the PDF, then Ctrl+Scroll (Cmd+Scroll on macOS) to zoom. 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.

​
Commands

CommandDescription
Autype: Show PreviewOpen the preview panel
Autype: Render DocumentRender the current document
Autype: Export as PDFExport as PDF
Autype: Export as DOCXExport as DOCX
Autype: Export as ODTExport as ODT
Autype: Clean Image CacheClear cached image uploads
Autype: Create New DocumentScaffold a new project in a folder
Autype: Set API KeyStore your API key securely
Autype: Remove API KeyDelete the stored API key
Autype: Open MenuQuick-pick menu from the status bar

​
Settings

SettingDefaultDescription
autype.apiBaseUrlhttps://api.autype.com/api/v1/devAutype Developer API base URL
autype.toolbar.visibletrueShow the insert toolbar in the preview panel
autype.toolbar.iconSizesmallToolbar icon size (small, medium, large)

​
Plans & Pricing

FeatureFreePaid
Preview renderingUnlimited (watermarked)Unlimited (watermarked)
PDF exportRate-limited, watermarkedUnlimited, full quality
DOCX / ODT export—Unlimited, full quality
Auto-rerender—Included
Upgrade at app.autype.com.

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