Code

The Code panel is your Workspace's code, open for editing. It's there for the moments when the Style Editor or a request to Soffi is the long way round: a copy change you can see in the file, a prop you want to flip, or a look at how something is built before you ask for a change to it.

Open the Code tab in the drawer at the bottom of the Grid layout, or press E. You can also jump straight to the file that defines an element with View code, from the Style Editor or from the toolbar next to a selection in the Preview.

Finding your way

The file tree shows every repository your Workspace works across, each in its own folder, with the main one open. Files you've changed carry a badge: A for added, M for modified, D for deleted. Search files... at the top matches file names and file contents, with a regex toggle for exact patterns.

Under the path of an open file, a one-line summary says what the file is for, written by Soffi when your Project was imported.

Editing and saving

The editor works like the one you're used to, with syntax highlighting for your languages. Click Save or press ⌘S to save. Saving is what puts your edit in the Preview, and it becomes part of the Workspace's History like any other edit. If your repository has hooks that format code, they run on save and the file may come back reformatted.

When someone else changes the file

You're rarely alone in a Workspace. When Soffi or a teammate changes the file you have open, a banner tells you. Keep editing keeps your version; Reload takes theirs and drops your unsaved edits.

If you save a file that changed after you opened it, Soffi stops and shows both versions side by side, the latest saved version and your unsaved edits, so you can choose: Save anyway, Restore with my edits, or Discard my edits and reload.