Components define the structure and navigation flow of an app. The components of your document are listed in the outline on the left-hand side of the app window.

You can add a new component to a document by clicking on the New Component button at the bottom of the outline.

There are four types of components. Of these, only one, the Content Viewcomponent, defines the content of a full app screen. The other three define the structure and the navigation flow of an app.

The App component defines the starting point of an app. It allows you to specify general properties for the entire app, like light and dark modes or the app’s tint color.

In SwiftUI, an Appcomponent is exported as a structure conforming to the App protocol, marked by the @main keyword.

While you need only one App structure in a SwiftUI app, Vulcan allows you to have more than one Appcomponent in a document in case you want to define more than one app with similar parts.

The exported structures can be placed in the same Xcode project but need to belong to different targets since only one type per target can be marked with the @main keyword.

The Tab View component creates tabbed navigation in your app. It allows you to define how many tabs your apps has, their title, and image name (coming from SF Symbols).

In SwiftUI, a Tab View component is exported as a TabView embedded in the exported code for the containing component in the Vulcan document.

The Navigation View component creates drill-down navigation in your app. This component has no configuration since navigation bars are configured on a screen-by-screen basis (using the Content View component).

In SwiftUI, a Navigation View component is exported as a NavigationView embedded in the exported code for the containing component in the Vulcan document.

The Content View component defines one screen for your app and all its content. You can also configure the navigation bar for the screen and specify various modally presented views like alerts, action sheets, and custom sheets.

In SwiftUI, a Content View component is exported as a structure conforming to the View protocol. Depending on the content of the component, Vulcan will also generate accessory views (e.g., table rows or grid cells) and Swift data types.

  • The Architectural View contentcan contain either a Tab View component or a Navigation View component. This type of content is helpful at the root of tabbed and drill down navigation flows because the TabView and NavigationView types in SwiftUI are usually embedded in another view’s body.
  • The List content creates a scrolling table with configurable rows. In SwiftUI, this content is exported as a List view.
  • The Mixed content allows you to assemble the content of your view using standard SwiftUI views, e.g., Text, Button, etc. It also allows you to add and configure composite views like horizontally-scrolling carousels or vertical and horizontal grids.


Exporting the SwiftUI code

To export the final SwiftUI code for a document, click on the Export button in the toolbar.

In the pop-up window, you can name the folder which will contain the exported .swift files and their location.

The simplest way to import code in an Xcode project is to save the exported code in an easy-to-reach location, e.g., your Desktop folder.

Then, drag all the .swift files into your Xcode project. This can be an existing project to which you add a few new views or an empty project for a new app. In the latter case, you will likely have to delete all the SwiftUIfiles in the project since Vulcan also exports a .swift file for the app’s starting point.

Make sure to check the Copy items if needed option so that your files will be copied inside the folder for your Xcode project.

If Xcode asks you to create an Objective-C bridging header, select Don’t Create.

The code generated by Vulcan should always compile without errors, even if the components in the exported document are not all connected (provided that you don’t have any existing files in your Xcode project that create name collisions.)

If you get any error, please get in touch with us, including your document, so that we can fix the problem.


The Interface

  1. The outline: The outline lists the components inside the document. Components can represent a few separate screens or be linked to compose the navigation of a whole app.
  2. The canvas: In the canvas, you see a non-interactive preview of how each component will look in the exported code.
  3. The sidebar: The sidebar contains the inspectors.
    • The Component inspector contains the control to configure the selected component in the outline.
    • The Document inspector allows you to set the project name, the author, and the company name for the document. These will be exported in the template comment at the top of every exported .swift file.
  4. The toolbar: The toolbar contains the segmented control to switch between the inspectors in the sidebar and the button to export the document to SwiftUI code.