openshowcase
OpenShowcase es una herramienta open source para crear demos interactivos auto-alojados grabando flujos de navegación web, editándolos y embebéndolos como componentes React o Vue. Sin cuentas ni servicios externos.
Ficha actualizada 24 sept 2026, 11:07 · upstream 24 sept 2026, 11:01 · release v0.1.0
Qué es openshowcase
Descripción editorial construida a partir del repositorio, su documentación y sus señales de mantenimiento.
OpenShowcase permite capturar flujos de navegación en aplicaciones web mediante una extensión de Chrome que registra clics, desplazamientos y escritura. Cada interacción se convierte en un paso editable con hotspots, tooltips y clips de video entre acciones.
El flujo de trabajo consta de tres fases: grabación (captura del tab como video), edición (organización de pasos con hotspots y anotaciones) y exportación (paquete ZIP con steps.json, frames WebP y video WebM). El resultado es un bundle independiente que no requiere backend ni base de datos.
Para embeber demos, se incluye un player para React (@rustrak/openshowcase-player-react) y Vue (@rustrak/openshowcase-player-vue), ambos con ~55 KB gzipped. Los paths de assets se resuelven relativos a steps.json, permitiendo despliegue desde cualquier carpeta sin dependencias externas.
- Crear demos interactivos para documentación técnica de productos SaaS
- Generar tutoriales paso a paso para onboarding de usuarios
- Integrar demostraciones en landing pages sin backend ni API
- Documentar flujos complejos de aplicaciones web internas
- Sin dependencias de terceros: exportación como archivos planos (JSON, WebP, WebM)
- Soporte nativo para React y Vue mediante componentes embebibles
- Formato de datos basado en Zod con tipos TypeScript definidos
- Licencia MIT permitiendo uso comercial y redistribución libre
- Arquitectura framework-agnostic para el motor de reproducción
- Estado early development: sin publicación oficial en Chrome Web Store ni npm
- Requiere Node.js 22+ y pnpm 12+ para desarrollo local
- No incluye Docker, Dockerfile o docker-compose para despliegue simplificado
- Dependencia de extensión Chrome para la fase de grabación inicial
Capturas del proyecto
Imágenes reales detectadas en la documentación del repositorio.
Perfil de infraestructura
Estimación inicial derivada del repositorio y de los servicios detectados.
Despliegue detectado
Qué señales reales de instalación hemos encontrado.
Desplegar copiando el bundle exportado en cualquier servidor web estático. Para desarrollo: pnpm install, pnpm build y cargar la extensión desde chrome://extensions con Developer mode activado. Requiere Node 22+ y pnpm 12+. Los paths de assets se resuelven relativos a steps.json.
Stack y dependencias
Componentes inferidos a partir de manifests, configuración y documentación.
Experiencia real de la comunidad
Ayuda a contrastar la estimación automática con instalaciones reales.
Todavía no hay datos comunitarios para este proyecto.