DocFlip

Inspiration

The inspiration for DocFlip stemmed from the common challenge of transforming content, particularly from rich text sources like Google Docs, into clean, structured Markdown suitable for various applications, especially large language models (LLMs). Existing tools often struggled with preserving formatting accurately or introduced excessive, unnecessary styling. We envisioned a seamless, bi-directional editor that not only converts between rich text and Markdown but also intelligently cleans content, making it "AI-ready" with a single, intuitive interface.

What it does

DocFlip is a powerful bi-directional rich text and Markdown editor. It allows users to effortlessly convert content between HTML (rich text) and Markdown formats. Key features include:

• Smart Content Detection: Automatically identifies whether pasted content is HTML, Markdown, or plain text and adjusts the editor view accordingly.

• Bi-directional Conversion: Provides dedicated buttons to convert rich text to Markdown and vice-versa, ensuring accurate and consistent formatting.

• AI Clean Mode: A unique feature that aggressively strips unnecessary styling and extraneous elements from HTML during conversion to Markdown, resulting in cleaner, more concise output optimized for LLM consumption.

• Intuitive Editing Experience: Offers a full-featured rich text editor powered by Tiptap and a robust Markdown editor built with Ace Editor, both supporting syntax highlighting and essential formatting tools.

• Export and Copy Options: Users can easily export their content as .md or .html files, or copy the content directly to their clipboard.

• Dark Mode: A toggle for a comfortable viewing experience in different lighting conditions.

• Keyboard Shortcuts: Quick access to switch between rich text and Markdown editors (Ctrl+1 and Ctrl+2).

How we built it

DocFlip was built as a testament to the power of a comprehensive, single-prompt development approach. The entire application structure, core logic, and initial UI were conceptualized and generated from a highly detailed initial prompt. This allowed for rapid prototyping and a cohesive design from the outset. The project leverages React for the frontend, Vite as the build tool, and Tailwind CSS for styling. For the rich text editing experience, we integrated Tiptap, while Ace Editor provides a robust environment for Markdown editing. The crucial conversion logic relies on turndown for HTML to Markdown conversion and remark with rehype for Markdown to HTML, ensuring high fidelity and flexibility. The "AI Clean Mode" was implemented with custom turndown rules and additional post-processing to achieve its specific cleaning objectives.

Challenges we ran into

Despite the efficiency of the single-prompt generation, the initial setup and refinement phase presented a few challenges. We encountered issues with dependency resolution, specifically a 404 Not Found error for @types/react-ace during npm install, which required careful adjustment of the package.json to ensure compatibility. Another hurdle was a vite command not found error during npm run dev, indicating a path or configuration issue that needed to be addressed for the development server to start correctly. Furthermore, a critical error arose due to multiple exports of the convertMarkdownToHtml function in src/utils/converter.ts, which was resolved by consolidating the conversion logic. Finally, an Uncaught SyntaxError related to lowlight.js exports necessitated replacing that dependency to ensure the application's stability.

Accomplishments that we're proud of

We are particularly proud of DocFlip's seamless bi-directional conversion capabilities and its intelligent content detection, which significantly enhances user experience. The "AI Clean Mode" stands out as a key accomplishment, providing a unique and valuable utility for users working with LLMs. The application's responsive and aesthetically pleasing user interface, built entirely with Tailwind CSS and Lucide React icons, demonstrates a production-ready design achieved through efficient development. The successful resolution of initial build and dependency challenges, all while maintaining the integrity of the single-prompt development vision, is also a significant source of pride.

What we learned

Developing DocFlip reinforced the importance of robust content parsing and transformation, especially when dealing with diverse input formats. We gained deeper insights into the intricacies of integrating rich text editors like Tiptap with code editors like Ace Editor, and the nuances of managing their content synchronization. The project also highlighted the immense potential of a well-crafted, comprehensive initial prompt for accelerating development and ensuring architectural consistency from the ground up. Debugging and resolving complex dependency and build issues in a modern frontend stack provided valuable experience in troubleshooting and maintaining application stability.

What's next for DocFlip

For the future of DocFlip, we envision several enhancements. We plan to explore more advanced AI integrations, such as summarization, rephrasing, or content generation directly within the editor. Expanding support for additional document formats, like PDF import/export, is also on the roadmap. Cloud storage integration would allow users to save and access their documents across devices. We also aim to refine the mobile responsiveness for an even better experience on smaller screens and introduce more sophisticated cleaning options for various use cases. Finally, implementing a "bundle export" feature to download both Markdown and HTML versions in a single archive would further streamline the user workflow.

Built With

• bolt