Using Version Control and Branching

Introduction

Structor's version control system lets you experiment freely without fear of breaking your project. In this tutorial, you'll learn how to use branches, commits, and history to manage your project effectively.

Step 1: Understanding Version Control

Version control in Structor works like Git but simplified for visual development:

• Branches: Parallel versions of your project (e.g., main, feature/new-design)
• Commits: Save points in history that you can return to
• Head: The current state of your project

Step 2: Creating Your First Commit

1. Make some changes to your project (add elements, modify styles, etc.)
2. Look at the top bar - you'll see a gray dot next to the project name indicating unsaved changes
3. Click the Branch Selector in the top bar (usually shows "main")
4. In the dropdown, find the Create Commit section
5. Type a commit message, e.g.: "Initial landing page design"
6. Click Commit Changes
7. The gray dot should disappear, and your changes are now saved in history

Step 3: Creating a Branch

Branches let you work on new features without affecting the main project:

1. Click the Branch Selector in the top bar
2. Click New Branch
3. Enter a branch name (e.g., feature/dark-mode or experiment/new-layout)
4. Press Enter or click outside
5. You're now working on the new branch!
6. The branch name in the top bar will update

Step 4: Switching Between Branches

1. Click the Branch Selector
2. You'll see a list of all your branches
3. Click on any branch to switch to it
4. Important: Any unsaved changes (gray dot) will be discarded when switching branches, so commit first!

Step 5: Viewing Commit History

1. Click the Branch Selector
2. Next to the branch name, click the History icon (clock symbol)
3. You'll see a timeline of all commits on the current branch
4. Each commit shows:
   • Commit message
   • Date and time
   • Author information
5. Click on a commit to see more details

Step 6: Restoring to a Previous Version

If you want to go back to a previous state:

1. Open the commit history (Step 5)
2. Find the commit you want to restore to
3. Click Restore to this version
4. Warning: This will overwrite your current working state!
5. Confirm the action
6. Your project will be restored to that commit's state

Step 7: Working with Multiple Branches

Example Workflow:

1. Start on main branch with a working project
2. Create branch feature/new-header
3. Make changes and commit: "Add new header design"
4. Switch back to main - your changes aren't there (they're on the feature branch)
5. Switch back to feature/new-header - your changes are there
6. Continue working on the feature branch

Step 8: Best Practices

• Commit often: Create commits for logical units of work
• Use descriptive messages: "Add contact form" is better than "Update"
• Branch for experiments: Try new designs on branches
• Keep main stable: Only merge tested features to main
• Commit before switching: Always commit before changing branches

Congratulations!

You've learned how to:

• Create and manage commits
• Create and switch branches
• View commit history
• Restore previous versions
• Work with multiple branches

Next Steps

• Practice branching for feature development
• Learn about deploying your project
• Check the version control documentation for advanced features