App Builder

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.

​

Creating an App

There are two main ways to create an app:

1. From Base: In any Base, click “Create App” to generate an application linked to your current data.
2. 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.
• Integrations: When the app task needs access to a third-party account, App Builder can show a card such as Connect Slack in the chat panel. Click Connect to authorize with OAuth. Click Skip to cancel this authorization; AI continues with the parts it can complete without that connection.
• Skills: Open the + menu and choose Skills to manage skills for this app conversation. App skills are only available to the current app. Type / in the input box to choose an enabled skill.
• Manage files: Open + → More → Manage files to view files in the app sandbox. Use it to preview supported files, download generated files, or delete files and folders you no longer need.
• Clear Conversation: If the current conversation has drifted, click Clear Chat in the bottom-right corner of the panel to start a new session. This clears the chat history for the current conversation but does not delete the app itself. The first use shows a confirmation, and you can choose not to show it again next time.

​

2. Live Preview Panel

• Multi-Device Simulation: Use the switcher at the top to toggle Desktop, Tablet, and Mobile views.
• Live Generation: The preview panel can show the app taking shape while App Builder is generating.
• Instant Feedback: After App Builder finishes a change, the preview refreshes with the latest saved version.

Use the floating toolbar at the bottom of the preview to make targeted changes:

• Choose Select an element to edit, then click an element in the preview. App Builder adds the element to the chat input. Add your instruction and send the message so AI can update that specific part of the app.
• Choose Edit text directly, then click static text in the preview and type your replacement. You can edit more than one text element before clicking Save. Click Discard edits to undo the pending text changes.

Dynamic text, such as content loaded from data or calculated by the app, cannot be edited directly. Select the element and describe the change in chat instead. Element selection and direct text editing pause while AI is generating. Press Esc to exit either mode.

​

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.

​

Download Code

You can download the entire app as a ZIP archive at any time:

1. Switch to the Code tab in the editor.
2. Click the ... menu in the tab bar.
3. Select Download code to save a ZIP archive that includes all source files.

If the app uses custom environment variables, the downloaded archive can include a root .env file. Review it before sharing the ZIP.

​

Import Code

You can update the app’s code by importing a ZIP:

1. Switch to the Code tab in the editor.
2. Click the ... menu in the tab bar.
3. Select Import code and choose a ZIP file up to 20 MB.

​

Secrets

Use Secrets for API keys, credentials, and configuration values your app needs while it runs. In the App Builder chat panel, open the + menu and choose Secrets. After you add, delete, or change a Secret value, the app preview environment uses the new value. The published app uses it only after you republish. Editing only a Secret description does not require republishing.

​

Manage App Files

App Builder stores uploaded files, generated outputs, and runtime files in the app sandbox. In the chat panel, open + → More → Manage files to inspect them. Supported file types open in preview. You can also download files or delete files and folders you no longer need.

​

Add AI Features to an App

Add AI when your app needs to summarize records, classify requests, draft replies, or answer questions for app users. You can tell App Builder what you want, such as: “Add an AI reply assistant for support tickets” or “Summarize each form submission.” App Builder can turn on AI access and add the code for the feature.

​

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: Map your own domain to the app.
• Show branding: Use Show branding in the Publish menu to control whether the published app shows the Build with Teable badge. If you change this setting after publishing, click Redeploy to apply it.
• Unpublish: For a published app, use Unpublish in the publish menu to take the public link offline.
• App configuration changes: If the publish menu shows App configuration changed — redeploy to apply, click Redeploy to apply pending Secret value, AI access, login, or branding changes to the published app.

​

Unpublish an App

To take a published app offline, open the Publish menu and click Unpublish. After you confirm, the public app URL can no longer be accessed. Unpublishing does not delete the app or its edit history. You can keep editing the app and publish it again later.

​

Custom Domains

Use Custom domain to bind a domain to the published app. A subdomain is recommended, such as app.yourdomain.com. After you enter the domain, Teable shows the DNS records to add. Add the records with your DNS provider, wait for propagation, then verify the domain in Teable. You can also use an available subdomain under teable.app and edit the teable.app prefix, such as your-name.teable.app.

​

App Login

Click Add login in the app header to require visitors to sign in before they can use the app. Once login is configured, the button changes to Login settings. When you enable login:

1. Choose where to store app users. You can create a Users table or reuse an existing table with an email field. Each signed-in user is stored as one record, and the same user table can be reused by multiple apps.
2. Choose at least one sign-in method, such as Email OTP, Google, or Teable. Available methods depend on your instance’s authentication settings.
3. Choose an access policy: Anyone can sign up, Allowed email domains, or Invite only.

Login changes appear in the app preview environment after it reloads. Publish the app again to apply those changes to the published 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

For prompt patterns, build tips, rollback advice, and common troubleshooting, see App Builder Practical Guide.

​

FAQ