Customizing the Judo View

Rendering Components

When using JudoView, select specific Components from your Judo file by using its component(_:) modifier.


Components are re-usable UI elements that can be composed together to form larger UIs, both within a Judo design file or directly within code. They are effectively SwiftUI views, and the JudoView SwiftUI view in the Judo SDK renders them into real views that you can embed within your own SwiftUI views.

JudoView's behaviour is customizable using modifiers similar to that of other SwiftUI views.

The component(_:) modifier allows you to select which component within your Judo file is to be rendered by the view.

For example, for the following component entitled Discover/Content on your Judo canvas:


You would use the following SwiftUI to render it:

struct ContentCardView: View {
    var body: some View {
        // Main.judo

Pass arguments to components using properties

Judo components accept properties, which are the direct equivalent to SwiftUI view properties. You can provide values for these properties using the property(_:_:) modifier. See the next section, Overriding Properties, for more information.

Organize your component identifiers with strong typing

component(_:)'s parameter is actually a ComponentName value, which while remaining easily representable by default by a string, allows you to explicitly define your component identifiers in a more type-safe way.

This allows for a convenient way to organize your component identifiers.

extension ComponentName {
    static let discoverContent = ComponentName("Discover/Content")

// and then, within your SwiftUI view:
Adding Judo to an Existing Project