Getting Started - Swift

Scrimage is a server-driven interface for generating mobile UI using JSON documents. It includes an AI assistant to help generate documents.

This product is in prototype phase, with limited functionality. Feedback is appreciated, email feedback to [email protected].

Demo video can be found here.

1 Console

Visit the console, which will give you access to create and edit UI documents. A how-to video can be found below which will give an overview on how to use this web console.

1 Creating a document

Press the ‘Create/Update’ button to start a new document. A random identifier will be populated into the textfield on the left. This identifier scrimage-id will be used later to connect SwiftUI to the service.

2 Fetch

Pressing the fetch button with fetch an existing document using the scrimage-id in the textfield.

3 Chat with the AI assistant 🤖

Using the chat field on the right, you can chat with an AI assistant which will create and adjust the documents for you.

2 Swift package

The swift package which contains the framework can be found here. This can be added as a dependency by link.

https://github.com/vaskal08/ScrimagePackage.git

3 Connect SwiftUI to the service

import Scrimage

struct ContentView: View {
    @StateObject var listener = ScrimageListener(id: "scrimage-id", liveReload: true) // liveReload is only recommended in debug mode.

    var body: some View {
        ScrimageContainer(content: listener.content).render()
    }
}

Replace scrimage-id with the id generated by the console. This will render the corresponding document in your SwiftUI.

liveReload argument is optional and only recommended while in debug mode. This will cause the ScrimageContainer to re-render changes made in the console in real-time.

4 Document structure

Here is an example of a SUI document, that has a horizontal stack containing two buttons:

{
	"id": "ui1",
	"type": "root",
	"view": {
		"id": "hstack",
		"type": "hstack",
		"subviews": [
			{
				"id": "button-a",
				"type": "button",
				"title": "A"
			},
			{
				"id": "button-b",
				"type": "button",
				"title": "B"
			}
		]
	}
}

Here is a list of the available components that can be used, along with a description and sample usage.

• vstack: a vertical stack that can contain other components in the "subviews" field:

  {
  	"id": "random-uuid", 
  	"type": "vstack", 
  	"subviews": []
  }

• hstack: a horizontal stack that can contain other components in the "subviews" field:

  {
  	"id": "random-uuid", 
  	"type": "hstack", 
  	"subviews": []
  }

• button: a button with label "title":

  {
  	"id": "button-like", 
  	"type": "button", 
  	"title": "Like"
  }

• text: a text label:

  {
  	"id": "label-actions", 
  	"type": "text", 
  	"title": "Actions"
  }

• spacer: a component that provides and fills space not taken by other components:

  {
  	"id": "spacer", 
  	"type": "spacer"
  }