SynthMaker Manual Open SynthMaker (opens in a new tab)
Faces in SwiftUI

Inside a face

In the Patch, a face is a tree of views you open level by level, as you open a module of your own. The breadcrumb always says where you are.

1One box for the face

Open Tone (Open on its card, or double-click it in the Patch). Beside its modules is one box for its face, saying what it holds.

Inside Tone: its Inputs, oscillators, filter, envelope and Output, its Pad play, and a box Face · VStack · 1 Text, 1 HStack, 1 button; the breadcrumb reads My First Face › Tone.
  1. The face, as one box.

2Open a stack, one level down

  1. Double-click the face's box: you're inside the VStack.
  2. Double-click HStack · 2 knobs to go inside the row.
  3. Choose a name in the breadcrumb to go back up.

Inside a stack, a Content box starts its views: its yellow content goes to the first, and each view's next to the one after, so you read the order along the chain, as SwiftUI reads its lines.

Inside Tone's face: Content, then Text "Tone", HStack · 2 knobs and Button "Play" on a yellow chain; the breadcrumb reads My First Face › Tone › Face.
  1. Content starts the stack.
  2. A stack inside, summed up.

3Knobs are wired to what they turn

Inside the row, each Knob's value is a green wire to the setting it turns, on the Filter. A binding is a wire you can see, never a hidden option.

Inside the HStack: Content, Knob "Cutoff" and Knob "Resonance" on a yellow chain, each with a green wire from value to the Filter's cutoff and resonance; the breadcrumb reads My First Face › Tone › Face › HStack.
  1. A Knob.
  2. Its binding, a wire.
  3. The setting it turns.

4Nested or Flat

The Patch's bar has Nested and Flat while a face is in view. Nested, the default, is where you work, a level at a time. Flat shows every view and every modifier at once, to read: it can't be edited.

Flat: the whole face at once inside Tone, VStack, Text "Tone" with its .font(.headline) modifier, HStack, both Knobs and the Button, beside the modules they turn.
Flat: the whole face, read-only.

5The face editor

Edit face on the module's card opens its views as an outline, each line as the code names it. Every line has ↑ and ↓ to move it, Rename for words and knobs, ✕ to delete it, and Add modifier…. Below the outline are Add a knob for…, Add a row, Add text and Add a grid of pads.

A new row and new text go at the end of the face; a new knob goes into the stack added last. Done closes the editor.

The face editor: VStack, Text "Tone" with .font(.headline), HStack with Knob "Cutoff" turns filter1.cutoff and Knob "Resonance" turns filter1.resonance, and Button "Play", each with arrows, Rename, ✕ and Add modifier…, then Add a knob for…, Add a row and Add text.
The face editor's outline.

Try it

  1. Open My First Face, then Tone, then its face, then the row.
  2. Choose Tone in the breadcrumb to come back up.
  3. Switch to Flat to see it all, then back to Nested.
Open the example sound: My First Face ↗ (opens in a new tab)

Remember