Workbench

Your complete workspace for building apps - write code, see it work, and track changes

The Workbench is your main workspace in CodinIT. It’s where you write code, see your app running, and check what you’ve changed.

What is the Workbench?

Think of the Workbench as your desk where you have everything you need to build an app. You can write code, test it, and see what’s different from before - all in one place.

Code View

Write and organize your code files

Preview View

See your app running on different devices

Changes View

See what you’ve changed in your files

Three Main Views

The workbench has three different views. You can switch between them depending on what you want to do:

Code View

Writing Code

This is where you write and organize your code files.

Your Files

On the left, you see all your project files in a tree:

• Click folders to open them
• Click files to edit them
• Icons show what type of file it is
• A dot shows files you haven’t saved yet

Quick Tip: Use the search box to find files by name.

The Editor

The big area in the middle is where you write code:

• Colors - Your code is colored to make it easier to read
• Suggestions - Get help as you type
• Find and replace - Search for text and change it
• Edit multiple spots - Change several places at once

You can save your work or undo changes with the buttons at the top.

Search Everything

Need to find something in your whole project?

• Type what you’re looking for
• See results from all files
• Click a result to jump to that file

Terminal

At the bottom, you can type commands:

• Open multiple terminal tabs
• Make it bigger or smaller
• Run commands to start your app or install tools

Preview View

See Your App Running

This view shows your app working, just like it would on a real phone, tablet, or computer.

Live Preview

Watch your app in action:

• Instant updates - See changes as soon as you save your code
• Click and test - Try buttons and forms to make sure they work
• See errors - If something breaks, you’ll see what went wrong

Test on Different Devices

Make sure your app looks good everywhere:

📱 Phones

iPhone and Android phones of different sizes

📱 Tablets

iPads and other tablets

💻 Computers

Laptops and desktop screens

🖥️ Big Screens

Large monitors and TVs

You can also flip devices sideways (landscape) or upright (portrait) to test both ways.

Change the Size

You can adjust the preview size:

• Pick a device from the list
• Drag the edges to make it bigger or smaller
• Type in exact sizes if you need to

Take Screenshots

Capture pictures of your app:

• Take a screenshot of the whole page
• Save it to share with others
• Add notes or highlights if needed

Changes View

See What You Changed

This view shows you exactly what’s different in your files compared to before.

Compare Old and New

See your changes side by side:

• Green lines - New stuff you added
• Red lines - Things you removed
• Highlighted words - Specific words that changed
• Context - See the code around your changes

Change Summary

Get a quick overview:

• Lines added - How many new lines you wrote
• Lines removed - How many lines you deleted
• File status - Which files are new, changed, or deleted
• When - See when you made the changes

History

Look back at previous versions:

• Different versions - See how your file looked before
• Time stamps - Know when each change happened
• Undo changes - Go back to an older version if needed
• Grouped changes - Related changes shown together

Find Changed Files

Quickly jump to files you’ve edited:

• Dropdown menu - See all changed files
• Search - Find a specific file
• Filter - Show only certain types of files
• Badges - See how many changes each file has

How to Build an App

Here’s how you use the workbench to build something:

1. Write Your Code

   Use the code view to write your app. The editor helps you with colors and suggestions.

2. Test It

   Switch to preview view to see your app running. Try it on different devices to make sure it looks good everywhere.

3. Check Your Changes

   Use the changes view to see what you modified. Make sure everything looks right before saving.

4. Share It

   Save your work to GitHub and deploy it so others can use your app.

Other Helpful Tools

The workbench has extra tools to help you:

Save to GitHub

Share your code with others:

• Push to GitHub - Save your code online
• Create repositories - Make a new project on GitHub
• Branches - Work on different versions of your code

Manage Files

Keep your files organized:

• Sync files - Make sure everything is up to date
• Download - Save your whole project as a ZIP file
• Import - Bring in files from somewhere else

Work with Others

Build apps with your team:

• File locking - Prevent two people from editing the same file at once
• Notifications - Know when someone changes a file
• Comments - Leave notes for your teammates

Fix Problems

Make sure your app works well:

• Check speed - See how fast your app loads
• Find errors - Spot and fix bugs
• Console - See messages from your app
• Network - Watch how your app talks to servers

Getting Started: Just open a file to start using the workbench. It will show you the tools you need.