Editor
Using the Squadbase code editor
What is the Editor
The Editor is Squadbase's AI-integrated code editor. It allows you to edit code, preview changes, and deploy applications all in one screen while leveraging Squadbase AI.
Key Features
- AI Assistance: Squadbase AI supports your coding workflow
- Real-time Preview: See code changes instantly
- Integrated Environment: Edit, preview, and deploy from a single interface
- Thread Management: Preserve and reuse AI conversation history
- AI Credits Management: Visualize AI usage at a glance
Opening the Editor
Choose Your Method
You can open the Editor from two locations:
- From the project details screen header
- From the project card in the space details screen
Click "Open Editor"
Click the "Open Editor" button in either location.
The Editor opens in a new tab, allowing you to view the project details and Editor simultaneously.
Screen Layout
Header Section
Left Side:
- Organization Name: Click to return to organization screen
- Project Name: Click to return to project details screen
Center:
- Tabs: Switch between different features
Right Side:
- AI Credits: Progress bar showing AI usage status
- Settings Button: Editor settings
- Other Buttons: Branch/environment settings and restart button
- Publish Button: Create a deployment
Main Area
The screen is divided into two main sections.
Left: Preview and Code View
Switch with tabs:
- Preview: Application preview
- Code: Code review
Preview tab:
- Navigation buttons: Back, forward, reload
- URL bar: Enter the URL of the page to preview
- Preview area: Real-time application display
Right: AI Chat
Thread Management:
- Use the "New thread" dropdown to select a new conversation or past conversations
Action Buttons:
- Prompt: Prompt input assistance
- Tasks: Launch predefined tasks. Convenient features for dashboard building are available.
Ask Squadbase AI:
- Enter questions or commands for the AI in the text box
- Multi-line support (line breaks allowed)
- Send button to execute
Using Squadbase AI
Squadbase AI can help with code generation, debugging, explanations, and much more. Don't hesitate to ask questions or request assistance at any time!
Ask Squadbase AI
From the text box at the bottom of the screen, you can request various types of assistance from the AI.
Thread Management
New Thread:
- Select "New thread" to start a new conversation
Past Threads:
- Select past conversations from the dropdown
- Continue questions with previous context
Recommended Usage:
- Separate threads by feature
- Continue complex tasks in a single thread
AI Credits
Display Contents:
- Check AI usage in the header progress bar
- Display remaining amount as a percentage
Note:
- If Credits run low, AI features may be limited
- Check details from the Usage button
Creating Deployments
Publishing creates a deployment and, if GitHub is integrated, pushes your changes to the repository.
Click the Publish Button
Click the "Publish" button in the header once you've finished editing code.
Select Environment
Choose the deployment environment:
- Production: Live environment for actual users
- Preview: Testing and preview environment
Add Commit Message
Enter a commit message (optional) to describe your changes.
Confirm and Publish
Click "Publish" to create the deployment.
What happens next:
- A new deployment is created
- View history in the Deployments tab
- If GitHub integration is configured, changes are pushed to GitHub
Tips & FAQ
Q: Are code changes in the Editor automatically saved?
A: There is an auto-save feature. However, we recommend periodically Publishing important changes.
Q: How do I replenish AI Credits?
A: You can purchase additional AI Credits from the Usage button or plan settings. Check the plan management screen for details.
Q: The preview is not updating
A: Try the following:
- Click the reload button
- Clear the cache
- Refresh the page
Q: Can multiple people edit simultaneously?
A: Project members can each open the Editor, but the availability of real-time collaboration features needs to be confirmed.
Q: Does it sync with GitHub?
A:
- For projects imported from GitHub, using the Publish button may push changes to GitHub. Check your Git Repository settings.
- Dashboards created without GitHub integration can also be backed up to a GitHub repository later.
Recommended Usage
- Actively use AI:
- Ask the AI immediately when you don't understand something
- Leverage convenient predefined processes from Tasks
- Use threads to preserve/separate context
- Check immediately with Preview:
- Always check UI changes in the preview
- Check different pages as well
- Publish regularly:
- Publish important changes frequently
- Manage AI Credits:
- Check usage regularly
- Replenish before running out
Summary
The Editor is Squadbase's central development environment. With AI assistance, even beginners can code efficiently, and experienced developers can further improve their productivity.
By utilizing the preview and deployment features, you can seamlessly build and publish dashboards from start to finish.
If you have any questions, refer to the "Help" or "Documentation" links in the bottom right of the screen for more detailed information. You can also ask questions using "Ask Squadbase AI" in the Editor.