Editor visual self-hosted para crear, probar y publicar endpoints HTTP sin escribir controladores.

Qué hace

• Crea endpoints GET, POST, PUT, PATCH y DELETE
• Organiza la API en un canvas visual con drag, zoom, minimapa y autoalineado
• Edita cada endpoint como un flujo Request → pasos → Response
• Prueba borradores con traza de pasos antes de publicarlos
• Publica endpoints reales bajo /api/*
• Conecta Postgresql para leer y escribir datos desde el flujo
• Persiste editor, borradores, versiones publicadas y anotaciones en SQLite

Funcionalidades actuales

Canvas del servidor

• mapa visual de endpoints
• mover endpoints libremente
• anotaciones de texto en el canvas
• buscador global de endpoints (Ctrl/Cmd + K)
• edición rápida de nombre, ruta y descripción
• activación y desactivación de endpoints
• eliminación de endpoints

Editor de flujos

Cada endpoint nace con dos nodos base:

• Request
• Response

Pasos disponibles hoy:

• Validate Schema
• Validate Value
• Select Fields
• Remove Fields
• Rename Fields
• Set Value
• Convert Type
• Text Operation
• Math Operation
• Postgresql Select
• Postgresql Insert
• Postgresql Update
• Postgresql Delete

Además incluye:

• reordenado drag & drop de pasos
• guardado automático del borrador
• validaciones bloqueantes antes de publicar
• prueba manual del draft con body JSON y params de ruta
• publicación de versiones inmutables

Runtime publicado

• expone la versión activa en /api/*
• resuelve rutas dinámicas como /products/:id
• responde solo con endpoints publicados y habilitados
• usa 200 por defecto y 201 en POST
• devuelve respuestas de validación configuradas desde el flujo

Estado actual

MVP funcional y usable en local.

Hoy ya cubre:

• editor visual del servidor
• publicación real de endpoints
• soporte completo para GET, POST, PUT, PATCH y DELETE
• validaciones de request
• transformaciones de payload
• integración básica con Postgresql
• versionado publicado + borrador editable
• CLI local para levantar Studio por proyecto

Pendiente para versiones siguientes:

• autenticación y multiusuario
• workspaces o múltiples APIs por instalación
• más integraciones además de Postgresql
• pasos de lógica más avanzados y observabilidad

Quickstart

Opción recomendada: instalación global

Requisitos:

• Node.js

npm install -g endpoint-studio
endpoint-studio start

Abre http://localhost:3000.

endpoint-studio start usa 3000 por defecto y cambia a 3001 si el puerto ya está ocupado localmente.

Segunda opción: ejecutar con pnpx

Si no quieres instalarlo globalmente, ejecútalo así:

pnpx --allow-build=better-sqlite3 endpoint-studio start

Sin --allow-build=better-sqlite3, pnpm puede omitir el script de instalación de better-sqlite3 y fallar con Could not locate the bindings file.

Última opción: compilarlo tú mismo

Úsalo si vas a desarrollar o tocar el código fuente.

Requisitos:

• Node.js
• pnpm

pnpm install
pnpm build
pnpm start

La build genera el servidor en .output/server/index.mjs.

Desarrollo

pnpm dev

En desarrollo la app crea y migra automáticamente ./database/app.db.

CLI

Si quieres exponer el binario globalmente desde este repo después de compilar:

pnpm build
pnpm link --global
endpoint-studio start

Comandos disponibles:

endpoint-studio start [--port 4500] [--no-open]
endpoint-studio stop
endpoint-studio restart [--port 4500] [--no-open]

Cuando se ejecuta como CLI, cada proyecto guarda su estado en:

• endpoint-studio.json
• .endpoint-studio/data.db
• .endpoint-studio/process.json

Cómo se usa

1. Crea un endpoint

Desde el canvas principal pulsa Crear endpoint y define:

• método
• ruta
• nombre
• descripción opcional

Ejemplo:

• método: POST
• ruta: /products/:id
• nombre: Actualizar producto

2. Edita el flujo

Añade pasos entre Request y Response para validar, transformar o consultar Postgresql.

3. Prueba el borrador

El botón Probar ejecuta el draft actual y muestra:

• código HTTP
• tiempo
• salida
• pasos ejecutados

4. Publica

El botón Publicar o Publicar cambios genera una nueva versión activa.

La URL pública siempre se expone como:

/api + ruta configurada

Ejemplos:

POST   /products      -> POST   /api/products
GET    /hello         -> GET    /api/hello
PATCH  /products/:id  -> PATCH  /api/products/:id

Ejemplos rápidos

Crear un endpoint POST /products y publicarlo:

curl -X POST http://localhost:3000/api/products \
  -H 'content-type: application/json' \
  --data '{"name":"Mesa","price":80,"quantity":2}'

Consumir una ruta dinámica publicada:

curl http://localhost:3000/api/products/prod-1

Cómo funciona por dentro

• el editor guarda borradores en SQLite
• probar ejecuta el borrador actual sin publicarlo
• publicar compila el flujo y activa una versión estable
• el runtime público ejecuta solo la versión publicada
• las acciones Postgresql usan la conexión configurada desde Studio
• la ruta pública se resuelve por método + ruta

Stack

• TanStack Start
• React 19
• TanStack Router
• React Flow
• SQLite
• better-sqlite3
• Drizzle ORM
• PostgreSQL (pg)
• Zod
• Tailwind CSS 4

Scripts

pnpm dev
pnpm build
pnpm build:app
pnpm build:cli
pnpm start
pnpm test
pnpm lint
pnpm typecheck
pnpm format
pnpm check
pnpm db:generate
pnpm db:push
pnpm db:studio

Estructura del proyecto

cli/
├── index.ts

database/
├── migrations/
└── schema.ts

src/
├── components/
├── lib/
│   ├── db.server.ts
│   ├── endpoints.functions.ts
│   ├── endpoints.server.ts
│   ├── flow.ts
│   ├── local-project.ts
│   └── runtime.ts
└── routes/
    ├── index.tsx
    ├── endpoints.$endpointId.tsx
    └── api.$.ts

tests/
├── integration/
└── unit/

Limitaciones actuales

• pensado principalmente para escritorio
• una API por proyecto
• sin autenticación ni permisos
• integración de datos centrada en Postgresql
• orientado a validación y transformación, no a backend generalista