Available for Plus plan and above
Teable App Builder allows you to turn your data bases into fully functional, customized web applications without writing code. By combining the power of your data structure with AI-driven design, you can launch internal tools, customer portals, and data dashboards in minutes.
Overview
The App Builder follows a “Prompt to App” workflow. You describe what you want, and AI builds the application structure, pages, and logic for you. You can then fine-tune every detail using the visual editor or code.
When to use App Builder vs AI Chat: Use App Builder to create custom interfaces and standalone apps. For interactive data analysis and ad-hoc questions within the database, use AI Chat.
Creating an App
There are two main ways to create an app:
- From Base: In any Base, click “Create App” to generate an application linked to your current data.
- From Chat: Open AI Chat and say “Create a CRM app for this customer table”.
The App Editor Interface
The App Builder provides a dual-interface for both non-technical users and developers.
1. Chat Interface (AI-Driven)
The command center for your app.
- Natural Language Editing: Describe changes like “Make the header blue” or “Add a submission form for new records”.
- Auto-Routing: The AI understands which component or page you are referring to and modifies it directly.
2. Live Preview Panel
- Multi-Device Simulation: Use the switcher at the top to toggle Desktop, Tablet, and Mobile views.
- Instant Feedback: Changes render immediately.
3. Developer Mode (Code Editor)
For infinite customization, you have direct access to the code.
- Monaco Editor: A VS Code-like experience right in the browser.
- React Components: Edit the underlying React code, Tailwind CSS classes, and logic.
- File Tree: Navigate through the project structure.
Publishing & Management
Publishing Your App
When your app is ready, click the Publish button (arrow icon) in the top right corner.
- Public URL: Teable generates a secure, publicly accessible URL for your app.
- Custom Domain (Coming Soon): Map your own domain to the app.
Version History & Rollback
Teable automatically tracks every deployment.
- Click the History (clock icon) button to view a list of all deployed versions.
- One-Click Rollback: If a new update causes issues, you can instantly revert the live app to any previous stable version.
Auto-fix
If your custom code changes cause a build error, the deployment will fail.
- Teable provides an Auto-fix button alongside the error log.
- Clicking this lets AI analyze the compilation error and automatically patch the code to resolve the issue.
Deleting an App
To delete an app, click the Settings (gear icon) button in the header and select Delete.
Best Practices
- Start Simple: Let AI build the basic structure first, then iterate on specific features.
- Check Mobile: Many users access apps on mobile devices, so frequently check the Mobile preview.
- Version Control: You can save versions or reset edits if you want to experiment with different designs.