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 • Equipo 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?

Juega un momento antes de irte

NUESTROS SERVICIOS

Cómo podemos ayudarte

Inteligencia artificial

Agentes de IA, chatbots y asistentes inteligentes que automatizan tareas y atienden a tus clientes 24/7 para mejorar la eficiencia de tu negocio.

Más info

Desarrollo de software

Aplicaciones web, móviles y de escritorio, intranets, e-commerce, SaaS y plataformas de gestión diseñadas para las necesidades concretas de tu empresa.

Más info

Servicios cloud

Migración, infraestructura, hosting gestionado, alta disponibilidad y seguridad en Microsoft Azure y Amazon Web Services para que tu negocio escale sin límites.

Más info

Ciberseguridad y pentesting

Auditorías de seguridad, test de intrusión (pentesting) y protección de aplicaciones, datos e infraestructura on-premise y cloud, con hacking ético y cumplimiento normativo.

Más info

Business Intelligence

Cuadros de mando y análisis de datos con Power BI: integramos tus fuentes, diseñamos dashboards y KPIs y convertimos tus datos en decisiones.

Más info

Automatización de procesos

Automatizamos tareas repetitivas y conectamos tus aplicaciones con n8n, Power Automate, Make y RPA, eliminando trabajo manual y aumentando la productividad.

Más info

Formación para empresas

Formamos a tus equipos en tecnología con criterio: desarrollo web, bases de datos, Git, buenas prácticas y seguridad, automatización con n8n, inteligencia artificial para empresas y creación de soluciones de IA con Azure AI Foundry.

Más info

Auditoría de código

Auditamos el código que creas tú, tu equipo o una IA: te decimos qué está bien y qué mejorar, lo securizamos y lo dejamos listo para producción, web o app.

Más info

Generación de imágenes con IA

Creamos por ti las imágenes que necesita tu negocio con inteligencia artificial: producto, redes, publicidad, ilustración y avatares. Tú nos dices qué quieres y te lo entregamos listo para usar.

Más info

Generación de vídeos con IA

Creamos por ti vídeos con inteligencia artificial: promocionales, para redes, presentadores virtuales, doblaje y animaciones. Nos cuentas la idea y te lo entregamos montado y listo para publicar.

Más info

Avatares conversacionales con IA

Creamos avatares conversacionales con IA —humanos digitales con cara y voz— que atienden a tus clientes y equipos con el conocimiento de tu empresa, en tu web, monitores interactivos, WhatsApp o Teams.

Más info

Marketing Online e IA

Google Ads, Meta Ads, LinkedIn Ads y posicionamiento en motores de IA (GEO/AEO): captamos clientes y hacemos que tu marca aparezca donde te buscan, también en ChatGPT, Gemini y Perplexity.

Más info

¿Tienes un proyecto en mente?

Cuéntanos tu visión y la convertimos en una solución de software. Sea cual sea el alcance, hacemos realidad tu idea.

Live Chat