Exporting Documents

CodeInk allows you to export any document as a standard Markdown (.md) file that works with any markdown-compatible application.

Quick Export

Export your current document with a single click:

Open Document

Navigate to the document you want to export in the editor

Click Export Button

Click the MD button (with download icon) in the header toolbar

Save File

Your browser’s download dialog appears - choose where to save the file

The export button is located in the header toolbar, right next to the view mode buttons.

Export Implementation

Here’s how CodeInk exports documents:

export function setupMarkdownExport(signal: AbortSignal) {
  const exportMdBtn = document.getElementById("export-md")
  if (!exportMdBtn) return

  exportMdBtn.addEventListener("click", () => {
    // Get current editor content
    const content = getEditorContent()
    
    // Extract title from first H1 heading
    const titleMatch = content.match(/^#\s+(.+)$/m)
    const title = titleMatch ? titleMatch[1].trim() : "document"
    
    // Sanitize title for filename
    const sanitized = title
      .replace(/[^a-z0-9\u00e1\u00e9\u00ed\u00f3\u00fa\u00fc\u00f1\s-]/gi, "")
      .replace(/\s+/g, "-")
    const filename = `${sanitized}.md`

    // Create and download file
    const blob = new Blob([content], { type: "text/markdown;charset=utf-8" })
    const url = URL.createObjectURL(blob)
    const link = document.createElement("a")
    link.href = url
    link.download = filename
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
    URL.revokeObjectURL(url)
  }, { signal })
}

Filename Generation

CodeInk automatically generates smart filenames based on your document content:

Title Extraction

The filename is extracted from the first H1 heading in your document:

# My Project Documentation

Content here...

Exported as: My-Project-Documentation.md

If your document doesn’t have an H1 heading, the file will be named document.md.

Sanitization Rules

Filenames are sanitized to ensure compatibility:

Allowed Characters:
- Letters: a-z, A-Z
- Numbers: 0-9
- Accented characters: á, é, í, ó, ú, ü, ñ
- Hyphens: -
Removed Characters:
- Special characters: @, #, $, %, etc.
- Punctuation: :, ;, ?, !, etc.
- Symbols: &, *, +, =, etc.
Space Conversion:
- All spaces become hyphens: → -
- Multiple spaces collapse to single hyphen: → -

Example Transformations

Document Title	Exported Filename
`Getting Started Guide`	`Getting-Started-Guide.md`
`API: Documentation v2.0`	`API-Documentation-v20.md`
`How to use CodeInk?`	`How-to-use-CodeInk.md`
`Feature #123: Export`	`Feature-123-Export.md`
(no heading)	`document.md`

Export Format

What’s Exported

The exported file contains the complete raw markdown from the editor, including:

All headings and text
Code blocks with language tags
Lists (ordered and unordered)
Links and images
Tables
Blockquotes
HTML comments
Mermaid diagram code
KaTeX math expressions
Horizontal rules
Task lists

What’s Not Exported

The export is plain markdown only. These items are not included:

Rendered HTML
Custom CSS styling
CodeInk metadata (document ID, timestamps, custom title)
Preview rendering state

File Characteristics

Format: Plain text markdown
Encoding: UTF-8
Line Endings: Preserved from editor (typically LF on Unix-like systems, CRLF on Windows)
MIME Type: text/markdown;charset=utf-8

Using Exported Files

Your exported markdown files work with any markdown-compatible application:

Version Control

Commit to Git repositories (GitHub, GitLab, Bitbucket)

Static Site Generators

Use with Jekyll, Hugo, Gatsby, Next.js, etc.

Documentation Tools

Import into Docusaurus, MkDocs, GitBook, Mintlify

Note-Taking Apps

Open in Obsidian, Notion, Bear, Typora, or any markdown editor

Browser Download Behavior

When you click the export button, your browser handles the download:

Chrome / Edge

File downloads to your default Downloads folder
Notification appears at bottom of browser
Click notification to open file or folder

Firefox

Dialog appears asking where to save
Option to remember choice for .md files
Downloads to chosen location

Safari

File downloads to Downloads folder
Download icon appears in toolbar
Click to view downloaded files

Configure your browser’s download settings to choose where files are saved or to always prompt for location.

Export Button UI

The export button is styled consistently with other toolbar buttons:

<button 
  id="export-md" 
  type="button" 
  aria-label="Export as Markdown" 
  title="Export as Markdown"
>
  <svg><!-- download icon --></svg>
  <span class="hidden sm:inline">MD</span>
</button>

Button Features

Icon: Download arrow pointing down
Label: “MD” (visible on desktop)
Tooltip: “Export as Markdown” on hover
Responsive: Icon-only on mobile

Technical Details

Blob Creation

CodeInk uses the Blob API to create the file:

const blob = new Blob([content], { 
  type: "text/markdown;charset=utf-8" 
})

This creates a binary large object containing your markdown text with proper encoding.

Object URL

A temporary URL is created for the download:

const url = URL.createObjectURL(blob)

This URL is valid only for the current page session and is revoked after download to free memory:

URL.revokeObjectURL(url)

Download Trigger

The download is triggered by creating a temporary link element:

const link = document.createElement("a")
link.href = url
link.download = filename
document.body.appendChild(link)
link.click()
document.body.removeChild(link)

This programmatic approach works in all modern browsers without user interaction beyond the initial button click.

Best Practices

Use Descriptive H1 Headings

Start your document with a clear H1 heading to generate a meaningful filename.

Export Before Major Edits

Create a backup by exporting before making significant changes to your document.

Organize Downloads

Create folders for exported documents to keep them organized by project or topic.

Use Version Control

For important documents, export to a Git repository to track changes over time.

Common Use Cases

1. Backup Important Work

Export documents regularly to create backups outside of your browser:

Export Document

Click the MD button to download your document

Save to Cloud Storage

Move the exported file to Dropbox, Google Drive, or OneDrive

Continue Editing

Keep working in CodeInk with peace of mind

Send markdown files to team members who use different tools:

Export the document
Share via email, Slack, or other messaging
Recipients can open in their preferred markdown editor

3. Publish to GitHub

Export documents for use in GitHub repositories:

# After exporting
mv ~/Downloads/API-Documentation.md ./docs/
git add docs/API-Documentation.md
git commit -m "Add API documentation"
git push

4. Import to CMS

Many content management systems accept markdown:

Export from CodeInk
Upload to your CMS or static site generator
Publish to your website

Limitations

No Batch Export: CodeInk exports one document at a time. To export multiple documents, visit each document and click the export button individually.

No Auto-Export: Export is manual only. If you need automatic backups, consider using a script to periodically export from IndexedDB.

Future Export Options

While CodeInk currently only exports to markdown, here are some potential future export formats:

PDF: Export rendered preview as PDF
HTML: Export as standalone HTML file
DOCX: Export to Microsoft Word format
Batch Export: Export all documents as a ZIP file

Want these features? Let the CodeInk team know what export formats would be most useful for your workflow!

Comparison with Auto-Save

Feature	Auto-Save	Export
Location	Browser IndexedDB	File system
Trigger	Automatic (1s after typing)	Manual (button click)
Format	JSON (structured data)	Plain markdown text
Portability	Browser-specific	Universal
Backup	Limited to browser	Full control
Sharing	Not shareable	Easy to share

Use auto-save for working drafts and export for backups, sharing, and publishing.

Get Started

Features

Guides

Privacy & Security

​Quick Export

​Export Implementation

​Filename Generation

​Title Extraction

​Sanitization Rules

​Example Transformations

​Export Format

​What’s Exported

​What’s Not Exported

​File Characteristics

​Using Exported Files

Version Control

Static Site Generators

Documentation Tools

Note-Taking Apps

​Browser Download Behavior

​Chrome / Edge

​Firefox

​Safari

​Export Button UI

​Button Features

​Technical Details

​Blob Creation

​Object URL

​Download Trigger

​Best Practices

Use Descriptive H1 Headings

Export Before Major Edits

Organize Downloads

Use Version Control

​Common Use Cases

​1. Backup Important Work

​2. Share with Collaborators

​3. Publish to GitHub

​4. Import to CMS

​Limitations

​Future Export Options

​Comparison with Auto-Save

Build docs developers (and LLMs) love

Quick Export

Export Implementation

Filename Generation

Title Extraction

Sanitization Rules

Example Transformations

Export Format

What’s Exported

What’s Not Exported

File Characteristics

Using Exported Files

Browser Download Behavior

Chrome / Edge

Firefox

Safari

Export Button UI

Button Features

Technical Details

Blob Creation

Object URL

Download Trigger

Best Practices

Common Use Cases

1. Backup Important Work

2. Share with Collaborators

3. Publish to GitHub

4. Import to CMS

Limitations

Future Export Options

Comparison with Auto-Save