Icono de la app Swift Web StudioIcono de la app Swift Web Studio

Swift Web Studio

Diseña SwiftUI en el navegador. Conserva el código Swift.

Edición visual, un editor de código Swift y una vista previa interactiva en dispositivos en un solo espacio de trabajo. Empieza con una plantilla o con tus propios archivos Swift, perfecciona el diseño y exporta un proyecto para desarrollo nativo.

Swift Web Studio

La mayoría de las herramientas de diseño dibujan imágenes de apps. Swift Web Studio edita la propia app: cada cambio en el lienzo es un cambio en el código fuente Swift, así que lo que se entrega es el código.

Lo más destacado.

  • Diseña con Swift. Edita texto, color, espaciado, maquetación e interacciones en el lienzo, y el código fuente Swift cambia con ellos.

    Swift Web Studio
  • Diseños reutilizables. Componentes con entradas y variantes guardadas, además de colores, espaciados y estilos de texto compartidos.

    Swift Web Studio
  • Contenido real. Edita los registros de una colección y el diseño de fila que comparten; prueba escenarios de vista previa sin cambiar los datos de la app.

    Swift Web Studio
  • Revisa y presenta. Compara dispositivos, aspectos y tamaños de texto, y comprueba el contraste, los objetivos táctiles y el desbordamiento.

    Swift Web Studio
  • Directo al código. Un editor de Swift con diagnósticos, autocompletado, navegación por símbolos y cambio de nombre.

    Swift Web Studio
  • Entrégalo. Exporta un proyecto de Xcode, una app de Swift Playgrounds, un paquete Swift o una especificación de XcodeGen.

    Swift Web Studio

Una herramienta de diseño que habla Swift.

  • Ediciones que conservan el código fuente. Los cambios visuales se aplican sobre el Swift subyacente; lo que el lienzo no puede editar sigue siendo editable en el código.

  • Componentes. Entradas de instancia, variantes guardadas y colores, espaciados y estilos de texto compartidos.

  • Colecciones. Registros con un diseño de fila compartido y escenarios de vista previa para probar contenido.

  • Vista previa en dispositivos. Una vista previa interactiva con distintos tamaños de dispositivo, aspectos y tamaños de texto.

  • Comprobaciones. Señala posibles problemas de contraste, de objetivos táctiles y de desbordamiento.

  • Presentación. Muestra pantallas o exporta PNG y hojas de contactos.

  • Deshacer compartido. Organiza pantallas y capas, con deshacer y rehacer en ambas.

  • Imágenes. Importa PNG y JPEG, con variantes oscuras opcionales.

  • Guardado automático y archivos comprimidos. Los proyectos se guardan en el navegador; descarga un archivo editable cuando quieras.

Bajo el capó.

Los paquetes del compilador, el intérprete y la maquetación son independientes de React y del DOM. La vista previa se ejecuta en un Web Worker.

Editor
apps/webEspacio de trabajo Next.js, editor, cuadros de diálogo y host del worker
Lenguaje
swift-syntaxAnalizador léxico, analizador sintáctico, árbol de sintaxis y ediciones del código fuente
swift-semaResolución de nombres, análisis semántico y ediciones de diseño
Ejecución
swift-runtimeUn intérprete de Swift
swiftui-runtimeEstado de SwiftUI, composición de vistas e interacciones
Renderizado
swiftui-layoutMaquetación y medición de texto
swiftui-render-domPresentación del árbol de renderizado
Proyectos
project-modelProyectos, archivos, plantillas, persistencia y uso compartido
exporterEstructura base de proyectos e importación y exportación ZIP
shared · sim-shellTipos compartidos y especificaciones de dispositivos

La vista previa interpreta un subconjunto compatible de Swift y SwiftUI. No ejecuta el compilador de Apple ni el iOS Simulator, así que las apps exportadas se compilan y revisan en Xcode antes de publicarlas.

Seis formas de exportar.

El código fuente Swift se conserva en todos los formatos.

  • Proyecto de Xcode

    Un proyecto listo para abrir, para desarrollo nativo.

  • App de Swift Playgrounds

    Ábrela y ejecútala en iPad o Mac.

  • Paquete Swift

    Añade las vistas a una app existente.

  • Especificación de XcodeGen

    Genera el proyecto a partir de una especificación.

  • Archivo editable

    Un .swiftstudio.zip portátil con código fuente, imágenes, ajustes y metadatos de diseño.

  • Enlace para compartir

    Los proyectos sin imágenes viajan en la propia URL.

Especificaciones técnicas

Tecnologías
TypeScript; un espacio de trabajo Next.js con paquetes independientes de lenguaje, ejecución y maquetación
Vista previa
Un intérprete de Swift y SwiftUI en un Web Worker, que cubre un subconjunto documentado
Almacenamiento
Guardado automático en el navegador (IndexedDB); archivos .swiftstudio.zip editables
Exportación
Proyecto de Xcode, app de Swift Playgrounds, paquete Swift, especificación de XcodeGen
Prompts
Creación opcional a partir de prompts, con tu propia clave de proveedor
Calidad
CI con comprobación de tipos, lint y pruebas unitarias; pruebas de extremo a extremo con Playwright; un límite de tamaño del bundle
Pruébalo
Demo en vivo, o en local con Node.js 22 y npm 11 · GitHub

Más artefactos