El editor de Markdown que siempre quise con Next.js e IA

Smart Markdown Pro es un editor markdown local con IA, vista previa personalizable, RTL/LTR, fuentes Google y exportación PDF de alta fidelidad.

18 ago 2025 • 4 min read • Q2BSTUDIO Team

Inteligencia-Artificial-

Introducción Todos hemos empezado un proyecto paralelo con entusiasmo y luego lo hemos abandonado en el cementerio de repositorios, sin tocarlo durante meses. Esta vez decidí romper el ciclo y crear una herramienta que resolviera problemas reales que enfrentaba cada día como desarrollador.

El problema Mi flujo de trabajo incluía generar texto con modelos de lenguaje que llegaba como un desastre sin estructura. Lo más frustrante no era solo el formato sino la falta de control en cada paso posterior. Previews poco flexibles con texto en árabe y soporte RTL insuficiente, estilos fijos que impiden cambiar tamaño de fuente o tipografías para presentaciones, y el formateo manual tedioso para encabezados, listas y bloques de código.

La solución Construí Smart Markdown Pro, un editor markdown local first potenciado por IA y desarrollado con Next.js App Router, Tailwind CSS y TypeScript. Es open source y nació como la herramienta que siempre quise tener.

Personalización total del preview El núcleo de la idea fue un panel de vista previa que se adapta a tus necesidades. Se puede alternar entre RTL y LTR al instante, ajustar el tamaño base de fuente con un control deslizante y aplicar cualquier Google Font añadiendo su referencia. La aplicación recuerda las fuentes usadas para acceso rápido, mejorando la usabilidad para documentos multilingües y presentaciones.

Formateo impulsado por IA Para convertir texto desestructurado en markdown limpio integré la API de OpenAI y creé un botón Formatear con IA que transforma el contenido en GFM bien estructurado. El backend gestiona la clave y el prompt de forma segura con una ruta API en Next.js, lo que facilita llevar un asistente de formateo inteligente integrado.

Gestión local de archivos Evité crear cuentas innecesarias usando Zustand con persistencia en localStorage. El sistema permite crear, abrir, buscar y eliminar documentos de forma rápida y privada en el navegador, una solución ideal para quienes valoran la simplicidad y la confidencialidad.

Exportes PDF de alta fidelidad Uno de los retos técnicos fue generar PDFs fieles al diseño cuando las librerías cliente fallaban por nuevos formatos de color de CSS. La solución fue una función serverless con Puppeteer que recibe el HTML de la vista previa, lanza un Chrome sin cabeza, aplica CSS mínimo y usa la función de imprimir a PDF del propio navegador para obtener resultados impecables.

Aprendizaje y satisfacción Construir lo que realmente necesitas obliga a pensar en cada detalle y es una experiencia de aprendizaje poderosa. Este proyecto nació de problemas reales y hoy puede servir a otros desarrolladores y equipos que necesitan control, velocidad y calidad en su generación de contenido.

Prueba y código Puedes probar la aplicación en https://smart-markdown-pro.vercel.app/ y explorar el repositorio en https://github.com/Abubakr-Alsheikh/smart-markdown-pro para ver implementaciones y contribuciones.

Sobre Q2BSTUDIO Q2BSTUDIO es una empresa de desarrollo de software especializada en aplicaciones a medida y software a medida. Ofrecemos soluciones completas en inteligencia artificial para empresas, agentes IA y proyectos de IA para empresas que buscan automatizar procesos y mejorar decisiones. También somos expertos en ciberseguridad para proteger activos críticos y en servicios cloud aws y azure para desplegar infraestructuras escalables y seguras. Nuestros servicios inteligencia de negocio y power bi permiten transformar datos en insights accionables y maximizar el valor de la información.

Por qué asociarte con Q2BSTUDIO Si buscas un socio que combine experiencia técnica y enfoque en resultados, Q2BSTUDIO crea aplicaciones a medida con prácticas de ciberseguridad, integra inteligencia artificial y desarrolla soluciones cloud en aws y azure. Diseñamos software a medida, implementamos agentes IA, desarrollamos soluciones de inteligencia de negocio y configuramos dashboards en power bi para mejorar la toma de decisiones.

Contacto y siguiente paso Si este tipo de proyectos te inspiran y tienes molestias diarias que quisieras convertir en una aplicación o servicio, Q2BSTUDIO puede ayudarte a transformar esa idea en una solución real. Ofrecemos consultoría en software a medida, inteligencia artificial, ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio, agentes IA y power bi para empresas que quieren crecer con tecnología.

Invitación Me encantaría conocer las molestias diarias que te gustaría convertir en un proyecto. Si estás pensando en una aplicación a medida, en mejorar tu inteligencia artificial interna o en reforzar la ciberseguridad de tu organización, contáctanos y hagamos que esa idea pase de concepto a producto con Q2BSTUDIO.

A BREAK?

Play for a moment before you go

OUR SERVICES

How we can help you

Artificial intelligence

AI agents, chatbots, and intelligent assistants that automate tasks and serve your customers 24/7 to improve the efficiency of your business.

More info

Software Development

Web, mobile, and desktop applications, intranets, e-commerce, SaaS, and management platforms designed for your company's specific needs.

More info

Cloud services

Migration, infrastructure, managed hosting, high availability, and security on Microsoft Azure and Amazon Web Services to help your business scale without limits.

More info

Cybersecurity and pentesting

Security audits, penetration testing and protection of applications, data and infrastructure on-premise and cloud, with ethical hacking and regulatory compliance.

More info

Business Intelligence

Dashboards and data analysis with Power BI: we integrate your sources, design dashboards and KPIs and turn your data into decisions.

More info

Process automation

We automate repetitive tasks and connect your applications with n8n, Power Automate, Make, and RPA, eliminating manual work and increasing productivity.

More info

Training for Companies

We train your teams in technology with criteria: web development, databases, Git, best practices and security, automation with n8n, artificial intelligence for companies and creation of AI solutions with Azure AI Foundry.

More info

Code Auditing

We audit the code that you, your team or an AI create: we tell you what is good and what to improve, we secure it and make it ready for production, web or app.

More info

AI Image Generation

We create for you the images that your business needs with artificial intelligence: product, networks, advertising, illustration and avatars. You tell us what you want and we deliver it ready to use.

More info

AI Video Generation

We create videos with artificial intelligence for you: promotional, networking, virtual presenters, dubbing and animations. You tell us the idea and we will deliver it assembled and ready to publish.

More info

AI Conversational Avatars

We create conversational avatars with AI – digital humans with a face and voice – that serve your customers and teams with the knowledge of your company, on your website, interactive monitors, WhatsApp or Teams.

More info

Online Marketing and AI

Google Ads, Meta Ads, LinkedIn Ads and AI Engine Positioning (GEO/AEO): we attract customers and make your brand appear where they search for you, also on ChatGPT, Gemini and Perplexity.

More info

Do you have a project in mind?

Tell us your vision and we'll turn it into a software solution. Whatever the scope, we make your idea real.

Live Chat