c2stack/cc-md-to-pdf repository overview

⁠CC Markdown to PDF

A modern, browser-based Markdown to PDF converter with live preview. Write your Markdown content and instantly see how it will look when printed or converted to PDF.

⁠✨ Features

• Live Markdown Preview: See your formatted content in real-time as you type
• Split-Pane Editor: Side-by-side Markdown editor and preview
• Print to PDF: Generate PDF files directly from your browser using the print dialog
• Toggle Preview: Option to show/hide the preview pane for focused writing
• Example Template: Quick-start with a pre-filled Markdown example including tables
• Table Support: Full support for Markdown tables and formatting
• Responsive Design: Works seamlessly on desktop and mobile devices
• Dark Mode Support: Built with modern UI components and theming

⁠🚀 Getting Started

⁠Prerequisites

• Bun⁠ runtime installed

⁠Installation

1. Clone the repository and navigate to the app directory:

cd apps/cc-md-to-pdf

1. Install dependencies:

bun install

⁠Development

Run the development server:

bun dev

The app will be available at http://localhost:5173 (or another port if 5173 is in use).

⁠🏗️ Building For Production

Build the application for production:

bun build

Preview the production build:

bun preview

⁠📖 Usage

1. Write Markdown: Type or paste your Markdown content in the left pane
2. Preview: See the formatted output in real-time on the right pane
3. Insert Example: Click "Insert example" to load a sample Markdown document with tables
4. Toggle Preview: Use the switch to show/hide the preview pane
5. Generate PDF: Click "Print Preview" to open the print dialog and save as PDF

⁠Supported Markdown Features

• Headings (H1-H6)
• Bold and italic text
• Links
• Lists (ordered and unordered)
• Tables
• Code blocks
• Blockquotes
• And more...

⁠🧪 Testing

Run the test suite:

bun test

This project uses Vitest⁠ for testing.

⁠🛠️ Tech Stack

• React 19⁠ - UI framework
• TanStack Router⁠ - File-based routing
• Vite⁠ - Build tool and dev server
• Tailwind CSS 4⁠ - Styling
• Marked⁠ - Markdown parser
• Lucide React⁠ - Icon library
• Bun - JavaScript runtime and package manager

⁠📁 Project Structure

cc-md-to-pdf/
├── src/
│   ├── routes/          # TanStack Router file-based routes
│   │   ├── __root.tsx   # Root layout
│   │   └── index.tsx    # Main app component
│   ├── utils/           # Utility functions
│   ├── main.tsx         # Application entry point
│   └── styles.css       # Global styles
├── public/              # Static assets
└── index.html           # HTML template

⁠🐳 Docker

A Dockerfile is included for containerized deployment. Build and run with (run from the monorepo root directory):

docker build -t cc-photo-tools -f apps/cc-photo-tools/Dockerfile .
docker run -p 8080:80 cc-md-to-pdf

⁠🤝 Contributing

This is part of the cc-web-tools monorepo. See the main repository for contribution guidelines.

⁠📄 License

Part of the cc-web-tools project.