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 de lectura • Equip Q2BSTUDIO

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.

UNA PAUSA?

Juga una estona abans de marxar

ELS NOSTRES SERVEIS

Com et podem ajudar

Intel·ligència artificial

Agents d'IA, chatbots i assistents intel·ligents que automatitzen tasques i atenen els teus clients 24/7 per millorar l'eficiència del teu negoci.

Més info

Desenvolupament de programari

Aplicacions web, mòbils i d'escriptori, intranets, e-commerce, SaaS i plataformes de gestió dissenyades per a les necessitats concretes de la teva empresa.

Més info

Serveis cloud

Migració, infraestructura, hosting gestionat, alta disponibilitat i seguretat en Microsoft Azure i Amazon Web Services perquè el teu negoci escali sense límits.

Més info

Ciberseguretat i pentesting

Auditories de seguretat, test d'intrusió (pentesting) i protecció d'aplicacions, dades i infraestructura on-premise i cloud, amb hacking ètic i compliment normatiu.

Més info

Business Intelligence

Quadres de comandament i anàlisi de dades amb Power BI: integrem les teves fonts, dissenyem dashboards i KPIs i convertim les teves dades en decisions.

Més info

Automatització de processos

Automatitzem tasques repetitives i connectem les teves aplicacions amb n8n, Power Automate, Make i RPA, eliminant treball manual i augmentant la productivitat.

Més info

Formació per a empreses

Formem els teus equips en tecnologia amb criteri: desenvolupament web, bases de dades, Git, bones pràctiques i seguretat, automatització amb n8n, intel·ligència artificial per a empreses i creació de solucions d'IA amb Azure AI Foundry.

Més info

Auditoria de codi

Auditem el codi que creguis tu, el teu equip o una IA: et diem què està bé i què millorar, el securitzem i el deixem llest per a producció, web o app.

Més info

Generació d'imatges amb IA

Creem per tu les imatges que necessita el teu negoci amb intel·ligència artificial: producte, xarxes, publicitat, il·lustració i avatars. Tu ens dius què vols i t'ho lliurem llest per fer servir.

Més info

Generació de vídeos amb IA

Creem per tu vídeos amb intel·ligència artificial: promocionals, per a xarxes, presentadors virtuals, doblatge i animacions. Ens comptes la idea i t'ho lliurem muntat i llest per publicar.

Més info

Avatars conversacionals amb IA

Creem avatars conversacionals amb IA —humans digitals amb cara i veu— que atenen els teus clients i equips amb el coneixement de la teva empresa, a la teva web, monitors interactius, WhatsApp o Teams.

Més info

Màrqueting Online i IA

Google Ads, Meta Ads, LinkedIn Ads i posicionament en motors d'IA (GEO/AEO): captem clients i fem que la teva marca aparegui on et busquen, també a ChatGPT, Gemini i Perplexity.

Més info

Tens un projecte en ment?

Explica'ns la teva visió i la convertim en una solució de programari. Sigui quin sigui l'abast, fem realitat la teva idea.

Live Chat