Quickstart
Databutton is your one-stop shop for everything—from building to deploying. Get started with Databutton and publish your first full-stack app in minutes.
Last updated
Databutton is your one-stop shop for everything—from building to deploying. Get started with Databutton and publish your first full-stack app in minutes.
Last updated
To begin, log in to Databutton. If you don’t already have an account, sign up for free here.
With Databutton, your MVP starts taking shape from the very first prompt.
Simply click New App in the Databutton dashboard, describe your idea, and Databutton builds a complete full-stack app for you.
Here’s how it works:
Frontend in React: Databutton generates your app’s user interface using React.
You can choose between prebuilt components (Shadcn) for ease and default styling or Tailwind for full flexibility and control.
Backend in Python: All backend logic is written in Python.
Databutton automatically creates robust FastAPI routers for your app’s backend, ensuring scalability and performance.
Seamless Integration: Databutton connects the frontend and backend, ensuring everything works together perfectly.
Feature Spotlight: If your app needs API keys, Databutton detects them, securely stores them as secrets, and integrates them into your app. Learn more about secret management in Databutton here.
Databutton Agent makes it easy to plan and refine your app through a conversational and iterative approach.
Update with Text / Image Prompts:
Want to add a feature? Just write a quick prompt!
Organize your build with Task Planner:
Got multiple updates in mind? Use the Task Planner to line them up. The Agent will take care of each task one by one, keeping you informed at every step.
Get Help with Smart Suggestions:
Stuck on what to do next? The Agent offers smart suggestions.
Feature Spotlight: Use images or screenshots to help design your app. You can also define your app’s structure easily with prompts. Learn more here.
For more tips on crafting effective prompts, check out the Prompting in Databutton section.
Databutton workspace makes it easy to manage public assets like images and videos for your app. These assets are stored in the Media (Public) section and can be accessed directly within your app.
Upload Your Files
Use the upload button in the Media (Public) section to add your images or videos. Assets are automatically categorised into Image or Video folders for easy navigation.
Reference them while prompting
Once uploaded, you can use these files in your frontend
Feature Spotlight: Using Hashtags in Prompts. Reference your uploaded images or videos during prompting by using # hashtags.
When you build with Databutton, the Agent structures everything for you.
How Your App is Structured in Databutton:
Pages
These are the main sections of your app. Pages can be routed, making it easy to create navigation between views.
UI Components
Reusable building blocks that can be used inside Pages or within other components.
UI Files
Assets or configurations that shape how your app looks and functions. These can be used across Pages and Components.
Backend
Handles the logic and APIs for your app, written in Python to power your app's functionalities.
Media (Public)
A dedicated space for publicly accessible files, such as images, videos, or GIFs.
Internal Storage
Used for storing private files like CSVs, PDFs, or binary data. Databutton provides a backend Python package to easily access these files, making prototyping efficient.
Feature Spotlight: Databutton provides built-in storage capabilities out of the box. All operations, such as storing and retrieving data, are managed by the Databutton Agent using Databutton's own Python SDK. Read more here.
One of the best practices the Databutton Agent follows is breaking down your app into Pages and UI Components for better organization and reusability. Read prompt tips here to learn how to collaborate effectively with the agent.
Deploying your app is quick and simple with Databutton. You can either deploy it manually or let the Databutton Agent handle it for you.
Manual Deployment
To deploy manually, click the Deploy button located at the top-right corner of your workspace (highlighted with an arrow in the image above).
Agent-Driven Deployment
Alternatively, you can ask the Databutton Agent to deploy the app for you.
The app typically get's deployed to a URL like username.databutton.com, making it instantly live and accessible.
Feature Spotlight: Open the Deploy Modal (marked with an arrow above in the image above) to restore your app to the last deployment or request a custom domain by submitting your domain name for setup.
You can test and make changes in the development workspace without affecting the deployed version. Any changes made during development won’t reflect on the live version until you redeploy.
