$ show joemccann/dillinger
Dillinger is a cloud-enabled, online Markdown editor with live preview, export to Markdown, HTML, and PDF, and synchronization with cloud storage services including GitHub, Dropbox, Google Drive, OneDrive, and Bitbucket. Built with Next.js 14 (App Router), the application uses Monaco Editor for editing, Zustand for client-side state management with localStorage persistence, and markdown-it with a rich plugin chain for rendering. It features a modular architecture with API routes for OAuth flows and file operations per cloud provider, a versioned public REST API (v1) for rendering and export, and separate packages for a CLI tool and an MCP server for LLM integration. The codebase is well-organized with clear component separation (editor, preview, sidebar, modals, UI primitives), custom hooks per integration, and comprehensive unit and E2E test coverage. Auxiliary agent/skill files and design system CSVs exist in the repository but are development tools, not part of the application runtime.
The LLM identified 3 files worth highlighting for reuse:
Implements a Zustand store with hydration and persistence patterns. The store manages documents, settings, and UI state, with selective subscriptions to avoid unnecessary re-renders. It uses localStorage for persistence with a 2-second debounce and a hydration mechanism via StoreProvider to ensure client-side state is loaded before rendering. This pattern is self-contained and can be extracted into any React project requiring client-side state persistence.
Provides the core Markdown rendering pipeline using markdown-it with 11 plugins (including KaTeX, syntax highlighting, footnotes, task lists, and emoji). The renderer is dynamically imported to avoid SSR issues, and output is sanitized with DOMPurify. The plugin chain is configurable and demonstrates a clean, extensible pattern for building a secure Markdown renderer. This module can be extracted and reused in any Node.js or browser Markdown processing context.
A context-based toast notification system with a provider and useToast hook. It supports multiple toast types (success, error, info), auto-dismiss, and dynamic creation. The component is fully self-contained, uses React context for state management, and can be dropped into any React application without external dependencies. It demonstrates a clean, reusable pattern for global UI notifications.