Offline Support

​

Complete Offline Functionality

​

How Offline Mode Works

​

Initial Load Requirements

1. Application Code: HTML, CSS, and JavaScript are downloaded from the CDN
2. Editor Assets: CodeMirror editor components
3. Rendering Libraries: Marked, Mermaid, KaTeX, and Shiki are loaded
4. Fonts and Icons: UI assets are cached by the browser

​

After Initial Load

• All features work offline: Editing, preview, syntax highlighting, math rendering, diagrams
• No network requests: The application never attempts to contact servers
• Local storage only: All data operations use IndexedDB
• No cloud sync: Documents remain on your device

​

Offline Features

​

Document Management

• Create new documents
• Edit existing documents
• Delete documents
• Auto-save changes to IndexedDB
• View document list sorted by last edit

​

Editor Capabilities

• Real-time markdown editing
• Syntax highlighting for 16+ languages
• Markdown linting with remark-lint
• Auto-fix for common markdown issues
• Multiple view modes (editor, split, preview)
• Resizable split panes

​

Rendering Features

• Live markdown preview
• Mermaid diagram rendering (flowcharts, sequence diagrams, ER diagrams, Gantt charts, etc.)
• KaTeX math rendering (inline and display mode)
• Code syntax highlighting via Shiki
• GitHub-style alerts (NOTE, TIP, IMPORTANT, WARNING, CAUTION)
• Tables and footnotes
• GitHub Flavored Markdown (GFM) support

​

Export Functionality

• Export documents as markdown files
• Download to your local filesystem
• No cloud storage or upload required

​

Architecture for Offline Operation

​

No Server Dependencies

// From src/lib/db.ts - All operations are local
export function getAllDocs(): Promise<Document[]> {
  return withStore("readonly", (store) => store.getAll())
}

export function saveDoc(doc: Document): Promise<void> {
  return withStore("readwrite", (store) => store.put(doc))
}

• No fetch() calls to external APIs
• No authentication tokens or API keys
• No network error handling (because there are no network requests)

​

Client-Side Processing

1. Markdown Parsing: marked library runs client-side
2. Diagram Rendering: mermaid generates SVGs locally
3. Math Rendering: katex processes LaTeX locally
4. Syntax Highlighting: shiki highlights code blocks locally
5. Linting: remark-lint analyzes markdown locally

​

Browser Caching

• Static Assets: HTML, CSS, JavaScript files
• Libraries: CodeMirror, Marked, Mermaid, KaTeX, Shiki
• Fonts: UI typography assets

​

Testing Offline Mode

​

Method 1: Browser DevTools

1. Open CodeInk in your browser
2. Open Developer Tools (F12)
3. Go to Network tab
4. Enable “Offline” mode
5. Continue using CodeInk normally

​

Method 2: Airplane Mode

1. Load CodeInk while online
2. Enable airplane mode or disconnect WiFi
3. Refresh the page (if cached) or continue with loaded page
4. All features should work normally

​

Method 3: Network Inspection

1. Open CodeInk with Network tab open
2. Create and edit documents
3. Observe that no network requests are made after initial load

​

Comparison: Online vs Offline

​

Browser Storage Persistence

​

Data Retention

• Documents remain stored between sessions
• Closing the browser does not delete data
• System restarts do not affect stored documents
• Works across multiple browser tabs

​

Storage Isolation

• Work profile documents are separate from personal profile
• Different browsers have independent storage
• Incognito/private mode uses temporary storage

​

Deployment Architecture

• Hosting: Cloudflare Pages (based on @astrojs/cloudflare dependency)
• Framework: Astro (static site generator)
• Build Output: Pre-rendered HTML and bundled JavaScript
• No Server: No backend, database, or API endpoints

1. Fast Initial Load: Static assets served from CDN edge locations
2. No Runtime Dependencies: No server to go down or become unavailable
3. Offline Capability: Once cached, works without internet
4. Complete Privacy: No server-side processing or logging

​

Privacy Benefits of Offline Operation

​

No Data Transmission

• Documents never sent to servers
• No analytics pings or tracking beacons
• No usage metrics collected
• No telemetry or crash reporting

​

No Network Surveillance

• ISPs cannot see your document content
• Network administrators cannot monitor usage
• No DNS lookups during editing
• No external service dependencies

​

Complete Isolation

• Works on air-gapped systems (after initial load)
• No cloud service integrations
• No third-party API calls
• No external authentication or authorization

​

Use Cases for Offline Operation

​

Ideal Scenarios

1. Travel: Edit documents on flights or in areas with poor connectivity
2. Privacy-Sensitive Work: Ensure content never touches the network
3. Unreliable Internet: Continue working during connection drops
4. Corporate Networks: No external dependencies to whitelist
5. Bandwidth Conservation: Zero data usage after initial load
6. Air-Gapped Systems: Use on isolated networks (with initial cached load)

​

Example Workflow

# At home with internet
1. Visit https://codeink.app
2. Create and edit documents
3. Export important documents to filesystem

# On airplane (offline)
4. Open CodeInk (loads from cache)
5. Continue editing existing documents
6. Create new documents
7. All changes saved to IndexedDB

# Back online
8. Export updated documents if needed
9. No synchronization required

​

Technical Implementation Details

​

No Network Code

• No fetch() calls
• No WebSocket connections
• No AJAX requests
• No external API integrations

• indexedDB API (browser built-in)
• Promise-based async operations
• Local error handling

​

Client-Side Dependencies

{
  "marked": "^17.0.1",           // Markdown parser
  "mermaid": "^11.12.2",         // Diagram renderer
  "katex": "^0.16.28",           // Math renderer
  "shiki": "^3.22.0",            // Syntax highlighter
  "codemirror": "^6.0.1"         // Editor component
}

​

Build-Time Optimization

• Static HTML generated during build
• JavaScript bundled and minified
• Assets optimized and compressed
• No server-side rendering required at runtime

​

Limitations

​

What Doesn’t Work Offline

​

What Still Works

• All editing and preview features
• All document management operations
• All rendering capabilities (diagrams, math, code highlighting)
• Export functionality
• Markdown linting and auto-fix

​

Best Practices for Offline Use

​

Before Going Offline

1. Load CodeInk at least once while online to cache the application
2. Create a browser bookmark for easy offline access
3. Export critical documents as backup
4. Test offline mode before relying on it

​

During Offline Use

1. Use normal browser mode (not incognito) for persistence
2. Keep the browser tab open to maintain state
3. Export frequently to filesystem as additional backup
4. Avoid clearing browser data which would delete cached app and documents

​

After Returning Online

1. Export documents if you need to share or back them up
2. Browser will automatically update cache for new versions (optional)
3. No synchronization needed - documents remain local

​

Comparison with Other Tools

​

Next Steps