All pages including product, blog, and legal # One platform. From idea to launch and beyond. > Explore Draftbit's platform for AI-assisted app building, visual editing, live preview, full code access, and publishing workflows. Build cross-platform apps with AI assistance, visual editing, live preview, full code access, and publishing built in. Start building free [View pricing](/pricing)  How It Works ## From first prompt to live app — all in one place. Draftbit covers the whole workflow, not just the first draft. ### Advanced AI Agents Turn plain-English requests into real app changes using the latest from OpenAI, Anthropic, Google, and more. ### Pixel Perfect Visual Editing Full control over styles, layout, and content on an infinite canvas. Undo, Redo, and History built in. ### Cloud Sandbox Agents run in an isolated cloud environment. Your project stays safe, and you can build from anywhere. ### Live Preview Test and preview your app in your browser, on your device, or on simulators. Use side-by-side views to compare changes before you commit. ### Code Editing & Source Control Edit code, import files, and modify the filesystem directly without limits or lock-in. Export your code to GitHub or Zip at any time. ### Integrations Connect to dozens of services like backends, analytics, monetization, and more. Add custom MCP services with ease. ### One Click Publishing Ship to web, iOS, and Android from one workflow. Custom domains included. ### Collaborate with your team Invite teammates or clients, share your work, assign tasks, and build together. ### Code Export Export your full source code to GitHub or download as a zip. No lock-in, ever. AI Agents ## The best AI agents. Built into your workflow. Use Claude Code, OpenAI Codex, and more — directly inside your project. Run multiple agents in parallel, organize work in threads, and delegate tasks that run on their own. * Start with a prompt Describe your app or the changes you want. Draftbit turns your instructions into a real working project. * Claude Code, OpenAI Codex, and more Use the latest AI agents and models from Anthropic, OpenAI, and Google. Switch models anytime to fit the task. * Threads for focused work Separate work into threads so each conversation stays scoped to a specific task or feature. * Run multiple agents at once Work on several parts of your app simultaneously. Each agent runs in its own thread without blocking the others. * Delegate work to agentsComing Soon Hand off tasks to agents that run in the background — even while you're away.  App Templates ## Start from a production-ready template. Skip the blank page. Open a fully-designed React Native app — every screen and component already built — then customize it visually with AI, connect your backend, and ship to iOS, Android, and the web. * [](/mobile-app-templates/chat/) [Chat ai](/mobile-app-templates/chat/) [AI chat app with voice and subscriptions](/mobile-app-templates/chat/) * [](/mobile-app-templates/circlo/) [Circlo social](/mobile-app-templates/circlo/) [Social community with reels and messaging](/mobile-app-templates/circlo/) * [](/mobile-app-templates/courses/) [Courses education](/mobile-app-templates/courses/) [Online learning with progress tracking](/mobile-app-templates/courses/) * [](/mobile-app-templates/dating/) [Dating social](/mobile-app-templates/dating/) [Swipe discovery, matches, and chat](/mobile-app-templates/dating/) * [](/mobile-app-templates/dermacare/) [DermaCare health](/mobile-app-templates/dermacare/) [Dermatology booking and patient messaging](/mobile-app-templates/dermacare/) * [](/mobile-app-templates/ecommerce/) [Ecommerce ecommerce](/mobile-app-templates/ecommerce/) [Modern retail app with admin tools](/mobile-app-templates/ecommerce/) [Browse mobile app templates](/mobile-app-templates/) Start building free Visual Editing ## What you see is what you get. A full suite of visual editing tools and controls so you have full control over every pixel. * Styles panel Edit layout, spacing, colors, typography, and Tailwind classes directly from the properties panel. * Drag-and-drop editing Add components, reorder elements, and reorganize files without touching code. * Design blocks Start from pre-built screens, components, and navigation patterns instead of blank pages. * Theme editor Manage your color system, palettes, and global styles in one place. Edit both v1 and v2 themes — changes apply everywhere. * Typography & Google Fonts Dial in your type scale and font families, with the full Google Fonts library a click away. * Responsive breakpoints Preview and adjust layouts across screen sizes to make sure your app looks right on every device. * Target exactly what you want Click the exact element you want to update instead of describing it vaguely.  Cloud Sandbox ## Your app runs in the cloud. Always ready. Every project gets its own cloud environment — dependencies installed, dev server running, and agents working in an isolated sandbox so your local machine stays clean. ### Dedicated cloud environment Each project runs in its own sandbox with dependencies, builds, and dev servers managed for you. ### Agents run in the cloud AI agents work inside an isolated environment. No local setup, no risk to your machine, no waiting for installs. ### Build from anywhere Your project lives in the cloud. Pick up where you left off from any browser, any device. ### Environments Manage development, staging, and production configurations in one place. ### App health checks Monitor the status of your sandbox, dependencies, and dev server at a glance. ### File sync Changes sync between the builder and your cloud environment automatically. No manual deploys to test. Preview and Debugging ## Preview on any device. Debug before you ship. See your app running on 26+ devices, compare saved and working builds side by side, and catch issues before they reach your users. * Live preview as you build See every change in real time. Layout, behavior, and content update as you work. * Split Design + Preview Edit on the Design canvas with a live device simulator right alongside it — design and test without switching context. * Infinite canvas View and arrange multiple screens at once. Work across your whole app, not one page at a time. * 26+ device simulators Preview on iPhones, iPads, Android phones, tablets, and desktops — all in the browser. * Before & after comparison View your saved and working builds side by side to see exactly what changed. * On-device preview Scan a QR code to preview your app on a real phone or tablet. * Logs and debugging Inspect build output, view runtime logs, and use AI to help diagnose issues.  Code Ownership ## Your code. No lock-in. Edit, export, and own every file. Draftbit generates real React Native and Expo code — not a proprietary format you can't take with you. * Built-in code editor Full editor with TypeScript autocomplete, syntax highlighting, and inline error detection. * File explorer Browse, create, rename, and organize files and folders just like a local IDE. * Export to GitHub or ZIP Push your code to a GitHub repo or download it anytime. * Git history and diffs View every change, compare versions side by side, and roll back to any previous state. * Upload files and assets Drag and drop images, fonts, and files directly into your project.  Backend & Data ## Connect a backend in minutes. Bring your own data layer or stand one up from scratch — auth, database, and APIs wired into your app without leaving the builder. ### Supabase, built in Available to every user. Spin up a Postgres database with auth, pick a branch, and edit Edge Functions — all from inside Draftbit. ### Firebase, Xano & more Connect the backend-as-a-service you already use, or choose one that fits your project. ### Any REST or GraphQL API Plug into 65+ preconfigured integrations or add your own endpoint. Introspect, query, and use it anywhere. ### Secrets & environment config Store API keys and environment variables securely, with separate configs per environment. Integrations and MCP ## Bring your own backend. Connect everything else. Draftbit connects to the tools and services your app already depends on — backends, payments, analytics, design, and project management. Use built-in integrations or add your own with MCP.  Supabase Auth, database, and storage in one backend. Connect directly to your Supabase project.  Firebase Use Firestore, Auth, and Cloud Functions as your app's backend.  Xano Build and connect a no-code backend with APIs, auth, and database logic.  Stripe Add payments, subscriptions, and checkout flows to your app.  RevenueCat Manage in-app purchases and subscriptions across iOS and Android.  Sentry Track errors and performance issues in production before users report them.  Linear Connect your project tracker so agents and teammates stay in sync.  Figma Import designs and keep your app aligned with your design source of truth.  Directus Use Directus as a headless CMS and connect it as a data source.  PostHog Add product analytics, feature flags, and session replay to your app. Need a custom integration?[View plans](/pricing) Publishing ## Publish to web, iOS, and Android from one workflow. One codebase. Multiple platforms. Less release friction. ### Web publishing Publish to the web from the same workflow you use to build the app. Get started ### Custom domains Launch on your own domain when the app is ready to feel like your product. Get started ### iOS and Android Move from builder to native release without switching into a different toolchain. Get started ### App store help Get support through the messy final steps when launch details get specific. Get started Team Collaboration ## Build together. Ship as a team. Invite your team, assign roles, and work on the same project at the same time — with live presence so you always know who's where. ### Shared workspaces Invite teammates and clients into the same project. Everyone works from the same source of truth. ### Roles and permissions Control who can edit, review, publish, and manage billing across your organization. ### Live presence See who's online and what they're working on in real time. ### Shared agent defaults Set team-wide AI instructions so agents follow the same conventions across the project. ### Organization management Manage seats, teams, and projects from one place as your team grows. Final CTA ## Start building. Keep control. Ship when you're ready. Try Draftbit free, then grow into code access, publishing, collaboration, and deeper support as your app gets real. Start building free[Talk to us](/services) --- # Start for free. Upgrade to go live. > Compare Draftbit plans, features, and collaboration options to choose the right setup for building and launching your mobile app. No long-term commitment. Switch plans at any time when you need more publishing, more power, or more support. Get Started Free [Talk to an Expert](/services) ## Individuals & Small Teams Start free, ship sooner, and upgrade when you need more. ## Free Get started building with AI assistance. $0 /month Free Forever 1 sandbox running at a time Get Started Everything you need to get started building: * Build with Claude Code & OpenAI Codex * Build Mobile Apps, Web Apps & Websites * All Visual Editing features * Built-in Supabase backend * Use your own AI subscription or API key * 5,000 credits to get started * 1-click publishing to Web (draftbit.dev) ## Standard Everything you need to ship your app. $12 /month MonthlyYearly · Save 20% 1 sandbox running at a time Add editor seats for $8 /seat/mo How will you run AI? Bring your own AIDraftbit Credits Connect Claude, ChatGPT, OpenAI, Anthropic, or OpenRouter. Draftbit credits aren't required. Get Started Everything in Free, plus: * Unlimited Projects * Unlimited REST API Integrations * Full agent & model choice with Draftbit Credits * Full Code Editing & Export * 1-Click Publishing for iOS, Android & Web * Custom Domains * Remove Draftbit Branding ## Pro Most popular Advanced features for full control. $24 /month MonthlyYearly · Save 20% Up to 3 sandboxes running at once Add editor seats for $16 /seat/mo How will you run AI? Bring your own AIDraftbit Credits Connect Claude, ChatGPT, OpenAI, Anthropic, or OpenRouter. Draftbit credits aren't required. Get Started Everything in Standard, plus: * Run up to 5 agents at once * Custom MCP Server Integrations * Export to GitHub * Larger, Faster Sandboxes * iOS & Android Simulators * App Store Submission Assistance * Priority Support & Training ## Teams & Enterprise More seats, live collaboration, faster support, and a cleaner path for larger organizations. ## Team For teams that need to collaborate and scale. $120 /month MonthlyYearly · Save 20% Up to 5 sandboxes running at once Add editor seats for $16 /seat/mo How will you run AI? Bring your own AIDraftbit Credits Connect Claude, ChatGPT, OpenAI, Anthropic, or OpenRouter. Draftbit credits aren't required. Get Started Everything in Pro, plus: * 10 editor seats included * Live Collaboration Features * Run up to 10 agents at once * Team Training Sessions * Dedicated Account Manager * Custom Onboarding * Early Access to New Features ## Enterprise Custom solutions for large organizations. Custom Custom annual pricing Unlimited sandboxes [Talk to us](/services) Everything in Team, plus: * Custom credit allocations * Unlimited editor seats * Unlimited concurrent agents & sandboxes * SSO / SAML authentication * Custom SLAs * Dedicated infrastructure * Private / Self Hosting Options * Custom integrations * Dedicated success manager * Invoice billing Need more credits? ## Top up any time, without changing plans. Beyond your monthly add-on, you can buy credits as a one-time purchase from $5 up to $10,000 — a flat 1,000 credits per dollar, with a bonus on larger purchases. Available on any paid plan. One-time credits expire one year after purchase. ### Volume bonus * $100 and up +5% credits * $500 and up +7.5% credits * $1,000 and up +10% credits * $10,000 and up +15% credits Compare plans ## See what changes as you move up. The core workflow stays the same. What changes is how much room you have to build, ship, collaborate, and get help. | Feature | Free | Standard | Pro | Team | Enterprise | | ------------------------------------------ | ------------------------------- | --------------- | --------------- | --------------- | ------------- | | AI & Building | | | | | | | AI Agent Chat | | | | | | | Claude Code & OpenAI Codex | | | | | | | Visual Editing | | | | | | | Mobile Apps, Web Apps & Websites | | | | | | | Built-in Supabase backend (beta) | | | | | | | Tasks & AI-assisted planning | | | | | | | Credits | 5,000 one-time | Optional add-on | Optional add-on | Optional add-on | Custom | | Use your own AI API key | | | | | | | Use your own AI subscription | | | | | | | Projects | 3 | Unlimited | Unlimited | Unlimited | Unlimited | | Apps per Project | 2 | Unlimited | Unlimited | Unlimited | Unlimited | | REST API integrations | 1 / project | Unlimited | Unlimited | Unlimited | Unlimited | | Agent & model choice with Draftbit Credits | Codex + supported OpenAI models | All supported | All supported | All supported | All supported | | Concurrent Agents | 1 | 1 | 5 | 10 | Unlimited | | Concurrent Sandboxes | 1 | 1 | Up to 3 | Up to 5 | Unlimited | | Code & Export | | | | | | | Code Editing | | | | | | | Code Export | | | | | | | GitHub Integration | | | | | | | Custom MCP Servers | | | | | | | Publishing | | | | | | | Web Publishing | draftbit.dev | | | | | | iOS Publishing | | | | | | | Android Publishing | | | | | | | Custom Domains | | | | | | | Remove Branding | | | | | | | iOS & Android Simulators | | | | | | | App Store Assistance | | | | | | | Collaboration | | | | | | | Editor Seats | 1 | 1 | 1 | 10 | Unlimited | | Live Collaboration | | | | | | | SSO / SAML | | | | | | | Support | | | | | | | Community Support | | | | | | | Email Support | | | | | | | Priority Support | | | | | | | Training Sessions | | | | | | | Dedicated Account Manager | | | | | | | Custom SLAs | | | | | | Add-on credits are granted each billing cycle. One-time credit purchases expire one year after purchase. Enterprise plans are customized around seats, credits, support, and infrastructure needs. Our customers love us. ## Teams already shipping with Draftbit. Our support team is here to help you with whatever you need to be successful. Need human help? ## When AI gets you 80% there, our experts can help finish the last 20%. Draftbit is built to be self-serve. But if the bug is stubborn, the launch is messy, or the architecture needs a second set of eyes, you can bring in real people who know the product and know how to ship. ### Good times to bring us in * Complex integrations or architecture choices * App Store submission, fixes, and launch support * Team onboarding or production hardening [Explore expert help ](/services) Practical FAQ ## Straight answers about pricing. No jargon. No maze. Just the questions people usually ask before they start. ### Can I change my plan at any time? Yes. Upgrades apply right away with a prorated charge and restart your billing cycle. Downgrades and cancellations take effect at the end of the current period, and you keep the paid features until then. ### What happens to my projects if I downgrade? Nothing is deleted. Your projects and apps stay in your account and stay open. From the day the lower plan starts, you cannot create projects or apps beyond its limits, and features above the plan, such as code export or app store publishing, lock until you upgrade again. ### Do credits roll over to the next month? Partly. Credits from a monthly plan or credit package stay usable for 30 days after the billing period they were granted for, so one month overlaps the next instead of ending on renewal day. Yearly plans receive the whole year of credits up front, and those expire at the end of the term. One-time credit purchases expire one year after purchase. ### What are credits used for? Credits pay for the AI model calls that Draftbit funds, which happen in agent threads while an agent reads, plans, and changes your app. Each call costs the provider's price for that model plus a Draftbit markup, so a long task across many files costs more than a small edit. Threads that run on your own OpenAI, Anthropic, or OpenRouter key skip credits. ### Can I try before I commit? Yes. The Free plan has no time limit and includes the AI agents, the visual editor, a one-time grant of 5,000 credits, and web publishing on a draftbit.dev address. Upgrade when you need code export, a custom domain, or app store publishing. ### What payment methods do you accept? Visa, Mastercard, and American Express, processed by Stripe. Prices are in USD. Enterprise customers can arrange invoice billing. --- # You're in good company > See how teams use Draftbit to build and launch production apps faster while keeping control of code, product decisions, and release workflows. From idea to launch and beyond, thousands of builders trust Draftbit with their apps. Start Building [See Pricing](/pricing) [4.8Avg Rating](/customers) [Trusted by 200k+ builders](/customers) Testimonials ## Don't take our word for it Hear from builders who ship real apps with Draftbit every day. Case Studies ## Real Apps, Real Companies Real apps built and launched with Draftbit — from first screen to the app store.  ### Trident Mindset [tridentmindset.com](https://www.tridentmindset.com/) Trident Mindset is a mental toughness and mental health training program created by Navy SEALs and neuroscientists that teaches proven tactics for reducing stress, increasing happiness, and thriving during adversity. We believe the quality of your mindset determines the quality of your life. Our mission is to teach you to master your mindset so you can live your happiest life. Trident Mindset teaches 12 proven tactics that will help you be calm, effective, and happy no matter what life throws at you: micro-goals, focus, breath control, intentionality, choosing the wrench, stoicism, discipline, meditation, mindfulness, flipping the script, self talk and visualization. Through concise daily lessons, practice exercises, and check-ins, you'll learn to master all 12 tactics. [App Store](https://apps.apple.com/us/app/trident-mindset/id1616593368)[Google Play](https://play.google.com/store/apps/details?id=com.pikwxwpq5b1i.plgj6rakapp)  ### Montage [searchmontage.com](https://searchmontage.com/) Use MONTAGE to discover and purchase the styles you see on TV. Featuring thousands of apparel and accessories tagged from hundreds of shows and movies, MONTAGE is the most comprehensive and convenient way to shop what you see on screen. Search for specific shows, characters, or brands — or browse the app to discover new styles and shows you never knew you needed. Find your style on MONTAGE. Instant search with AlgoliaSign in with Apple and GoogleCustom ads integration [App Store](https://apps.apple.com/us/app/montage-search-tv-style/id6445878135)[Google Play](https://play.google.com/store/apps/details?id=com.searchmontage.app) .png) ### StoryNest [storynest.ca](https://www.storynest.ca/) Save time finding gentle, ad-free audio stories with our consciously curated collection. Everything in StoryNest has been selected by our team of parents from storytellers across the world. Inspiring the imaginations of children ages 3–9. Age-appropriate and suitable for sensitive children. [App Store](https://apps.apple.com/us/app/storynest-kids-stories-songs/id6446899129)[Google Play](https://play.google.com/store/apps/details?id=ca.storynest.storynestapp)  ### Graze [joingraze.com](https://www.joingraze.com/) Graze is a platform that helps you save money at your favorite businesses around Santa Barbara, CA. There's no need to claim anything, you simply get access to promotions, deals and discounts. There’s no limit to how much you can save and businesses are constantly adding new promotions for you to take advantage of! We’re not your typical deals app. This is a win-win for you AND the business you’re buying from. So support local and help your community thrive! Location-based offersPush NotificationsReal-time QR Code-based redemption [App Store](https://apps.apple.com/us/app/graze-local/id1635343025)[Google Play](https://play.google.com/store/apps/details?id=com.graze.android) .png) ### LiveTime [liveti.me](https://www.liveti.me) LiveTime lets campus groups manage events better. Publish fraternity parties, RSO meetings, sporting games, speaker engagements, birthday celebrations, or study sessions. Invite campus groups, individuals, or the entire school community in one click. Manage new rushes or members with "interested lists" and by-request private groups. Request access to private events, discover upcoming group events, and keep tabs on who's in and out with the state-of-the-art barcode system. [App Store](https://apps.apple.com/us/app/lynkr-app/id6463145067)[Google Play](https://play.google.com/store/apps/details?id=com.lynkr.app) --- # Become a Draftbit Affiliate > Earn commissions by referring customers to Draftbit. Join the affiliate program and get paid for every signup through your unique link. Earn 50% of any platform plan payments for the first 12 months and 10% of any experts plan payments for the first 6 months for every customer that signs up through your unique affiliate link. ## How it works 1. **Apply to join** — It's quick and easy to get started. 2. **Share your link** — Promote Draftbit on your website, blog, social media, or videos. 3. **Get paid** — Receive payment via PayPal or subscription credit for every signup. ## Commission structure 50% of platform plan payments for 12 months 10% of experts plan payments for 6 months There is no cap on the amount you can earn. ## Who is it for? Marketers in the mobile app and no-code space Influencers in the maker and no-code community Educators teaching app development Bloggers and content creators Streamers who build in public Communities interested in mobile apps Interested in joining the affiliate program? [Apply to join](https://affiliates.draftbit.com/) --- # Blog > Read Draftbit articles on mobile app development, React Native, product strategy, low-code workflows, and app launch best practices. Explore our blog for insightful articles, personal reflections and more. [](/blog/a-beginners-comparison-of-react-native-and-flutter-why-you-should-choose-react-native/) ## [A Beginner's Comparison of React Native and Flutter: Why You Should Choose React Native](/blog/a-beginners-comparison-of-react-native-and-flutter-why-you-should-choose-react-native/) [When it comes to building mobile apps that work seamlessly on both iOS and Android, the choices often boil down to two popular frameworks: React Native and Flutter. Both have their strengths, but today, we're going to dive into what sets them apart](/blog/a-beginners-comparison-of-react-native-and-flutter-why-you-should-choose-react-native/) [Dev ToolsReact NativeNo CodeProgramming](/blog/a-beginners-comparison-of-react-native-and-flutter-why-you-should-choose-react-native/) [CNDave Sebek](/blog/a-beginners-comparison-of-react-native-and-flutter-why-you-should-choose-react-native/) [4](/blog/a-beginners-comparison-of-react-native-and-flutter-why-you-should-choose-react-native/) [ Min Read](/blog/a-beginners-comparison-of-react-native-and-flutter-why-you-should-choose-react-native/) [](/blog/unleashing-the-power-of-low-code-app-builders-for-internal-processes/) ## [How Low-Code App Builders Improve Internal Processes](/blog/unleashing-the-power-of-low-code-app-builders-for-internal-processes/) [Learn how teams can use AI-assisted low-code app builders like Draftbit to create internal tools, connect existing data, reduce IT backlog, and preserve source code ownership.](/blog/unleashing-the-power-of-low-code-app-builders-for-internal-processes/) [Product Team CollaborationLow CodeDev ToolsEnterprise](/blog/unleashing-the-power-of-low-code-app-builders-for-internal-processes/) [CNDave Sebek](/blog/unleashing-the-power-of-low-code-app-builders-for-internal-processes/) [7](/blog/unleashing-the-power-of-low-code-app-builders-for-internal-processes/) [ Min Read](/blog/unleashing-the-power-of-low-code-app-builders-for-internal-processes/) [](/blog/navigating-the-rough-seas-to-find-product-market-fit-for-your-app/) ## [Navigating the Rough Seas to Find Product-Market Fit for Your App](/blog/navigating-the-rough-seas-to-find-product-market-fit-for-your-app/) [Finding Product-Market Fit is no easy feat, but with a mix of clarity, customer focus, and constant iteration, you'll be sailing toward success like the most capable captain on the high seas.](/blog/navigating-the-rough-seas-to-find-product-market-fit-for-your-app/) [StartupsApplication Development](/blog/navigating-the-rough-seas-to-find-product-market-fit-for-your-app/) [CNDave Sebek](/blog/navigating-the-rough-seas-to-find-product-market-fit-for-your-app/) [4](/blog/navigating-the-rough-seas-to-find-product-market-fit-for-your-app/) [ Min Read](/blog/navigating-the-rough-seas-to-find-product-market-fit-for-your-app/) [](/blog/why-mobile-app-startup-founders-should-consider-no-code-development-tools/) ## [Why Mobile App Startup Founders Should Consider No-Code Development Tools](/blog/why-mobile-app-startup-founders-should-consider-no-code-development-tools/) [In this blog post, we will explore why mobile app startup founders should seriously consider using no-code development tools and services.](/blog/why-mobile-app-startup-founders-should-consider-no-code-development-tools/) [App FoundersNo CodeStartups](/blog/why-mobile-app-startup-founders-should-consider-no-code-development-tools/) [CNDave Sebek](/blog/why-mobile-app-startup-founders-should-consider-no-code-development-tools/) [5](/blog/why-mobile-app-startup-founders-should-consider-no-code-development-tools/) [ Min Read](/blog/why-mobile-app-startup-founders-should-consider-no-code-development-tools/) [](/blog/5-funding-options-mobile-app-startups-should-consider/) ## [5 Funding Options Mobile App Startups Should Consider](/blog/5-funding-options-mobile-app-startups-should-consider/) [In this blog post, we will explore five funding options that mobile app startups should consider to secure the necessary capital for their journey.](/blog/5-funding-options-mobile-app-startups-should-consider/) [App FoundersSmall BusinessStartups](/blog/5-funding-options-mobile-app-startups-should-consider/) [CNDave Sebek](/blog/5-funding-options-mobile-app-startups-should-consider/) [4](/blog/5-funding-options-mobile-app-startups-should-consider/) [ Min Read](/blog/5-funding-options-mobile-app-startups-should-consider/) [](/blog/common-best-practices-for-smartphone-app-ui-ux-design/) ## [Common Best Practices for Smartphone App UI/UX Design](/blog/common-best-practices-for-smartphone-app-ui-ux-design/) [In this blog post, we will explore some common best practices for creating a compelling and user-friendly UI/UX for smartphone apps.](/blog/common-best-practices-for-smartphone-app-ui-ux-design/) [App DesignMobile App Development](/blog/common-best-practices-for-smartphone-app-ui-ux-design/) [CNDave Sebek](/blog/common-best-practices-for-smartphone-app-ui-ux-design/) [5](/blog/common-best-practices-for-smartphone-app-ui-ux-design/) [ Min Read](/blog/common-best-practices-for-smartphone-app-ui-ux-design/) [](/blog/strategies-for-user-acquisition-and-retention-in-the-mobile-app-market/) ## [Strategies for User Acquisition and Retention in the Mobile App Market](/blog/strategies-for-user-acquisition-and-retention-in-the-mobile-app-market/) [Proven strategies for acquiring and retaining mobile app users, from ASO and influencer marketing to push notifications.](/blog/strategies-for-user-acquisition-and-retention-in-the-mobile-app-market/) [App Marketing](/blog/strategies-for-user-acquisition-and-retention-in-the-mobile-app-market/) [CNDave Sebek](/blog/strategies-for-user-acquisition-and-retention-in-the-mobile-app-market/) [4](/blog/strategies-for-user-acquisition-and-retention-in-the-mobile-app-market/) [ Min Read](/blog/strategies-for-user-acquisition-and-retention-in-the-mobile-app-market/) [](/blog/top-6-mobile-app-wireframe-and-prototyping-tools/) ## [Top 6 Mobile App Wireframe and Prototyping Tools](/blog/top-6-mobile-app-wireframe-and-prototyping-tools/) [These invaluable resources empower app designers and developers to bring their concepts to life, allowing them to create interactive and user-friendly interfaces.](/blog/top-6-mobile-app-wireframe-and-prototyping-tools/) [App Design](/blog/top-6-mobile-app-wireframe-and-prototyping-tools/) [CNDave Sebek](/blog/top-6-mobile-app-wireframe-and-prototyping-tools/) [3](/blog/top-6-mobile-app-wireframe-and-prototyping-tools/) [ Min Read](/blog/top-6-mobile-app-wireframe-and-prototyping-tools/) [](/blog/top-mobile-app-design-trends-going-into-2023/) ## [Mobile App Design Trends That Matter Now](/blog/top-mobile-app-design-trends-going-into-2023/) [Explore current mobile app design trends, from AI-assisted UX and adaptive interfaces to accessibility, trust, motion, design systems, and real build workflows.](/blog/top-mobile-app-design-trends-going-into-2023/) [App DesignMobile App Development](/blog/top-mobile-app-design-trends-going-into-2023/) [CNDave Sebek](/blog/top-mobile-app-design-trends-going-into-2023/) [6](/blog/top-mobile-app-design-trends-going-into-2023/) [ Min Read](/blog/top-mobile-app-design-trends-going-into-2023/) [](/blog/achieving-success-with-mobile-app-development-using-low-code-platforms-tips-and-best-practices/) ## [A Practical Playbook for Building Mobile Apps with Low-Code and AI](/blog/achieving-success-with-mobile-app-development-using-low-code-platforms-tips-and-best-practices/) [Use this low-code mobile app development playbook to scope smarter, build faster with AI, connect real data, test on devices, preserve source code access, and launch with expert support.](/blog/achieving-success-with-mobile-app-development-using-low-code-platforms-tips-and-best-practices/) [Mobile App DevelopmentLow CodeSmall Business](/blog/achieving-success-with-mobile-app-development-using-low-code-platforms-tips-and-best-practices/) [CNDave Sebek](/blog/achieving-success-with-mobile-app-development-using-low-code-platforms-tips-and-best-practices/) [8](/blog/achieving-success-with-mobile-app-development-using-low-code-platforms-tips-and-best-practices/) [ Min Read](/blog/achieving-success-with-mobile-app-development-using-low-code-platforms-tips-and-best-practices/) [](/blog/empowering-non-developers-to-build-mobile-apps-with-low-code-platforms/) ## [How Non-Developers Can Build Real Mobile Apps with AI and Low-Code](/blog/empowering-non-developers-to-build-mobile-apps-with-low-code-platforms/) [Learn how non-developers can use AI-assisted low-code platforms like Draftbit to build, iterate, and launch real mobile apps while keeping code access and expert help available.](/blog/empowering-non-developers-to-build-mobile-apps-with-low-code-platforms/) [Low CodeMobile App DevelopmentSmall BusinessStartups](/blog/empowering-non-developers-to-build-mobile-apps-with-low-code-platforms/) [CNDave Sebek](/blog/empowering-non-developers-to-build-mobile-apps-with-low-code-platforms/) [7](/blog/empowering-non-developers-to-build-mobile-apps-with-low-code-platforms/) [ Min Read](/blog/empowering-non-developers-to-build-mobile-apps-with-low-code-platforms/) [](/blog/how-low-code-platforms-can-simplify-your-mobile-app-development-workflow/) ## [How AI and Low-Code Simplify Mobile App Development Workflows](/blog/how-low-code-platforms-can-simplify-your-mobile-app-development-workflow/) [See how AI-assisted low-code platforms simplify mobile app development with templates, visual editing, integrations, live preview, code access, publishing, and expert support.](/blog/how-low-code-platforms-can-simplify-your-mobile-app-development-workflow/) [Application DevelopmentLow Code](/blog/how-low-code-platforms-can-simplify-your-mobile-app-development-workflow/) [CNDave Sebek](/blog/how-low-code-platforms-can-simplify-your-mobile-app-development-workflow/) [7](/blog/how-low-code-platforms-can-simplify-your-mobile-app-development-workflow/) [ Min Read](/blog/how-low-code-platforms-can-simplify-your-mobile-app-development-workflow/) [](/blog/low-code-platforms-vs-traditional-mobile-app-development-which-is-right-for-you/) ## [Low-Code vs. Traditional Mobile App Development: How to Choose](/blog/low-code-platforms-vs-traditional-mobile-app-development-which-is-right-for-you/) [Compare low-code, AI-assisted app builders, expert services, and traditional mobile development so you can choose the right path for your app.](/blog/low-code-platforms-vs-traditional-mobile-app-development-which-is-right-for-you/) [Low CodeMobile App DevelopmentSmall BusinessStartups](/blog/low-code-platforms-vs-traditional-mobile-app-development-which-is-right-for-you/) [CNDave Sebek](/blog/low-code-platforms-vs-traditional-mobile-app-development-which-is-right-for-you/) [7](/blog/low-code-platforms-vs-traditional-mobile-app-development-which-is-right-for-you/) [ Min Read](/blog/low-code-platforms-vs-traditional-mobile-app-development-which-is-right-for-you/) [](/blog/maximizing-efficiency-and-productivity-with-expo-dev-tools/) ## [Maximizing efficiency and productivity with Expo dev tools](/blog/maximizing-efficiency-and-productivity-with-expo-dev-tools/) [Explore how Expo dev tools boost mobile development productivity with faster setup, built-in APIs, and seamless deployment.](/blog/maximizing-efficiency-and-productivity-with-expo-dev-tools/) [ExpoDev Tools](/blog/maximizing-efficiency-and-productivity-with-expo-dev-tools/) [CNDave Sebek](/blog/maximizing-efficiency-and-productivity-with-expo-dev-tools/) [3](/blog/maximizing-efficiency-and-productivity-with-expo-dev-tools/) [ Min Read](/blog/maximizing-efficiency-and-productivity-with-expo-dev-tools/) [](/blog/real-world-examples-of-successful-react-native-mobile-apps/) ## [Real-World Examples of Successful React Native Mobile Apps](/blog/real-world-examples-of-successful-react-native-mobile-apps/) [See how Facebook, Airbnb, UberEATS, Walmart, and Bloomberg use React Native to power their high-performance mobile apps.](/blog/real-world-examples-of-successful-react-native-mobile-apps/) [Mobile App DevelopmentReact Native](/blog/real-world-examples-of-successful-react-native-mobile-apps/) [CNDave Sebek](/blog/real-world-examples-of-successful-react-native-mobile-apps/) [4](/blog/real-world-examples-of-successful-react-native-mobile-apps/) [ Min Read](/blog/real-world-examples-of-successful-react-native-mobile-apps/) [](/blog/the-advantages-of-using-low-code-platforms-for-enterprise-mobile-app-development/) ## [Low-Code for Enterprise Mobile App Development: Speed Without Lock-In](/blog/the-advantages-of-using-low-code-platforms-for-enterprise-mobile-app-development/) [See how AI-assisted low-code platforms help enterprise teams ship mobile apps faster while preserving source code access, integrations, governance, and expert support.](/blog/the-advantages-of-using-low-code-platforms-for-enterprise-mobile-app-development/) [Low CodeApplication DevelopmentEnterprise](/blog/the-advantages-of-using-low-code-platforms-for-enterprise-mobile-app-development/) [CNDave Sebek](/blog/the-advantages-of-using-low-code-platforms-for-enterprise-mobile-app-development/) [7](/blog/the-advantages-of-using-low-code-platforms-for-enterprise-mobile-app-development/) [ Min Read](/blog/the-advantages-of-using-low-code-platforms-for-enterprise-mobile-app-development/) [](/blog/the-benefits-of-using-low-code-tools-at-development-agencies/) ## [How Development Agencies Can Use Low-Code Without Sacrificing Quality](/blog/the-benefits-of-using-low-code-tools-at-development-agencies/) [Learn how agencies can use AI-assisted low-code tools like Draftbit to protect margins, speed up mobile delivery, improve client collaboration, and keep source code ownership.](/blog/the-benefits-of-using-low-code-tools-at-development-agencies/) [Application DevelopmentLow Code](/blog/the-benefits-of-using-low-code-tools-at-development-agencies/) [CNDave Sebek](/blog/the-benefits-of-using-low-code-tools-at-development-agencies/) [7](/blog/the-benefits-of-using-low-code-tools-at-development-agencies/) [ Min Read](/blog/the-benefits-of-using-low-code-tools-at-development-agencies/) [](/blog/the-cost-effective-solution-developing-mobile-apps-with-low-code-platforms/) ## [How to Lower the Cost of Mobile App Development Without Losing Control](/blog/the-cost-effective-solution-developing-mobile-apps-with-low-code-platforms/) [Learn how AI-assisted low-code platforms like Draftbit lower mobile app development costs while preserving code access, integrations, publishing, and expert support.](/blog/the-cost-effective-solution-developing-mobile-apps-with-low-code-platforms/) [Small BusinessStartupsLow CodeMobile App Development](/blog/the-cost-effective-solution-developing-mobile-apps-with-low-code-platforms/) [CNDave Sebek](/blog/the-cost-effective-solution-developing-mobile-apps-with-low-code-platforms/) [7](/blog/the-cost-effective-solution-developing-mobile-apps-with-low-code-platforms/) [ Min Read](/blog/the-cost-effective-solution-developing-mobile-apps-with-low-code-platforms/) [](/blog/why-react-native-is-the-future-of-mobile-app-development/) ## [Why React Native is the Future of Mobile App Development](/blog/why-react-native-is-the-future-of-mobile-app-development/) [Why React Native leads mobile app development with native performance, shared codebases, and strong community support.](/blog/why-react-native-is-the-future-of-mobile-app-development/) [Application DevelopmentReact Native](/blog/why-react-native-is-the-future-of-mobile-app-development/) [CNDave Sebek](/blog/why-react-native-is-the-future-of-mobile-app-development/) [3](/blog/why-react-native-is-the-future-of-mobile-app-development/) [ Min Read](/blog/why-react-native-is-the-future-of-mobile-app-development/) [](/blog/how-to-choose-the-best-baas-for-your-native-mobile-app/) ## [How to choose the best BaaS for your native mobile app](/blog/how-to-choose-the-best-baas-for-your-native-mobile-app/) [Compare backend-as-a-service options for your mobile app. Evaluate features, performance, security, pricing, and ease of use.](/blog/how-to-choose-the-best-baas-for-your-native-mobile-app/) [Backend DevelopmentMobile App Development](/blog/how-to-choose-the-best-baas-for-your-native-mobile-app/) [CNDave Sebek](/blog/how-to-choose-the-best-baas-for-your-native-mobile-app/) [7](/blog/how-to-choose-the-best-baas-for-your-native-mobile-app/) [ Min Read](/blog/how-to-choose-the-best-baas-for-your-native-mobile-app/) [](/blog/the-hapi-path-to-express-js-for-our-backend-services/) ## [The Hapi Path to Express.js for our Backend Services](/blog/the-hapi-path-to-express-js-for-our-backend-services/) [Draftbit Sr. Software Engineer Shawn Michael Larkin explains the technical context for our switch from Hapi to Express.js, and its advantages for our end-users.](/blog/the-hapi-path-to-express-js-for-our-backend-services/) [Backend Development](/blog/the-hapi-path-to-express-js-for-our-backend-services/) [CNShawn Michael Larkin](/blog/the-hapi-path-to-express-js-for-our-backend-services/) [5](/blog/the-hapi-path-to-express-js-for-our-backend-services/) [ Min Read](/blog/the-hapi-path-to-express-js-for-our-backend-services/) [](/blog/the-best-ci-cd-tools-for-mobile-app-developers-in-2022/) ## [Best CI/CD Tools for Mobile App Developers](/blog/the-best-ci-cd-tools-for-mobile-app-developers-in-2022/) [Compare the best CI/CD and release tools for mobile apps, including Draftbit, Expo EAS, GitHub Actions, Bitrise, Codemagic, Fastlane, Xcode Cloud, CircleCI, GitLab CI/CD, and Jenkins.](/blog/the-best-ci-cd-tools-for-mobile-app-developers-in-2022/) [Application DevelopmentMobile App Development](/blog/the-best-ci-cd-tools-for-mobile-app-developers-in-2022/) [CNShanika Wickramasinghe](/blog/the-best-ci-cd-tools-for-mobile-app-developers-in-2022/) [10](/blog/the-best-ci-cd-tools-for-mobile-app-developers-in-2022/) [ Min Read](/blog/the-best-ci-cd-tools-for-mobile-app-developers-in-2022/) [](/blog/the-10-best-design-tools-for-mobile-app-creators-in-2021/) ## [Best Mobile App Design and Prototyping Tools](/blog/the-10-best-design-tools-for-mobile-app-creators-in-2021/) [Compare the best mobile app design and prototyping tools for modern app teams, including Draftbit, Figma, Sketch, Penpot, ProtoPie, Framer, Origami Studio, Zeplin, UXPin, and Rive.](/blog/the-10-best-design-tools-for-mobile-app-creators-in-2021/) [Mobile App DevelopmentApp Design](/blog/the-10-best-design-tools-for-mobile-app-creators-in-2021/) [CNShanika Wickramasinghe](/blog/the-10-best-design-tools-for-mobile-app-creators-in-2021/) [10](/blog/the-10-best-design-tools-for-mobile-app-creators-in-2021/) [ Min Read](/blog/the-10-best-design-tools-for-mobile-app-creators-in-2021/) [](/blog/building-an-instagram-clone-from-scratch-with-no-code-part-1-sign-up-sign-in-and-log-out/) ## [Building an Instagram Clone from Scratch with No-Code, Part 1: Sign Up, Sign In, and Log Out](/blog/building-an-instagram-clone-from-scratch-with-no-code-part-1-sign-up-sign-in-and-log-out/) [In this 3-part tutorial series, we provide step-by-step instructions for creating an Instagram clone from scratch using no-code tools Draftbit and Xano. In Part 1, we will build user authentication (sign up, sign in, log out).](/blog/building-an-instagram-clone-from-scratch-with-no-code-part-1-sign-up-sign-in-and-log-out/) [Mobile App DevelopmentNo Code](/blog/building-an-instagram-clone-from-scratch-with-no-code-part-1-sign-up-sign-in-and-log-out/) [CNAman Mittal](/blog/building-an-instagram-clone-from-scratch-with-no-code-part-1-sign-up-sign-in-and-log-out/) [15](/blog/building-an-instagram-clone-from-scratch-with-no-code-part-1-sign-up-sign-in-and-log-out/) [ Min Read](/blog/building-an-instagram-clone-from-scratch-with-no-code-part-1-sign-up-sign-in-and-log-out/) [](/blog/building-an-instagram-clone-from-scratch-with-no-code-part-2-create-browse-content/) ## [Building an Instagram Clone from Scratch with No-Code, Part 2: Create & Browse Content](/blog/building-an-instagram-clone-from-scratch-with-no-code-part-2-create-browse-content/) [In this 3-part tutorial series, we provide step-by-step instructions for creating an Instagram clone from scratch using no-code tools Draftbit and Xano. In Part 2, we will build content creation and browsing functionality (create new post, see posts).](/blog/building-an-instagram-clone-from-scratch-with-no-code-part-2-create-browse-content/) [Mobile App DevelopmentNo Code](/blog/building-an-instagram-clone-from-scratch-with-no-code-part-2-create-browse-content/) [CNAman Mittal](/blog/building-an-instagram-clone-from-scratch-with-no-code-part-2-create-browse-content/) [13](/blog/building-an-instagram-clone-from-scratch-with-no-code-part-2-create-browse-content/) [ Min Read](/blog/building-an-instagram-clone-from-scratch-with-no-code-part-2-create-browse-content/) [](/blog/building-an-instagram-clone-from-scratch-with-no-code-part-3-interact-with-content/) ## [Building an Instagram Clone from Scratch with No-Code, Part 3: Interact with Content](/blog/building-an-instagram-clone-from-scratch-with-no-code-part-3-interact-with-content/) [In this 3-part tutorial series, we provide step-by-step instructions for creating an Instagram clone from scratch using no-code tools Draftbit and Xano. In Part 3, we will build content interaction features (likes, follows, comments).](/blog/building-an-instagram-clone-from-scratch-with-no-code-part-3-interact-with-content/) [Mobile App DevelopmentNo Code](/blog/building-an-instagram-clone-from-scratch-with-no-code-part-3-interact-with-content/) [CNAman Mittal](/blog/building-an-instagram-clone-from-scratch-with-no-code-part-3-interact-with-content/) [12](/blog/building-an-instagram-clone-from-scratch-with-no-code-part-3-interact-with-content/) [ Min Read](/blog/building-an-instagram-clone-from-scratch-with-no-code-part-3-interact-with-content/) [](/blog/9-reasons-small-business-owners-should-be-thinking-about-low-code-no-code/) ## [9 Reasons Small Business Owners Should Be Thinking About Low-Code/No-Code](/blog/9-reasons-small-business-owners-should-be-thinking-about-low-code-no-code/) [Learn how low-code/no-code platforms are helping small businesses build and automate faster, easier and cheaper.](/blog/9-reasons-small-business-owners-should-be-thinking-about-low-code-no-code/) [Low CodeNo CodeSmall Business](/blog/9-reasons-small-business-owners-should-be-thinking-about-low-code-no-code/) [CNNick Selman](/blog/9-reasons-small-business-owners-should-be-thinking-about-low-code-no-code/) [9](/blog/9-reasons-small-business-owners-should-be-thinking-about-low-code-no-code/) [ Min Read](/blog/9-reasons-small-business-owners-should-be-thinking-about-low-code-no-code/) [](/blog/how-to-get-your-first-1000-mobile-app-users/) ## [How To Get Your First 1,000 Mobile App Users](/blog/how-to-get-your-first-1000-mobile-app-users/) [Everyone and their smartphone-savvy grandmother is developing a mobile app. So how do founders stand out from the crowd? How do they get people to care about, use, and buy their app? How do they attract early adopters?](/blog/how-to-get-your-first-1000-mobile-app-users/) [App FoundersApp Marketing](/blog/how-to-get-your-first-1000-mobile-app-users/) [CNNick Selman](/blog/how-to-get-your-first-1000-mobile-app-users/) [7](/blog/how-to-get-your-first-1000-mobile-app-users/) [ Min Read](/blog/how-to-get-your-first-1000-mobile-app-users/) [](/blog/react-native-vs-flutter-which-one-is-better/) ## [React Native vs. Flutter: Which One is Better?](/blog/react-native-vs-flutter-which-one-is-better/) [When deciding between the two most popular cross-platform mobile frameworks in the world, there are many considerations, from performance to community to cost.](/blog/react-native-vs-flutter-which-one-is-better/) [React NativeMobile App DevelopmentProgramming](/blog/react-native-vs-flutter-which-one-is-better/) [CNNick Selman](/blog/react-native-vs-flutter-which-one-is-better/) [6](/blog/react-native-vs-flutter-which-one-is-better/) [ Min Read](/blog/react-native-vs-flutter-which-one-is-better/) [](/blog/how-to-create-a-native-mobile-app-for-your-backendless-back-end/) ## [How to Create a Native Mobile App For Your Backendless Back-End](/blog/how-to-create-a-native-mobile-app-for-your-backendless-back-end/) [In this tutorial, I’ll show you how to build a mobile app front-end from scratch using a Backendless real-time database back-end and Backendless API services.](/blog/how-to-create-a-native-mobile-app-for-your-backendless-back-end/) [Low CodeMobile App Development](/blog/how-to-create-a-native-mobile-app-for-your-backendless-back-end/) [CNCahyo Subroto](/blog/how-to-create-a-native-mobile-app-for-your-backendless-back-end/) [13](/blog/how-to-create-a-native-mobile-app-for-your-backendless-back-end/) [ Min Read](/blog/how-to-create-a-native-mobile-app-for-your-backendless-back-end/) [](/blog/how-to-create-a-native-mobile-app-for-your-supabase-back-end/) ## [How To Create a Native Mobile App For Your Supabase Back-End](/blog/how-to-create-a-native-mobile-app-for-your-supabase-back-end/) [This tutorial will show you how to create a native mobile app from scratch using Supabase as the back-end database and Draftbit as the React Native builder.](/blog/how-to-create-a-native-mobile-app-for-your-supabase-back-end/) [Low CodeMobile App Development](/blog/how-to-create-a-native-mobile-app-for-your-supabase-back-end/) [CNShanika Wickramasinghe](/blog/how-to-create-a-native-mobile-app-for-your-supabase-back-end/) [15](/blog/how-to-create-a-native-mobile-app-for-your-supabase-back-end/) [ Min Read](/blog/how-to-create-a-native-mobile-app-for-your-supabase-back-end/) [](/blog/11-best-no-code-and-low-code-backends-for-2021/) ## [Best No-Code and Low-Code Backends for Mobile Apps](/blog/11-best-no-code-and-low-code-backends-for-2021/) [Compare the best no-code and low-code backends for mobile apps, including Supabase, Xano, Firebase, Airtable, Backendless, Appwrite, Hasura, and headless CMS options.](/blog/11-best-no-code-and-low-code-backends-for-2021/) [Application DevelopmentBackend DevelopmentMobile App DevelopmentLow Code](/blog/11-best-no-code-and-low-code-backends-for-2021/) [CNAman Mittal](/blog/11-best-no-code-and-low-code-backends-for-2021/) [12](/blog/11-best-no-code-and-low-code-backends-for-2021/) [ Min Read](/blog/11-best-no-code-and-low-code-backends-for-2021/) [](/blog/how-to-build-an-app-ui-from-scratch-using-draftbit/) ## [How to Build an App UI from Scratch Using Draftbit](/blog/how-to-build-an-app-ui-from-scratch-using-draftbit/) [learn step-by-step how to create a user interface using the Draftbit app builder and see in action how Flexbox layout components are configured, and understand the building blocks of the Builder.](/blog/how-to-build-an-app-ui-from-scratch-using-draftbit/) [React NativeMobile App DevelopmentProgrammingApplication Development](/blog/how-to-build-an-app-ui-from-scratch-using-draftbit/) [CNAman Mittal](/blog/how-to-build-an-app-ui-from-scratch-using-draftbit/) [15](/blog/how-to-build-an-app-ui-from-scratch-using-draftbit/) [ Min Read](/blog/how-to-build-an-app-ui-from-scratch-using-draftbit/) [](/blog/how-to-create-a-custom-component-in-draftbit/) ## [How to create a Custom Component in Draftbit](/blog/how-to-create-a-custom-component-in-draftbit/) [In this article, we'll go through how to create a Custom Component in a Draftbit app (a Text component), and adding the open-source Package that supports the Custom Component (via Packages).](/blog/how-to-create-a-custom-component-in-draftbit/) [React NativeExpoMobile App DevelopmentProgrammingNo Code](/blog/how-to-create-a-custom-component-in-draftbit/) [CNAman Mittal](/blog/how-to-create-a-custom-component-in-draftbit/) [5](/blog/how-to-create-a-custom-component-in-draftbit/) [ Min Read](/blog/how-to-create-a-custom-component-in-draftbit/) [](/blog/how-to-fetch-data-from-a-rest-api-in-an-app-ui-using-draftbit/) ## [How to Fetch Data from a REST API in an App UI Using Draftbit](/blog/how-to-fetch-data-from-a-rest-api-in-an-app-ui-using-draftbit/) [In the first tutorial in the series on creating a Bookbit Starter app from scratch, the focus was on covering the UI elements that the Draftbit’s Builder offer and how to implement them to create mobile app screens.](/blog/how-to-fetch-data-from-a-rest-api-in-an-app-ui-using-draftbit/) [React NativeNo CodeLow CodeMobile App Development](/blog/how-to-fetch-data-from-a-rest-api-in-an-app-ui-using-draftbit/) [CNAman Mittal](/blog/how-to-fetch-data-from-a-rest-api-in-an-app-ui-using-draftbit/) [11](/blog/how-to-fetch-data-from-a-rest-api-in-an-app-ui-using-draftbit/) [ Min Read](/blog/how-to-fetch-data-from-a-rest-api-in-an-app-ui-using-draftbit/) [](/blog/poisera/) ## [Poisera’s founders launched their app that helps mothers build resilience, using Draftbit](/blog/poisera/) [Learn how Poisera's founders used Draftbit to launch their mobile app that helps mothers build resilience and well-being.](/blog/poisera/) [Startups](/blog/poisera/) [CNDraftbit](/blog/poisera/) [3](/blog/poisera/) [ Min Read](/blog/poisera/) [](/blog/the-complete-guide-to-react-native-flexbox-layout-using-draftbits-visual-builder/) ## [The Complete Guide to React Native Flexbox Layout using Draftbit’s Visual Builder](/blog/the-complete-guide-to-react-native-flexbox-layout-using-draftbits-visual-builder/) [How Draftbit uses React Native's Flexbox layout to build apps visually.](/blog/the-complete-guide-to-react-native-flexbox-layout-using-draftbits-visual-builder/) [React NativeLow CodeMobile App DevelopmentProgrammingNo Code](/blog/the-complete-guide-to-react-native-flexbox-layout-using-draftbits-visual-builder/) [CNAman Mittal](/blog/the-complete-guide-to-react-native-flexbox-layout-using-draftbits-visual-builder/) [8](/blog/the-complete-guide-to-react-native-flexbox-layout-using-draftbits-visual-builder/) [ Min Read](/blog/the-complete-guide-to-react-native-flexbox-layout-using-draftbits-visual-builder/) [](/blog/how-to-create-a-native-mobile-app-for-your-xano-back-end/) ## [How to create a native mobile app for your Xano back-end](/blog/how-to-create-a-native-mobile-app-for-your-xano-back-end/) [In this tutorial, we'll show you how to build the core CRUD functionalities of a mobile app from scratch using a Xano back-end. The mobile app will be built in open-source React Native using Draftbit, a low-code visual development platform. Apps built in Draftbit can be published to the iOS and Android app stores.](/blog/how-to-create-a-native-mobile-app-for-your-xano-back-end/) [React NativeBackend DevelopmentApplication DevelopmentExpoNo Code](/blog/how-to-create-a-native-mobile-app-for-your-xano-back-end/) [CNNick Selman](/blog/how-to-create-a-native-mobile-app-for-your-xano-back-end/) [11](/blog/how-to-create-a-native-mobile-app-for-your-xano-back-end/) [ Min Read](/blog/how-to-create-a-native-mobile-app-for-your-xano-back-end/) --- # Best No-Code and Low-Code Backends for Mobile Apps > Compare the best no-code and low-code backends for mobile apps, including Supabase, Xano, Firebase, Airtable, Backendless, Appwrite, Hasura, and headless CMS… ### Compare the best no-code and low-code backends for mobile apps, including Supabase, Xano, Firebase, Airtable, Backendless, Appwrite, Hasura, and headless CMS options. Aman Mittalon September 22, 2021 Application DevelopmentBackend DevelopmentMobile App DevelopmentLow Code   Choosing a backend is one of the most important early decisions in a mobile app project. The right backend gives you authentication, data storage, APIs, permissions, file storage, automations, and room to scale. The wrong backend can slow down every feature after your prototype. This guide was originally published in 2021 and has been refreshed for today’s Draftbit platform. Draftbit is still backend agnostic, but the way teams build apps has changed: AI agents can help create screens and wire up data, visual editing can handle a lot of product iteration, and builders still need clean APIs, reliable permissions, and code ownership when the app grows. Draftbit can connect to backend services through [REST API integrations](/integrations/), [GraphQL integrations](/graphql/), and [MCP servers](/mcp/) for AI-assisted workflows. You can start from a [production-ready app template](/mobile-app-templates/), connect your data source, customize the UI visually, edit source code when needed, and publish to web, iOS, and Android from one workflow. If you want help choosing or implementing a backend, [Draftbit Expert Services](/services/) can help with architecture, database setup, API design, integrations, migrations, and launch support. ## Quick answer: which backend should you choose? For most Draftbit mobile apps, start with one of these patterns: | Need | Strong fit | | -------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | | A production Postgres backend with auth, storage, and generated APIs | [Supabase](https://supabase.com/) | | A no-code backend with visual API building and business logic | [Xano](https://www.xano.com/) | | A Google-backed backend with auth, analytics, messaging, and NoSQL data | [Firebase](https://firebase.google.com/) | | A lightweight operational database for internal tools or prototypes | [Airtable](https://airtable.com/) | | A visual backend with data, users, files, messaging, and server-side logic | [Backendless](https://backendless.com/) | | An open-source backend you can self-host or run in the cloud | [Appwrite](https://appwrite.io/) | | A GraphQL layer over existing databases and services | [Hasura](https://hasura.io/) | | Content-heavy apps with editorial workflows | [Contentful](https://www.contentful.com/), [Sanity](https://www.sanity.io/), or [Strapi](https://strapi.io/) | | Parse-compatible apps or teams that want managed Parse hosting | [Back4App](https://www.back4app.com/) | There is no universal best backend. The best choice depends on your data model, auth requirements, team skill, compliance needs, budget, and whether you want to own more of the stack. ## What to look for in a mobile app backend Before comparing tools, define the job your backend needs to do: * **Data model:** Is your app mostly relational data, documents, content, files, or events? * **Auth and permissions:** Do users need roles, organizations, teams, private records, or admin views? * **API shape:** Does the backend expose REST, GraphQL, SDKs, webhooks, or MCP-compatible workflows? * **Business logic:** Can you safely run server-side actions, scheduled jobs, and custom validation? * **Scalability:** Can it handle the expected read/write volume, storage, and realtime usage? * **Portability:** Can you export your data and avoid locking your app into a dead end? * **Team fit:** Will your team actually be able to operate it after launch? Draftbit gives you flexibility here. You can keep a backend you already use, connect to generated APIs, add custom code, or work with Draftbit experts to design a backend that fits the product instead of forcing the product into a tool. ## 1. Supabase **Best for teams that want a production-friendly Postgres backend with auth, storage, realtime, Edge Functions, and generated APIs.** [Supabase](https://supabase.com/) is one of the strongest default choices for modern app teams. It is built around Postgres, which makes it a good fit for structured data, relational models, reporting, and long-term portability. Supabase also includes authentication, storage, realtime subscriptions, Edge Functions, and APIs that can be connected to a Draftbit app. Supabase works well when you want a real database foundation without building your own backend from scratch. It is especially strong for marketplaces, dashboards, internal tools, social apps, directories, booking flows, and apps where relationships between records matter. The tradeoff is that Supabase still rewards teams that understand database design. Row Level Security is powerful, but it must be designed carefully. If your app includes sensitive data, tenant isolation, or complex user roles, spend time on the schema and policy model before the UI gets too far ahead. **Use Supabase when:** * You want Postgres as the core database. * You need auth, storage, and generated APIs in one platform. * You care about long-term data ownership and portability. * Your app has relational data or reporting needs. **Watch out for:** * Row Level Security and permissions require careful design. * Poor schema decisions early can make app logic harder later. * Usage-based pricing can change with scale, so check the current [Supabase pricing](https://supabase.com/pricing). ## 2. Xano **Best for non-developers and product teams that need a scalable backend, visual API builder, database, auth, and business logic without hand-writing server code.** [Xano](https://www.xano.com/) remains one of the most popular low-code backend choices for Draftbit apps. It gives you a hosted database, REST APIs, auth, file storage, background tasks, and a visual function stack for backend logic. That makes it a strong choice when you want to move quickly but still need server-side workflows that are more advanced than a simple spreadsheet or CMS. Xano is especially useful for apps with custom workflows: bookings, user-generated content, marketplaces, onboarding flows, subscriptions, internal approval processes, and multi-step business rules. Draftbit can consume Xano APIs like any other REST service, and Expert Services can help shape the data model and API contract if the app is complex. **Use Xano when:** * You want a visual backend builder with real API control. * Your app needs custom backend workflows but you do not want to manage servers. * You want Draftbit for the frontend and a purpose-built no-code backend for logic. * You need a backend that non-developers can inspect and operate. **Watch out for:** * Visual backend logic still needs software architecture discipline. * Complex data models can become hard to reason about if naming and structure drift. * Review current limits and pricing on [Xano’s pricing page](https://www.xano.com/pricing). ## 3. Firebase and Cloud Firestore **Best for teams that want a Google-backed app platform with auth, NoSQL data, push messaging, analytics, remote config, and app operations tooling.** [Firebase](https://firebase.google.com/) is more than a database. It includes Firebase Authentication, Cloud Firestore, Realtime Database, Cloud Storage, Cloud Messaging, Analytics, Crashlytics, Remote Config, App Check, Cloud Functions, and more. For teams that already rely on Google Cloud or want a broad mobile app platform, Firebase is still a serious option. Cloud Firestore is a NoSQL document database. It can be excellent for fast-moving app experiences, realtime data, user-specific data, chat-like interfaces, and flexible document structures. Firebase also pairs well with app operations features like push notifications and crash reporting. The main tradeoff is data modeling. Firestore is not Postgres. You need to design for document reads, security rules, indexes, and query constraints. It can scale very well, but the structure of your data has to match the access patterns of your app. **Use Firebase when:** * You want auth, analytics, messaging, app monitoring, and data in one ecosystem. * Your data naturally fits documents and collections. * Realtime updates or mobile operations tooling matter. * Your team is comfortable with Google Cloud. **Watch out for:** * Firestore data modeling is different from SQL. * Security rules need careful review. * Usage-based costs depend on reads, writes, storage, and other services, so review current [Firebase pricing](https://firebase.google.com/pricing). ## 4. Airtable **Best for prototypes, internal apps, admin workflows, content operations, and teams that want a familiar spreadsheet-like database with an API.** [Airtable](https://airtable.com/) has evolved from “spreadsheet plus API” into a broader work platform with databases, interfaces, automations, integrations, and AI features. It is still one of the fastest ways to get structured operational data into an app. Airtable is a good fit when your app depends on content, inventory, locations, events, internal records, or data that business teams already manage. It is also useful when the people maintaining the data are not developers. For production consumer apps, treat Airtable carefully. It is not always the right system of record for high-volume transactional behavior. But for prototypes, dashboards, lightweight directories, admin-managed content, and internal workflows, it can be the pragmatic choice. **Use Airtable when:** * Your data is operational and spreadsheet-friendly. * Non-technical team members need to maintain records. * You want fast prototyping with a generated API. * The app is internal, content-driven, or low transaction volume. **Watch out for:** * API limits, record limits, and seat-based pricing matter. * It may not be the right primary database for complex transactional apps. * Review the current [Airtable pricing](https://airtable.com/pricing) before committing. ## 5. Backendless **Best for builders who want a visual backend platform with database, users, files, messaging, server-side logic, and hosting options.** [Backendless](https://backendless.com/) is a mature visual backend platform. It includes data storage, user management, roles and permissions, file storage, APIs, messaging, geolocation, cloud code, and visual logic tools. Backendless can be useful when you want one backend platform to cover several app needs without stitching together many services. It is also approachable for teams that want visual configuration but still need backend features beyond a simple database. **Use Backendless when:** * You want a broad backend feature set in one visual platform. * You need users, roles, files, APIs, messaging, and server-side logic. * You prefer a managed backend over assembling separate services. **Watch out for:** * A broad platform can mean more concepts to learn. * Confirm the current limits and deployment model before building around it. * Check the current [Backendless pricing](https://backendless.com/pricing/). ## 6. Appwrite **Best for teams that want an open-source backend platform with auth, databases, storage, functions, messaging, and the option to self-host.** [Appwrite](https://appwrite.io/) is an open-source backend platform that covers common app infrastructure: authentication, databases, storage, serverless functions, messaging, and more. It can be used through Appwrite Cloud or self-hosted, which makes it attractive for teams that want more control over infrastructure. Appwrite is a good fit for teams that like developer-friendly tools but do not want to assemble auth, file storage, functions, and database services from scratch. It is less “no-code” than Airtable or Xano, but it is a strong low-code/developer platform. **Use Appwrite when:** * You want open-source backend infrastructure. * You care about self-hosting or infrastructure control. * Your team has some developer capacity. * You want auth, data, storage, and functions in one system. **Watch out for:** * It is more developer-oriented than pure no-code tools. * Self-hosting gives control but adds operational responsibility. * Review the current [Appwrite cloud pricing](https://appwrite.io/pricing). ## 7. Hasura **Best for teams that want a GraphQL API layer over databases and services.** [Hasura](https://hasura.io/) is a strong option when you want fast GraphQL APIs over existing data sources. It can help teams expose data through GraphQL, manage permissions, and connect multiple sources behind a consistent API layer. Hasura is not the same type of product as Airtable or Xano. It is better understood as an API and data access layer. If your team already has Postgres or other supported data sources and wants GraphQL for the app layer, Hasura can be a very productive choice. Draftbit supports GraphQL integrations, so Hasura can fit well when GraphQL is the right API contract for the app. **Use Hasura when:** * You want GraphQL as the primary API. * You already have a database or data model. * You need permissions and API access controls. * Your team has technical capacity to manage the data layer. **Watch out for:** * Hasura is most useful when the data model is already well designed. * GraphQL flexibility does not remove the need for backend architecture. * Review current [Hasura pricing](https://hasura.io/pricing/). ## 8. Contentful **Best for content-heavy apps that need editorial workflows, content models, localization, and API delivery.** [Contentful](https://www.contentful.com/) is a headless content platform. It is not a general-purpose app backend in the same way as Supabase, Xano, or Firebase. But for apps where content is the product - lessons, articles, catalogs, guides, media libraries, onboarding content, or localized pages - a headless CMS can be the right backend for a large part of the experience. Contentful gives editorial teams structured content models, roles, workflows, localization, media handling, and APIs. Draftbit can consume that content through APIs while leaving content operations in a system designed for editors. **Use Contentful when:** * Content is central to the app experience. * Editors need to manage content without app releases. * You need localization, roles, or structured editorial workflows. * Your backend needs are more content than transaction logic. **Watch out for:** * You may still need another backend for auth, payments, user data, or app-specific logic. * Content platform pricing can depend on users, spaces, entries, and usage. * Review current [Contentful pricing](https://www.contentful.com/pricing/). ## 9. Sanity **Best for teams that want a flexible, developer-friendly content backend with customizable editorial workflows.** [Sanity](https://www.sanity.io/) is another strong headless CMS option. It is especially useful when your content structure is complex or your editorial experience needs customization. Sanity’s content lake and schema-driven approach make it a good fit for apps with rich content, product catalogs, learning content, media, and personalized content experiences. Sanity is more developer-oriented than a spreadsheet backend, but it can be a strong long-term content foundation. In Draftbit, it can provide structured content while the app itself is designed visually and extended with code where needed. **Use Sanity when:** * You need a flexible content backend. * Your editorial workflows are custom. * Content structure matters as much as the app UI. * Developers can help define schema and integrations. **Watch out for:** * It is not a complete transactional app backend by itself. * Schema design matters. * Review current [Sanity pricing](https://www.sanity.io/pricing). ## 10. Strapi **Best for teams that want an open-source headless CMS with REST and GraphQL APIs.** [Strapi](https://strapi.io/) is an open-source headless CMS. It is useful when you want structured content, admin workflows, APIs, roles, and the ability to self-host or use a managed cloud option. Strapi can fit Draftbit projects where content and admin-managed records are important, but the team wants more control than a fully hosted CMS. It is also a reasonable choice when developers are comfortable managing a Node.js-based backend and want to customize it. **Use Strapi when:** * You want an open-source CMS. * You want REST and GraphQL API options. * Your team can manage hosting or wants Strapi Cloud. * Content and admin-managed records are a major part of the app. **Watch out for:** * Self-hosting means you own updates, hosting, backups, and security. * It may need another service for realtime features or mobile-specific operations. * Review current [Strapi pricing](https://strapi.io/pricing). ## 11. Back4App **Best for teams that want managed Parse-compatible backend hosting with database, APIs, auth, files, and push notifications.** [Back4App](https://www.back4app.com/) is a backend platform built around Parse and related backend services. It supports database features, APIs, authentication, file storage, cloud functions, and push notifications. It can be a good fit for teams that like the Parse model or have an existing Parse-compatible app. Back4App is more developer-oriented than pure no-code tools, but it can still reduce backend setup compared with building everything directly on cloud infrastructure. **Use Back4App when:** * You want Parse-compatible backend infrastructure. * You need auth, data, files, APIs, and push notifications. * You have existing Parse knowledge or migration needs. * You want managed hosting rather than running Parse yourself. **Watch out for:** * Parse is a specific ecosystem; make sure your team is comfortable with it. * Check plan limits before using it for a high-volume app. * Review current [Back4App pricing](https://www.back4app.com/pricing). ## How Draftbit fits into the backend decision Draftbit does not force you into a single backend. That is the point. You can connect the backend that fits your product, then build and ship the frontend in a visual, AI-assisted workflow with full code access. Draftbit is a strong fit when you want to: * Build cross-platform apps for web, iOS, and Android. * Use AI agents to accelerate app creation and iteration. * Design screens visually without giving up source code access. * Connect REST, GraphQL, and MCP-powered services. * Preview, test, and publish from one workspace. * Bring in experts when backend architecture, integrations, or launch steps get complicated. For many teams, the best workflow is: 1. Start with a template or AI-assisted first draft in Draftbit. 2. Choose a backend based on the data model and auth requirements. 3. Connect APIs and build the real workflows. 4. Use visual editing for product iteration. 5. Use code and Expert Services when the app needs deeper customization. ## A practical backend selection framework If you are still deciding, use this short framework: * Choose **Supabase** when you want Postgres, ownership, and a production-ready backend foundation. * Choose **Xano** when you want a visual backend with custom API logic and less code. * Choose **Firebase** when you want a broad Google-backed mobile app platform. * Choose **Airtable** when business teams need to manage lightweight operational data. * Choose **Backendless** when you want a broad visual backend suite. * Choose **Appwrite** when open-source infrastructure and self-hosting matter. * Choose **Hasura** when GraphQL over existing data is the main requirement. * Choose **Contentful, Sanity, or Strapi** when content management is central. * Choose **Back4App** when Parse compatibility or managed Parse hosting is important. ## FAQ ### Can I use Draftbit with any backend? Draftbit is designed to be backend agnostic. If your backend exposes REST APIs, GraphQL APIs, or services that can fit into an MCP-powered workflow, it can usually be connected to a Draftbit app. ### What is the easiest backend for a non-technical founder? For lightweight data, Airtable is often the fastest to understand. For a real app backend with custom logic, Xano is usually a stronger long-term no-code choice. For content-heavy apps, a headless CMS may be simpler than a general-purpose backend. ### What is the best backend for a scalable mobile app? Supabase, Firebase, Xano, Appwrite, Hasura, and custom cloud backends can all scale when designed well. The deciding factor is less about the brand and more about data modeling, permissions, API design, and operational discipline. ### Should I use a backend template or ask an expert? Use a template when your app follows a common pattern and you want to move quickly. Bring in an expert when your app has complex permissions, payment flows, regulated data, migrations, performance constraints, or custom integrations. Draftbit Expert Services can help with both new builds and existing apps that need to be upgraded or unstuck. ## Conclusion The no-code and low-code backend market has matured. In 2021, the main question was whether visual and managed backends were viable at all. Today, the better question is which backend gives your app the right balance of speed, control, scalability, and maintainability. Draftbit gives you room to make that choice. You can build the app visually, use AI to move faster, connect the backend that fits your product, export or edit code when needed, and work with experts when the backend or launch path gets more complex. --- # 5 Funding Options Mobile App Startups Should Consider > In this blog post, we will explore five funding options that mobile app startups should consider to secure the necessary capital for their journey. ### In this blog post, we will explore five funding options that mobile app startups should consider to secure the necessary capital for their journey. Dave Sebekon June 22, 2023 App FoundersSmall BusinessStartups  Starting a mobile app startup is an exciting venture, filled with opportunities for innovation and success. However, like any business endeavor, it requires adequate funding to bring your ideas to life and navigate the challenges along the way. While bootstrapping might be an option for some, many mobile app startups need external funding to fuel their growth and development. In this blog post, we will explore five funding options that mobile app startups should consider to secure the necessary capital for their journey. ## Angel Investors Angel investors are individuals who provide early-stage funding to startups in exchange for equity or convertible debt. These investors are often experienced entrepreneurs or business professionals who not only provide financial support but also offer valuable guidance and industry connections. When seeking angel investment, it’s crucial to create a compelling pitch deck and demonstrate the potential of your mobile app through a well-defined business plan. Platforms like AngelList can help connect startups with potential angel investors, while networking events and startup accelerators can be excellent avenues to meet these investors face-to-face. ## Venture Capital Venture capital (VC) firms are investment companies that provide funding to startups in exchange for equity. They typically focus on high-growth industries, such as technology, and invest in companies with significant growth potential. VC firms have access to substantial capital and can provide startups not only with financial resources but also with expertise, mentorship, and industry connections. However, securing VC funding can be highly competitive, and startups need to demonstrate scalability, market traction, and a strong team to attract their attention. Platforms like Crunchbase can be helpful in identifying potential VC firms that specialize in mobile app startups. ## Crowdfunding Crowdfunding platforms have gained popularity as an alternative funding source for startups. By presenting your mobile app idea to a wide audience, you can receive small contributions from individual backers who believe in your vision. Platforms like Kickstarter, Indiegogo, and GoFundMe allow entrepreneurs to showcase their projects and offer rewards or early access to the app in exchange for financial support. Crowdfunding not only provides capital but also serves as a marketing tool, creating buzz and generating early adopters for your mobile app. To succeed in crowdfunding, you must have a compelling story, a well-designed campaign, and a strong marketing strategy to attract backers. ## Government Grants and Programs Many governments and economic development agencies offer grants, loans, and programs specifically tailored for startups, including those in the mobile app industry. These initiatives aim to foster innovation, create jobs, and stimulate the economy. Research government programs at the local, regional, and national levels that support technology startups, as they may provide financial assistance, mentorship, and other resources. Additionally, explore grants offered by nonprofit organizations or foundations focused on entrepreneurship and technological advancements. These funding options can provide a significant boost to your mobile app startup while reducing financial risk. ## Bootstrapping and Revenue Generation While seeking external funding is often necessary, it’s worth considering bootstrapping and generating revenue from the early stages of your mobile app startup. Bootstrapping involves self-funding your business using personal savings, credit cards, or revenue generated from a side job or freelance work. This approach allows you to maintain control and ownership of your startup while demonstrating proof of concept to potential investors. Additionally, focus on generating revenue through various monetization strategies, such as in-app purchases, subscription models, or advertising partnerships. A solid revenue stream not only sustains your business but also makes it more attractive to investors who see a potential return on their investment. ‍\ Securing funding is a critical step in the journey of a mobile app startup. Exploring a combination of funding options, such as angel investors, venture capital, crowdfunding, government grants, and bootstrapping, can help \---- Looking to build a mobile app for your next startup? With Draftbit’s powerful visual mobile app builder, technical and non-technical founders, designers, and developers can build and publish their mobile apps in less time and for less money. [Sign up to get started](https://draftbit.com). We also offer expert services that range from writing some custom code to building your app from the ground up. [Get in touch to discuss your idea!](https://draftbit.com/experts) ‍ ‍ --- # 9 Reasons Small Business Owners Should Be Thinking About Low-Code/No-Code > Learn how low-code/no-code platforms are helping small businesses build and automate faster, easier and cheaper. ### Learn how low-code/no-code platforms are helping small businesses build and automate faster, easier and cheaper. Nick Selmanon November 1, 2021 Low CodeNo CodeSmall Business   It’s practically impossible to run a business today without technology. No matter the size and type of enterprise, there’s a universal need for simple, functional software that streamlines processes and improves daily operations, while also attracting users and serving customers. But small businesses, in particular, have unique needs and challenges related to technology, as well as new opportunities. Traditional software development is a costly and time-consuming endeavor that often requires experienced, expensive specialists that aren’t always available or affordable internally. For many new and small businesses, this can seem like a daunting problem. At the same time, though, an intelligent solution has never been closer – right in front of you and at your fingertips: low-code/no-code development. Whether you’re building a mobile app or opening a flower shop, you can use a low-code/no-code platform to launch and scale your business, doing everything from website design, project management and accounting to marketing, customer engagement and creating APIs. If you’re in the startup phase, low-code/no-code (LCNC) is especially appealing because it is versatile, customizable and open source, so you won’t feel trapped by your architecture or have to start over when you change programs. You can just keep going and growing. In this article, we’ll share insights informed by our experience working with small business owners and startup founders who used [Draftbit’s low-code/no-code platform](https://draftbit.com/features) to save hundreds of engineering hours and reduce their time to value.  ## What is low-code/no-code technology?  In software development, LCNC is an approach that requires little to no coding to create applications and processes. [These development platforms](https://searchsoftwarequality.techtarget.com/definition/low-code-no-code-development-platform) use visual interfaces with straightforward logic and drag-and-drop features, rather than complex coding languages. They offer intuitive tools that enable users without extensive programming knowledge to build web applications, including mobile apps.  Low-code/no-code platforms are becoming more and more popular as a simpler, speedier option than traditional software development. Professional and nonprofessional “citizen” developers alike are able to use LCNC to build apps that accelerate digital transformation, automate key processes, meet business development demands and much more. Increasingly, low-code/no-code solutions are being considered as advantageous for small businesses because they are cost-effective, mitigate the IT skills gap, expedite application development, require minimal training, can be deployed cross-platform (mobile, web, desktop, cloud) and are highly scalable.  ## Benefits of low-code/no-code LCNC platforms are a phenomenal way for small businesses to build and deploy effective, easy-to-use applications with little to no coding experience. Any company can use low-code/no-code to create custom-made apps to help automate workflow-based internal tasks or provide tailor-made solutions to their customers. Low-code and no-code platforms can lower costs and build complexity for software development, allowing for an accelerated time to market. Successful platforms offer user-friendly visual interfaces. Prebuilt, reusable components and connectors empower non-technical business professionals and power users to quickly develop apps and easily integrate them with existing systems. Small businesses no longer need to engage in lengthy projects that would have been required using traditional consultant routes. Because LCNC utilizes reusable code and is expandable, it’s easy to rapidly deploy apps while still allowing for adjustments to meet the changing business environment. Small companies know right away how their business models vary and when their customers desire more. ## How low-code/no-code makes small businesses more competitive These days, customers expect that companies of all sizes will deliver high-quality digital applications and experiences. This means startup founders and IT leaders [face intense pressure](https://www.gartner.com/en/newsroom/press-releases/2021-02-15-gartner-forecasts-worldwide-low-code-development-technologies-market-to-grow-23-percent-in-2021) to produce applications quickly and improve time to value. But traditional coding processes are time and money intensive, requiring well-trained teams of developers that are too expensive for most small businesses. Still, reaching customers online is critical for the success of SMBs, [80% of which will fold](https://www.bls.gov/bdm/us_age_naics_00_table7.txt) within 10 years of launching. To ease the mounting pressures, some small business owners are taking advantage of the [explosion in low-code development](https://www.gartner.com/en/newsroom/press-releases/2021-02-15-gartner-forecasts-worldwide-low-code-development-technologies-market-to-grow-23-percent-in-2021). Low-code/no-code platforms are making it possible for non-IT individuals, a.k.a. “citizen” developers, to create applications quickly on their own and at a fraction of the cost. These technologies are dramatically changing the IT landscape and giving small businesses the lifesaving tools they need to stay relevant. ## 9 reasons small business owners should be thinking about LCNC Brand loyalty is the key to new customers, happy customers, and repeat business. In fact, 98% of U.S. consumers [surveyed by Microsoft](http://info.microsoft.com/rs/157-GQE-382/images/EN-CNTNT-Report-DynService-2017-global-state-customer-service-en-au.pdf) view customer service as a crucial factor in deciding which brands deserve their business. And, [according to Forbes](https://www.forbes.com/sites/blakemorgan/2019/09/24/50-stats-that-prove-the-value-of-customer-experience/?sh=7ed078164ef2), roughly 75% of companies with above-average customer service perform better than their competitors financially. Small businesses know their customer needs and desires better than anyone else. By taking the initiative to develop their own applications, they’re enhancing customer experiences and delivering quality service like never before.  Here are nine reasons small business owners should be thinking about low-code/no-code right now: ### 1. Record Ease in Time to Value For small companies, the cost of traditional web and app development can be prohibitively expensive. But LCNC allows users the opportunity to develop apps on their own without the need to hire high-priced programmers. These tools are also incredible time savers. In a recent [worldwide survey](https://www.statista.com/statistics/1254662/low-code-development-speed-compared-traditional-it/#:~:text=In%202021%2C%2029%20percent%20of,users%20to%20develop%20applications%20themselves.), 29% of global respondents reported that low-code development was 40-60% faster than traditional development. ### 2. Improved Marketing Efforts Cost-effective growth strategies are a major challenge for small businesses. Competition is high, especially if your brand awareness is low. But data suggests that consumer engagement trends are shifting.  One [recent report](https://econsultancy.com/85-of-consumers-favour-apps-over-mobile-websites/) indicated 85% of users now favor apps over mobile sites because they’re more convenient, faster and easier to browse. Catering to these changing preferences, mobile app development makes it easier for small businesses to target and engage consumers.  ### 3. Tailored Customer Experience Because apps allow for personalized experiences, they give people the customized content and communication they crave. Mobile apps offer customers the ability to set preferences and receive recommendations that can improve their experience and help boost the chance of conversions. In addition, you can target consumers with tailored notifications, a simple and easy way to keep them up-to-date with product offerings and deals. ### 4. Meet Consumer Demand Customers are better connected and more informed than ever before. And, accordingly, their expectations have never been higher. Fast and smooth mobile experiences are prerequisites for the modern consumer’s digital experience. Small businesses can no longer just offer a website and customer service contact. They need to build easy-to-use and intuitive apps responsive on all devices. Low code/no-code platforms are the solution for both technical and non-technical teams to deliver for their customers. [Draftbit can help you](/request-demo/) digitize your business.  ### 5. Opportunities for Feedback Mobile apps enable small businesses to keep in touch with the feelings and opinions of users by offering opportunities to share critical feedback. Not only does this help your business get better, but it also might encourage other potential customers to try you.  Some low-code/no-code platforms are collaborative, customizable and connected, offering the ability to publish multiple versions, share externally and run user tests, with access to software experts and a vibrant community. On [a platform like that](https://draftbit.com/why), your team members can work together, acquire valuable feedback and [grow your user base](https://draftbit.com/blog/how-to-get-your-first-1000-mobile-app-users).  ### 6. Loyalty and Retention [Research shows](https://www.forbes.com/sites/blakemorgan/2019/09/24/50-stats-that-prove-the-value-of-customer-experience/?sh=1bd860cd4ef2) that 89% of companies view customer experience as the number one factor in driving loyalty. With so many different options for customer service and engagement, the goal is to work smarter, not harder. Of course, saving money is important, too. Thanks to advancements in LCNC development, apps are not only the most in-demand way that customers want to access your products and services. They also are becoming the most affordable, efficient way of reaching customers. ### 7. Easy Integration with Other Apps and Systems Low-code/no-code platforms typically are built to offer a wide range of integrations to leverage existing systems. Many platforms are ready-made to interact with existing services, and they allow you to use your own business processes instead of migrating everything to a new platform.  For example, if you built an app with a scheduling component, it could easily be tied to Microsoft Outlook or Google calendars. With Draftbit, you can [add custom integrations](https://draftbit.com/features) that connect your app directly to supported third-party platforms, helping you maintain greater control over your applications and avoid bringing in costly developers or professional services to make updates. ### 8. Independent Innovation  Businesses don’t need to hire developers or contract vendors to create apps. With LCNC solutions, you avoid expensive planning and ramp-up stages by giving teams close to the business the ability to be hands-on and actively involved.  Effective low-code/no-code platforms will have a wide range of prebuilt templates purpose-built, ready for you to expand on and deploy in a short time. Flexibility and adaptability make solving once expensive problems cheaper and more streamlined, helping small businesses innovate in a way that would not have been possible before. ### 9. More Engaged Employees Department managers are now able to use their own people to bring ideas and innovation to market. LCNC solutions mean small businesses don’t have to try and find talented developers or wait until employees acquire new skills to enjoy the benefits. Your team can understand app-based project needs and requirements better than any outside consultant. Why not give them the basic tools and training they need to deploy apps? Empowering your employees to do their jobs better and independently will boost creativity, cultivate buy-in and improve the overall product. ## The low-code/no-code solution for mobile app builders Small businesses today are facing a marketing and IT dilemma. It’s now [60% more expensive](https://blog.hubspot.com/marketing/small-business-challenges) for businesses to acquire new customers than it was five years ago, making retention more essential than ever before. And mobile traffic accounts for at least [half the total web traffic worldwide](https://www.statista.com/statistics/277125/share-of-website-traffic-coming-from-mobile-devices/). Indeed, consumers increasingly prefer using mobile apps to access products and services. Unlike larger, more established companies, most small businesses don’t have the time or resources for sophisticated digital advertising or expensive app development. But by harnessing advancements and embracing opportunities in LCNC development, small businesses can address these challenges with ease. Mobile application development is just one of many reasons small business owners should be thinking about low-code/no-code, but it’s becoming an ever more important one. And [Draftbit](https://draftbit.com/about) is just one of many great low-code/no-code platforms out there, but we’re the one to help you build your mobile app visually – the app maker for small businesses.  That’s because Draftbit offers citizen developers the most user-friendly experience with an ecosystem of tools and support designed for all skill levels. Our platform enables users to create Android or IOS apps online without coding by using powerful software like React and [React Native](https://draftbit.com/blog/react-native-vs-flutter-which-one-is-better). Draftbit’s LCNC applications are built with real code at the core, meaning it’s designed to grow with your business. As your business expands, so do the coding demands for your app. When complexity expands to the point that you must hire trained coders, there’s no need to start from scratch, as is often the case on other platforms. Learn more about [why building with Draftbit](https://draftbit.com/why) can help your small business, [connect with our Community](https://community.draftbit.com/home) or [request a free demo](/request-demo/) today. --- # A Beginner's Comparison of React Native and Flutter: Why You Should Choose React Native > When it comes to building mobile apps that work seamlessly on both iOS and Android, the choices often boil down to two popular frameworks: React Native and… ### When it comes to building mobile apps that work seamlessly on both iOS and Android, the choices often boil down to two popular frameworks: React Native and Flutter. Both have their strengths, but today, we're going to dive into what sets them apart Dave Sebekon May 17, 2024 Dev ToolsReact NativeNo CodeProgramming  When it comes to building mobile apps that work seamlessly on both iOS and Android, the choices often boil down to two popular frameworks: React Native and Flutter. Both have their strengths, but today, we’ll explore what sets them apart, with a special focus on why React Native might be the perfect choice for you—especially if you’re a new developer or a no-code enthusiast. ## Understanding React Native and Flutter **React Native** is a framework developed by Facebook that allows you to build mobile apps using JavaScript and React. Since its launch in 2015, it has gained a robust community and a wealth of resources. React Native apps are written in JavaScript and leverage native components, giving them a native look and feel. This framework is particularly appealing to web developers familiar with React, as it allows for a smoother transition into mobile development. **Flutter**, created by Google, is a newer framework that uses the Dart programming language and focuses on providing a rich, customizable UI with a unique widget system. Since its release in 2017, Flutter has been gaining traction and allows developers to create visually attractive apps with a high degree of flexibility, thanks to its comprehensive set of pre-designed widgets and tools. ## Key Differences ### Language and Learning Curve React Native uses JavaScript, a widely used programming language. This makes it relatively easy for web developers to transition into mobile app development. If you have experience with React for web development, you will find many concepts and patterns transferable to React Native, which can significantly reduce the learning curve. Additionally, extensive tutorials, courses, and documentation make learning React Native accessible for beginners. Flutter requires learning Dart, a language not as widely used as JavaScript. While Dart is not overly complex, it’s an additional hurdle for new developers who might already be familiar with JavaScript. Flutter’s approach to UI design with widgets differs from the traditional HTML/CSS approach in web development, which can be initially confusing and requires some adjustment. Although the pool of learning resources for Dart and Flutter is growing, it is still smaller compared to JavaScript and React Native, making the initial learning phase more challenging. ### Development Experience React Native offers a smooth development experience, especially for those familiar with React. The “hot reload” feature in React Native allows you to see changes in real-time without recompiling the entire app, speeding up the development process and making it easier to iterate quickly. React Native uses actual native components under the hood, ensuring that your app looks and feels like a true native app on both iOS and Android. There is also a vast ecosystem of tools and libraries available for React Native, helping you add functionality and optimize your development workflow. Flutter also boasts a “hot reload” feature, but its widget-based UI can be a bit overwhelming for beginners. The learning curve might be steeper due to the need to understand the extensive widget catalog and Dart. Flutter’s widget system allows for a high degree of customizability, but it also means that you have to learn a new way of thinking about UI design. However, Flutter has excellent support in popular IDEs like Android Studio and Visual Studio Code, which can enhance the development experience. ### Performance React Native’s performance is generally very good, but because it uses a bridge to communicate between JavaScript and native code, there can be some overhead. However, for most applications, this is negligible. The React Native community has developed numerous techniques and libraries to optimize performance, and Facebook’s ongoing development ensures continuous improvements. Many high-performance apps, including those from Facebook, Instagram, and Airbnb, have been built with React Native, proving its capabilities in demanding environments. Flutter can have better performance as it compiles directly to native ARM code. This can make Flutter apps feel snappier, but the difference is often marginal at best for typical use cases. Flutter’s Skia rendering engine ensures smooth animations and high-performance graphics, making it particularly well-suited for apps that require complex UI and animations. However, it’s now possible to use Skia in React Native apps as well. ### Community and Ecosystem React Native has been on the market for several years, resulting in a larger community and a wealth of third-party libraries and tools. This makes finding solutions to problems and getting support easier. There is a vast amount of documentation, tutorials, and forums available, which can be incredibly helpful for beginners. Many major companies, including Walmart, Facebook, Instagram, and Airbnb, have used React Native, which lends support to its reliability and performance in production environments. Flutter’s community is growing rapidly but is still smaller compared to React Native. However, Google’s strong backing ensures continuous improvement and a bright future. Flutter’s ecosystem is expanding with new and innovative libraries and tools that are being developed regularly, driven by the community’s enthusiasm. Google’s support and the presence of detailed documentation and official channels for help make it easy for new developers to get started and find solutions. ## Why Choose React Native? For new developers and no-code enthusiasts, React Native stands out for several reasons: ### Familiar Language JavaScript is one of the most popular and widely-used programming languages globally. Many developers already have some familiarity with it, making the transition to React Native smoother. If you have experience with web development, especially with React, you’ll find React Native’s structure and syntax very familiar. This reduces the learning curve significantly and allows you to leverage your existing skills. ### Vibrant Community A larger community means more tutorials, plugins, and support. You can easily find answers to your questions on forums, GitHub, Stack Overflow, and various other platforms. The extensive array of open-source libraries and pre-built components can save you a lot of time during development. There’s a high chance that someone has already built a solution to the problem you’re facing. A vibrant community also ensures that the framework is constantly being improved and updated, incorporating the latest trends and technologies in app development. ### Cross-Platform Compatibility With React Native, you can build apps that look and feel native on both iOS and Android without needing to write separate codebases. This can significantly cut down development time and costs. By leveraging native components, React Native ensures that your apps have a high performance and a true native look and feel, enhancing the user experience on both platforms. When necessary, React Native allows you to write platform-specific code, giving you the flexibility to optimize the app for each operating system. ### Mature Ecosystem React Native provides access to a wide range of tools and libraries to simplify and speed up your development process. Whether you need state management, navigation, or animation libraries, React Native’s ecosystem has you covered. It integrates well with other popular tools and services, including Redux for state management, React Navigation for routing, and various backend services. Many successful apps in the market have been built using React Native, which speaks to its reliability and effectiveness as a development framework. ## The Best React Native-Based App Builder For those who want to leverage the power of React Native but prefer a no-code or low-code approach, **Draftbit** is an excellent solution. Draftbit empowers you to design and build mobile apps visually, without writing a single line of code—though you can dive into the code whenever you want. ### Why Draftbit? Draftbit offers a user-friendly interface that makes it easy for beginners to start building apps right away. You can take advantage of over 150+ pre-built components, customize properties, and see your changes in real-time. It’s ideal for no-code enthusiasts who want to create functional apps without writing code. However, it also provides the flexibility for experienced developers to add custom code if needed. Experienced developers can also benefit from Draftbit’s visual builder and then fine-tune the code to add more complex functionalities. This dual approach caters to both beginners and seasoned developers. You can create and reuse custom components, making your development process more efficient and your app more maintainable. Take advantage of React Native’s robust ecosystem and performance. By using Draftbit, you’re building on top of a proven framework that ensures your app will be performant and reliable. One of the standout features of Draftbit is that you can export your app’s code at any time. This means you’re not locked into the platform and can take your project to any React Native environment. Whether you’re just starting or are an experienced developer looking for a faster way to build cross-platform apps, Draftbit’s powerful and user-friendly platform is a game-changer. Start building your React Native app right away with a free all-access trial of Draftbit for 14 days! \--------- Choosing the right framework for cross-platform development can significantly impact your productivity and app performance. While both React Native and Flutter have their merits, React Native’s ease of use, familiar language, and extensive community support make it a fantastic choice, particularly for new developers and those interested in no-code solutions. And with tools like Draftbit, creating beautiful, functional mobile apps has never been easier. Happy building, and welcome to the exciting world of app development with React Native! ‍ --- # A Practical Playbook for Building Mobile Apps with Low-Code and AI > Use this low-code mobile app development playbook to scope smarter, build faster with AI, connect real data, test on devices, preserve source code access, and… ### Use this low-code mobile app development playbook to scope smarter, build faster with AI, connect real data, test on devices, preserve source code access, and launch with expert support. Dave Sebekon December 9, 2022 Mobile App DevelopmentLow CodeSmall Business  Low-code and AI can make mobile app development much faster, but speed alone does not make an app successful. The teams that get the best results use low-code as a structured build workflow: define the right scope, start from working patterns, connect real data early, test on real devices, add custom code only where it matters, and bring in expert help for the risky pieces. Draftbit is designed for that workflow. You can build with [AI agents and a visual editor](/platform/), start from templates, connect REST and GraphQL APIs, add MCP tools for agents, preview live, publish, and keep access to real React Native and Expo source code. Use this playbook when you want to move fast without creating a fragile prototype or a locked-in app. ## 1. Define the smallest useful launch The most common low-code mistake is trying to build the whole product at once. Start with the smallest workflow that proves the app should exist. Define: * Who the first users are. * What job the app helps them complete. * Which screens are required for that job. * What data the app needs. * What must be real at launch. * What can wait until after feedback. A smaller first version is not less ambitious. It is a faster way to learn what the app should become. ## 2. Start from a template or AI-assisted first draft Starting from a blank screen is rarely the fastest path. Most mobile apps share familiar patterns: onboarding, authentication, lists, detail screens, forms, profiles, dashboards, bookings, content feeds, and settings. Use [Draftbit mobile app templates](/mobile-app-templates/) or AI-assisted generation to create a first draft, then customize the structure to fit your app. The goal is not to accept the first version unchanged. The goal is to get to a working surface quickly so you can make better product decisions. ## 3. Build real flows, not isolated screens Screens are easy to polish in isolation. Apps succeed when the whole flow works. As you build, test the path a user will actually take: * How they sign in. * How they find the right content or task. * How they create, update, or submit something. * How errors and empty states appear. * How they know the action succeeded. * How they return later and continue. Draftbit’s visual editor and live preview help you work on the app as an experience rather than a collection of static mockups. ## 4. Connect realistic data early An app can look finished while still hiding the hardest product questions. Real or realistic data exposes those questions early. Connect your app to the systems it will actually use: * Backend databases. * Authentication providers. * CMS tools. * Payment or subscription services. * Search, maps, analytics, or notifications. * Internal APIs. * AI tools or business systems exposed through MCP. Draftbit supports [REST integrations](/integrations/), [GraphQL integrations](/graphql/), and [MCP servers](/mcp/), so the app can work with your existing stack instead of forcing a backend rewrite. ## 5. Use AI for iteration, then review the result AI is excellent for speeding up first drafts, structured edits, refactors, and repetitive implementation work. It is not a substitute for product judgment, QA, accessibility review, security review, or backend design. Use AI agents to: * Generate initial screens. * Rename and reorganize components. * Apply consistent styling. * Build common form and list patterns. * Refactor confusing logic. * Explore alternate flows. Then review the output like you would review any implementation. Check whether the app still matches the user workflow, the data model, the brand, and the launch requirements. ## 6. Keep custom code for high-value work Low-code works best when custom code is used intentionally. Do not hand-code every standard screen. Do not force the visual builder to solve a specialized problem it is not meant to solve. Use custom code for: * Unique interaction patterns. * Custom components. * Third-party packages. * Complex business logic. * Performance-sensitive areas. * Integration edge cases. * Behavior that creates real product differentiation. Draftbit gives teams a visual workflow while preserving code paths for the places where engineering depth matters. ## 7. Test on real devices before the app feels done Mobile behavior depends on device size, operating system, input patterns, network conditions, and user context. Test early on actual phones, not only in a desktop preview. Before launch, check: * Navigation across small and large screens. * Loading states. * Empty states. * Error states. * Keyboard behavior. * Authentication recovery. * Push notification or deep-link behavior if used. * App store metadata and screenshots. * Analytics events that matter for learning. Testing earlier keeps fixes smaller and cheaper. ## 8. Bring in experts at the right moments Expert help is most valuable when a mistake would be expensive later. Consider [Expert Services](/services/) for: * Scope and architecture review. * Backend setup. * REST or GraphQL integration work. * MCP and AI workflow setup. * Custom components. * Custom code and packages. * Migration from another app builder. * QA and performance review. * App store launch. You do not need to outsource the whole project to get value from experts. Often the best model is to build visually, then bring in specialists for the parts that carry the most risk. ## 9. Preserve ownership from the beginning Before you invest heavily in any low-code platform, understand the exit path. Ask: * Can I access or export the source code? * Can I connect my own backend? * Can I add custom code? * Can I use external APIs and packages? * Can a developer continue the project later? * Can I publish where my users need the app? Draftbit is built around real React Native and Expo source code, so teams can move quickly without treating the platform as a dead end. ## 10. Launch, learn, and iterate The first launch should answer questions: * Do users understand the app? * Which workflow creates value? * Where do users get stuck? * What features are actually needed next? * Which integrations or automations save the most time? Low-code is useful after launch because iteration is part of the workflow. Update screens, adjust flows, improve data states, add integrations, and refine the experience based on what users actually do. ## FAQ ### What is the best way to start a low-code mobile app? Start with a single user workflow, not a full feature list. Choose the smallest useful launch, start from a template or AI-assisted first draft, and connect realistic data as soon as possible. ### Should I use AI to build my whole app? Use AI to accelerate the work, but keep human review in the loop. AI can help generate and iterate, while humans should own product decisions, integration design, QA, accessibility, and launch readiness. ### When should I add custom code to a low-code app? Add custom code when it creates real product value or solves a requirement the visual builder should not handle alone. Common examples include custom components, third-party packages, advanced logic, and integration edge cases. ### How do I avoid low-code platform lock-in? Choose a platform that supports source code access, custom code, external APIs, and flexible publishing. Draftbit is designed around real React Native and Expo source code, which gives teams a stronger ownership path. ### When should I use Draftbit Expert Services? Use experts when the work carries execution risk: backend architecture, API connections, MCP setup, custom code, migration, QA, performance review, or app store launch. ## Conclusion Successful low-code mobile app development is not about skipping the hard parts. It is about sequencing the work so your team learns faster, avoids unnecessary custom implementation, and applies expert attention where it matters. Draftbit supports that full path: start from templates, build visually, use AI agents, connect real services, add custom code, keep source code access, publish across platforms, and bring in experts when the app needs deeper support. --- # Building an Instagram Clone from Scratch with No-Code, Part 1: Sign Up, Sign In, and Log Out > In this 3-part tutorial series, we provide step-by-step instructions for creating an Instagram clone from scratch using no-code tools Draftbit and Xano. In… ### In this 3-part tutorial series, we provide step-by-step instructions for creating an Instagram clone from scratch using no-code tools Draftbit and Xano. In Part 1, we will build user authentication (sign up, sign in, log out). Aman Mittalon November 17, 2021 Mobile App DevelopmentNo Code   ## About this tutorial series In this series of tutorials, we will create a full-stack Instagram clone app with Draftbit and Xano. At the end of this 3-part tutorial series, you will have built a fully-functional Instagram clone (we’ll call it Picbit) that allows your users to sign up, login, create posts to their profile, and like and comment on other peoples’ posts. This series is divided into three parts: 1. (You are here) Setting up Authentication: Sign Up, Sign In, and Log Out 2. [Uploading a photo and Creating a Feed screen](https://draftbit.com/blog/building-an-instagram-clone-from-scratch-with-no-code-part-2-create-browse-content) 3. [Adding Likes, Comments, and Follow a user](https://draftbit.com/blog/building-an-instagram-clone-from-scratch-with-no-code-part-3-interact-with-content) Draftbit is a visual programming app builder whose interface will build the mobile app with native code running in the background. The app itself is cross-platform and will run on both iOS and Android. We will also use Xano, which is a no-code scalable and secure backend. ## Part 1: Setting up Authentication In this tutorial, the first part, we will learn how to integrate Xano’s REST API interface with Draftbit to implement user authentication. The authenticated user will be able to log-in to the app, see the screens like Feed screen, Profile screen, etc. that are only viewable by the logged-in user and logout of the app. Here is a little demo of what we are building in this tutorial:  ‍ An example of creating a new user account on an iOS simulator using Draftbit. ‍ ## Prerequisites * A [Draftbit account](https://draftbit.com/) to build the cross-platform mobile app. * A [Xano account](https://app.xano.com/admin/login) to access and use their free and scalable photo-sharing API that is accessible via their [marketplace](https://demo.xano.com/xano-instagram-clone/). ## How to set up Xano’s photo-sharing app For this tutorial, we’ll be re-using an existing backend for our app. Xano provides a complete backend template that includes API endpoints and data tables to implement features like photo uploading, user profiles, follows, likes, comments, and post feed. To follow along, you can access this backend template from Xano’s marketplace (*it’s free*). Login to your Xano account. From the sidebar, click Marketplace > Featured.  Next, click on the “Install Template” button.  Then, in the popup, click “Install” to install the template.  You can now view the Database tables available in this template by navigating to the “Database” tab from the sidebar. Notice that there are different tables created such as comments, follows photos, user, etc. These database tables will contain the data stored from the Draftbit app. You can ignore the “My First Table” for this tutorial. That’s a default database table created by Xano when you set up a backend instance. It won’t be used in this tutorial.  Xano’s database tables are based on [relational model](https://en.wikipedia.org/wiki/Relational_model). Therefore, you can view the relationships between different tables. Check “Show Table Relationships” to view the relation of one data table to another.  For this post, the focus will be on the user table. Each new user account created in the Draftbit from a signup screen will be stored as a new user record in Xano.  Xano already comes with pre-filled data inside the user table so you can view how it looks (*as shown in the image above*). ## Introduction to User Authentication Authentication verifies a user’s identity to provide them access to your mobile application. Inside Draftbit, the process of adding authentication starts with the REST API service. If the [REST API service](https://docs.draftbit.com/docs/rest-services-endpoints) you are using supports user management like Xano, it uses [JSON Web Tokens](https://jwt.io/). The process of authenticating a user typically needs the following steps in a mobile app: * Sign Up: Provide a form for a user to enter credentials to create a new account. * Login: Provide a form for a user to enter credentials to authenticate their identity and login into the app. * Save the Authentication Token when a user’s credential verifies with the backend service. Authentication Token is received as a response from the REST API service. * Making authenticated API requests and allowing the app user to view their information on a profile screen. * Log Out: An action to reset authentication and return the client to an unauthenticated state. We will implement the functionality for each of the above in Draftbit. Xano will take care of storing the data. ## How to setup auth API Endpoints in Xano Xano automatically creates necessary API endpoints based on the structure of each database table. In Xano’s dashboard, from the sidebar, navigate to the API tab. You will find all the API groups listed here.  Click on the “photo-sharing” API group to view what endpoints the template has already created for us to use.  All the necessary API endpoints are set for this tutorial, so you don’t have to create endpoints from scratch. We will use the Auth API sub-group. It has the following endpoints:  Two of these endpoints, /auth/login and /auth/signup are used to retrieve authentication tokens and allow users to create their account and log in to the app. The token received from the endpoint will help us retrieve a user’s information from the database table. Hence, this token will allow the user to log in to the app. Almost all endpoints described in the photo-sharing API will require this auth token to send authenticated requests. *An authenticated request from a client to a server (in this case, from the Draftbit app to Xano backend) includes elements of authorization, access rights and checks the identity of the user.* ## How to set up a Draftbit app Once you are logged in to your Draftbit account, Create a new project from the Dashboard view.  Provide some details about your application.  As for the demo app, we will choose “Start with a blank app”. Allow the project to finish initializing, then click “Start Building”.  You are welcomed by an intuitive and standard-looking design with a “Design” mode. It’s the mode where you can layout the components on a screen and uses Flexbox to position each component based on the design of the screen.  Draftbit uses the same [Flexbox algorithm](https://community.draftbit.com/c/tutorials/the-complete-guide-to-layout-in-draftbit-using-react-native-flexbox) as React Native. The algorithm itself is designed to provide consistency among different screen sizes across various devices. ## How to set up a REST service in Draftbit to integrate API from Xano To connect Xano backend in the Draftbit app, a Base URL is required. The Base URL of the REST API is of the format: https\://.n7.xano.io/api: You can grab this URL from Xano’s API dashboard view.  Let’s create a REST service that is used throughout the application. In Draftbit builder, open the API & Cloud Services modal from the top panel. Click on Xano.  You will need to configure two necessary parts: give a name for the API service and add the Base URL copied from Xano.  ## How to setup auth endpoints in Draftbit Draftbit comes with a built-in REST API client to add and test endpoints from an API service. Once you have saved the service, you need to define endpoints to implement authentication. Each time you create a new endpoint, click the Add Endpoint button from your service interface.  The first endpoint to set up is /auth/signup. * In Step 1: enter a **Name** for the endpoint and select the **Method** to POST. Remove the default **Role** created and leave it and **Object Type** fields empty. We do not use them for creating endpoints that return just the auth token (as in this case). [Both of these fields are useful when fetching and caching it to re-fetch data on an app screen](https://docs.draftbit.com/docs/rest-services-endpoints#configuration-1). * In Step 2: enter the base name as path: /auth/signup. * In Step 3: define the structure of the Body object that will send the POST request. It’s a JSON object that requires a key and a value. The key should be associated with the name of the field in the Xano database table. Currently, we are defining four keys: handle, name, email, and password. These keys correspond to the input fields we will have on the sign-up screen. * In Step 5: click the button Test. On success, Xano backend service will return an encoded auth token.  Here is the Body Structure of the sign-up endpoint: ​​{    “handle”: {{signupHandle}},   “name”: {{signupName}},   “email”: {{signupEmail}},    “password”: {{signupPassword}}  } Let’s set up the second endpoint: /auth/login. * In Step 1: enter a name for the endpoint and select the Method to POST. Remove the default **Role** created and leave it and **Object Type** fields empty. We do not use them for creating endpoints that return just the auth token (as in this case). [Both of these fields are useful when fetching and caching it to re-fetch data on an app screen](https://docs.draftbit.com/docs/rest-services-endpoints#configuration-1). * In Step 2: enter the base name as path: /auth/login. * In Step 3: define the structure of the Body object that will send the POST request. It’s a JSON object that requires a key and a value. The key should be associated with the name of the field in the Xano database table. Currently, we are defining two keys: email and password. These keys correspond to the input fields we will have on the login screen. * In Step 5: click the button Test. On success, the Xano backend service will return an encoded auth token. Make sure to copy the value of the auth token in the last step. This is because we need it to test the next endpoint.  Here is the Body Structure of the login endpoint: ​​{    “email”: {{signupEmail}},    “password”: {{signupPassword}}  } The last endpoint that needs to be set in the Auth sub-group is /auth/me. This endpoint will get the user’s record belonging to the authentication token. That means an authentication token is required to be passed with a Bearer prefix. In Draftbit, this is done by setting up a Device Variable. A Device variable in Draftbit is available app-wide and is used to store auth tokens. They do not get reset to default values when an app stops running or restarts.  In the above image, we’re saving the value of AUTH\_TOKEN coming from the previous endpoint. This is because we need a real auth token to test and save the next endpoint in Draftbit. After you’ve successfully tested the endpoint, you will delete the value of AUTH\_TOKEN and leave it blank. Let’s set up the endpoint. * In Step 1: enter a name for the endpoint and select the Method to GET. * Set the **Role** to Get One and **Object Type** to authuser. [Both of these fields](https://docs.draftbit.com/docs/rest-services-endpoints#configuration-1) help Draftbit to cache endpoints data and optimize accordingly (when re-fetching data for the same endpoint). * In Step 2: enter the base name as path: /auth/me. * In Step 4: add the Authorization header and set its value to the Device Variable (which contains the auth token). * In Step 5: click the button Test. On success, the endpoint will provide the information of the user that this token is associated with from the User database table in Xano.  In the above snippet, the value of profile\_image is set to null because we are not uploading an image to Xano for a user’s profile in the signup process. ## How to set up a signup screen Now that the endpoints are set up let’s use them in the app screens. The Signup screen allows an app used to create a new account within the app. It is based on a Provider. The most common Provider is email/password. For brevity, we’ve created a signup screen, as shown below. It is a simple form screen with an app’s brand logo, title, multiple input fields, and a button with a solid background to make the API request.  Each input field is composed of a TextInput component. This component in Draftbit contains a Field Name property that contains the name of the value to take a user’s input. If a screen contains multiple input fields, for example, as seen in the signup screen above, the value for the Field Name property on each input field must be unique. You can set the value by selecting the TextInput component.  Next, navigate to the Properties panel on the right-hand side and select the Configs tab (second tab). For example, the handle input field has the following value set on its Field Name property:  For all input fields, here are the values set: * handle -> signupHandle * name -> signupName * email -> signupEmail * password -> signupPassword The next step is to bind the API endpoint created earlier to an API request action. Any [action in Draftbit](https://docs.draftbit.com/docs/assigning-actions) is done via a button or a touchable component. If you are familiar with React Native, this is similar to handling a custom function on a Button component using its onPress prop. The signup screen requires more than one action. Draftbit allows creating a stack of actions where you can define actions as they would happen. It means each action will happen in the order they are defined. Here are the following actions we define for the signup.  The response of one action is used in another action. This is the reason why the order of the actions is important. The first action sends the API Request to Xano, and on success it comes back with a JSON response. It also binds the input fields values that are sent as key-value pairs in the request’s body. You will have to define a unique result name, for example, signupResponse, to the response object coming from the API request.  From the JSON response object, a key and its value from the response body can be extracted. This is exactly what is being done in the second action. We need the value of .authToken coming from Xano, prefixed by the [dot notation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_accessors) from the JSON response.  In the next action, assign the authToken value and save it inside the global variable defined earlier. This will allow us to make authenticated requests.  The last action is to navigate to the main app screen, where a logged-in user can access the entire app.  For the demo app, we have a bottom navigator. Draftbit supports two types of navigators: Stack and Bottom Tabs. The user experience in the demo is when a user successfully creates a new account or logs in, and they are navigated to the bottom tabs. Draftbit allows options to structure your own navigation flow, configure each screen inside a navigator, set up an initial route for each navigator, configure icons and labels for each tab, etc. Here is how our bottom tab navigator looks like.  It has three screens so far: * Feed * Profile * Settings That’s it for setting up a signup screen and actions to make the API request to Xano. The login screen only contains two input fields and contains almost the same set of stacked actions when setting up the API request on the login button.  The only new action here is Conditional Stop which is used to stop the process of login if there is no authToken present in the JSON response of API request.  You can also use this action in the Signup process. Read more about Xano and Draftbit authentication process [here](https://docs.draftbit.com/docs/xano#authentication). ## How to build a profile screen In this section, we will build a simple profile screen that displays a user’s name and handle they entered at the time of signup. Right now, the Profile screen contains two Text components with different styling.  In Draftbit, you can use a Fetch component to bind an API request using the GET HTTP method and fetch the data from your API. For example, in the Profile screen, you will have to fetch the data (user’s name and handle) if the user is logged-in to the app. So, click on the “Fetch” component in the Components tree on the left side of the screen. On the right-hand side, navigate the Data tab in the Properties panel and configure the /auth/me endpoint.  It also shows a preview of the response from the GET request. First, select the Text component in the Components tree. Then, in the Data tab, define a variable, for example, {{name}} inside the double curly braces. Under Variables, from the dropdown, select name.  Similarly, you can define and map the value to display the handle that is coming from Xano to Draftbit’s Text component.  ## How to logout a user To allow a user to log out of the app, we’ve created a Settings screen (third tab) in the app.  The Logout button in the above screen is created using an Icon Button component from Draftbit. This component is similar to a generic Button component (that you’ve seen previously). Using the Set Global Variable action, this button sets the value of the auth token global variable as empty ("") to log the user out of the app. Also, after sending the API request, make sure to add a Navigate action to navigate back to the login screen.  ## Running the app So far, we have created all the basic screens required to implement authentication and display data in an authenticated API request. Next, let’s run the app by creating a new user account from the signup screen and then navigating to the profile screen to view the user’s information. Let’s do this in Draftbit’s Preview mode.  ## **Conclusion** This tutorial introduces you to how to implement authentication with a no-code tool like Draftbit and a backend using Xano. Tools like Draftbit enable both non-developers and developers to develop apps without the need of coding but using the same paradigms used in open source frameworks like React Native. In the next part of the series, we will dive deeper into how to implement functionalities like uploading a photo, building a feed screen, displaying photos on the feed screen, etc. [**In the next part**](https://draftbit.com/blog/building-an-instagram-clone-from-scratch-with-no-code-part-2-create-browse-content)**, we will show how to upload images from a device’s media library and use a camera on a physical device using No code actions in Draftbit to create an Instagram like post and display a user’s avatar.** If you want to dive deep with Draftbit: * [Complete Authentication guide](https://docs.draftbit.com/docs/authentication) * [Handle server errors and display them on form screens](https://docs.draftbit.com/docs/authentication#displaying-errors-on-screen) * [Build more with different REST API services available at Draftbit](https://docs.draftbit.com/docs/rest-api-integrations) * [Ask for Help in the Draftbit community](https://community.draftbit.com/c/help/) ‍ --- # Building an Instagram Clone from Scratch with No-Code, Part 2: Create & Browse Content > In this 3-part tutorial series, we provide step-by-step instructions for creating an Instagram clone from scratch using no-code tools Draftbit and Xano. In… ### In this 3-part tutorial series, we provide step-by-step instructions for creating an Instagram clone from scratch using no-code tools Draftbit and Xano. In Part 2, we will build content creation and browsing functionality (create new post, see posts). Aman Mittalon November 17, 2021 Mobile App DevelopmentNo Code   ## About this tutorial series In this series of tutorials, we will create a full-stack Instagram clone app with Draftbit and Xano. At the end of this 3-part tutorial series, you will have built a fully-functional Instagram clone (we’ll call it Picbit) that allows your users to sign up, login, create posts to their profile, and like and comment on other peoples’ posts. This series is divided into three parts: 1. [Setting up Authentication: Sign Up, Sign In, and Log Out](https://draftbit.com/blog/building-an-instagram-clone-from-scratch-with-no-code-part-1-sign-up-sign-in-and-log-out) 2. (You are here) Uploading a photo and Creating a Feed screen 3. [Adding Likes, Comments, and Follow a user](https://draftbit.com/blog/building-an-instagram-clone-from-scratch-with-no-code-part-3-interact-with-content) Draftbit is a visual programming app builder whose interface will build the mobile app with native code running in the background. The app itself is cross-platform and will run on both iOS and Android. We will also use Xano, which is a no-code scalable and secure backend. ## Part 2: Uploading a photo and creating a feed screen In this tutorial, let’s continue to build our Instagram clone. We will build features like uploading a user’s profile image using a device’s media library, uploading a photo and creating an Instagram like post with captions using both a device’s media library and camera and display those photos in a scrollable list. All the API endpoints from Xano’s photo-sharing backend template we will add to the Draftbit app will require a user to be authorized. Here is an example that shows how to upload a photo to Xano’s database and display it in a scrollable list built in Draftbit:  Here is another example of uploading a user’s profile image on an iOS simulator using Draftbit.  ‍ Let’s dive in. ## Prerequisites * A [Draftbit account](https://draftbit.com/) to build the cross-platform mobile app. * A [Xano account](https://app.xano.com/admin/login) to access and use their free and scalable photo-sharing API that is accessible via their [marketplace](https://demo.xano.com/xano-instagram-clone/). ## How to create a user’s profile image upload endpoint in Xano Xano as a backend offers different field types. One of these types is image. The first type of image upload from the Draftbit app is to upload a user’s profile image. Xano’s photo-sharing already provides this image field type in the user database table under the field name profile\_image.  You need to create an endpoint to upload an image from the Draftbit app. Currently, the Draftbit builder interface provides an action to directly upload a photo and chain it with the API request action to send the request to Xano’s backend. The image is sent in base64 format. Xano supports this format. To create the endpoint, go to Xano’s API group for the photo-sharing app and click Add API Endpoint button. Then select CRUD Database Operations, select the user table, and select the EDIT operation.     Next, enter the endpoint’s name to be user/profile/image/. This is the actual endpoint name you create, so make sure it is unique among all other endpoints in your Xano API group. Under Authentication, select user authentication and click save. This way, only the logged-in user can upload their profile image. Xano and Draftbit both will use the auth token generated when a user logs into the app.  Let’s edit this endpoint. The only input required for this endpoint is content. Click the + button next to Inputs, then select storage as the field type.  Under storage, select the type to be File Resource and enter the name of this type to be content. Then, click Save.   To edit the authenticated user’s record in the Xano database table, the content value has to be mapped to a variable name. This is done under Function Stacks.  Click the + button, select the Content Upload option and then select Create Image Metadata.   This will open another popup where you will assign the variable name. For example, the variable assigned below is called image, and its value selected from the dropdown is content.  Click save and make sure this function is the first in order to run.  Select the next function in the stack to modify it. Under Inputs, set the value field\_value to id from the dropdown. This id here represents the authenticated user’s id. Then, hide all the field types under user Metadata except profile\_image since you only need to modify the value of this field from the endpoint.  From the dropdown menu, select the input type to image as the value of profile\_image.  Also, in the same popup, go to the second tab called Outputs and change the value of VARIABLE to user since we want to return the user object.  In Response, modify it by selecting user from the dropdown menu and clicking Save.  That’s it to create the endpoint. ## How to add an endpoint in Draftbit to upload a user’s profile image To test the endpoint in Draftbit, you will require two things. The first is an auth token of a user already created in Xano. It is saved in Project Settings > Device Variable with a key such as AUTH\_TOKEN.  The second thing required is dummy image data in base64 format. To test the endpoint, we’ll use a placeholder image encoded in base64 format from [this source](https://zhongdeliu.github.io/placeholder-image/). This will be passed as the body of the request. Start by adding an endpoint in Draftbit. Enter its name, select its Method to be POST since the API request sent to Xano is of that HTTP method. Next, set the Role to Update and set the Object type to authuser. Draftbit, behind the scenes, uses [react-query](https://react-query.tanstack.com/) for querying and mutating data to an API service. The Body configuration is a JSON object with a key as content, and its value is an image in base64 format. {   “content”: {{profileImage}} } Also, in Headers make sure to add the Authorization header and set its value to auth token saved as Device Variable.  ‍ Testing the endpoint on success will return the user object from the Xano database. It will also have a field name called profile\_image, which we’ll be using in the next section. *Note*: Make sure to remove the hard-coded value of auth token from Device Variables after you have tested and verified the endpoint in Draftbit. ## How to upload a profile image in Draftbit using the image picker action To implement image uploading in a Draftbit app, we will create two screens. The first screen is called Settings that have an Icon Button component. This button component is to navigate the user within the app to another screen called “Edit Profile”, where they can upload a profile image. Add a Navigate action on the Icon Button component and set the value of Destination to Edit Profile.  The Edit Profile screen contains an Icon, a Text, and two Button components. The first Button component will trigger a chain of actions to select an image from the device’s media library, upload an image to Xano and navigate back to the Profile screen. The second button is a borderless button that allows navigating back to the Profile screen. It has only one action associated.  Select the solid background Button component, and go to Interactions (last tab) in the Properties panel on the right-hand side. Add the following actions:  Add the following action called “Open Image Picker”. Set the Media type to Images from the drop-down menu. You can set the image’s compression quality to be uploaded or enable Allow Editing to let the user crop the image before uploading. Make sure to set the Result Name to image. This will be used in the following action.  Add “API Request” action. Set the name of Service and Endpoint. In Body, select the result name image of the previous action. This will map the value of the last action’s result to the request’s body variable defined when creating the endpoint.  Chain the “Navigate” action to navigate back to the Profile screen once the image is uploaded. In the “Profile” screen, you can add a Circle Image component to display a user’s profile image.  Here is the complete working example of uploading a profile image to Xano and then displaying it in the Draftbit app’s Profile screen:  ‍ ## How to upload images to Xano’s database table with a caption to create posts like Instagram In Xano, you’ve already seen the process of uploading an image. A separate API sub-group is available in the Photo-sharing API to upload and create a post with a caption, a timestamp, and the user who made that post.  From the above, to create a post like in an Instagram app, the /photo endpoint is used. It accepts input parameters but the most important ones are caption and content. By default, this Xano endpoint does not have content available as an accepted input parameter. Therefore, you will have to add it (like before when uploading a user’s profile image). Also, since you add content as a new input parameter, you must map it to the image field in the photo database table.    In the above image, please take note that we’ve hidden the tags input parameter for now. After modifying the endpoint in Xano, let’s go to the Draftbit app and create this endpoint. * In Step 1: add the name of the endpoint and. Set the Method to POST. Select a role Create from the dropdown menu since this endpoint will create a new post. Also, add an Object Type such as photos, to allow Draftbit to cache the data from this endpoint under the hood. * In Step 2: add the /photo parameter. * In Step 3: add the following body configuration. {   “caption”: {{captionValue}},   “content”: {{contentValue}} } The key name in the request’s body caption and content are the same input parameters that Xano accepts. For the value of content, add a placeholder image data in base64 format. For example, you can [generate one from here](https://zhongdeliu.github.io/placeholder-image/). * In Step 4: add the Authorization header and select the Device Variable for auth token. To test this endpoint successfully, you will have to ensure that the auth token contains the actual auth token value with the Bearer prefix. * In step 5: click Test to test and verify if the endpoint is working correctly.  ‍ The endpoint will create a new record on success in your Xano’s photo database table, as shown in the image below. Also, take a look at the user id associated with each record. Xano is handling that for you.  ## How to add a Create Post screen Start by editing the Feed screen. Next, add an Icon Button component to allow the app user to navigate to the Create Post screen. Next, add a Navigate action to this Icon Button.  Then let’s add a Create Post screen. This screen is responsible for creating a post. The image can either be selected from the device’s media library or taken using a device’s camera. Both of these actions can be mapped as interactions on a Button or a Touchable component. You do not have to write custom code to add these features to your app.  Let’s start by creating an app variable in Draftbit’s Project Settings. It will help us save the reference of the image selected and display it on the Create Post screen before actually creating the post. Add IMAGE in Project Settings > App Variables. You can also provide a default value as an image URL. It will act as the placeholder image when navigating to the Create Post screen.  In the Create Post screen, there is one Touchable component that wraps the Image component. If you press the image placeholder, it will open the device’s media library. There is also another Button Outline component that allows one to take pictures from a device’s camera. There is also a Text Area component to add a caption for the post and a Button to create the post by sending the post request to /photo endpoint.  Draftbit allows dynamic variables to be set on the Image component. This is where the App Variable IMAGE comes in handy.  Select the Image component in the Components tree, and go to Data (third tab) in the Properties panel. * From the dropdown, select Data as the value of Source Type. * Under Input Text > URL, define a custom variable wrapped in curly braces like {{var}}. * Under Variables, set the value for Variables to App Variable IMAGE. Now, let’s add the actions to select the image from the Touchable component. Select it in the components tree, go to Interactions (last tab) in the Properties panel. Add the first action, Open Image Picker:  You will have to define a custom Result Name variable image to use it in the next action, Set Global Variable. This will add the value from the previous action to the Global Variable.  Now, select the Button Outline beneath the Image component to add the Open Camera action. The contents of this action are similar to the Open Image Picker.  Chain the Set Global Variable action to it as did with Open Image Picker. You can test the Open Image Picker using either iOS or Android emulators provided in the Preview mode.  Scan the QR code under Live Preview in an Expo Go app installed on a physical device to test the Open Camera action.  ‍ ‍ ## How to send an API request to create a post On the third button on the Create Post screen, let’s chain two actions: API request and Navigate.  Add the first action to send the API request to Xano. After that, the value of the image comes from the App Variable.  After creating the post, add the “Navigate” action such that it allows the user to navigate back to the Feed screen. Here is the complete flow. To test it, you will have to log in to the app.  After creating the post, go to photo database table in Xano. You will find the record.  ## How to display posts on the Feed screen In Xano’s API group, the endpoint /wall is used to get all the photos associated with the authenticated user account. We will use this endpoint to display the posts created by the authenticated user and display them for the ongoing example. Start by adding the endpoint /wall in your Draftbit’s REST API service. * In Step 1: add the name of the endpoint and set the Method to GET. Set the Role to Get many since this endpoint will contain more than one post. Set the Object Type to photos. * In Step 2: add the endpoint: /wall. * In Step 3: add the Authorization header and set its value to AUTH\_TOKEN. * In Step 4: Click Test to test and verify the endpoint.  ‍ The Feed screen’s Component tree layout is shown below. It contains a Fetch component to fetch the data from the /wall endpoint. This List component maps the items array available in the endpoint’s response. This array contains all the details about the post and the user who created that post.   The rest of the components are used to display necessary information from the items array. ## Testing the app so far Let’s run a test of the features that have been implemented so far—starting from creating a new post to navigating back to the Feed screen to view all the posts.  ## Conclusion That’s it! You’ve learned how to create a minimum viable Instagram clone with a user’s profile and feed screen in this article. It also covered how to upload images from a device’s media library and use a camera on a physical device using No-code actions in Draftbit. Finally, this article also covered how to modify endpoints in Xano to upload an image file in base64 format and create endpoints in Draftbit to implement the same features. **In Part 3, we will show how to add functionalities like liking a photo, adding a comment to the photo, and following another user account.** **Further reading:** * [What is Base64 format?](https://en.wikipedia.org/wiki/Base64) * [REST API integrations available in Draftbit](https://docs.draftbit.com/docs/rest-api-integrations) * [Fetching](https://docs.draftbit.com/docs/fetching-data) and [Submitting](https://docs.draftbit.com/docs/submitting-data) Data in a Draftbit app * [Ask for Help in the Draftbit community](https://community.draftbit.com/c/help/) ‍ --- # Building an Instagram Clone from Scratch with No-Code, Part 3: Interact with Content > In this 3-part tutorial series, we provide step-by-step instructions for creating an Instagram clone from scratch using no-code tools Draftbit and Xano. In… ### In this 3-part tutorial series, we provide step-by-step instructions for creating an Instagram clone from scratch using no-code tools Draftbit and Xano. In Part 3, we will build content interaction features (likes, follows, comments). Aman Mittalon November 17, 2021 Mobile App DevelopmentNo Code   ## About this tutorial series In this series of tutorials, we will create a full-stack Instagram clone app with Draftbit and Xano. At the end of this 3-part tutorial series, you will have built a fully-functional Instagram clone (we’ll call it Picbit) that allows your users to sign up, login, create posts to their profile, and like and comment on other peoples’ posts. This series is divided into three parts: 1. [Setting up Authentication: Sign Up, Sign In, and Log Out](https://draftbit.com/blog/building-an-instagram-clone-from-scratch-with-no-code-part-1-sign-up-sign-in-and-log-out) 2. [Uploading a photo and Creating a Feed screen](https://draftbit.com/blog/building-an-instagram-clone-from-scratch-with-no-code-part-2-create-browse-content) 3. (You are here) Adding Likes, Comments, and Follow a user Draftbit is a visual programming app builder whose interface will build the mobile app with native code running in the background. The app itself is cross-platform and will run on both iOS and Android. We will also use Xano, which is a no-code scalable and secure backend. ## Part 3: Adding Likes, Comments and Follow a user In this tutorial, let’s dive in and implement the following features: * Add a like to a photo * Add a comment on a photo * Follow a user account We will create the endpoints from scratch for the functionalities mentioned above and develop appropriate screens to add the user experience in the Draftbit app. Here is an example of creating a photo detail screen that displays total likes received on the photo, and the comments.  All the API endpoints from Xano’s photo-sharing backend template we will add to the Draftbit app will require a user to be authorized as well as screens like user profile, settings and feed screen to be already set up. Please follow part 1 on how to implement authentication and part 2 of this series to implement features like uploading an image using either a device’s media library or camera and display them as posts on a Feed screen. ## Prerequisites * A [Draftbit account](https://draftbit.com/) to build the cross-platform mobile app. * A [Xano account](https://app.xano.com/admin/login) to access and use their free and scalable photo-sharing API that is accessible via their [marketplace](https://demo.xano.com/xano-instagram-clone/). * Please make sure that you have implemented the authentication from part 1 and set up the user profile screen and feed screen in part 2 to continue building features from this tutorial. ## How to setup Like a Photo endpoint In Xano’s photo-sharing API, a sub-group of API endpoints provides the functionality of adding likes to a photo.  The endpoint /likes is used to create a record in the likes database table. For example, when an authenticated user likes a photo, the record is added to the likes database table in Xano. It saves the photo’s id and the id of the user who liked the photo.  Start by adding the endpoint /likes in your Draftbit’s REST API service: * In Step 1: add the endpoint’s name and set the Method to POST. Set the Role to Create since this endpoint is creating a new record in the database. Set the Object Type to likes. * In Step 2: add the endpoint: /likes. * In Step 3: add the following structure. The endpoint /likes requires the id of the photo as the input to create a record. Provide a test value for the photoId. {   “photo\_id”: {{photoId}} } * In Step 4: add the Authorization header and set its value to AUTH\_TOKEN. By identifying the user from their authenticated state, the user’s id will be added to the database table. * In Step 5: Click Test to test and verify the endpoint.  ## How to setup a Like button in Draftbit Start by setting up the Feed screen to add a header to each photo. This header displays the user’s avatar, handle, and a “like a post” button. Every post in the Feed screen will have this header. Take a look below at how the Components layout looks like after setting up the header:  In the above, add an API Request action to the Icon Button component to send the POST request to like a photo, set up the service name and the endpoint from the dropdown menu, and pass the id of the photo in the Configuration > Body.  Also, add a Text component next to the Like button to show the likes count. The /wall endpoint setup in Part 2 of this series returns a JSON object returned from Xano’s REST API. This object contains a field called like\_count to display the total like count of a particular photo.  The value of the like\_count field is a number. The initial value for any photo newly added to the Feed screen will be 0. This value will only increase when an authenticated user likes a photo.  ## How to setup Add a Comment endpoint In Xano’s photo-sharing API, a sub-group of API endpoints provides the functionality of adding a comment on a photo.  The endpoint /comment is used to create a record in the comments database table. For example, when an authenticated user adds a comment on a photo, the record is added to the comments database table in Xano. It saves the photo’s id and the id of the user who commented on the photo.  Start by adding the endpoint /comment in your Draftbit’s REST API service: * In Step 1: add the endpoint’s name and set the Method to POST. Set the Role to Create since this endpoint is creating a new record in the database. Set the Object Type to comments. * In Step 2: add the endpoint: /comment. * In Step 3: add the following structure. The endpoint /comment requires the value of the TextInput component and the id of the photo as the input to create a record. Provide a test value for the photoId. {   “comment”: {{commentValue}},   “photo\_id”: {{photoId}} } * In Step 4: add the Authorization header and set its value to AUTH\_TOKEN. By identifying the user from their authenticated state, the user’s id will be added to the database table. * In Step 5: Click Test to test and verify the endpoint.  ## How to setup display Comments on a photo endpoint To fetch and display comments for each photo, let’s add /comments/{{photoId}} endpoint in your Draftbit’s REST API service: * In Step 1: add the endpoint’s name and set the Method to GET. Set the Role to Get Many since this endpoint creates a new record in the database. Set the Object Type to comments. * In Step 2: add the endpoint: /comments/{{photoId}} and a test value for the photoId. * In Step 3: add the Authorization header and set its value to AUTH\_TOKEN. By identifying the user from their authenticated state, the user’s id will be added to the database table. * In Step 4: Click Test to test and verify the endpoint.  We will use the result returned from this endpoint to display comments on a Photo’s detail screen. ## How to create a Photo Detail screen When a user presses the image on the Feed screen, they will be navigated to another screen to find a photo’s details. To implement this inside Draftbit, you can wrap an Image component with a Touchable component and add a Navigate action on the Touchable component for navigating to the Photo Details screen.  When navigating to the Photo Details screen, we will display the user’s avatar, handle, and the like count. However, the Photo details endpoint doesn’t contain this information. Instead, it requires the user’s id to fetch the details of the logged-in user. To display information like the user’s avatar, handle, etc., is done by creating multiple Navigation Parameters for each field in Draftbit while setting up the Navigate action. You can create one or many Navigation Parameters by providing a custom key for the Parameter name under Create Navigation Parameters within the same action. This allows us to re-use field names from a particular endpoint from one screen two another. Under Pass Data, define four custom variables and select their appropriate values from the current screen. For example, as shown below, we’re passing: * total likes count of a photo * a user’s handle * a user’s avatar * and the photo’s id  Now, let’s add an endpoint to fetch the details of a photo from the /photos database table in Xano. This endpoint requires the photo’s id to be passed as a query parameter. The id here is received as a navigation parameter from the Feed screen. This determines that the endpoint will fetch the photo’s details that a user pressed in the Feed screen. * In Step 1: add the endpoint’s name and set the Method to GET. Set the Role to Get One since this endpoint creates a new record in the database. Set the Object Type to photos. * In Step 2: add the endpoint: /photo/{{id}} and a test value for the id. * In Step 3: add the Authorization header and set its value to AUTH\_TOKEN. By identifying the user from their authenticated state, the user’s id will be added to the database table. * In Step 4: Click Test to test and verify the endpoint.  The Components tree of a photo detail screen is shown below:  In the above image, you will notice this screen contains two Fetch components. The first component queries the details of a single photo, and the second is to fetch all the comments and display them in a list. When setting up the first Fetch component, select the REST Service and the endpoint to Get a photo’s details in the Properties panel. Then, under Configuration > Url Structure, select the photoId under Navigation from the dropdown menu as the query parameter value.  The second fetch component is configured the same way as the first one (as shown in the image above). It requires the photoId as a query parameter. The last piece of the puzzle required to complete creating the Photo Detail screen is sending the API request to add a new comment for a photo. This is done by adding an API request action on a Button Solid component.  This action will trigger the endpoint “Add Comment” that was created in an earlier section of this tutorial. The body of this endpoint requires two inputs: * photoId is obtained from “Navigation” in the dropdown. * commentValue is the value of the Field Name prop on the TextInput component. It is available under “State” in the dropdown menu.  The value commentValue of the Field Name prop is set by selecting the TextInput component in the Components tree and then navigating to Configs (second tab) in the Properties panel.  The Photo Detail app screen is now ready, and you can add a comment to a photo.  ## How to follow another user Currently, the logged-in user is adding a comment to their photo because the Feed screen only shows photos associated with one’s account. Xano’s photo-sharing API contains an endpoint /user to query all the user records from the user database table. We will add a screen where all the app users are shown so that currently logged-in users can follow them and see their posts on the Feed screen. Let’s start by adding the /user endpoint. * In Step 1: add the endpoint’s name and set the Method to GET. Set the Role to Get Many since this endpoint creates a new record in the database. Set the Object Type to users. * In Step 2: add the endpoint: /user. * In Step 3: add the Authorization header and set its value to AUTH\_TOKEN. By identifying the user from their authenticated state, the user’s id will be added to the database table. * In Step 4: Click Test to test and verify the endpoint.  Add another endpoint to follow a user. * In Step 1: add the endpoint’s name and set the Method to POST. Set the Role to Create since this endpoint is creating a new record in the database. Set the Object Type to follows. * In Step 2: add the endpoint: /follows. * In Step 3: add the following structure. The endpoint /follows requires two ids in its body configuration. The logged-in user is the follower ( follower\_id) and the user who is being followed (followed\_id). {   “follower\_id”: {{followerId}},   “followed\_id”: {{followedId}} } * To successfully test this endpoint, please pass the authenticated user’s id as the value of followerId and the id of an existing user in the database table as followedId. * In Step 4: add the Authorization header and set its value to AUTH\_TOKEN. By identifying the user from their authenticated state, the user’s id will be added to the database table. * In Step 5: Click Test to test and verify the endpoint.  ‍ Then, let’s add a Users screen that will display a list of users, and a follow button on the User Profile screen. Start by adding an Icon Button on the User Profile to allow the logged-in user to navigate to the Users screen. Setup a Navigate action on this button component in the Properties panel > Interactions. Under Pass Data, let’s pass the id of the logged-in user as the Navigation Parameter.  The Users screen will display the user’s avatar, their handle, and an Icon button to follow them. It uses a Fetch component to get the users list from the user database table and a List component to display the list of users.  The Icon button has two actions: API Request and Navigate.  The API request action will trigger the /follows endpoint. It requires two ids to be passed as the Body configuration.  The Navigate action will redirect the user to the Feed screen to view the followed user’s photos.  Once the logged-in user follows another, their photos are shown on the Feed screen.  The **follows** database table in Xano also stores a record of the follower’s and followed user’s ids:  ## Conclusion This concludes the series of building a photo-sharing app with Draftbit and Xano from scratch. Tools like Draftbit enable both non-developers and developers to develop apps without coding but using the same paradigms used in open source frameworks like React Native. **Next Steps** * [Learn how to reset a TextInput field after a Screen is unfocused](https://community.draftbit.com/c/code-snippets/how-to-reset-a-textinput-field-after-a-screen-is-unfocused) and clear the TextInput field component. * [Add inline validation using Custom Function and Low-code in Draftbit](https://community.draftbit.com/c/tutorials/low-code-inline-form-validation). * [To integrate a Backend of your choice, check out the list of all backends that have first-class support in Draftbit](https://docs.draftbit.com/docs/rest-services-endpoints). * [Ask for Help in the Draftbit community](https://community.draftbit.com/c/help/) ‍ --- # Common Best Practices for Smartphone App UI/UX Design > In this blog post, we will explore some common best practices for creating a compelling and user-friendly UI/UX for smartphone apps. ### In this blog post, we will explore some common best practices for creating a compelling and user-friendly UI/UX for smartphone apps. Dave Sebekon June 22, 2023 App DesignMobile App Development  In today’s fast-paced digital world, smartphone apps have become an integral part of our daily lives. With millions of apps available for download, users have higher expectations when it comes to the user interface (UI) and user experience (UX) of mobile applications. A well-designed UI/UX can make or break an app’s success, influencing user engagement, retention, and overall satisfaction. In this blog post, we will explore some common best practices for creating a compelling and user-friendly UI/UX for smartphone apps. ## Simplify Navigation Efficient navigation is the backbone of a successful mobile app. Users should be able to intuitively navigate through different screens and features without confusion. Here are some best practices for simplifying navigation: **Use a Bottom Tab Navigator:** Implementing a bottom navigation bar with clearly labeled icons provides easy access to the most important sections of the app. **Implement a Clear Hierarchy:** Establish a clear hierarchy of information by organizing features and content in a logical order. Use visual cues like color, size, and position to guide users through the app. ## Maintain Consistency Consistency in UI/UX design is crucial to ensure a seamless user experience. When an app is consistent, it becomes easier for users to learn and navigate. Here are some tips for maintaining consistency: **Consistent Visual Elements:** Use consistent colors, typography, icons, and button styles throughout the app. This helps users identify and interact with familiar elements easily. **Unified User Flow:** Ensure that the user flow across different screens and interactions remains consistent, reducing cognitive load and enhancing usability. ## Optimize Screen Real Estate Smartphone screens are limited in size compared to desktop screens. Optimizing screen real estate is essential to make the most of the available space and deliver an effective UI/UX. Consider the following: **Prioritize Key Information:** Place important information, actions, and content above the fold to minimize the need for excessive scrolling. **Use Progressive Disclosure:** Employ progressive disclosure to reveal additional information or features progressively, allowing users to focus on the essentials initially. **Responsive Design:** Implement responsive design techniques to ensure that your app adapts well to different screen sizes and orientations. ## Enhance Usability Usability plays a significant role in user satisfaction. A usable app is intuitive, efficient, and easy to understand. Consider these best practices to enhance usability: **Minimize User Input:** Reduce the need for lengthy or repetitive user inputs. Leverage smart defaults, autofill, and contextual suggestions to streamline the user experience. **Provide Feedback:** Offer clear and immediate feedback for user actions, such as button clicks or form submissions, to acknowledge their interactions and minimize uncertainty. **Conduct User Testing:** Regularly test your app with real users to identify pain points, gather feedback, and iterate on the UI/UX design for continuous improvement. ## Prioritize Performance and Speed Slow and unresponsive apps are frustrating for users and can lead to high abandonment rates. To provide a delightful experience, prioritize performance optimization: **Efficient Loading Times:** Optimize the loading times of your app by minimizing unnecessary network requests, reducing response payload sizes, compressing images, and utilizing caching techniques. **Test on Different Devices:** Ensure that your app performs well across various devices, screen sizes, and operating systems, considering factors like processor speed and memory limitations. ## Conclusion Creating a successful smartphone app requires careful attention to UI/UX design. By following these best practices, you can significantly improve the usability, engagement, and overall satisfaction of your app’s users. Remember, UI/UX is an ongoing process, and it’s essential to gather user feedback, iterate, and adapt your design to evolving user needs. With a well-designed and user-friendly app, you can provide a compelling experience that keeps users coming back for more. \---- Draftbit makes implementing appealing and performant user interfaces and experiences a breeze. With Draftbit’s React Native mobile app builder, technical and non-technical founders, designers, and developers can build and publish their mobile apps in less time and for less money. [Sign up to get started](https://draftbit.com). We also offer expert services that range from writing some custom code to building your app from the ground up. [Get in touch to discuss your idea!](https://draftbit.com/experts) ‍ --- # How Non-Developers Can Build Real Mobile Apps with AI and Low-Code > Learn how non-developers can use AI-assisted low-code platforms like Draftbit to build, iterate, and launch real mobile apps while keeping code access and… ### Learn how non-developers can use AI-assisted low-code platforms like Draftbit to build, iterate, and launch real mobile apps while keeping code access and expert help available. Dave Sebekon December 9, 2022 Low CodeMobile App DevelopmentSmall BusinessStartups  Non-developers are building more software than ever. Founders, operators, designers, product managers, educators, coaches, and small business owners all have workflows they understand deeply. What they often lack is a practical way to turn that knowledge into a real app. Low-code platforms helped by making app building more visual. AI has pushed that further by helping people describe what they want and get a working first draft faster. But the goal is not to pretend software is effortless. The goal is to give non-developers more leverage while keeping a path to real code, real integrations, and expert help when the app needs it. [Draftbit](/platform/) is built for that reality: AI agents, visual editing, app templates, backend integrations, live preview, source code access, publishing, and [Expert Services](/services/) in one app-building workflow. ## What non-developers can own Non-developers are often closest to the actual problem. That makes them well suited to own: * The user journey. * The business rules. * The app content. * The first version of screens and flows. * The data that needs to be collected or displayed. * Customer feedback and iteration. * Prioritization of what matters now vs. later. That ownership matters. A developer can write code, but the person who understands the customer often knows which feature should exist, what the workflow should feel like, and where users are getting stuck. ## What AI and low-code change AI-assisted low-code platforms reduce the distance between product intent and working software. Instead of writing a full technical spec before anything exists, a non-developer can: 1. Start from an app idea, prompt, or template. 2. Generate or assemble a first version of the app. 3. Edit screens visually. 4. Connect data through APIs and integrations. 5. Preview the app on real devices. 6. Ask AI agents for scoped changes. 7. Bring in experts for the parts that need deeper technical judgment. This makes app building more iterative. You can test the product shape earlier, learn from users sooner, and avoid spending months on a custom build before the core workflow is proven. ## Why low-code is different from no-code No-code tools are useful when the app fits the tool exactly. Low-code tools are more useful when you need a path beyond the default options. For a serious mobile app, that flexibility matters. You may need to: * Add custom logic. * Connect a custom backend. * Use REST, GraphQL, or MCP-powered services. * Import packages. * Customize components. * Export or edit source code. * Work with developers later. Draftbit is designed for that middle ground. Non-developers can build visually, while developers and experts can still access code and extend the app when needed. ## Start with templates, not a blank canvas Starting from scratch is hard, even for experienced teams. Templates help non-developers start with a working structure instead of a blank page. Draftbit’s [app templates](/mobile-app-templates/) give you screens, navigation, layouts, and patterns you can customize. That is useful for founders and operators because it changes the first question from “How do I build everything?” to “Which parts of this app need to match my business?” Templates are especially useful for: * Marketplaces. * Booking apps. * Ecommerce apps. * Fitness and wellness apps. * Events apps. * AI chat apps. * Directories. * Internal tools. ## Use AI for momentum, not final judgment AI can help generate screens, write copy, suggest layouts, and make implementation changes. That is valuable, but non-developers should still review the result carefully. Use AI for: * First drafts. * Alternate screen layouts. * Empty-state and onboarding copy. * Form and list structures. * Small scoped changes. * Explaining code or integration concepts. * Repetitive implementation work. Do not use AI as the only reviewer for: * Payments. * Authentication. * Security rules. * Private user data. * Medical, legal, financial, or regulated workflows. * App store compliance. For those areas, use experts, documentation, and testing. ## Connect real data early Many app ideas look good with placeholder content. The hard parts appear when real users, real permissions, and real data enter the app. Non-developers should think early about: * Where user accounts live. * Which backend stores records. * Who can see or edit each record. * Which APIs the app needs. * What happens when data is missing. * What happens when a request fails. * How admins manage content or users. Draftbit can connect to [REST API integrations](/integrations/), [GraphQL integrations](/graphql/), and [MCP servers](/mcp/). If the backend model is unclear, Expert Services can help design the right data structure before the app gets too far along. ## Preview and test before launch Visual building is only useful if the app behaves well on real devices. Test early: * Does the navigation make sense? * Are buttons easy to tap? * Do forms work with the keyboard open? * Does text wrap cleanly? * Are loading and error states clear? * Can a new user complete the main action without help? * Does the app still work with real data? Draftbit’s live preview workflow helps non-developers catch these issues sooner. It is much cheaper to fix confusing flows before launch than after users have already churned. ## Know when to bring in experts Non-developers can build a lot, but they should not have to solve every technical problem alone. Bring in experts when the app involves: * Complex authentication or permissions. * Payments or subscriptions. * Backend architecture. * Custom components. * Migration from another platform. * Performance issues. * App store submission. * Code review before launch. * A prototype or AI-generated app that is close but not reliable yet. Draftbit Expert Services are designed for this handoff. You can build what you can, then get help where experience matters. ## A practical workflow for non-developers Here is a good starting workflow: 1. Write the core user problem in one paragraph. 2. Choose a Draftbit template or ask AI to create the first version. 3. Build the main user journey before secondary features. 4. Connect realistic data as soon as possible. 5. Preview on a real device every day you work on the app. 6. Ask users to complete one task and watch where they get stuck. 7. Use AI and visual editing for iteration. 8. Bring in experts for backend, code, QA, or launch. 9. Publish when the core workflow is reliable, not when every idea is included. ## FAQ ### Can a non-developer really build a mobile app? Yes, especially if the app follows known patterns and the builder provides visual editing, templates, AI assistance, integrations, and publishing. More complex apps still benefit from expert help for backend architecture, security, custom code, and launch. ### Do I need to learn code to use Draftbit? You can start without coding. But Draftbit does not trap you there. As the app grows, you can use code access, custom components, source code export, or Expert Services to handle more advanced needs. ### Is AI enough to build my whole app? Sometimes AI can get you a useful first version. For a production app, you still need product judgment, testing, data modeling, and review. AI is strongest when paired with visual editing and experienced humans. ### What should I build first? Build the smallest version of the core workflow. For a marketplace, that may be browsing and contacting. For a booking app, it may be availability and reservations. For a coaching app, it may be onboarding and content delivery. ### When should I ask Draftbit experts for help? Ask for help when you hit backend complexity, custom code, app store setup, performance issues, or a launch deadline. Experts can also review the app before users see it. ## Conclusion Non-developers do not need to wait for permission to start building. With AI-assisted low-code tools, templates, visual editing, and real code access, they can turn product knowledge into working software faster than before. The strongest path is not “do everything yourself” or “hand everything to an agency.” It is a blended workflow: build what you understand, use AI to move faster, keep code access open, and bring in experts when the app needs deeper technical work. --- # How AI and Low-Code Simplify Mobile App Development Workflows > See how AI-assisted low-code platforms simplify mobile app development with templates, visual editing, integrations, live preview, code access, publishing,… ### See how AI-assisted low-code platforms simplify mobile app development with templates, visual editing, integrations, live preview, code access, publishing, and expert support. Dave Sebekon December 9, 2022 Application DevelopmentLow Code  Mobile app development has a lot of hidden workflow cost. Before users ever see the app, teams have to plan screens, design flows, implement UI, connect data, handle auth, test on devices, manage builds, prepare app store assets, and keep the whole project understandable as it changes. Low-code platforms simplified part of that work by making app building more visual. AI now simplifies another part by helping teams create first drafts, make scoped changes, and move faster through repetitive implementation. But the best workflow is not just “prompt and hope.” It combines AI, visual editing, real integrations, code access, preview, publishing, and expert review. That is the workflow Draftbit is built for: [AI-assisted visual app development](/platform/) with templates, backend connections, source code access, publishing, and [Expert Services](/services/) when you need experienced help. ## The old workflow: too many handoffs A traditional mobile app workflow often looks like this: 1. Product writes requirements. 2. Design creates static mockups. 3. Engineering interprets the designs. 4. Backend work happens separately. 5. QA finds mismatches between design and implementation. 6. Product requests changes. 7. Engineering reworks screens and logic. 8. Release work starts late. Every handoff creates translation loss. Screens that looked simple in design files become complicated when connected to real data. Requirements change after users see the first build. Release details get pushed to the end. AI-assisted low-code compresses that loop. ## A modern Draftbit workflow With Draftbit, a practical mobile app workflow can look like this: | Step | What happens | | ------------------------------- | ----------------------------------------------------------------- | | Scope the first version | Define the core user journey and what must be true for launch. | | Start from a template or prompt | Use templates and AI agents to avoid a blank canvas. | | Build visually | Create and refine real screens, navigation, and components. | | Connect data | Use REST, GraphQL, MCP, or custom backend services. | | Preview early | Test screens on web and devices before launch. | | Add code where needed | Use custom code or source access for advanced behavior. | | Review with experts | Bring in help for architecture, custom components, QA, or launch. | | Publish | Ship to web, iOS, and Android from a clearer workflow. | This does not remove product discipline. It gives teams a faster path through the work that used to take multiple disconnected tools. ## 1. Scope the app around the core workflow The fastest way to simplify mobile app development is to avoid building too much too early. Before choosing screens or components, define the app’s core workflow: * Who is the primary user? * What problem are they solving? * What action should they complete first? * What data does that action require? * What does success look like? * What can wait until version two? Low-code tools are most powerful when scope is clear. AI can create screens quickly, but if the product direction is fuzzy, it can also create noise quickly. ## 2. Start from templates and AI agents Blank-canvas app building is slow. Draftbit gives teams two faster starting points: * [App templates](/mobile-app-templates/) for common product patterns. * AI agents that can create or modify app work from plain-English instructions. Templates give you structure. AI gives you momentum. Together, they help you create a first working version faster than starting from static wireframes or hand-coding every screen. This is especially useful for: * MVPs. * Internal tools. * Marketplace tests. * Booking flows. * Ecommerce apps. * Fitness, wellness, and coaching apps. * Event and community apps. * AI chat and content apps. ## 3. Build real screens visually Visual development reduces the time between “we need a screen” and “we can try it.” Instead of waiting for every UI change to go through engineering, teams can adjust layout, hierarchy, content, and components directly. That helps with: * Faster product iteration. * Better designer/founder involvement. * Easier client feedback. * More accurate previews than static mockups. * Less rework between design and implementation. The key is that the visual layer should not trap the app. Draftbit gives teams visual editing while preserving access to code and real app structure. ## 4. Connect data earlier Many workflows break when placeholder data becomes real data. A clean-looking screen may need loading states, empty states, error handling, permissions, search, filtering, pagination, or offline behavior. Draftbit can connect to: * [REST API integrations](/integrations/). * [GraphQL integrations](/graphql/). * [MCP servers](/mcp/) for AI-assisted service workflows. * Custom backend services. Connecting real or realistic data earlier helps teams find workflow problems before launch. ## 5. Keep code access available The biggest risk with simplified app development is hitting a wall. A workflow is only truly simpler if it still has escape hatches when the app gets more advanced. Look for: * Custom code support. * Package or dependency support where relevant. * Source code export. * Direct code editing. * GitHub or zip export workflows. * Expert support for custom implementation. Draftbit is designed for teams that want the speed of visual building without giving up the ability to extend the app. ## 6. Preview and test continuously Mobile apps need to be tested in the environments users actually experience: * Small screens. * Large phones. * Tablets when relevant. * Web when shipping cross-platform. * Keyboard-open form states. * Slow network states. * Logged-out and logged-in states. * Empty and full data states. Draftbit’s live preview workflow helps teams catch usability issues earlier. This is one of the biggest workflow advantages over a static design process: people can react to the working app, not an approximation. ## 7. Bring in experts for the hard parts Low-code does not mean every problem should be solved by a non-developer. Some parts of mobile app development deserve experienced technical judgment: * Backend architecture. * Auth and permissions. * Payments and subscriptions. * Custom components. * Performance. * App store submission. * QA before launch. * Migrating from another platform. * Fixing an AI-generated app that is close but unreliable. [Draftbit Expert Services](/services/) can fill those gaps without forcing teams into a full traditional agency workflow. ## 8. Publish without turning launch into a separate project Launch work can become its own project: builds, signing, metadata, screenshots, app store review, custom domains, release notes, and post-launch fixes. Draftbit helps simplify that path with publishing workflows built into the platform. Teams that need deeper release automation can still export source code and connect their own CI/CD processes, but they do not have to start there. ## What this means for different teams ### Founders You can validate the app earlier, show a real product to users or investors, and avoid spending months on a custom build before the workflow is proven. ### Small businesses You can build customer-facing or internal apps without hiring a full engineering team, then bring in experts for specific technical needs. ### Product teams You can reduce handoff friction between product, design, engineering, and QA by keeping more of the work close to the actual app. ### Agencies and consultants You can deliver faster by using Draftbit for visual buildout, templates, integrations, previews, and code access while reserving engineering time for the parts that truly need it. ## FAQ ### Does low-code remove the need for developers? No. It reduces the amount of repetitive implementation and lets developers focus on the work where they add the most value: architecture, integrations, custom code, performance, security, and release quality. ### How does AI fit into low-code development? AI helps create first drafts, make scoped changes, explain implementation details, and speed up iteration. Low-code gives those AI outputs a visual, structured, inspectable place to become a real app. ### Can Draftbit connect to my existing backend? Yes. Draftbit is backend agnostic and can connect to REST APIs, GraphQL APIs, MCP-powered services, and custom backends. ### What if my app outgrows visual editing? That is why code access matters. Draftbit supports custom code and source code export, so teams can extend the app beyond the visual builder when needed. ### When should I bring in Draftbit experts? Bring in experts when the app needs backend design, custom components, code review, app store launch help, migration support, or troubleshooting that goes beyond the visual workflow. ## Conclusion AI and low-code simplify mobile app development by reducing handoffs, shortening feedback loops, and giving more people access to the working product earlier. The strongest workflow still respects software fundamentals. Scope the app clearly, start from templates or AI, build visually, connect real data, preview continuously, use code when needed, and bring in experts for the parts that deserve technical depth. Draftbit brings those pieces together so teams can move from app idea to launch with less friction and more control. --- # How to Build an App UI from Scratch Using Draftbit > learn step-by-step how to create a user interface using the Draftbit app builder and see in action how Flexbox layout components are configured, and… ### learn step-by-step how to create a user interface using the Draftbit app builder and see in action how Flexbox layout components are configured, and understand the building blocks of the Builder. Aman Mittalon September 8, 2021 React NativeMobile App DevelopmentProgrammingApplication Development   ‍ **We have a new and improved tutorial series:** [**Build an Instagram Clone from Scratch**](https://draftbit.com/blog/building-an-instagram-clone-from-scratch-with-no-code-part-1-sign-up-sign-in-and-log-out)**. This new series includes a real back-end, authentication, and more complex UXs. If you’d like to continue with the Bookbit tutorial, proceed! If you’d like to check out the Instagram Clone series, head over** [**here**](https://draftbit.com/blog/building-an-instagram-clone-from-scratch-with-no-code-part-1-sign-up-sign-in-and-log-out)**.** Like React Native, Draftbit Builder uses [the Flexbox algorithm](https://community.draftbit.com/c/tutorials/the-complete-guide-to-layout-in-draftbit-using-react-native-flexbox) to specify the layout of an app screen. The algorithm provides consistency among different screen sizes. With this tutorial’s help, let’s learn step-by-step how to create a user interface using the Draftbit app builder and see in action how Flexbox layout components are configured and understand the building blocks of the Builder. For the current example, we will be building a welcome screen for the Bookbit app. Creating React Native applications gives the ability to generate one source code for multiple mobile platforms such as iOS and Android. Over the years, the developer experience of building such apps using the framework has improved with the introduction of features like [Hot Reloading](https://reactnative.dev/blog/2016/03/24/introducing-hot-reloading) and [Fast Refresh](https://reactnative.dev/docs/fast-refresh).  Taking advantage of these features, at Draftbit, we aim to provide a better developer experience for software developers and designers alike. Draftbit is a no-code/low-code app builder used to build working prototypes of mobile applications exported to React Native. Here are two screens we are going to build in this post:  Welcome Screen  Tutorial Screen The **concepts covered in the post are entirely oriented towards the Draftbit Builder** and are as follows: * How to create a new app in the Draftbit Builder * Understanding the elements to create a screen in Draftbit Builder, such as what does left, center, and right panels are for * How to rename a component and re-arrange their order using the drag-and-drop feature * How to use an Image Background component * How to use an Image component * Add a component from Bits * How to configure a text component and use Draftbit’s built-in typography elements * How to create a button with a solid background * How to create a borderless button using a Link component * How to create custom blocks of different components to re-use them * How to use components like Icon * How to create a button with an outline * How to preview an app generated with Expo ## How to create a new app in Draftbit Builder Before we start, make sure you are logged-in your Draftbit account. After logging in, you will be welcomed by a similar Dashboard screen as shown below:  To instantiate a new app in the Draftbit Builder, click the button ‘Create App’ on the screen’s right top corner. After clicking the button, fill in the necessary details of the app prototype as per your needs. It’s a four-step process: * In the modal form, enter the name of the app prototype under ‘App Name’. * Enter the ‘App Description’ for the app prototype and press ‘Continue’. * Select a template. Since we are building from scratch, let’s start with a blank app. Click the button ‘Start with blank app’ at the bottom center of the modal form and then press ‘Continue’. There are tons of layouts for various purposes available in the Builder that you can choose. * It will notify you that the Builder is ready, and you can start by pressing the button ‘Start Building’. Here is the overview of instantiating a new app:  ## Understanding the elements to create a screen in Draftbit Builder ### The left Panel Once this new app is instantiated, the Draftbit Builder welcomes you with a blank screen named Blank with no React Native components represented. The advantage of using a blank screen is that you can build the user interface from scratch. You will see that the ‘Screens’ section is currently selected on the side panel on the left side. Every screen created in the Builder falls under this section. This section is further divided into two sub-sections or panels: Screens and Components  The ‘Screens(1)’ shows the number of existing screens in the app, currently one since there is only one screen. The ‘LaComponentsyout’ is where you can add React Native components to configure and structure the user interface for a particular screen. Since the first screen is already created for us, let’s rename it. ### Rename a screen To rename a screen in the Draftbit Builder you will have to follow the following steps: * Select the screen * Double click it and enter the name of the screen * Draftbit Builder will take care of updating it automatically.  To verify that the screen name is updated, you can click the “Export Code” button to View Code in the top panel, and the component screen we just renamed reflects there.  Here is the code snippet for your reference: import React from ‘react’; import { ScreenContainer } from ‘@draftbit/ui’; const WelcomeScreen = props =>    return ; }; export default WelcomeScreen; ### The right panel Also known as the Properties Panel, it is used to configure each Component’s properties that are representing some part of the UI on the screen. It is divided into four tabs: * Styles is where the definition or modification of a layout component is handled. * Configs are where the configuration of the layout component is handled. For example, you can rename a component. * Data is where data consumption in real-time from a REST API is consumed or is used to provide a value for a component such as Text. * Interactions are where different kind of relationships between components and screens is handled. For example, you can control navigation from one screen to another on the Touchable component. ‍  We will cover all of these tabs in later posts in-detail but for this post, let’s keep the majority of the focus on Styles and Configs tabs. ## Creating the first screen The first screen we are going to create is called the Welcome screen. It is going to have the following structure of React Native components.  The first component that we are going to add is called ImageBackground. It provides a feature to add a background image on a screen component. To add it: * Click the plus icon button in the Builder. * Under the Media components bits, click the Image Background components. When adding an image as a background image or just to use it in an Image component, always make sure that the file name you are uploading begins with a letter instead of a number. The Image Background component requires a background image. The Builder allows you to upload a custom image as the source for this component: * Select the Image Background component from the left panel. * Select the Data tab in the Properties panel. * Set the Source Type to Static and select the Image uploaded for the Source. * In the modal, you can choose to upload a custom background image and then select it. It will be used as the source of the Image Background component. The element we will represent is a container that contains a logo composed of an Image component, a title, and a tagline, both composed from a Text component. * Click the plus icon button in the Builder. * Select the View and Text from Basic components to add. This set of components is the basic block of building a screen. * Select the Image from Media components to add. These components help further define the structure and UI of a screen.  We want to display the title and tagline below the logo. You can drag-and-drop to re-arrange the order of components for a particular screen as shown below:  Let’s modify the styles for these components. * Select Image Background and set the value of Align and Justify to center under Flex Items. This section is used to align the position of a component using the Flexbox algorithm. A component here can either be the child of it or can be self-aligned. * Then, add a value of 1 to Sizing > Grow. It defines the flex item’s ability (in this case, the Image Background component) to grow based on the screen size if necessary. * Then, in the Margins & Padding add a bottom padding of 40pt. The default value for either margin or padding is 0pt. The values can also be defined in % in the Builder wherever necessary.  * Select View, and in the Styles tab, set the value of Align to center under Flex Items. * Then, in the Margins & Padding add a bottom margin of 120. * Select Image. In the Styles tab, add a bottom margin of 4. Under the Size, add a width of 140 and a height of 150. * Then, go to the Data tab, and in Image source upload an image to represent the logo. * Lastly, go to the Configs tab, double click the Image component to rename it to Logo.  A Text component can use Draftbit’s built-in typography elements. These typography elements are composed of Font and Color. There are pre-defined typography values ready to use. * Rename the first Text component to Title and the second one to Tagline. * Set styles for Title in the right panel. Select Headline1 font. It comes with custom values for Size, Letter Spacing, Line Height, and Color. * To change the color, select the Color Picker. There are predefined color values you can choose. For the Headline1 font, the color value of strong is chosen from the default theme. You can also add custom HEX or RGBA values to set the color for a property. * Go to the Data tab and add the Title element’s value to represent the Text property. * Similarly, for Tagline select the font Subtitle1. * Add a top margin of 4. * Then, add the Text value in the Data tab. In the original layout of this screen we are building, there is another View component used to wrap two buttons. It is the child element of Image Background and not the previous View component that we have been working on so far. Let’s create the first button with a solid background. * Select the Image Background, click the plus icon button, and then click View. * Set horizontal padding for this to 34. * Set a Width of 100%. * In the left panel, click the plus button icon, select Blocks and then click Button Solid. * Change the value of property Text in the Data tab to Discover Books. * Go to the Configs tab and the value for the Component name property to Discover Books. It is another way to rename a component. * Change the value of the Color Override property to a custom hex value of #332036. It represents the solid background color of the button component. Once you add a custom value for the color, it can be re-used and is shown in the Recent section in the color picker. * To change the color value of the label of this button, select the picker for the Label Color Override property and change it to the predefined value of Background which has an actual hex value of #ffffff. * In the Styles tab, add horizontal padding of 28 and change the value of property Border Radius to Button.  Now, in the same View container, let’s create a borderless button with a [Link](https://docs.draftbit.com/docs/buttons#button-solid--button-outline--link) component. * Select the parent View container, click the plus button icon to add a child View component. Set the value for Align and Justify under Flex Items to center on the parent View component. * Add a top margin of 20 to the child View component in the Styles tab. * Select the newly added View and add a Link component. * Select the Link component, go to Styles tab, and change the value of Color to Medium under Typography. Medium is one of the color values that comes pre-defined inside Draftbit. You read more about Theme Colors [here](https://docs.draftbit.com/docs/themes). * Lastly, go to the Data tab and add the value of the Text property to Learn more.  ## Building the Tutorial Screen The next screen we will build is called the Tutorial screen. This screen will display some icons and a button. In your Draftbit app: * Open the Add a screen menu, and add a blank screen. * Rename the screen to Tutorial. * Select the Tutorial screen in the Components tree and an Image Background component. This component will have the same gradient background that we used in the Welcome screen. * With the Image Background component selected, select the Data tab in the Properties panel. * Set the Source Type to Static and select the Image uploaded for the Source. * In the modal, you can choose to upload a custom background image and then select it. It will be used as the source of the Image Background component. * Add a nested Text component in the Image Background that will serve as the title of the screen.  Below the title, we will create three rows where each row will contain an icon and some text. * Add a View component adjacent to the Text component. Go to the Styles tab, give it a margin-top of 20 and margin-bottom of 20. * Add a Row component nested inside the View. From the Properties panel, under Align Horizontally, select Center. * Inside the Row, add Icon and Text.  ## Using Save Custom Block Creating a layout for different screens in the Builder, you will often find yourself repeating the same patterns using the same set of components. An advantage Builder gives here is to re-use them by creating custom blocks for a set of components that are visually similar. You can use these custom blocks either on the same screen or in different ones and customize the information. Let’s take the example of the Tutorial screen. Repeating the steps from adding a View, Row, etc. two more times can be tedious. A good way to repeat the layout of components is to save a specific component tree as a Custom Block. * Hover over the View component in the Components tree. * Open the ellipsis menu (…), and click Save Custom Block. Add a name in the input field and then click save. * Then, click the + icon to open the components drawer, and go to Saved tab. This is where you will find all the saved custom components.  ## Adding an Icon In the right panel under the Configs tab, you can add or modify an icon by its name, color, and size.  The property Name defines the icon. Draftbit supports various icon sets such as Ionicons, Ant Design, Material icons, Font Awesome, etc.  Here is the output after adding icons to the Icon components:  ## How to create a button with an outline There are different types of [button components currently supported in the Builder](https://docs.draftbit.com/docs/buttons). The two most common to use button components are Button Solid and Button Outline. Earlier, we have seen how to use and configure a Button Solid component when creating the Welcome screen. The Button Outline works in the same way. You can add it from Bits > Buttons panel.  Unlike the Button Solid component, it does not have a solid colored background.  On the Tutorial screen, let’s add a Button Outline to navigate (in future) to the next screen.  ## Preview the screen The Draftbit Builder allows you to Preview a screen in two ways. The first way is to use the Preview mode in the Builder itself. It has three views: Web, iOS, and Android. To open it, click the Preview button in the top panel.  The second way to preview a screen is to use [Live Preview](https://docs.draftbit.com/docs/live-preview) on a real device by scanning the QR code using the Expo Go app.  ## Conclusion It has been a long one, we know, but the objective of this tutorial was to make you familiarize with the panels and properties that Draftbit exposes you to build User Interfaces. **Here are some links to help you out:** * [Draftbit documentation on Layout properties](https://docs.draftbit.com/docs/layout) which provides an overview of all the available properties related to Flexbox. * If you want to understand or get familiarize with Flexbox check our guide on [React Native Flexbox Layout using Draftbit’s Visual Builder](https://medium.com/draftbit/the-complete-guide-to-layout-in-draftbit-using-react-native-flexbox-db21c2cfc934). * Check out more [tutorials](https://community.draftbit.com/c/tutorials) on building mobile apps from scratch using Draftbit. ‍ ‍ > 💜 We at [Draftbit love our Community](https://draftb.it/3vXK2K3) and are always open for your questions, feedback and feature requests. You will also find more resources to learn and build with Draftbit. > > Reach out to us on [twitter/@draftbit](https://draftb.it/3fg3ueC) for more questions. --- # How to choose the best BaaS for your native mobile app > Compare backend-as-a-service options for your mobile app. Evaluate features, performance, security, pricing, and ease of use. ### Compare backend-as-a-service options for your mobile app. Evaluate features, performance, security, pricing, and ease of use. Dave Sebekon November 1, 2022 Backend DevelopmentMobile App Development  Over the last 10+ years we’ve seen the emergence of backends-as-a-service and in the last \~5 a refinement and expansion of those services as well as innovative open source projects that have helped to liberate the backend from the dimly-lit dungeons of DB and Systems Administrators™️. This has made it possible for more people to make the leap and leverage backend services and platforms which provide a more modular and less technical way to build. And in even more recent years, the trend toward #NoCode has begun to fuse with that growth giving rise to new players who are changing the field yet again (looking at you Xano).  Here I’ll review some of the things to consider when choosing which BaaS to use for your next mobile application. At the end I’ll compare some of the options which are compatible with Draftbit. Let’s dig in. ## Features Most modern apps have a general set of requirements when it comes to a backend service or platform. You need somewhere to keep and interact with your data at the very least. You’ll also probably want somewhere to store your images and other files. If your app will have users with accounts and the need to restrict access to data based on the user, then you’ll need a way to authenticate your users. More advanced apps might need the addition of logical operations, scheduled tasks, and third-party integrations. Start high-level and define the overall functionality for the features you want your app to eventually include. Will you offer paid subscriptions? Will you need to send emails or push notifications automatically when something happens? What about connecting with external APIs? Or, maybe purge records from a database table or run a calculation at regular intervals? Once you have a good understanding of your app’s initial requirements, you’ll be better able to evaluate which service or platform aligns best with your needs. Most platforms and services will include the core functionality everyone needs, but beyond that you’ll need to compare your needs with what each option offers. ## Ease of use All backends are definitely not created equal and some are easier to use than others. Often this is relative to your level of technical experience, but not exclusively. Just because you can code doesn’t mean you want to. And, some solutions offer a completely no-code environment, however that doesn’t necessarily translate to ‘ease of use’ for you specifically. Some have a nice UI, but their documentation might be confusing to you, etc. Some use more technical vs ‘friendly’ names and wording. So when it comes to choosing which backend to use for your next app, be sure to consider how easy it is for you to use. Factor in your technical abilities, the offering’s UI (user interface) and UX (user experience), their documentation, and the level of engagement from their support team. It’s also helpful to check out online communities and groups to see how existing and past users report their experiences. Most services and products allow you to explore during a trial period, so sign up for all the ones that seem like good candidates and just try them on to see how they feel. Are things labeled clearly and easily understandable? Are you able to find what you’re looking for without hunting around? Is it overall easy to reason about for you? Can you be productive and efficient? Remember, once you choose you’ll likely be staying for a while. ## Performance Performance can truly make or break an app. You want your data and images to load quickly for users regardless of where they are located. While there are many variables which go into the overall performance of your app, a few things are always good to consider. While not strictly the case, it’s generally true that the closer your data is to your user, the faster it is to transfer data. Some solutions will have you pick a single region in which to store your data - such as Eastern U.S. - while others are able to distribute your data to multiple regions making the trip your data takes between your app and the backend much shorter and thereby quicker. If your app is going to be used by people all over the world, rather than just in one country or continent, it might be more important to have your data distributed more broadly. The way in which the data is stored - data store vs database - is also an important factor in the overall performance of your app. Another general guideline is that the closer your data is to the server running the API layer, the faster read and write speeds will be. Some solutions offer a centralized data store where your data is kept together with data from other apps, although not accessible by them. Others offer a dedicated database which stores only your data. Often a dedicated database will be more performant and also typically makes migrating or archiving your data easier. Another consideration is the format in which your data is stored. Some will be the more typical relational database, such as MySQL or PostgreSQL, which stores data in rows inside tables much like a spreadsheet. Others offer what’s called NoSQL databases which store the data in a format often identical or similar to JSON (JavaScript Object Notation). Each format has their advantages and disadvantages which are beyond the scope of this post, but it’s an important consideration before your work begins. When it comes to performance, how you will organize and interact with the data will play a large part in which format is best for your app. Finally, the ability to scale up your resources is important to think about. As your app grows in features, data, use, the underlying infrastructure will need to keep up if you don’t want your performance to suffer. Some offerings make it as easy as a button-click to increase your resources while others might need more configuration. Either way, as your app requires more resources, you’ll want the ability to increase them without major disruption. ## Security Depending on the type of app you’re building, you might have additional security and regulatory requirements which need to be considered. For instance, if your app handles personal health information (PHI) you will need to strictly adhere to HIPAA compliance requirements. Others require compatibility with ISO standards or industry-specific regulations which dictate the way in which data must be stored, secured, processed, etc. If your app has any special requirements like these, be sure to research to make sure that you stay compliant. When in doubt, reach out to them with questions. Sometimes these security measures aren’t advertised but might still be available upon request. ## Price Price is one of the trickiest and yet most important things to think about when choosing your backend. The options have widely varying pricing models and plans. Most charge based on a combination of factors including usage, number of users, amount of data, and others which are bundled into plans. Others have more of an ala carte approach where you pay a separate fee for each service you use. A lot of it will just come down to your budget and requirements. Compromises almost always have to be made - your job is to determine which ones are most acceptable given your situation. But, I’d say if money is not too much of a concern, then definitely prioritize feature compatibility and performance first. ## Deciding While I can’t tell you which solution is best for your particular needs, I’ve created a feature matrix below that might help inform your decision. I’ve included some of the more popular and feature-complete solutions which can be used as the backend for your Draftbit app. Draftbit is a bring-your-own-backend mobile app development platform which means all the ones listed below, and many more, can be used as the backend for your Draftbit app. In fact, almost any backend which provides a REST or GraphQL API is compatible! [You can start a 14-day trial and try it out now.](https://draftbit.com/pricing) ‍  ### **Directus** [Directus Cloud](https://directus.io/cloud) provides a no-code solution for managing users, data, and assets. It includes a database, object storage, logic flows, and instant APIs among other features. [Directus](https://directus.io) also offers an open source version which connects almost any new or existing database. ### **Xano** [Xano](https://www.xano.com/) is a full-featured, turing-complete, no-code BaaS platform that can serve as the backend for all your client-side apps - web, mobile, IoT. You get a scalable server, PostgreSQL database, API builder, cloud functions, and integrations to name just a few. ### **Supabase** [Supabase](https://supabase.com/) offers a database, authentication, instant APIs, objects storage, cloud functions, and integrations among other things. The open source version can be deployed on your own infrastructure and connected to a new or existing PostgreSQL database. ### **Bubble** [Bubble](https://bubble.io/) provides a front-end web app builder and a backend in one convenient platform. It features many things you’ll need to run your web and mobile app including user management, data and file storage, an API builder, cloud functions, integrations, and a lot more. ### **Backendless** [Backendless](https://backendless.com/) provides a platform which includes many services that are common to web and mobile applications - including a data store, user management, push notifications, object storage, and more. --- # How to create a Custom Component in Draftbit > In this article, we'll go through how to create a Custom Component in a Draftbit app (a Text component), and adding the open-source Package that supports the… ### In this article, we'll go through how to create a Custom Component in a Draftbit app (a Text component), and adding the open-source Package that supports the Custom Component (via Packages). Aman Mittalon September 8, 2021 React NativeExpoMobile App DevelopmentProgrammingNo Code   [Draftbit](https://draftb.it/33ySinN) is a low-code mobile app building platform that outputs production-grade React Native source code, using Expo’s SDK. Sometimes, a user might want to accomplish something with Draftbit that has not yet been productized by the Draftbit team. In those instances, the user would be able to build those features by utilizing Draftbit’s Custom Code feature. Custom Code is built of a custom component that allows you to use [JSX code](https://reactjs.org/docs/introducing-jsx.html) with your Draftbit app. At times, it utilizes an open-source package. You can also use any open-source package in this type of component. In a nutshell, here what is covered in this post: * Create a Custom Component in a Draftbit app (a Text component) * Adding the open-source Package that supports the Custom Component (via Packages) ## Set up a Custom Component in a Draftbit app Draftbit app now supports adding a custom component. It is called the **Custom Code** component and allows to inject custom JSX. * To enable using it in the Draftbit app, add it to a screen from the **Layout** tab, click the ‘+’ icon button to add a new component. * Select the **Custom Code** component either by searching for it from the search bar or add it from the **Blocks** tab. * In the Properties panel on the right side, add a reference to the actual custom component that we will create later. * The syntax to create a reference is \ where **MyComponent** is the reference to your custom component. * Notice that the usual tabs in the Properties panel, such as Styles, Configs, etc., are disabled because all of these properties can be set along with the component’s code when creating a custom component.  Let us first test out this new feature by displaying a text by writing JSX code. * Now, click the **Custom** button in the top panel. * It will open up a modal with the same, and it has three tabs: * **Functions**: a feature that allows you to store functions on a screen-by-screen basis. * **Components**: a feature that enables to write JSX and add custom code. * **Packages**: a feature that allows adding third-party libraries. * This guide is going to focus on the last two tabs. * Open the **Components** tab and the code snippet shared below to display a text. In the example below, we are creating a custom component with a name of **SnapComponent**. It uses StyleSheet references to add styles for each component. A **StyleSheet** is an abstraction similar to CSS StyleSheets. import React from ‘react’;\ import { StyleSheet, View, Text } from ‘react-native’; export function SnapComponent() {\  return (\    \      Camera Component\    \  );\ } const styles = StyleSheet.create({\  container: {\    flex: 1,\    alignItems: ‘center’,\    justifyContent: ‘center’\  },\  text: {\    fontSize: 18,\    color: ‘#010101’\  }\ }); * After adding the code for the custom component, make sure to click Save. From the above code snippet, you can observe its React Native component or how code in a React Native app looks.  ## Preview a Custom Component Custom components are not supported by the Web Preview currently when building an app with Draftbit. You can view the result in the **Preview** tab.  Another way to preview a screen is to use Live Preview on an actual device by scanning the QR code using the Expo Go app, to test the features or functionalities building through custom code. Some external components like using a Camera requires hardware and can be tested only on a real device. To scan the QR code, click on the **Preview** button from the top panel.  Here is how the app looks like using the Live Preview mode on an Android device.  ## Adding an open-source package Using Custom Code, Draftbit supports adding additional packages that are open source libraries or utilities available by Expo and React Native. The **Packages** tab allows enabling a new package by adding the correct **Package Name** in the first input field and keep the **Version** of the package to **latest**. For example, as shown below, we are adding the package expo-camera:  To add a new package, click the ‘+’ button and enter the package name and its version. To remove a package at any given time, click the ‘-’ button at the end of the row where the package is listed. ## Further Reading * [More Custom Code Snippets at Draftbit Knowledge Base](https://community.draftbit.com/c/code-snippets). * [How to use Camera from Custom Code in a Draftbit app](https://community.draftbit.com/c/code-snippets/how-to-use-camera-from-custom-code-in-a-draftbit-app). * [How to implement Add to Favorite feature in Draftbit](https://community.draftbit.com/c/code-snippets/how-to-implement-add-to-favourite-feature-in-draftbit) 💜 We at [Draftbit love our Community](https://draftb.it/3vXK2K3) and are always open for your questions, feedback and feature requests. You will also find more resources to learn and build with Draftbit. Reach out to us on [twitter/@draftbit](https://draftb.it/3fg3ueC) for more questions. --- # How to Create a Native Mobile App For Your Backendless Back-End > In this tutorial, I’ll show you how to build a mobile app front-end from scratch using a Backendless real-time database back-end and Backendless API services. ### In this tutorial, I’ll show you how to build a mobile app front-end from scratch using a Backendless real-time database back-end and Backendless API services. Cahyo Subrotoon September 27, 2021 Low CodeMobile App Development   In this tutorial, I’ll show you how to build a mobile app front-end from scratch using a Backendless real-time database back-end and Backendless API services. Backendless is one of many back-ends that you can connect to [Draftbit](https://draftbit.com/?utm_source=medium\&utm_medium=referral\&utm_campaign=baas-guides). It allows you to create apps without server coding. It uses the implementation of API to make various services available such as user management, relational data, and more. It also provides programmable services that supply standard server functions. Draftbit ships a preconfigured [Backendless integration](/integrations/backendless/) — see what’s included before you start. If you are using other alternatives such as Supabase, Contentful, or Xano, please refer to [the guides here](https://docs.draftbit.com/docs/rest-api-integrations).  ## **Introduction** To follow this tutorial, you need to have a Backendless back-end already. I’ll show you what API endpoints are returned from Backendless, but you have to create those endpoints in Backendless for your data. **In a nutshell, here what is covered in this post:**  * Connect Backendless to Draftbit  * **GET**: Populate a list of text with data from Backendless  * **GET**: Populate a text component with single-record from Backendless  * **POST**: Create a new record in a Backendless database * **PUT**: Update data in a Backendless database * **DELETE**: Delete data in a Backendless database ## **Set up your application & API** If you don’t have a Backendless account, create one [here](https://develop.backendless.com/registration?ref=draftbit). Once you have a Backendless account, you need to create a new application. To do that, you need to do the following: * Click on the button **Create new app**. * Enter the name of the app. * Click the button **Create** to create the new app.  After the app configuration, you must have a custom datatable or configure one in Backendless. We are using a custom data table called **Gadget** with pre-populated custom data.  Great! Now that we’ve got a table with some data in it. You need the Base URL to perform read and write operations on Backendless. The Base URL will be in the syntax :  **//data** You are required to pass in your application ID and your REST API key. To get your Backendless application ID and REST API key, you need to: * Navigate to Manage. * Copy the and by click the copy icon   ## **Connect Backendless to Draftbit** You need to add the Backendless Base URL in your Draftbit app. To do that, simply follow the instructions below: * Navigate to Data from the left navbar. * From the Connect a Service menu, click on Backendless.  * Enter a name for your REST API and paste the Base URL you copied before into the Base URL input field.  * Save your progress by clicking the save button.  ## **Populate a list with multiple records from Backendless** Before populating a list with multiple records from Backendless, you need to add some components to a blank screen in Draftbit so that your Layout Tree looks like the snapshot below.  To populate a list with multiple records, you need to add **GET** Endpoint. * Navigate to Data from the left-hand navbar.  * Select Backendless Base service and **Add Endpoint**. * Name your endpoint. And Make sure to select **GET** as the HTTP method. * Add the base name path: /{{table\_name}} to the URL path. The basename path is the name of the data table you initially created in Backendless. (in our case, it is going to be **Gadget**). * Click the Test button to verify the response coming from the Backendless Base.  You should get a **200 OK** JSON response identical to your schema in Backendless Base. If you don’t, make sure that you copied & pasted your Base URL and Table Name paths correctly.   * Save your progress by hitting Save.   Now, we need to map the GET request’s response to the components on your screen in Draftbit. * First, select the Fetch component in the Layout Tree.  * From the Data tab of the Properties panel, select the name of the Backendless and **GET** endpoint you have just created in the service section.  * In the Configuration section, enter the name of the table where the data is stored in Backendless. You should see the same JSON response in the Fetch Preview that you saw when testing the **GET** endpoint in the Data modal. * Next, add the List component in the Layout Tree and then go to the Data tab, select the Top-level Response for its Data field.  * Select each component in your Fetch-List (e.g. Text, Image, Video, Button). * Map data variables to the components from their respective Data tabs. For example, we typed the data variable into the Text component: {{listName}} and then mapped the field value **name** to the data variable. ## **Populate a single component with a single record from Backendless** Populate a single component with a single record from Backendless has a similar Endpoint with the tutorial above. After adding a new Endpoint and select **GET** as the HTTP method. You need to: * Add the /{{table\_name}}/{{id}} to URL path (in our case, it is going to be **Gadget**) and then add a Test value for the {{id}}.  * To verify the response from the Backendless Base, click the Test button.  If you don’t get a 200 OK **JSON** response that matches your schema in Backendless Base, make sure you copied and pasted your Base URL and Table Name paths correctly, and then save your progress by clicking Save.  We need to map the **GET** request’s response to the components on your screen in Draftbit.  * Select the Fetch component in the Layout Tree.  * Select the name of the Backendless and **GET** endpoint you have just created in the service section from the Data tab of the Properties panel. * In the configuration section, enter the **id** that you copy from Backendless.  You should see the same JSON response in the Fetch Preview that you saw when testing the **GET** endpoint in the Data modal. You may now map data variables to components. * Select each component in your Fetch-List (e.g., Text, Image, Video, Button).  * Map data variables to the components from their respective Data tabs. For example, we typed the data variable into the Text component: {{fetchName}} and then mapped the field value **name** to the data variable.  ## **Create a new record in a Backendless database** We have learned to populate data from Backendless to the front-end of our mobile app. Now let’s try making a new record. For this section, you need to use at least one component: * Accepts user input * Has a **Field Name** prop to **PUT** data using Backendless REST API Examples of these include: * [Text Input](https://docs.draftbit.com/docs/inputs#text-input) * [Text Area/Text Field](https://docs.draftbit.com/docs/inputs#text-area--text-field) * [Checkbox](https://docs.draftbit.com/docs/inputs#checkbox) * [Slider](https://docs.draftbit.com/docs/inputs#slider) * [Radio Button Group](https://docs.draftbit.com/docs#inputs#radio-button-group) * [Radio Button](https://docs.draftbit.com/docs#inputs#radio-button) You also need a Touchable component such as a Button to submit data from within the app. With the components in place, let’s create our **POST** endpoint.  * Open the data menu and select Backendless Base service. * Add endpoint and name your endpoint. Please ensure to select **POST** as the HTTP method.  * Add the /{{table\_name}} to URL path (in our case, it is going to be /Gadget).  * We need JSON body structure to submit a **POST** request. Add one or many {{variable}} for test values. Click Body Preview to validate the structure of the Body in the request.  For our example, the Body Structure will look like this: {   “title”: {{textInputValue}} } * Click the Test button to verify the response coming from the Backendless Base.  * You should get a **200 OK** JSON response that is identical to your schema in Backendless Base. If you don’t, make sure that you copied & pasted your Base URL and Table Name paths correctly.  * Save your progress by hitting Save.  Now that we have a POST request working. Let’s attach some components to your Draftbit app’s screen. * First, for your **Input** component, make sure you have set the Field Name to a unique value.  * Next to your **Button** component, go to the Interactions tab (on your right side).  * Configure a new Action with select API Request.  * Select Backendless service and POST endpoint.  * Map the field names of your Input component to the data variable in the POST request.  Now you’re ready to test!  * Put your app into Browser Preview or Live Preview mode. * Enter some values into your Input components.  * Tap your Touchable to POST the data to Backendless.   If you have any trouble, the most common reasons are typos in data variables or field names. Make sure you double-check those! If you’re still struggling, talk to us in the Draftbit Community. ## **Update data in a Backendless database** This section uses a similar PUT request as when we create a new record in a Backendless database. Please refer to the previous section for the prerequisite. To update your data, please follow the steps below: * Navigate to Data from the left-hand navbar.  * Select your Backendless Base service. * Name your endpoint. * For the method section, you can select **PUT** as the HTTP method.  * Add the /{{table\_name}}/{{id}} to URL path (in our case, it is going to be **Gadget**) * Add a Test value for the {{id}}.  * Add a {{variable}} for test values.  * Click Body Preview to validate the structure of the Body in the request.  For our example, the Body Structure will look like this: {   “name”: {{textInputValue}} } * Click the Test button to verify the response coming from the Backendless Base.  Please make sure that you get a **200 OK** JSON response identical to your schema in Backendless Base. If you don’t, make sure that you copied & pasted your Base URL and Table Name paths correctly.  * Lastly, save your progress by hitting Save.   ## **Delete data in a Backendless database** We have learned to update data in the Backendless base record. In this final section, let’s try to delete a record from the table. * Select your Backendless Base service and add Endpoint.  * Give your endpoint a name. * Select **DELETE** as the HTTP method. * Add the /{{table\_name}}/{{id}} to URL path (in our case, it is going to be **Gadget**) and then add a Test value for the {{id}}.  * You can skip HTTP Headers and click the Test button to verify the response coming from the Backendless Base.  If you don’t get a **200 OK** JSON response identical to your schema in Backendless Base, please double check your base URL and Table Name paths. Please ensure that it has been correctly copied and inserted. *  Finally, you can save your progress by hitting Save.  ## **Wrapping up** The foundation of client-server interactions in mobile apps is sending data to and receiving data from the Backendless. The above tutorial demonstrated how to **GET** list items and single items from Backendless in Draftbit and **POST** an item from Draftbit into Backendless. We also showed how to **PUT** and **DELETE** data in Backendless from Drafbit in the preceding tutorial. In future tutorials, we’ll also show you how to authenticate Draftbit app users with Email/Password and make authenticated server requests in a future tutorial. --- # How To Create a Native Mobile App For Your Supabase Back-End > This tutorial will show you how to create a native mobile app from scratch using Supabase as the back-end database and Draftbit as the React Native builder. ### This tutorial will show you how to create a native mobile app from scratch using Supabase as the back-end database and Draftbit as the React Native builder. Shanika Wickramasingheon September 23, 2021 Low CodeMobile App Development   This tutorial will show you how to create a native mobile app from scratch using [Supabase](https://supabase.io/) as the back-end database and [Draftbit](https://draftbit.com/) as the mobile app. Draftbit is an interactive visual development platform based on open-source frameworks and libraries. So you will be using open-source React Native to build your mobile app. Draftbit ships a preconfigured [Supabase integration](/integrations/supabase/) — see what’s included before you start. Using a REST API, you can integrate your Draftbit app to any [back-end-as-a-service (BaaS)](https://www.cloudflare.com/learning/serverless/glossary/backend-as-a-service-baas/) platform like [Backendless](https://backendless.com/), [Xano](/integrations/xano/), or [Contentful](/integrations/contentful/). If you want to know more about how to do that, you can refer to [these guides](https://docs.draftbit.com/docs/rest-api-integrations).  ## Introduction This tutorial is for you if you already have a Supabase back-end and are very familiar with it. But if you do not have a Supabase account, you can create one [here](https://app.supabase.io/api/login). Supabase makes creating endpoints a very easy task, and I will show you what API endpoints you need to use from Supabase for data manipulation.  In this tutorial, we will show you how to: * Connect a Supabase back-end to a Draftbit mobile app.  * Fetch data from the Supabase back-end and populate them into a List View screen of your Draftbit mobile app. * Fetch only one record from the Supabase back-end and populate it into an Item View screen of your Draftbit mobile app. * Create a new record in a Supabase database through your Draftbit mobile app. * Update a record in a Supabase database through your Draftbit mobile app. * Delete a record in a Supabase database through your Draftbit mobile app. Now let’s move on to setting up your data and API in Supabase.   ## Set up your data & API in Supabase First of all, in your Supabase account, you need to create a new database. Here’s how you can do that: 1. Click \`New Project\` to create a new database. 2. Choose your organization from the modal, enter a name and a password for the project, select a region to host it, and click the Next button. 3. After initializing a project in Supabase, click on the project to see the project dashboard.  Select the database panel from your project dashboard, select the database panel, click on the Table Editor, and add New Table. For this tutorial, we will add a new data table called Groceries with two columns and add the following data for the two columns. * Item: {Oreo Cookies, Peanut Butter} * Price: {3.67,4}  Now we have got our table with some data in it. To access the data in this table, we need to use the REST API that Superbase provides. To connect the API in the Draftbit app, you need the following two values: * Base URL of the REST API, which is in the format: https\://.supabase.co/rest/v1 where the is a unique domain name generated by Supabase. * The SUPABASE\_KEY is the secret key. You can all these unique values from the API button on the left menu bar of your Supabase’s dashboard. Let’s go there and do the following. * Click on the table name(Groceries) in the Table and Views section * From the right specs panel, switch to the tab that says Bash. Then you will find the Base URL, the SUPABASE\_KEY, and the headers you need to pass for a specific HTTP request you send from the Draftbit app. * To view the SUPABASE\_KEY, switch the Key mode from Hide to anon ## Set up your Draftbit front-end  If you don’t have a Draftbit account, create one [here](https://draftb.it/3k94dAs). Once you’ve got your account set up, Create a New App. For this demo, you can select Start From a Blank App and proceed to the Builder.  ## Connect Supabase to Draftbit First, add Authorization and apikey headers to your Draftbit app. To do that, go through the following steps. * Open the Settings tab on the left-navbar. * In the Project Settings panel that opens, navigate to App Variables. * Copy the apikey from the Supabase and add Authorization and APIKey header values. * The Authorization header value requires you to enter a Bearer token. The syntax is Bearer \. * Enter another key to access the apikey header and the value for it. * The apikey header value requires you to enter the Supabase key. The syntax is \. * In place of \ paste your own (from the previous section) and then click Add. * Click Save.  Next, do the following steps to add the Supabase API information in your Draftbit app.   * Open the Data tab from the left navbar.  * From the Add your custom API menu, click on Add Rest API. * In Step 1, give a name to your REST API service and then paste your Base URL into the Base URL input field.  * In Step 2, Click the + from the Headers & authentication section to add a new Header. * Type Authorization for the key. * Select the Global Variable for Authorization you added in the previous section. * Type apikey for the key of another header. * Select the Global Variable for apikey you added in the previous section. * Click Save.  Now that we’ve got the Supabase base service connecting to a Draftbit app, we can utilize all of Supabase’s HTTP methods to access and manipulate data. In the next section, we will GET a list of data, GET an individual item from the Supabase database and POST a new item to it. ## GET: Populate a List View screen with list data from Supabase In a blank screen in Draftbit, add the following components as nested components. * Fetch * List  * View * Text  After adding them, your Layout Tree will look like the following screenshot.  Initially, you will see an empty or a loading screen because we haven’t populated the components’ data. We will do that in the next sections.  Now, open the Data menu from the left-hand navbar as you did previously,  and do the following steps in the popup modal as illustrated from the below gif. * Select your Supabase API service, and click Create New endpoint.  * In Step 1, Give a name to your endpoint and leave GET as the HTTP method.  * In Step 2 Paths and Prameters section, add the /?select=\* to the URL path (in our Groceries example, it’s /Groceries?select=\* ).  * You can safely skip Step 3. * In Step 4, click on  Test to test your endpoint.  If you did the above steps correctly, you should get a 200 OK response with data in your schema in Supabase as a JSON object. If you got a bad response, make sure that you copied & pasted your Base URL and Table Name paths correctly and that your data table has actual data in it. After creating the endpoints, Save & close the modal.  Next, we need to map the GET request’s response to the components on your screen in Draftbit. You can see how to do that in the GIF below.  * From the Layout Tree, select the Fetch component.  * From the Data tab of the Properties panel (3rd from the left), select the Supabase base API service and GET endpoint you have just created. After creating it, you should see the same JSON response in the Fetch Preview when testing the GET endpoint. * Next, select the List component in the Layout Tree. From its Data tab, select the Top-level response for its Data field Now all is set to map data variables to the text component.  * In this example, we typed two data variables into a single Text component: {{itemName}} and {{price}} in the input text field in its data tab  * and then in the variables section, map those field values ‘Item’ and ‘Price,’ respectively, to the data variables. If you did this correctly, you should see the screen populated with fetched data from your endpoint from the preview.  ## GET: Populate an Item View screen with single-item data from Supabase Again add a new blank screen in Draftbit, add the following components as nested components. * Fetch * List  * View * Text  After adding them, your Layout Tree will lo like the following screenshot.  Next, open the Data menu from the left-hand navbar as you did previously,  and do the following steps in the popup modal as illustrated from the below gif.  * Select your Supabase API service, and click Create new endpoint.  * In Step 1, give a name to your endpoint and leave GET as the HTTP method.    * In Step 2 Paths and Parameters section, add //?select=\*\&id=eq.{{id}} to the URL path (in our Groceries example, it’s /Groceries/?select=\*\&id=eq.{{id}})  * Next, add the test value for {{id}}.   * Skip Step 3. * Click Test to test your endpoint.  If you did the above steps correctly, you should get a 200 OK response with exactly one result for the test value you input from your schema in Supabase as a JSON object. If you got a bad response, make sure that you copied & pasted your Base URL and Table Name paths correctly and that your data table has actual data in it. After creating the endpoints, Save & close the modal. Next, we need to map the GET request’s response to the components on your screen in Draftbit. You can see how to do that in the GIF below.  * From the Layout Tree, select the Fetch component.  * From the Data tab of the Properties panel (3rd from the left), select the Supabase base API service and GET endpoint you have just created. In the ‘Configurations’ Panel, select enter no 1 to select only the first record. After creating it, you should see the same JSON response in the Fetch Preview when testing the GET endpoint. Now all is set to map data variables to the text component.  * Next, select the List component in the Layout Tree. From its Data tab, select the Top-level response for its Data field. * Type the data variables as  {{item}} and {{price}} in the input text field of the Text components’ data tab. * Then in the variables section, map those field values ‘item’ and ‘price,’ respectively, to the data variables. You should see a single item populated with fetched data from your endpoint like in the following figure if you did this correctly.  ## POST: Create a new record in a Supabase database Now that we are familiar with fetching data from a Supabase back-end into our mobile app front-end let’s try adding a new record in our Supabase table. For this section, you need to use at least one component that accepts user input and has a Field Name prop to POST data using Supabase REST API. You can use one of the following components for that.  * [Text Input](https://docs.draftbit.com/docs/inputs#text-input) * [Text Area/Text Field](https://docs.draftbit.com/docs/inputs#text-area--text-field) * [Checkbox](https://docs.draftbit.com/docs/inputs#checkbox) * [Slider](https://docs.draftbit.com/docs/inputs#slider) * [Radio Button Group](https://docs.draftbit.com/docs/#inputs#radio-button-group) * [Radio Button](https://docs.draftbit.com/docs/#inputs#radio-button) In addition, you need a Touchable component like a Button to attach the POST action. After you have created these components, we will create our POST endpoint.  Now, open the Data menu from the left-hand navbar as you did previously,  and do the following steps in the popup modal as illustrated from the below gif. * Select your Supabase API service, and click New Endpoint.  * In Step 1, give a name to your endpoint and select POST as the HTTP method.  * In Step 2 Paths and Parameters section, add your / to the URL path (in our Groceries example, it’s /Groceries ).  * In Step 3, we need to define the JSON Body Structure that will shape the request. For our simple example, the Body Structure will look like this:             {                 “Item”: {{item}},                  “Price”: {{price}}              } Set test values for your two data variables.   * In Step 4, enter the header ‘Prefer’ and its value ‘return=representation.’ * In Step 5, Click Test to test your endpoint.  Once you follow the above steps, you should get a 200 OK response with exactly the new record as a JSON you have entered for your schema. In case you get a  bad response, make sure that you copied & pasted your Base URL and Table Name paths correctly and that your data table has actual data in it. After creating the endpoints, Save & close the modal. Now we have a working POST request. Let’s map its response to the components on your screen in Draftbit. You can see how to do that in the GIF below.  * First, for each input component, make sure you have set the Field Names (found in the Configs tab, second from the left) to unique values. Name the two Text Input components’ field names as  “Item” and “Price,” respectively. * Next, on your Touchable component (Add Button), go to the Interactions tab on the Button Outline section located on the far-right-hand side.  * Select the  Supabase API Service and the Add New Record Endpoint. * Then add the configuration for the body request to be sent by selecting the values for {{Item}} and {{Price}} input fields. After completing the above steps, you should see the list view populated with fetched data, including the newly added item from your endpoint if you did this correctly.  ## PATCH: Update a new record in a Supabase database Now we know how to enter a new record to the Supabase database from our mobile app front-end. Let’s try updating an existing record there. Open the Data menu from the left-hand navbar,  and do the following steps in the popup modal as illustrated below. * Select your Supabase API service, and click New Endpoint.  * In Step 1, give a name to your endpoint and select PATCH as the HTTP method.  * In Step 2 Paths and Parameters section, add your /?column-name=eq.{{column-name}} to the URL path (in our Groceries example, it’s /Groceries?id=eq.{{id}} ). * Enter the value for the variable {{id}}. * In Step 3, we need to define the JSON Body Structure that will shape the request. For our simple example, the Body Structure will look like this:             {                 “Item”: {{itemName}},              } *  Enter the value for the {{itemName}} or the value you want to replace. * In Step 4, enter the header ‘Prefer’ and its value ‘return=representation.’ * In Step 5, Click Test to test your endpoint.   If you follow the above steps correctly, you should get a 200 OK response with the updated record as a JSON response. In case you get a  bad response, make sure that you copied & pasted your Base URL and Table Name paths correctly and that your data table has actual data in it. After creating the endpoints, Save & close the modal.  Now we have a working PATCH request. Let’s map its response to the components on your screen in Draftbit. Like you created text inputs to enter data, create one text input and a  Touchable Component to send updates. The below gif shows you how to continue with the rest of the steps.  * First, in the input component, make sure you have set the Field Name (found in the Configs tab, second from the left) as  “Item.” * Next, on your Touchable component (Update Button), go to the Interactions tab on the Button Outline section located on the far-right-hand side.  * Select the  Supabase API Service and the Update a Record Endpoint you created. * Then add the configuration for the body request to be sent by selecting the values for {{id}} and the {{Item}} input field. After completing the above steps, you should see the list view populated with the updated data,  ## DELETE: Delete records in a Supabase database Finally, we will delete an existing record in our Supabase database. Open the Data menu from the left-hand navbar, * Select your Supabase API service, and click New Endpoint.  * In Step 1, give a name to your endpoint and select DELETE as the HTTP method.  * In Step 2 Paths and Parameters section, add your /?column-name=eq.{{column-name}} to the URL path (in our Groceries example, it’s /Groceries?id=eq.{{id}} ). * Enter the value for the variable {{id}}. * You can skip Steps 4 and 5. * In Step 5, Click Test to test your endpoint.  If you correctly follow the above steps, you should get a 200 OK response with an empty JSON response. In case you get a  bad response, make sure that you copied & pasted your Base URL and Table Name paths correctly and that your data table has actual data in it. After creating the endpoints, Save & close the modal.  As you did in the previous section, you can add a button to bind the delete endpoint. If you have done the configurations successfully, you will see no record in your Supabase database.  ## Wrapping up How to do CRUD operations through your Draftbit mobile app is important for interacting with your Supabase database. This tutorial taught you how to GET a single item and a list of items from a Supabase back-end to your Draftbit app. Also, you learned how to add a new item, update an item and delete data in Supabase through the Draftbit front-end. --- # How to create a native mobile app for your Xano back-end > In this tutorial, we'll show you how to build the core CRUD functionalities of a mobile app from scratch using a Xano back-end. The mobile app will be built… ### In this tutorial, we'll show you how to build the core CRUD functionalities of a mobile app from scratch using a Xano back-end. The mobile app will be built in open-source React Native using Draftbit, a low-code visual development platform. Apps built in Draftbit can be published to the iOS and Android app stores. Nick Selmanon September 7, 2021 React NativeBackend DevelopmentApplication DevelopmentExpoNo Code   ‍ In this tutorial, I will show you how to build the core CRUD functionalities of a mobile app from scratch using a Xano back-end. The mobile app will be built in open-source React Native using [Draftbit](https://draftb.it/3k94dAs), a low-code visual development platform. Apps built in Draftbit can be published to the iOS and Android app stores. Draftbit ships a preconfigured [Xano integration](/integrations/xano/) — see what’s included before you start. [Draftbit](https://draftb.it/3k94dAs) apps can be connected to virtually any back-end-as-a-service (BaaS) platform via REST API. So if you are using Xano alternatives like Backendless, Supabase, or Contentful then — chances are — [there’s a guide](https://docs.draftbit.com/docs/rest-api-integrations) for those as well. ## Introduction This tutorial is for anyone who already has a Xano back-end. I will show you what API endpoints need to be returned from Xano, but it’ll be up to you to construct those endpoints for your data in Xano. Luckily, Xano makes that easy (as you’ll soon see!). What this tutorial will cover: * Connect a Xano back-end to Draftbit * GET: Populate a List View screen with list data from Xano * GET: Populate an Item View screen with single-item data from Xano * POST: Create a new record in a Xano database **Going further:** In future tutorials, I will show you how to create [PATCH](https://docs.draftbit.com/docs/xano#update-data-from-draftbit) (update a record in a Xano database) and [DELETE](https://docs.draftbit.com/docs/xano#delete-data-from-draftbit) (delete a record in a Xano database) requests from Draftbit. I will also show you how to set up [EMAIL/PASSWORD AUTHENTICATION](https://docs.draftbit.com/docs/xano#authentication-with-xano-and-draftbit) for a Xano back-end in Draftbit, including Sign Up, Sign In, and Log Out. I will also show you how to make your CRUD requests authenticated, which allows your app to be multi-user. [Subscribe to Draftbit](https://medium.com/draftbit) so you don’t miss that one! *UPDATE: Click on the CAPITALIZED links above for Draftbit documentation on Patch, Delete, and Auth.* ## Set up your data & API in Xano If you do not have a Xano account, create one [here](https://app.xano.com/admin/login). Once you have a Xano account, you need to create a new database. Here’s how: ‍  ‍ 1. Go to the Database tab from the left menu bar and click the button Add Table. 2. Create a TABLE NAME, add a DESCRIPTION, and make sure to check ADD BASIC CRUD ENDPOINTS to allow Xano to generate API endpoints for CRUD operations. 3. Click Add Table to generate the table. We are using a custom data table for this documentation in a database called Cars. It represents the tableName and has the following data fields: * model: {Model S, LaFerrari} * manufacturer: {Tesla, Ferrari} ‍  ‍ Great! Now that we’ve got a table with some data in it, let’s use it. We need to use the REST API that Xano provides to access the data. All of your API endpoints can be found in the **API** submenu on the left-hand side of Xano’s dashboard. Let’s go there now. Before we set up any endpoints, we need the Base URL that Xano gives us. It can be found in the upper-right corner of your API page. The Base URL will be in the format https\://.n7.xano.io/api:. ‍  ‍ Copy your Base URL to your clipboard, and let’s head over to Draftbit! ## Set up your Draftbit front-end If you don’t have a Draftbit account, create one [here](https://draftb.it/3k94dAs). Once you’ve got your account set up, Create a New App. For this demo, you can select Start From a Blank App and proceed to the Builder. ## Connect Xano to Draftbit Still got that Base URL copied to your clipboard? Great! To add the Xano API Base URL in your Draftbit app, open the Data tab from the left navbar. From the Add your custom API menu, add a new Rest API. And then in Step 1, name your REST API service and then paste your Base URL into the Base URL input field. You don’t need to worry about Step 2 and Step 3. Save your base service by hitting Save. ‍  ‍ Now that we’ve got the Xano base service connecting to a Draftbit app, we can utilize all of Xano’s HTTP methods to access and manipulate data. As a refresher, we are going to GET a list of data, GET an individual item, POST a new item, PATCH a record, and DELETE a record in the sub-tutorials below. ## GET: Populate a List View screen with list data from Xano In a blank screen in Draftbit, add a nested Fetch component, List component, View component, and a Text component so that your Layout Tree looks something like the screenshot below. ‍  ‍ Your screen will be empty/show a loading indicator and that’s ok! We still need to GET data to populate the component(s) on the screen with. Let’s do that now. *These next several steps are illustrated in the GIF below.* Open the Data menu again, from the left-hand navbar. Select your Xano base service, and now let’s Add Endpoint. In Step 1, name your endpoint and leave GET selected as the HTTP method. In Step 2, add your / to the URL path (in our Cars example, it’s /cars). You can safely skip Step 3, and in Step 4, click **Test** to test your endpoint. If you did everything correctly, you should get a 200 OK JSON response that is identical to your schema in Xano. If you got a bad response, make sure that you copied & pasted your Base URL and Table Name paths correctly, and that your data table has actual data in it. Save & close the modal. ‍  ‍ Now, we need to map the GET request’s response to the components on your screen in Draftbit. *These next several steps are illustrated in the GIF below.* First, select the Fetch component in the Layout Tree. From the Data tab of the Properties panel (3rd from the left), select the Xano base service and GET endpoint you have just created. You should see the same JSON response in the Fetch Preview that you saw when Testing the GET endpoint in the Data modal. Next, select the List component in the Layout Tree. From the Data tab, select the **Top-level Response** for its Data field. *Note: Even though the components on your screen are still empty, you should now see that the Fetch-List is iterating over each item in your GET request because there will be >1 “empty” component on your screen.* Now you’re ready to map data variables to components. Select each component in your Fetch-List (e.g. Text, Image, Video, Button) and map data variables to the components from their respective Data tabs. In our simplistic example, we typed two data variables into a single Text component: {{manufacturer}} {{model}} and then mapped the field values manufacturer and model, respectively, to the data variables. If you did this right, you should see a populated list of fetched data from your endpoint, like so: ‍  ‍ ## GET: Populate an Item View screen with single-item data from Xano In a blank screen in Draftbit, add a nested Fetch component, View component, and a Text component so that your Layout Tree looks something like the screenshot below. ‍  ‍ Your screen will be empty/show a loading indicator and that’s ok! We still need to GET data to populate the component(s) on the screen with. Let’s do that now. *These next several steps are illustrated in the GIF below.* Open the Data menu again, from the left-hand navbar. Select your Xano base service, and now let’s Add Endpoint. In Step 1, name your endpoint and leave GET selected as the HTTP method. In Step 2, add your //{{id}} to the URL path (in our Cars example, it’s /cars/{{id}}), and then add a test value for {{id}}. You can safely skip Step 3, and in Step 4, click **Test** to test your endpoint. If you did everything correctly, you should get a 200 OK JSON response that is identical to your schema in Xano and returns exactly one result for the test value you input. If you got a bad response, make sure that you copied & pasted your Base URL and Table Name paths correctly, and that your data table has actual data in it. Save & close the modal. ‍  ‍ Now, we need to map the GET request’s response to the components on your screen in Draftbit. First, select the Fetch component in the Layout Tree. From the Data tab of the Properties panel (3rd from the left), select the Xano base service and GET endpoint you have just created. You should see the same JSON response in the Fetch Preview that you saw when Testing the GET endpoint in the Data modal. Now you’re ready to map data variables to components. Select each component in your Fetch-List (e.g. Text, Image, Video, Button) and map data variables to the components from their respective Data tabs. In our simplistic example, we typed two data variables into a single Text component: {{manufacturer}} {{model}} and then mapped the field values manufacturer and model, respectively, to the data variables. If you did this right, you should see a single item populated with fetched data from your endpoint, like so: ‍  ‍ ## POST: Create a new record in a Xano database Now that we’ve got the hang of fetching data from a Xano back-end into our mobile app front-end, let’s try creating a new record. For this section, you need to use at least one component that: * accepts user input and * has a Field Name prop to POST data using Xano REST API. Examples of these include: * [Text Input](https://docs.draftbit.com/docs/inputs-controls) * [Text Area/Text Field](https://docs.draftbit.com/docs/inputs#text-area--text-field) * [Checkbox](https://docs.draftbit.com/docs/inputs#checkbox) * [Slider](https://docs.draftbit.com/docs/inputs#slider) * [Radio Button Group](https://docs.draftbit.com/docs/#inputs#radio-button-group) * [Radio Button](https://docs.draftbit.com/docs/#inputs#radio-button) You’ll also need a Touchable component (such as a Button) to attach the POST action. ‍  ‍ With the components in place, let’s create our POST endpoint. Open the Data menu again, from the left-hand navbar. Select your Xano base service, and now let’s Add Endpoint. In Step 1, name your endpoint and select POST for the HTTP method. In Step 2, add your / to the URL path (in our Cars example, it’s /cars). In Step 3, we need to define the JSON Body Structure that is going to shape the request. This Body Structure depends on the shape of your data, and can be found in the **Run & Debug** menu of your Endpoint debugger in Xano. ‍  ‍ For our simple example, the Body Structure will look like this: {\   “model”: {{model}},\   “manufacturer”: {{manufacturer}}\ } Set test values for your two data variables. ‍  ‍ You can safely skip Step 4, and in Step 5, click **Test** to test your endpoint. If you did everything correctly, you should get a 200 OK JSON response that is identical to your schema in Xano and returns exactly one result for the test value you input. If you got a bad response, make sure that you copied & pasted your Base URL and Table Name paths correctly, and that you have the correct JSON schema for POSTing data into your table. Save and close the modal. ‍  ‍ Now that we have a POST request working, let’s attach it to some components in your Draftbit app’s screen. *These next several steps are illustrated in the GIF below.* First, for each of your **input** components, make sure that you have set the Field Names (found in the Configs tab, second from the left) to unique values. I recommend you name them identical to your data table’s field names. In my simplistic example, I’ve named my two Text Input components’ field names “manufacturer” and “model,” respectively. Next, on your **Touchable** component (in my example, it’s a Button Outline), go to the Actions tab (far-right-hand side). Configure a new Action for **On Tap:** API Request. Select the Xano service and POST endpoint we just created from the dropdowns. And finally, map the field names of your Input components to the data variables in the POST request (again, in my example it’s manufacturer <> “manufacturer”, and model <> “model”). Now you’re ready to Test! Put your app into Browser Preview or Live Preview mode, enter some values into your Input components, and then tap your Touchable to POST the data to Xano. ‍  ‍ *Note: If your screen is set up like mine above, you won’t automatically see the new data in your on-screen List. That’s because Xano’s GET HTTP request isn’t “real-time” (i.e. it’s not continuously fetching). To see if your data was successfully posted to Xano, just refresh Draftbit in your browser and — voila! — there’s your new list item. You should also see the new item in your Xano database.* If you weren’t successful, the most common reasons are typos in field names or data variables, so go back and double-check those! If you’re still struggling, come and talk to us in the [Draftbit Community](https://community.draftbit.com). ## Wrapping up Sending data to, and Receiving data from, the back-end (in this case, Xano) are the foundation of client-server interactions in mobile apps. In the above tutorial, we showed you how to GET list items and single items from Xano in Draftbit, and how to POST an item from Draftbit into Xano. In future tutorials, we’ll cover how to PATCH and DELETE data in Xano from Draftbit. We’ll also show you how to Authenticate users of your Draftbit app with Email/Password, and how to make authenticated requests to the server. — If you enjoyed this tutorial, please give [Draftbit](https://twitter.com/draftbit), [Xano](https://twitter.com/nocodebackend), and [Nick](https://twitter.com/nickselman) a shoutout on Twitter. And if you need help or have questions, visit us at the [Draftbit Community](https://community.draftbit.com) forums. --- # How to Fetch Data from a REST API in an App UI Using Draftbit > In the first tutorial in the series on creating a Bookbit Starter app from scratch, the focus was on covering the UI elements that the Draftbit’s Builder… ### In the first tutorial in the series on creating a Bookbit Starter app from scratch, the focus was on covering the UI elements that the Draftbit’s Builder offer and how to implement them to create mobile app screens. Aman Mittalon September 8, 2021 React NativeNo CodeLow CodeMobile App Development   **We have a new and improved tutorial series:** [**Build an Instagram Clone from Scratch**](https://draftbit.com/blog/building-an-instagram-clone-from-scratch-with-no-code-part-1-sign-up-sign-in-and-log-out)**. This new series includes a real back-end, authentication, and more complex UXs. If you’d like to continue with the Bookbit tutorial, proceed! If you’d like to check out the Instagram Clone series, head over** [**here**](https://draftbit.com/blog/building-an-instagram-clone-from-scratch-with-no-code-part-1-sign-up-sign-in-and-log-out)**.** In the [first tutorial](https://draftbit.com/blog/how-to-build-an-app-ui-from-scratch-using-draftbit) in the series on creating a Bookbit Starter app from scratch, the focus was on covering the UI elements that the Draftbit’s Builder offer and how to implement them to create mobile app screens. In this tutorial, let’s apply this knowledge and learn how to use real-time data in the screens when building an application. To fetch real-time data in an app, Draftbit Builder supports integrating REST APIs. You can connect nearly any third-party Service that exposes its REST API endpoints to a Draftbit app. We have a list of REST API integrations [here](https://docs.draftbit.com/docs/rest-api-integrations#official-draftbit-rest-api-integration-guides) that are officially supported. For the current example, let’s build the Discover Books screen using Example Data API. ### Here is what we are building  ## What is Example Data API? Example Data API is a REST API service provided by Draftbit to start building a data-driven app without having to create a backend. It uses real (or real-looking) data to help you make better design decisions along the way. Data is gleaned from several open or creative commons sources. There are different data resources to satisfy specific use cases such as Books, Articles, Products, Orders, Podcasts, Product Reviews, People, etc. Example Data is designed for prototypes and demos. Write requests return realistic sample responses but do not persist changes, so use your own backend when the app needs durable data. ## Create Discover Books screen The screen we are building in this tutorial is called Discover Books. It is going to be composed of two main elements. The first element is to fetch the data from a third-party REST API service. The second element contains the introduction of new UI components such as ScrollView, Fetch, and List to organize display the data fetched from the API service.  The Components tree of this screen is quite long, thus, to understand, let’s break it down into sections as we go. The requirements to build the first section is to create the following: * Add an image background and a ScrollView * The first section of the ScrollView contains a header and a “Book of the day” sub-section. * The “Book of the Day” further includes a section title, a cover image of a book item, the title of the book, the author’s name, and a View More button with an icon. These details are going to fetch from the REST API. ## Add a scrolling view Let’ start by building the user interface of the screen first using components from the Builder. * Open the workspace in the Draftbit Builder, then open the app you are building. * Add a new Blank screen using the plus icon button in the left panel and call it **Discover Books**. * Add a background image using ImageBackground Media component and use the same gradient background image as the Source. In the Configs tab of the Properties panel on the right side, you can set the Source Type to Static and select the image as the value of the Source property from uploaded assets. * The contents of this screen are going to be wrapped inside a scrollable view. Add ScrollView.  The default scrolling orientation of the ScrollView component is vertical. For this particular screen, let’s use the default orientation. To change it, you can go to the Configs tab:  ## Build a custom header * Add a padding-bottom of **34** to the ScrollView from the Styles tab. * To create the custom header, add a View component and a Text component as its child. Set the Align and Justify property of the View to center. Then, add the padding-top of **24**, padding-bottom of **28**, and a margin-bottom of **14**. * Set the background color for the View to the value of **Primary**, which is one of the pre-defined color values in the Draftbit Builder. * Set the styles for the Text in the Styles tab. The Font will have the value of the **24** and the Color of the value **Background**. In the Configs tab, add the value for the Text component to **Discover Books**.  ## Create an endpoint to get “Book of the Day” In this section, let’s add a REST API endpoint to fetch the book item for the “Book of the Day” section. * To enable using a REST API, go to the API and Cloud Services modal from the top panel. * Under the Add your Custom API section, click the REST API. * Enter a name for the REST API service. It is going to represent the name of the Service to be displayed in the menu. * Paste the Base URL `https://example-data.com/api/v1` into the Base URL field. Make sure that there is no `/` at the end of the Base URL. * By default, Accept: application/json and Content-Type: application/json are the default HTTP headers in each REST API configuration. For this example, we do not require adding any other HTTP Header. * Click Save.  After you have created a new Service, you’ll be prompted to add new Endpoints for your service. * To fetch the book item, create a new REST API endpoint. An API endpoint is the point of entry between an API and a server. The endpoint defines what information you are accessing from your API. * Under the Endpoints menu, click the Create new endpoint button. * Enter a name for this endpoint. * Add `/books/{{id}}` in Path & Parameters. The `/books` path selects the Books collection, and `{{id}}` selects one record. This section allows you to append the Base URL with parameters for a specific request. * Add a Test value for the {{id}}. The value of it could be anything that exists in the database using the API endpoint. * Click the Test button next to the Endpoint input to verify the endpoint is working. * Once everything looks right, click Save to save endpoint and click Done to close the modal.  ## Use the Fetch component to display data on the screen In this section, let’s display the book item fetched in the Draftbit app. * Add a View component adjacent to the previous one inside the ScrollView. Add padding-top and padding-bottom of value **34**. * Add a Text component to this View as a child. In the Styles tab, modify its Font to **18**, and Align to center. Also, add a margin-bottom of **18**. Then, add the text Book of the Day in the Data tab.  * Select the Fetch component from the Lists & Data component menu that contains elements specific to be used to pull data from an external resource. Add it as a direct child to the View. * Go to the Configs tab of the Properties panel and select the Service as the REST API service created in the previous section. * Select the endpoint to be used to pull the data. * In the URL Structure, pass the value of **1** for the id. * The Fetch component here allows previewing the data fetched from the API endpoint before consuming it in the app.  To display the data, let’s set up the Components tree: * Add a View component under Fetch. * Set its Align property to **center** and add two children View components. * In the first child View component, add Image and give the View property of padding-bottom of **20** in Styles tab. * Also, add the Text and Icon Button components adjacent to the View that wraps the Image component. * On the Text and Icon Button components, add a padding-bottom of **12.**  * Select the Image component, go to the Data tab, and set Source Type to Data. Under the URL field, add a `{{coverUrl}}` variable. Under Variables, set its value to **coverUrl**. * Similarly, select the Text component, go to Data tab, add {{title}} as a variable and under Variables, set the value to **title**. * On the Icon Button, go to the Configs tab, set the Name of the icon to **chevron-right-circle**, the Color to **Primary**, and Size to **18**.  ## Create Endpoints to display data in horizontal lists Over the next two sections in this tutorial, the focus will be on creating two horizontal lists in the Discover Books screen. These lists are going to display multiple book items. In this section, let’s start by making these two endpoints. * Open the API & Cloud services from the top panel. * Click on the Example Service API under the Connected menu or the name you have given previously when connecting the REST API. * Under the Endpoints menu, click the Create new endpoint button. * Enter a name for this endpoint. * The first endpoint fetches the ten books with the highest rating counts. Use `sort=-ratingCount` for descending order and `limit=10` to limit the result. * Append the Base URL with `/books?sort=-ratingCount&limit=10` in Path & Parameters. * Click the Test button next to the Endpoint input to verify the endpoint is working. * Once everything looks right, click Save to save endpoint and click Done to close the modal.  * Under the Endpoints menu, click the Create new endpoint button. * Enter a name for this endpoint. * This endpoint fetches the book items on page 1. Example Data uses the `page` query parameter for pagination. * Append the Base URL with `/books?page=1` in Path & Parameters. * Click the Test button next to the Endpoint input to verify the endpoint is working. * Once everything looks right, click Save to save endpoint and click Done to close the modal.  ## Create horizontal lists The first horizontal list is going to display the books that are trending. * Add the child View component to the ScrollView with a padding-top and bottom of **14** in the Styles tab. * Add a Text component to this View to display a section title. * In the Styles tab, set its Font to **Default (Bold)**, Color to **Custom**, and Align to **Center**. * Also, set the value of margin-bottom to **18**. In the Data tab, set the title to **Trending**.  * Add a Fetch component from the Lists & Data component menu that contains components specific to be used to pull data from an external resource. Add it as a direct child to the View. * Go to the Configs tab of the Properties panel and select the Service as the REST API service created in the previous section. * Select the endpoint to be used to pull the data. * The Fetch component here allows previewing the data fetched from the API endpoint before consuming it in the app. * Add List as a child component to the Fetch from Lists & Data. * In the Configs tab, enable the **Horizontal**. Go to the Styles tab, and add a padding-left of **18**. * In the Data tab, set Mapped data value to the response’s **data** array. List responses use the `{ data, meta, links }` envelope.  * Add View as a child component to List. It is going to represent an individual book item in the list. In the Styles tab, set the margin-right of **18**. * Add a Touchable. * Inside the Touchable, add another View component its child. * In the Styles tab for View, set the Width to **80** and Height to **118**. * Add Image to the View. In the Styles tab, set its Width to **80** and Height to **118**. In the Data tab, set Source Type to Data and add a `{{coverUrl}}` variable. Under Variables, set its value to **coverUrl**.  The second horizontal list is going to have the same UI elements we have just created. It differs only in the list title and data source. You can use the option to Duplicate the whole custom block. Then, change its title and data source. Here is the final output:  ### Resources * [The complete REST API endpoints documentation in Draftbit](https://docs.draftbit.com/docs/rest-services-endpoints) * [The complete list of REST API service integrations available in Draftbit](https://docs.draftbit.com/docs/rest-api-integrations) ‍ > 💜 We at [Draftbit love our Community](https://draftb.it/3vXK2K3) and are always open for your questions, feedback and feature requests. You will also find more resources to learn and build with Draftbit. > > Reach out to us on [twitter/@draftbit](https://draftb.it/3fg3ueC) for more questions. --- # How To Get Your First 1,000 Mobile App Users > Everyone and their smartphone-savvy grandmother is developing a mobile app. So how do founders stand out from the crowd? How do they get people to care about,… ### Everyone and their smartphone-savvy grandmother is developing a mobile app. So how do founders stand out from the crowd? How do they get people to care about, use, and buy their app? How do they attract early adopters? Nick Selmanon October 22, 2021 App FoundersApp Marketing   For so many founders and entrepreneurs developing mobile apps, the most difficult challenge early on is how to attract initial users. It’s especially tricky territory because every business idea is different, so there’s no “one-size-fits-all” approach to begin building a loyal customer base. In today’s hyper-competitive, fast-paced digital world, with new technology enabling better, faster and easier-to-use software to build better, faster and easier-to-use products, it seems like everyone and their smartphone-savvy grandmother is developing a mobile app. So how do you stand out from the crowd? How do you get people to know about your app, care about it, use it, buy it? How do you attract early adopters to cultivate an engaged community to eventually grow into paying customers? Lots of great mobile apps thrive and take off, and lots of great mobile apps never get off the ground. In many cases, based on our interactions with thousands of founders in the [Draftbit Community](https://community.draftbit.com/), success seems to come down to how well they enlist the support of those first mobile app users. In this article, we’ll discuss some of the best strategies for doing that.  ## Put down the build tools! What do your customers actually want? With consumer mobile-focused startups, the best idea is to build an audience first, and then build a business. It’s critical to have a community of users before a finished product because their feedback is so essential. Many founders approach a solution or the original version of their app with a very specific vision in mind, and they don’t want to get product feedback. They want to build the thing they want to build, and they want to do it the way they imagine. But then they end up building the wrong thing or solving the problem in a suboptimal way. In the startup world, when you’re pitching your idea and proposing your solution in the preliminary stage, no one wants to come across as critical or unsupportive, so people will sometimes avoid sharing negative feedback that actually could be quite valuable. If that happens, you end up learning the truth only after your first version is already out there.  It’s so much more efficient to develop a set of enthusiastic users early on, which is why you start collecting those first 1,000 mobile app users before you ever even think about the app store. But how do you do that? There’s an old adage that says, “ask for money and you’ll get advice; ask for advice and you might get money.” At the beginning, don’t think about selling. Don’t even think about building a product. Think about building a community (or joining an [awesome existing one](https://community.draftbit.com/)). Think about feedback, simplicity and iteration. About your first 1,000 users – what they want, what they like, what they think. Then you can think about downloads, dollars and the dream you made a reality by bringing your mobile app to life, to market and into people’s hands. ## 1. Get Away from a Closed, “Build-It-First” Mindset Every background carries some sort of bias. For example, developers and designers tend to want to build the product first, without seeking the kind of alpha-test user input that might lead to a better product. Those with a business background might talk up the product in a way that doesn’t yield useful feedback, which can actually improve it. Then there’s the artistic mindset that says, “I’m the one who solved this big, important problem, so I don’t need anyone’s feedback.” There’s nothing wrong with any of these mindsets, of course. But if you want to build a business, you need a mindset that invites honest, meaningful feedback about your product from day one. Those questions, comments or even criticisms can be vital to refining, redeveloping and eventually perfecting – or perhaps pivoting to – your final product.  Friends and family are an excellent source of feedback. They’re people you can trust and who will support you; but they’re also day-one users who can create traction, lend credibility to your app and show newcomers that some other humans have downloaded the thing, so maybe they should too.  ## 2. Boil Down Your Concept at the Beginning Oftentimes, the best approach to building your app is to start by solving the simple version of the problem, the one you’re able to explain to people in five minutes. It can be daunting to try and develop something large and complicated from the get-go, and it can cause trouble down the line, as opposed to starting with a simple concept, gaining some traction, and then growing in complexity over time. A lot of people want to solve the largest, most challenging problem right away, or think about the final version of the thing. They’ll say they want to develop the next Tinder or build the equivalent of Uber today.  But Tinder and Uber didn’t start out that way. They weren’t born fully formed and [feature-filled](https://draftbit.com/features). They started out simple and expanded. Why would you expect to be successful doing something that the already successful companies didn’t do?  ## 3. Develop a More Iterative Mindset There’s a great, short book called [The Mom Test](https://www.amazon.com/Mom-Test-customers-business-everyone/dp/1492180742), which is a short, practical guide to how to talk to customers and learn if your business is a good idea when everyone – even your mom – is lying to you.  You have to go out looking for people that are experiencing the problem you’re hoping to solve and bring them to you. This can be through a landing page for your business or a survey that asks people for a 20-minute conversation, with no sales strings attached. Or it can be a call on social media for your audience to give feedback as you develop your product. In fact, some people have even started building live on Twitter, as their followers offer opinions in real-time.  Not only are these responses genuinely helpful with your development, but by soliciting and creating a space for people to tell you what they think, you’ve created some authentic engagement and potential interest. Even someone who tells you why your product is stupid will be more inclined to use it if they think you’ve seen and perhaps considered their suggestions.  Besides social media, online forums, discussion boards and message groups are good places to ideate and iterate with like minds. Throughout development, you can throw out screenshots of your build or new design ideas, things you’re testing, asking people to check them out and offer their views. From that, you can pick up users, customers, even investors. The best thing about these communities is that the people involved don’t just feel like users of a product. They feel almost like vicarious founders, and so they are emotionally invested in your success because they are helping you build that business. In the world of startups, the goal of most companies should be to build a loyal audience at the beginning and then expand. The success of your mobile app comes down to fostering a sense of community among users.  To recap: First, start by building the beginnings of your audience, your community, your customer base, before you build the first screen. Talk to people before you build. Get feedback and be open to thinking differently.  Second, build the smallest thing you can build that actually helps someone, even if it’s ugly, even if it kind of doesn’t fully work. Just something that helps users incrementally solve the problem, and go from there.  And third, do this over and over again, in cycles as you develop, either publicly on social media or with a group of friends or somewhere online. Talk to people; ask for regular, ongoing feedback. This generates not only more constructive feedback but also deeper levels of assistance and loyalty. Those are three powerful things that not all startup founders are thinking about, but they really should be. Before growth hacking, before digital marketing, before pitching Wired or TechCrunch and long before you ever push that submit button on Apple. Cultivate a community, iterate with an audience, convert it into a customer base. Not too long ago, building apps required a team of developers for each customer experience. But now, with Draftbit, you can design and build once, then deploy to multiple endpoints. So, go ahead, [bring your screens to life](https://draftbit.com/why). If you’re ready to create, customize, and launch a mobile app from your browser, with the source code included, [request a demo](/request-demo/) of Draftbit or sign up to [start building for free](https://draftbit.com/). Your first 1,000 users are waiting. --- # Low-Code vs. Traditional Mobile App Development: How to Choose > Compare low-code, AI-assisted app builders, expert services, and traditional mobile development so you can choose the right path for your app. ### Compare low-code, AI-assisted app builders, expert services, and traditional mobile development so you can choose the right path for your app. Dave Sebekon December 9, 2022 Low CodeMobile App DevelopmentSmall BusinessStartups  The choice between low-code and traditional mobile app development used to sound simple: low-code was faster, traditional development was more customizable. That framing is now too limited. Modern app teams have more options. You can use AI agents to create and edit app features, design visually, connect APIs, preview on devices, export source code, publish to app stores, and bring in expert developers when the product needs deeper work. The real question is not “low-code or code?” The better question is “which workflow gives us the right mix of speed, control, cost, and long-term maintainability?” Draftbit is built around that middle ground: [AI-assisted visual app development](/platform/) with real code access, backend integrations, templates, publishing, and [Expert Services](/services/) available when you want help. ## Quick answer | Situation | Best fit | | ----------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | | You need to validate an idea quickly | Start with Draftbit templates, AI agents, and visual editing. | | You want a production app but do not have a full development team | Use Draftbit plus Expert Services for architecture, buildout, QA, and launch. | | You have developers but want faster iteration | Use Draftbit for visual building, preview, integrations, and source code export. | | You have unusual native requirements or deep platform constraints | Use traditional development or pair Draftbit with custom code and expert implementation. | | You are replacing or upgrading an old app | Use Draftbit to rebuild faster, then add code or experts where needed. | ## What “low-code” means now Low-code no longer means a toy builder with limited templates. The best modern low-code platforms combine: * Visual screen building. * AI-assisted implementation. * Reusable components. * Backend and API integrations. * Live preview. * Team collaboration. * Source code access or export. * App publishing workflows. * Escape hatches for custom code. That last part matters. A serious mobile app eventually needs flexibility. If a platform helps you start fast but blocks you later, the early speed can turn into expensive rework. Draftbit’s approach is to help teams move quickly while preserving access to code and implementation details. ## What traditional app development is still best at Traditional development is still the right answer for some projects. If your app requires highly specialized native modules, unusual device integrations, custom rendering engines, strict enterprise infrastructure, or a large engineering organization with established tooling, a code-first approach may be the most direct path. Traditional development gives teams: * Full control over architecture. * Maximum flexibility for native platform features. * Fine-grained performance optimization. * Complete ownership of CI/CD and testing workflows. * Deep integration with existing engineering standards. The tradeoff is cost and cycle time. Every screen, state, integration, and workflow has to be designed, implemented, reviewed, tested, and shipped through engineering. That is worth it for some apps. It is overkill for many early-stage products, internal tools, MVPs, and founder-led app launches. ## Where AI-assisted visual development fits AI changes the comparison. Instead of starting from a blank codebase or a static mockup, teams can describe what they want, generate or modify screens, review the result visually, and refine from there. The best use of AI is not to skip product thinking. It is to reduce the manual work between product intent and working software. In Draftbit, that workflow can look like: 1. Start from a prompt, template, or existing idea. 2. Use AI agents to create or modify app behavior. 3. Refine screens visually. 4. Connect REST, GraphQL, or MCP-powered integrations. 5. Preview on web and devices. 6. Edit code directly when visual editing is not enough. 7. Publish or export code when the project needs its own engineering workflow. This gives non-developers more leverage and gives developers a faster starting point. ## Cost: what actually drives the budget? The cost of mobile app development is not just “hours of coding.” Budget usually depends on: * How many screens and user roles the app needs. * Whether the backend already exists. * Auth, payments, permissions, and notifications. * Custom components or native features. * Design quality and UX complexity. * QA, device testing, and app store submission. * Maintenance after launch. Low-code and AI-assisted platforms reduce cost by shortening the path to a working app and reducing repetitive implementation. Traditional development can still be worth the cost when the app has requirements that cannot be met well in a visual platform. Draftbit’s Expert Services are useful when you want the speed of the platform but do not want to own every technical decision yourself. That can be a better fit than hiring a full agency for a project that mostly follows known app patterns. ## Timeline: when speed matters Low-code and AI-assisted development are strongest when speed matters: * MVPs. * Investor demos. * Internal tools. * Customer pilots. * Marketplace tests. * App rebuilds. * Feature prototypes. * Founder-led launches. Traditional development is strongest when the scope is stable, requirements are highly technical, and the team has enough engineering capacity to support the timeline. One common mistake is spending months building a custom app before proving that users want the workflow. Draftbit helps teams get to a real app earlier, learn faster, and invest deeper engineering effort only where it is justified. ## Control and ownership Control is where low-code platforms differ sharply. Some platforms give speed but lock you into their runtime. Others give more flexibility. When evaluating any platform, ask: * Can I export or access source code? * Can I add custom code? * Can I connect my own backend? * Can I use third-party APIs? * Can I publish to the channels I need? * Can developers continue the project outside the visual editor if needed? Draftbit is designed for teams that want visual speed without giving up code ownership. That makes it a better fit for production-minded teams than tools that only generate prototypes or lock the app behind proprietary limits. ## Team workflow Traditional app development often creates handoff friction: * Product writes requirements. * Design creates mockups. * Engineering rebuilds the screens. * QA finds mismatches. * Product requests changes. * Engineering repeats the cycle. Draftbit shortens that loop. Product, design, and engineering can work closer to the actual app. Visual editing makes screen changes faster. AI agents can handle scoped implementation work. Developers can inspect and edit code. Experts can step in for architecture, integrations, custom components, or launch support. That does not remove the need for judgment. It just reduces translation loss between idea, design, and implementation. ## When to choose Draftbit Choose Draftbit when: * You want to build a real cross-platform app faster. * You need web, iOS, and Android from one workflow. * You want AI assistance and visual editing. * You care about source code access and avoiding lock-in. * You want to connect APIs and backend services. * You want experts available without committing to a full agency model. * You need to iterate with users before over-investing in custom engineering. ## When to choose traditional development Choose traditional development when: * Your app depends on unusual native features or deep platform APIs. * Your organization already has a strong mobile engineering team. * You need a fully custom architecture from day one. * You have strict infrastructure, compliance, or deployment requirements. * Performance constraints are central to the product. * A visual builder cannot represent the app’s core experience. Even then, Draftbit can still help with prototypes, internal tools, companion apps, or faster exploration before the custom build starts. ## A hybrid path is often best The most practical answer is often a hybrid: 1. Use Draftbit to build and validate the first version quickly. 2. Connect real data and core workflows. 3. Bring in experts for backend architecture, custom components, or app store launch. 4. Export or edit code when the app needs deeper engineering. 5. Continue iterating visually where that remains faster. This gives you speed early and control later. ## FAQ ### Is low-code good enough for a production mobile app? It can be, if the platform supports real app workflows, backend integrations, publishing, and code access. Draftbit is built for production-minded teams that want visual speed without giving up implementation control. ### Will low-code replace developers? No. It changes where developers spend their time. Instead of hand-building every standard screen, developers can focus on architecture, custom code, integrations, performance, security, and edge cases. ### Is AI app generation the same as low-code? No. AI can generate or modify app work, while low-code provides visual structure, components, integrations, preview, and publishing workflows. The strongest platforms combine both. ### What if I start in Draftbit and need custom code later? That is a normal path. Draftbit supports code access and source code export, so teams can extend the app beyond visual editing when the product requires it. ### When should I use Draftbit Expert Services? Use Expert Services when the app needs architecture help, backend setup, custom components, code review, QA, migration support, or app store launch help. It is especially useful when AI or visual building gets you most of the way there but you need experienced builders to finish cleanly. ## Conclusion Low-code and traditional development are not enemies. They are different levels of leverage. The best workflow depends on the app, the team, the budget, and how much uncertainty you still need to resolve. Draftbit gives teams a modern middle path: build visually, move faster with AI, connect real services, keep access to code, publish across platforms, and bring in experts when the app needs deeper work. --- # Maximizing efficiency and productivity with Expo dev tools > Explore how Expo dev tools boost mobile development productivity with faster setup, built-in APIs, and seamless deployment. ### Explore how Expo dev tools boost mobile development productivity with faster setup, built-in APIs, and seamless deployment. Dave Sebekon December 9, 2022 ExpoDev Tools  As a developer, it’s crucial to have a set of tools that can help you maximize efficiency and productivity. [Expo](https://expo.dev) dev tools offer just that, allowing you to easily develop and manage your projects without having to worry about the complexities of native mobile development. Expo is an open-source platform that provides a comprehensive set of tools for building and deploying mobile applications. It’s built on top of [React Native](https://reactnative.dev), a popular framework for building native-like mobile apps using JavaScript. With Expo, developers can leverage the power of React Native and access a wide range of native APIs without having to worry about the complexities of the underlying platform. One of the key advantages of using Expo is its ability to save time and effort. With Expo, you don’t have to worry about setting up a development environment, installing dependencies, or configuring build tools. Instead, you can focus on building your app and use Expo’s tools to quickly test, debug, and deploy your app to the App Store or Google Play. Expo also offers a range of features that can help you boost your productivity. For example, the Expo CLI allows you to quickly scaffold a new project, run your app in the simulator, or even share it with others for testing. You can also use Expo’s built-in component library to quickly add common UI elements and functionality to your app. Another useful feature of Expo is its integration with third-party services. With Expo, you can easily integrate your app with services allowing you to add powerful functionality to your app without having to write any additional code. You can also use Expo’s push notifications API to send notifications to your users, providing a valuable way to engage and retain them. Overall, Expo dev tools offer a range of benefits that can help you maximize efficiency and productivity when developing mobile applications. Whether you’re building a simple utility app or a complex enterprise-level app, Expo has the tools and features you need to get your app to market quickly and easily. So why not give Expo a try and see how it can help you take your mobile development to the next level? At Draftbit, we offer a low-code platform that allows you to quickly and easily create a mobile app built on Expo and React Native. With our visual builder and pre-built components and screens, anyone can create a professional app without the need for extensive coding knowledge. Plus, our platform offers advanced customization options for businesses with more complex needs. Or our team of Experts can even build your app for you! You can start exploring right away with a [14-day free trial](https://draftbit.com/pricing) of our React Native app builder. --- # Navigating the Rough Seas to Find Product-Market Fit for Your App > Finding Product-Market Fit is no easy feat, but with a mix of clarity, customer focus, and constant iteration, you'll be sailing toward success like the most… ### Finding Product-Market Fit is no easy feat, but with a mix of clarity, customer focus, and constant iteration, you'll be sailing toward success like the most capable captain on the high seas. Dave Sebekon November 13, 2023 StartupsApplication Development  Ahoy, fearless mobile app entrepreneur! So, you’ve set sail on the turbulent seas of the app world, armed with a brilliant idea and a shipload of ambition. But, as any seasoned captain will tell you, success in these waters depends on more than just a sturdy vessel and a shiny compass – it’s all about finding that elusive treasure known as Product-Market Fit (PMF). ## The Mythical Quest for Product-Market Fit Imagine you’re on a treasure hunt, armed with a map (your business plan) that promises the location of a chest full of treasure (your app’s success). But here’s the catch – the map isn’t perfect, and X marks the spot is more of a general location than a pinpoint destination. This is where PMF comes into play. It’s that magical moment when your app aligns seamlessly with the needs and desires of your target audience. ## Why PMF Matters in the Land of Apps Finding PMF is like discovering the Fountain of Youth, but for startups. It’s the game-changer, the secret sauce, the golden ticket to sustained growth and success. When your app achieves PMF, it means you’ve struck a chord with your users – they love what you’re offering, and they can’t get enough. This not only leads to happy customers but also opens the floodgates to organic growth, positive reviews, and the sweet sound of sales. ## Three Pillars of PMF ### **Know Thyself and Thy Audience** Before you can set sail to find the treasure, you need to know what kind of treasure you’re hunting for. Clarity about your app’s value proposition is crucial. Ask yourself: What problem does my app solve? How is it different from existing solutions? Why should people care? Understanding your audience is just as important. Who are they? What are their pain points? What keeps them awake at night? The better you know your audience, the more accurate your treasure map becomes. ### **Put Your Crew First** Your crew (customers) is your most valuable asset. Treat them like royalty. Engage in open, honest conversations. Seek feedback on their experience with it. Are they struggling with certain features? Do they wish the app had a special feature? Listen, adapt, and watch as your crew becomes fiercely loyal. Surveys, interviews, and user analytics are your trusty compasses. They help you navigate the treacherous waters of user preferences and behaviors. Keep an eye out for those islands of enthusiasm and the whirlpools of dissatisfaction – they hold the key to refining your map. ### **Adapt or Sink** Remember, the treasure map is a living document. Don’t carve it in stone. Stay agile. If your users are signaling that they’d prefer a smoother navigation route, be ready to change course. Regularly update your app based on user feedback and market trends. It’s not about being the fastest ship; it’s about being the one that adjusts its sails with the changing winds. ## Strategies for Finding PMF ### **Lean on MVP** Think of your Minimum Viable Product (MVP) as a captain’s telescope – a basic tool that helps you scope out the seas without committing all your resources. Launch a simplified version of your app and gauge the response. Is there a glimmer of excitement or just the sound of crickets? Use this intel to refine your map. ### **Measure, Tweak, Repeat** Metrics are your compass. Keep a keen eye on user engagement, retention rates, and conversion funnels. If a particular feature is causing a shipwreck, fix it. If a feature is making your ship fly, enhance it. It’s a dance of measurement and iteration – a compass twirl that keeps you on the right course. ### **Embrace the Pivot** Sometimes, your original treasure map leads you to a dead end. Don’t be afraid to pivot. If user feedback or market dynamics indicate a need for a different approach, be flexible. The ability to change direction without losing sight of the treasure is a hallmark of successful captains. ## The Journey Ahead Finding Product-Market Fit is no easy feat, but with a mix of clarity, customer focus, and constant iteration, you’ll be sailing toward success like the most capable captain on the high seas. So, hoist the anchor, adjust the sails, and set course for the horizon. The treasure trove of PMF awaits, and with a bit of luck, a lot of grit, and a dash of creativity, it’s yours for the taking. May your app’s success be as legendary as the tales of buried treasure! \---- No-code and low-code development tools and services have emerged as a revolutionary solution for mobile app startups. They offer accessibility, speed, cost-efficiency, flexibility, and market validation, all of which are crucial in the competitive world of app development. Draftbit, with its React Native-based visual platform and the option to utilize the Draftbit Experts team, provides a compelling opportunity for app startups to turn their app ideas into reality. So, if you’re a mobile app startup looking to bring your vision to life, consider embracing the power of Draftbit. Whether you choose to create your app independently or leverage the expertise of the Draftbit Experts team, you’re on the path to a successful and efficient app development journey. Give it a try, and unlock the potential of your app startup without the traditional coding hurdles. [Start for free](https://draftbit.com/pricing) or [chat with our experts](/experts-requests/). --- # Poisera’s founders launched their app that helps mothers build resilience, using Draftbit > Learn how Poisera's founders used Draftbit to launch their mobile app that helps mothers build resilience and well-being. ### Learn how Poisera's founders used Draftbit to launch their mobile app that helps mothers build resilience and well-being. DDraftbiton September 8, 2021 Startups  --- # React Native vs. Flutter: Which One is Better? > When deciding between the two most popular cross-platform mobile frameworks in the world, there are many considerations, from performance to community to cost. ### When deciding between the two most popular cross-platform mobile frameworks in the world, there are many considerations, from performance to community to cost. Nick Selmanon October 22, 2021 React NativeMobile App DevelopmentProgramming   When it comes to selecting a cross-platform mobile application framework, many developers are indifferent. That’s because, in the beginning, the goal is often just to pick the most practical, expedient app maker and get the product to market as quickly as possible. As a result, someone with a low-tech or no-tech background might view software frameworks and software development kits (SDKs) for mobile applications as interchangeable. But making a selection without at least some forethought is a bad idea. This is especially true when deciding between the [two most popular cross-platform mobile frameworks](https://www.statista.com/statistics/869224/worldwide-software-developer-working-hours/) for software developers: React Native and Flutter. In terms of performance, to most founders’ eyes, they are both fairly similar. But their differences could mean steep costs down the line. But first, some brief background.  ## What is React Native? [React Native](https://reactnative.dev/), initially released in 2015, is Facebook’s open-source UI software framework for developing applications. It’s a free app maker that is pretty well established, thanks to its use of Javascript and general popularity among developers. Your application is written in Javascript but then rendered with native code to your users’ app platforms without sacrificing their respective user experiences. ## What is Flutter? [Flutter](https://flutter.dev/), first launched in 2017, is Google’s answer to React Native, its own open-source UI software development kit. It offers users a fairly enhanced set of widgets and tools, which are sought-after by app makers because of their ability to create vibrant, stunning applications. Instead of using Javascript, Flutter is programmed in Dart, a programming language created in 2011.  For many startups, React Native and Flutter can seem pretty similar. But let’s take a look at some of the considerations that can set them apart. ## 1. User Interface and Speed Flutter was created with UI in mind and is known for its ability to create apps with visually appealing graphics and seamless transitions. Also, whereas React Native requires a bridge to render Javascript to native platform code, Flutter’s Dart code can be compiled directly, which often makes it a faster option. Dart is also a more compact programming language than Javascript, and therefore it also tends to compile slightly faster, as evidenced by [Dart vs. Javascript benchmark data](https://programming-language-benchmarks.vercel.app/dart-vs-javascript) available online. For these reasons, some have seen Flutter as an improvement over React Native, which was initially clunky and struggled with slow animations. As a result, Flutter has been picking up steam in recent years. The percentage of cross-platform mobile developers using Flutter globally has steadily increased over the past few years, from 30% in 2019 to 39% in 2020, and now 42% for 2021. The percentage of cross-platform mobiel developers using React Native was 42% for 2019 and 2020 but dropped to 38% in 2021. These reasons often lead people into believing that Flutter is inherently the fastest, least expensive option for app development. But that is potentially a very costly mistake for those searching for a free app maker or creating android apps online without coding. ## 2. Community Platforms and Talent Pools Javascript was originally created in 1995, and as a result, developers have been [solving problems using this programming language](https://medium.com/@_benaston/lesson-1a-the-history-of-javascript-8c1ce3bffb17) for almost a quarter of a century. In comparison, Dart has only been around for a decade, and its popularity and use have been limited to Google and Google developers for most of that time. Thus, the Flutter community isn’t nearly as large. Indeed, it can be difficult for developers to locate solutions to specific problems, which can increase the time to market. It also creates a perfect storm down the line as you scale your mobile app and need to hire developers. The world is [currently experiencing a shortage of software engineering talent](https://www.forbes.com/sites/forbestechcouncil/2021/06/08/is-there-a-developer-shortage-yes-but-the-problem-is-more-complicated-than-it-looks/?sh=77d971803b8e). In fact, by 2030, experts believe this talent shortage will reach 85.2 million. Since React Native and Flutter use different programming languages, your selection could limit the pool of talent qualified to work on your app. Also, since the community platforms for Flutter are less mature than their more robust React Native counterparts, that means more limited access to solutions and the greater resulting need to seek out highly skilled Dart programmers.  Yes, Flutter as an SDK may be faster than React Native as a framework. However, when you consider the possibility of time lost trying to solve problems and the additional costs of possibly needing a more skilled Dart programmer to compensate for the problems that can’t be solved through its community platforms, Flutter may not be your best option. It’s risky, and some risks simply don’t pay off. ## 3. Time It’s also important to consider that app development software is constantly changing and always improving. Whereas React Native struggled with stability and slow graphics (among other issues) at first, there have been major improvements since then, and it has become a legitimate competitor to Flutter in terms of UI. Likewise, the Flutter community is gaining ground. With time, its community platforms will be significant assets for app makers that may even rival those of React Native. But for now, Flutter is still quite young, and its community is simply not as mature. React Native is the most powerful cross-platform development framework used by millions of developers around the globe, and Draftbit is built on it, providing full React Native and Expo source code exports and the support of our [knowledgeable, helpful Community](https://community.draftbit.com/home). ## Free App Makers Aren’t Equivalent to Free Apps While you may be attracted to the prospect of a free app maker, when you consider the hidden costs of lost time and hired talent, you’ll realize that it’s nearly impossible to make a free app. Especially if you prefer low-code or no-code options for app development, the quality of your community support will have a far greater impact on the quality, time to market, and cost of your app than anything else. That’s why we at Draftbit have invested so much into fostering a vibrant Community, where our users can connect with experts, get help, showcase their progress and stay informed. Your customers and your team rely on you to build solutions that are exceptional. And solving hard problems requires powerful tools, [which is why](https://draftbit.com/why) we’re building Draftbit to be the most powerful visual development tool available. Our affordable [pricing plans](https://draftbit.com/pricing) give Draftbit users a competitive edge by fostering an ecosystem of support for app makers, regardless of skill or experience level. [Request a demo](/request-demo/) or start building for free today and experience the difference firsthand. --- # Real-World Examples of Successful React Native Mobile Apps > See how Facebook, Airbnb, UberEATS, Walmart, and Bloomberg use React Native to power their high-performance mobile apps. ### See how Facebook, Airbnb, UberEATS, Walmart, and Bloomberg use React Native to power their high-performance mobile apps. Dave Sebekon December 9, 2022 Mobile App DevelopmentReact Native  As a business that specializes in creating mobile apps using React Native, we often get asked about the potential of this technology and whether it can produce successful, high-quality apps. The answer is a resounding yes! In this article, I will showcase some real-world examples of successful React Native mobile apps to demonstrate the power and flexibility of this technology. React Native is a popular framework for developing mobile apps that can be used on both iOS and Android platforms. But just how successful can React Native mobile apps be in the real world? To answer this question, let’s take a look at some successful examples of React Native mobile apps that are making waves in their respective industries. ### Facebook It may come as no surprise that one of the most successful examples of a React Native mobile app is Facebook. The social media giant initially started using React Native for its internal projects, such as the Ads Manager app. But the team was so impressed with the framework that they decided to use it for the main Facebook app as well. The result was a faster and smoother experience for users, with improved performance and reduced app size. ### Airbnb Another successful example of a React Native mobile app is Airbnb. The popular vacation rental platform initially used a hybrid app approach, with a mix of native and web-based components. However, this resulted in a subpar user experience, with slow loading times and a clunky interface. After switching to React Native, Airbnb was able to improve the performance of its app significantly. The new app loaded faster, offered better navigation, and provided a more seamless experience for users. ### UberEATS React Native is not just for consumer-focused apps – it can also be used for business-to-consumer (B2C) applications, as demonstrated by UberEATS. The popular food delivery app initially used a native iOS app, but the team found that this was not scalable and maintainable in the long run. After switching to React Native, UberEATS was able to improve the performance of its app and provide a better user experience. The new app was faster and more responsive, with improved navigation and a cleaner interface. ### Walmart Retail giant Walmart is another successful example of a React Native mobile app. The company initially used a hybrid app approach, with a mix of native and web-based components. However, this resulted in a subpar user experience, with slow loading times and a cluttered interface. After switching to React Native, Walmart was able to improve the performance of its app significantly. The new app loaded faster, offered better navigation, and provided a more seamless experience for users. ### Bloomberg Bloomberg, the global business and financial news provider, is another successful example of a React Native mobile app. The company initially used a native iOS app, but the team found that this was not scalable and maintainable in the long run. After switching to React Native, Bloomberg was able to improve the performance of its app and provide a better user experience. The new app was faster and more responsive, with improved navigation and a cleaner interface. ### And many more In addition to these well-known examples, there are countless other successful React Native apps out there. For example, the popular travel booking app Expedia, the popular meal-planning and grocery shopping app Mealime, and the popular fitness app MyFitnessPal were all built using React Native. These examples show that React Native is a powerful technology that can be used to create high-quality, successful mobile apps across a wide range of industries and use cases. It offers a flexible, modular approach to app development that allows developers to create performant, user-friendly apps quickly and efficiently. These are just a few examples of successful React Native mobile apps in the real world. From social media giants to retail giants, and from B2C apps to financial news providers, React Native has proven to be a powerful framework for developing mobile apps that deliver a superior developer and user experience. If you want to create a successful React Native mobile app for your business, consider working with a team of experienced developers who can help you design, build, and launch a top-quality app. At Draftbit, we specialize in using React Native to create custom mobile apps for our clients. Our team of experienced developers has the skills and expertise to take your app idea from concept to reality, and we can help you launch a successful app that meets your business goals and objectives. If you’re interested in learning more about how React Native can help your business, contact us today to schedule a consultation. --- # Strategies for User Acquisition and Retention in the Mobile App Market > Proven strategies for acquiring and retaining mobile app users, from ASO and influencer marketing to push notifications. ### Proven strategies for acquiring and retaining mobile app users, from ASO and influencer marketing to push notifications. Dave Sebekon June 22, 2023 App Marketing  In today’s highly competitive mobile app market, user acquisition and retention are critical for the success of any app startup. From understanding user behavior to optimizing app performance, we’ll explore various techniques to help you effectively acquire and retain users. ## Understanding Your Target Audience Before diving into user acquisition and retention strategies, it’s crucial to understand your target audience. Conduct thorough market research to identify their preferences, pain points, and motivations. This information will guide your marketing efforts and enable you to tailor your app’s features and messaging to meet their specific needs. ## App Store Optimization (ASO) App Store Optimization (ASO) is the process of optimizing your app’s listing to improve its visibility and ranking in app store search results. It involves strategically incorporating relevant keywords, optimizing app titles, descriptions, screenshots, and reviews. By implementing ASO techniques, you can enhance your app’s discoverability and increase the likelihood of attracting organic traffic. ## Influencer Marketing Influencer marketing can be a powerful strategy for user acquisition, especially when targeting niche markets. Identify influencers who align with your app’s target audience and collaborate with them to promote your app. Through their social media platforms, influencers can generate buzz, drive downloads, and increase brand awareness. ## Social Media Marketing Leverage the power of social media platforms to engage with potential users and build a community around your app. Develop a robust social media strategy that includes creating compelling content, running targeted ads, and actively engaging with your audience. By fostering meaningful interactions, you can attract users, encourage sharing, and foster brand loyalty. ## Referral Programs Implementing referral programs can incentivize your existing users to recommend your app to their friends and family. Offer rewards or discounts to users who refer new users to your app. This strategy not only helps acquire new users but also nurtures a sense of loyalty among existing users. ## User Onboarding and User Experience (UX) First impressions matter, especially in the mobile app market. Ensure your app has a seamless user onboarding process that guides new users through the app’s features and benefits. Additionally, prioritize delivering an exceptional user experience (UX) by regularly collecting user feedback, addressing pain points, and continuously optimizing your app’s performance. ## Push Notifications and Personalization Push notifications can be a powerful tool for user retention. Send targeted and personalized notifications to your users, providing value and driving them back to your app. However, be cautious not to overwhelm users with excessive notifications, as it may lead to app uninstalls. ## Conclusion Acquiring and retaining users in the competitive mobile app market is a challenging endeavor. By understanding your target audience, implementing effective ASO techniques, leveraging influencer and social media marketing, utilizing referral programs, prioritizing user onboarding and UX, and employing push notifications, you can greatly improve your user aquisition and retention. \---- Getting ready to build a mobile app for your next startup? With Draftbit’s React Native mobile app builder, technical and non-technical founders, designers, and developers can build and publish their mobile apps in less time and for less money. [Sign up to get started](https://draftbit.com). We also offer expert services that range from writing some custom code to building your app from the ground up. [Get in touch to discuss your idea!](https://draftbit.com/experts) ‍ ‍ --- # Best Mobile App Design and Prototyping Tools > Compare the best mobile app design and prototyping tools for modern app teams, including Draftbit, Figma, Sketch, Penpot, ProtoPie, Framer, Origami Studio,… ### Compare the best mobile app design and prototyping tools for modern app teams, including Draftbit, Figma, Sketch, Penpot, ProtoPie, Framer, Origami Studio, Zeplin, UXPin, and Rive. Shanika Wickramasingheon November 24, 2021 Mobile App DevelopmentApp Design  Mobile app design has changed a lot since this guide was first published in 2021. The old workflow was usually linear: wireframe in one tool, design in another, prototype somewhere else, hand off to developers, then wait for the real app to catch up. That still happens, but it is no longer the only path. Modern app teams use AI, design systems, component libraries, visual builders, code export, and expert implementation help to move from idea to production faster. The best tool is not always the one with the prettiest canvas. It is the one that helps you make better product decisions and ship a real app. Draftbit sits in that newer category. It is not just a static design tool. Draftbit lets you [build cross-platform apps visually](/platform/), use AI agents to make real changes, connect backend services, preview on devices, edit source code, and publish to web, iOS, and Android. If your team needs help turning designs into a launchable product, [Draftbit Expert Services](/services/) can help with UI/UX, screen building, backend integration, custom components, code review, and app store launch support. ## Quick answer: which design tool should you use? | Need | Strong fit | | --------------------------------------------------------- | ----------------------------------------- | | Build and ship the actual app, not just a prototype | [Draftbit](https://draftbit.com/) | | Collaborative interface design and product design systems | [Figma](https://www.figma.com/design/) | | Mac-native UI design with mature vector tooling | [Sketch](https://www.sketch.com/) | | Open-source design and prototyping | [Penpot](https://penpot.app/) | | High-fidelity interaction prototypes | [ProtoPie](https://www.protopie.io/) | | Web-first product and marketing prototypes | [Framer](https://www.framer.com/) | | Advanced interaction experiments | [Origami Studio](https://origami.design/) | | Design handoff and style guide documentation | [Zeplin](https://zeplin.io/) | | Design systems that map closer to real code components | [UXPin](https://www.uxpin.com/) | | Motion design and interactive animation | [Rive](https://rive.app/) | ## What changed since 2021? Several tools from the original article deserve a different treatment today: * **InVision** is no longer a tool we would recommend for a new mobile design workflow. The old InVision website now redirects to Miro, which is useful for collaboration and planning, but it is not a direct replacement for app UI design. * **Adobe XD** still has release updates, but Adobe’s public release notes describe recent updates as bug fixes and minor workflow improvements. Treat XD as a legacy workflow unless your team is already standardized on it. * **Figma** has become the default collaborative design environment for many product teams and now includes a much broader product suite, including design, Dev Mode, AI features, slides, sites, and more. * **Draftbit** has moved beyond “designing screens” into AI-assisted visual app development with source code access and publishing built in. The practical takeaway: do not pick tools only for wireframes. Pick a workflow that keeps design, data, code, testing, and launch connected. ## How to evaluate mobile app design tools Before choosing a tool, define what job it has to do: * **Ideation:** Does your team need whiteboarding, flows, and quick sketches? * **Visual design:** Can it handle responsive screens, reusable components, and design systems? * **Interaction design:** Can it prototype gestures, transitions, state, and edge cases? * **Data and content:** Can designs be connected to real or realistic data? * **Developer handoff:** Can developers inspect specs, assets, tokens, and component behavior? * **Production path:** Does the work become the app, or is it a reference developers must rebuild? * **AI support:** Can AI help generate screens, iterate flows, or make real implementation changes? * **Ownership:** Can you get source code, avoid lock-in, and keep building as the product matures? For simple visual exploration, a design canvas is enough. For a serious app, you eventually need components, APIs, source control, testing, and publishing. That is where Draftbit can shorten the distance between design and launch. ## 1. Draftbit **Best for teams that want to design, build, connect data, preview, edit code, and publish from one workflow.** [Draftbit](https://draftbit.com/) is a visual app builder for real cross-platform apps. You can design screens visually, start from [app templates](/mobile-app-templates/), use AI agents to make app changes, connect REST and GraphQL APIs, preview the app, edit source code, export code, and publish to web, iOS, and Android. That makes Draftbit different from a static design or prototyping tool. A Figma prototype can help explain a product. A Draftbit project can become the product. Draftbit is especially useful when: * You want to move from idea to working app quickly. * You need a real React Native app, not a throwaway prototype. * Designers, founders, and developers need to collaborate in one workspace. * You want visual editing without giving up code access. * You want AI assistance, templates, integrations, and publishing in the same platform. * You may want experts to help finish backend setup, custom components, or launch details. **Watch out for:** Draftbit is a product-building platform, not a replacement for every design activity. Teams may still use Figma, Sketch, or Penpot for brand exploration, early visual systems, or stakeholder review before implementation. ## 2. Figma **Best for collaborative interface design, design systems, prototyping, and product team alignment.** [Figma](https://www.figma.com/design/) remains the standard design workspace for many teams. It runs in the browser, supports real-time collaboration, and gives teams a strong environment for wireframes, UI design, components, variables, prototypes, comments, and developer handoff. Figma’s ecosystem has expanded far beyond its original design canvas. Its product menu now includes Dev Mode, FigJam, Figma AI features, Figma Sites, Figma Draw, Figma Slides, and other tools. That makes it a strong hub for design teams, especially when multiple stakeholders need to comment, iterate, and inspect designs. Use Figma when: * Your team needs collaborative UI design. * You maintain a design system. * Designers and developers need shared specs and assets. * You need fast prototypes for user testing and stakeholder review. **Watch out for:** A Figma file is still not the app. Someone has to implement the designs. If the goal is to ship faster, pair Figma with Draftbit or move key screens into Draftbit once the design direction is clear. ## 3. Sketch **Best for Mac-based design teams that want a mature, focused UI design tool.** [Sketch](https://www.sketch.com/) is a long-running UI design tool with strong vector editing, components, symbols, reusable libraries, prototyping, and handoff workflows. It is still a good fit for teams that prefer a Mac-native design app and do not need every collaboration feature to happen inside a browser. Use Sketch when: * Your design team works primarily on macOS. * You want a focused UI design environment. * You already have Sketch libraries and design systems. * You need clean vector design and reusable components. **Watch out for:** Sketch is less universal than browser-first tools. If your team includes non-Mac collaborators or needs deep real-time collaboration across functions, compare the workflow carefully against Figma. ## 4. Penpot **Best for open-source design and prototyping with a collaborative web-based workflow.** [Penpot](https://penpot.app/) is an open-source design and prototyping tool. It is a strong option for teams that value open standards, self-hosting possibilities, and a design workflow that does not depend on a proprietary desktop app. Penpot is especially interesting for developer-friendly teams because it uses web concepts and is designed to be approachable for both designers and engineers. Use Penpot when: * You want an open-source design tool. * You care about transparency and portability. * Designers and developers want a shared language around layout and components. * Your team wants a lower-lock-in alternative to proprietary design platforms. **Watch out for:** Penpot’s ecosystem and plugin depth may differ from larger commercial tools. Validate your team’s required integrations before switching. ## 5. ProtoPie **Best for high-fidelity interaction prototypes that need realistic behavior.** [ProtoPie](https://www.protopie.io/) focuses on advanced prototyping. It is useful when you need realistic interactions, conditional logic, sensor inputs, device-to-device communication, voice interactions, or more complex motion than standard click-through prototypes can handle. Use ProtoPie when: * You need to test detailed interactions before implementation. * The interaction model is a product risk. * You need prototypes that feel closer to the real app. * You are validating gestures, connected devices, or complex state. **Watch out for:** ProtoPie is a prototyping specialist. It does not remove the need to implement the app. Use it when interaction fidelity matters enough to justify a dedicated tool. ## 6. Framer **Best for interactive web-first prototypes, product sites, and fast marketing experiments.** [Framer](https://www.framer.com/) is strongest for web experiences, landing pages, interactive prototypes, and fast publishing. It is less of a native mobile app builder and more of a product/marketing design tool with strong interaction and publishing workflows. Use Framer when: * You need a high-fidelity web prototype or landing page. * Marketing and product teams need to publish quickly. * You want polished interactions without a full frontend engineering cycle. * You are validating positioning, onboarding, or web-based flows. **Watch out for:** Framer is not the same as shipping a native mobile app. If the product needs iOS and Android app stores, Draftbit is the better fit for the production app surface. ## 7. Origami Studio **Best for advanced interaction experiments and motion-heavy prototypes.** [Origami Studio](https://origami.design/) is a free prototyping tool originally created by Meta. It is useful for designers who want to explore advanced interactions, patches, device inputs, and motion patterns at a level that simpler prototyping tools may not support. Use Origami Studio when: * You are experimenting with complex interaction behavior. * Motion and gesture details are central to the product. * You want to prototype with a patch-based interaction model. * Your design team has the time to learn a more specialized tool. **Watch out for:** Origami is powerful but specialized. For everyday app screens, it may be more tool than the team needs. ## 8. Zeplin **Best for design handoff, style guides, specs, and collaboration between design and engineering.** [Zeplin](https://zeplin.io/) helps teams document designs for implementation. It can organize screens, style guides, components, assets, measurements, and developer-facing notes. It is useful when design and engineering need a clear contract around what should be built. Use Zeplin when: * Your team has a mature design-to-development process. * Developers need reliable specs and assets. * You want a structured handoff layer outside the design file. * Product, design, and engineering teams need a shared implementation reference. **Watch out for:** Handoff tooling improves communication, but it does not guarantee the app matches the design. If implementation speed is the bottleneck, consider moving work into Draftbit sooner. ## 9. UXPin **Best for design systems and prototypes that behave more like real components.** [UXPin](https://www.uxpin.com/) is a UI design and prototyping platform with a focus on design systems, component-driven workflows, and its Merge technology for using coded components in design. Use UXPin when: * Your design system is close to the engineering component system. * You want prototypes that use realistic interactive states. * Design and engineering teams are trying to reduce drift between specs and code. * Enterprise design governance matters. **Watch out for:** UXPin is most valuable when the team invests in component governance. For one-off prototypes, simpler tools may be faster. ## 10. Rive **Best for interactive animation and motion assets that can ship in real apps.** [Rive](https://rive.app/) is a tool for interactive animation. It is useful for animated icons, onboarding illustrations, game-like UI, interactive states, and motion systems that need to run efficiently in production. Use Rive when: * Motion is part of the product experience. * You need animation assets that can respond to state. * You want more control than static Lottie files. * Your app needs polished onboarding, feedback, or game-like interactions. **Watch out for:** Rive is not a full UI design tool. Use it alongside Draftbit, Figma, or another product design workflow. ## Where do Adobe XD, Marvel, and InVision fit now? The original 2021 list included Adobe XD, Marvel, and InVision. They may still matter for existing teams, but they are not the strongest recommendations for a new mobile app workflow today. * **Adobe XD:** Existing users can still use it, and Adobe’s release notes show ongoing minor fixes. But if you are choosing a new design stack, compare it carefully against Figma, Sketch, Penpot, Draftbit, and more active workflows. * **Marvel:** Still useful for simple prototypes and user testing workflows, but it is less central to the current design-to-build conversation than it was in 2021. * **InVision:** The old InVision site redirects to Miro. Miro is useful for whiteboarding, planning, journeys, and product collaboration, but it is not a direct replacement for dedicated mobile UI design or a visual app builder. ## A practical design-to-launch workflow For a modern mobile app team, the strongest workflow often looks like this: 1. Use Figma, Sketch, Penpot, or Miro for early exploration. 2. Use Draftbit templates or AI agents to create the first working app structure. 3. Build real screens visually in Draftbit. 4. Connect APIs and backend services. 5. Use Figma or Zeplin only where design specs need more review. 6. Add motion assets from Rive or complex prototypes from ProtoPie when needed. 7. Bring in Draftbit experts for custom components, backend setup, code review, or launch support. This keeps design work close to implementation. It also reduces the common failure mode where a team spends weeks perfecting a prototype that still has to be rebuilt from scratch. ## FAQ ### What is the best mobile app design tool? For pure UI design and collaboration, Figma is the default choice for many teams. For building and shipping the actual app, Draftbit is the stronger fit because it combines visual editing, AI agents, code access, integrations, preview, and publishing. ### Can Draftbit replace Figma? Sometimes, but not always. Draftbit can replace parts of the design-to-build workflow when the goal is to create real app screens quickly. Figma is still useful for brand exploration, early visual design, design systems, and stakeholder review. ### What is the best tool for clickable prototypes? Figma is strong for everyday clickable prototypes. ProtoPie and Origami Studio are stronger when you need high-fidelity interactions, complex state, gestures, or advanced motion. ### What is the best open-source design tool? Penpot is the strongest open-source option for UI design and prototyping. It is worth evaluating if open standards, self-hosting, or lower lock-in matter to your team. ### What should founders use to design an app? Founders should avoid getting stuck in static mockups for too long. Use a design tool to clarify the product, then move quickly into Draftbit so you can test real screens, data, navigation, and publishing constraints. ## Conclusion The best mobile app design workflow is no longer just about making screens look good. It is about moving from idea to usable product with as little translation loss as possible. Use Figma, Sketch, Penpot, ProtoPie, Origami, Zeplin, UXPin, Framer, and Rive where they are strongest. Use Draftbit when you want the design to become a real cross-platform app with AI assistance, visual editing, backend integrations, source code access, and publishing built in. --- # Low-Code for Enterprise Mobile App Development: Speed Without Lock-In > See how AI-assisted low-code platforms help enterprise teams ship mobile apps faster while preserving source code access, integrations, governance, and expert… ### See how AI-assisted low-code platforms help enterprise teams ship mobile apps faster while preserving source code access, integrations, governance, and expert support. Dave Sebekon December 9, 2022 Low CodeApplication DevelopmentEnterprise  Enterprise mobile app development has a hard job: move quickly without creating systems the organization cannot govern, extend, or maintain. Teams need to support real business workflows, connect to existing services, protect data, collaborate across roles, and keep a path open for custom engineering. That is where modern low-code is different from the older “drag and drop” pitch. The best enterprise low-code platforms combine visual development, AI assistance, code access, integration flexibility, publishing workflows, and expert support. They help teams ship faster without forcing the app into a closed system. Draftbit is built around that model. Teams can build cross-platform apps with [AI assistance and visual editing](/platform/), connect REST, GraphQL, and MCP-backed services, preview on real devices, publish, and keep access to the underlying React Native and Expo source code. ## What enterprises need from low-code Enterprise teams are not only trying to save time. They are trying to reduce delivery risk. A serious low-code platform should help with: * Faster prototyping and delivery. * Collaboration between product, design, and engineering. * Integration with existing APIs and systems. * Reuse across teams and product lines. * Reviewable source code. * Support for custom logic and components. * App store and web publishing. * A way to bring in expert help for complex implementation work. If a tool only accelerates the first demo but blocks those needs later, it is not really enterprise-ready. ## 1. Faster delivery without bypassing engineering Enterprise app backlogs often contain valuable mobile use cases that never reach the top of an engineering roadmap: field operations tools, customer portals, partner workflows, internal approval apps, event experiences, training apps, and companion apps for existing services. Low-code helps by moving common implementation work into a faster workflow. Product and design teams can create real screens instead of static mockups. Developers can focus on architecture, data access, security, and custom logic. AI agents can help generate, refactor, and iterate in the build environment. The result is not “no engineering.” It is better allocation of engineering time. ## 2. Real integrations with existing systems Enterprise mobile apps usually need to work with systems that already exist: * Internal APIs. * Customer databases. * Authentication providers. * CRMs and support tools. * Analytics and attribution systems. * Commerce, payments, and subscription services. * CMS, storage, search, and automation platforms. * AI services and internal tools exposed through MCP. Draftbit supports this through [REST API integrations](/integrations/), [GraphQL integrations](/graphql/), and [MCP servers](/mcp/). That matters because enterprise apps should adapt to the organization’s systems, not force the organization to migrate everything into a proprietary database. ## 3. Lower cost through reuse and targeted expertise Low-code can reduce cost by eliminating repetitive screen implementation, shortening feedback cycles, and letting teams reuse patterns across apps. But the bigger enterprise cost advantage is targeted expertise. Some work should not be improvised: * Auth and permission models. * Backend architecture. * API design. * Offline or sync behavior. * Custom components. * Payment and subscription flows. * App store configuration. * Performance review and QA. * Migration from a legacy app or another platform. Draftbit’s [Expert Services](/services/) give teams a way to bring in experienced help for those areas without turning the entire project into a traditional agency build. Enterprise teams can own the app while specialists handle high-leverage work. ## 4. Source code access and reduced platform risk Enterprise buyers should be skeptical of any low-code platform that creates a black box. A fast prototype is useful, but it should not become a future rebuild risk. Before choosing a platform, ask: * Can developers inspect the generated code? * Can the code be exported? * Can the team add custom code? * Can the app connect to external APIs? * Can the team use existing services and packages? * Can a traditional engineering team continue development if needed? Draftbit generates real React Native and Expo code and is designed around source access. That is important for teams that want the speed of a visual platform without giving up long-term ownership. ## 5. Better collaboration across product, design, and engineering Enterprise mobile apps rarely belong to one team. Product needs to define workflows. Design needs to refine the interface. Engineering needs to own data, security, and implementation quality. Business stakeholders need to review progress before launch. A visual development platform creates a shared workspace around the actual app. Teams can work from live screens, preview on devices, and make iteration cycles shorter. AI agents add another layer by helping with scoped changes inside the build workflow instead of forcing every request through a ticket queue. ## 6. Incremental adoption Enterprises do not need to move every mobile project to low-code at once. The practical path is to start with a focused use case: | Use case | Why it fits low-code | | -------------------------- | ---------------------------------------------------------------------- | | Internal workflow app | Clear users, known processes, and fast feedback loops. | | Customer or partner portal | Common app patterns with real integration needs. | | Prototype or pilot | Validates scope before funding a larger roadmap. | | Legacy app replacement | Rebuilds a known workflow with a more flexible foundation. | | Companion app | Extends an existing product or service to mobile without a full reset. | Starting small lets the team validate governance, integration, review, and release processes before scaling the approach. ## What to look for in an enterprise low-code platform Use this checklist when comparing options: * **Code ownership:** Can your team access and export source code? * **Integration model:** Can it connect to REST, GraphQL, MCP, and your own services? * **AI workflow:** Do AI agents work inside the app-building context? * **Custom logic:** Can developers add code where the visual builder stops? * **Publishing:** Can the platform support web, iOS, and Android release paths? * **Collaboration:** Can product, design, and engineering work together without losing control? * **Expert support:** Is help available for complex architecture, migration, QA, and launch work? * **Exit path:** If requirements change, can the project continue outside the platform? ## FAQ ### Is low-code appropriate for enterprise mobile apps? Yes, when the platform supports real integrations, source code access, custom logic, collaboration, and governance. Low-code is weakest when it only optimizes for quick demos and strongest when it also supports long-term ownership. ### Can enterprise developers use Draftbit? Yes. Draftbit is useful for non-developers and developers. Non-developers can build and iterate visually, while developers can connect APIs, review code, add custom behavior, and export source code when needed. ### How does AI change enterprise low-code development? AI reduces the friction of making scoped changes, generating first drafts, refactoring, and navigating implementation details. In an enterprise context, the value is not replacing engineering judgment. It is helping teams move faster while developers focus on the parts that need deeper review. ### What kinds of enterprise apps are good fits? Internal tools, customer portals, partner apps, field workflows, approval flows, content apps, event apps, and companion apps are strong fits. Apps with highly unusual native performance requirements may still need more traditional engineering. ### How can Draftbit experts help enterprise teams? Draftbit experts can help with planning, UI implementation, backend connections, custom components, custom code, migrations, QA, and app store launch. That lets internal teams keep ownership while getting help where execution risk is highest. ## Conclusion The enterprise case for low-code is not simply “build apps without developers.” The better case is speed with control: faster prototypes, faster production workflows, stronger collaboration, flexible integrations, source code access, and expert support when the project needs it. Draftbit gives enterprise teams a practical way to adopt that model: build visually, use AI agents, connect existing systems, keep code ownership, publish across platforms, and bring in expert help for the work that matters most. --- # How Development Agencies Can Use Low-Code Without Sacrificing Quality > Learn how agencies can use AI-assisted low-code tools like Draftbit to protect margins, speed up mobile delivery, improve client collaboration, and keep… ### Learn how agencies can use AI-assisted low-code tools like Draftbit to protect margins, speed up mobile delivery, improve client collaboration, and keep source code ownership. Dave Sebekon December 9, 2022 Application DevelopmentLow Code  Mobile app projects can be difficult for agencies to price and deliver. Clients want polished apps, fast timelines, flexible scope, and clear ownership. Agencies need to protect margin, avoid endless rework, and keep senior engineers focused on the parts of a project that actually need senior engineering. Low-code can help, but only if it is used as a delivery system rather than a shortcut. The goal is not to replace agency craft. The goal is to remove repetitive implementation work, make collaboration more concrete, and give clients faster access to a working app. Draftbit gives agencies that kind of workflow: [AI-assisted visual app development](/platform/), reusable templates, REST and GraphQL integrations, MCP support for AI agents, live preview, publishing paths, custom code, and source code access. ## Why agencies should care about low-code now Agency work has changed. Clients have seen AI-generated prototypes. They expect faster iteration. They also still expect production quality, clean handoff, and sound technical decisions. That creates pressure on the agency delivery model. A traditional mobile app build can burn budget before the client has validated the workflow. A no-code-only tool can move quickly but create problems when the app needs custom behavior, integrations, or code ownership. Modern low-code sits between those extremes. It gives agencies a faster way to produce real apps while preserving the technical path for custom work. ## 1. Faster proposals, prototypes, and paid discovery Agencies often lose time translating a client’s idea into documents, static mockups, estimates, and revised estimates. A working prototype changes that conversation. With [Draftbit mobile app templates](/mobile-app-templates/), AI-assisted generation, and visual editing, agencies can create a first version quickly enough to support discovery. Clients can react to screens, navigation, data flows, and interaction patterns before the agency commits to a full implementation plan. That improves scoping because the conversation moves from abstract requirements to a real app surface. ## 2. Better margins on repeatable mobile work Many agency apps include patterns the team has built before: * Onboarding. * Authentication. * Lists and detail views. * Forms. * Dashboards. * Booking flows. * Content feeds. * Account settings. * Notifications. * Admin or approval workflows. Low-code reduces the cost of those repeatable pieces. The agency can spend more time on positioning, UX, backend architecture, integrations, custom components, QA, and client-specific edge cases. That is where the margin advantage comes from: not from doing lower-quality work, but from spending less time on work that should not be custom every time. ## 3. Stronger collaboration with clients Client feedback is more useful when the client can use the app. Low-code makes it easier to show real screens, real data states, and real interactions earlier in the project. Draftbit’s live preview workflow helps agencies review progress with clients across mobile and web targets. Product managers, designers, and developers can all work closer to the same artifact instead of handing work between separate documents and codebases. ## 4. A safer path than closed no-code tools Agencies have to think beyond the launch. A client may later hire an internal developer, raise a new round, change vendors, add a complex integration, or need a deeper custom feature. That is why source code access matters. If the tool traps the project in a closed runtime, the agency may be creating future rebuild risk for the client. Draftbit is designed for teams that want visual speed without giving up ownership. Agencies can build in Draftbit, add custom code where needed, and preserve a path to the generated React Native and Expo source code. ## 5. Easier integration work Most client apps are not isolated. They need to connect to CRMs, CMSs, marketplaces, payments, analytics, backends, AI services, support systems, or internal APIs. Draftbit supports [REST integrations](/integrations/), [GraphQL endpoints](/graphql/), and [MCP servers](/mcp/) for giving AI agents access to real tools during the build process. That means agencies can build around a client’s existing stack instead of forcing every project into the same backend. ## 6. A flexible resourcing model Low-code lets agencies use specialists more efficiently: * Designers can work closer to production screens. * Product leads can validate flows earlier. * Developers can focus on APIs, custom code, and review. * QA can test earlier because there is a working app sooner. * Senior technical leads can review architecture instead of building every common screen. Draftbit [Expert Services](/services/) can also extend an agency’s bench for specific needs such as custom components, backend connections, migration, app store setup, or code review. That can help when a project has a deadline or a scope spike without forcing the agency to hire for every specialty. ## Where low-code fits in an agency workflow A practical agency workflow looks like this: 1. Use discovery to define the smallest useful app. 2. Start from a template or AI-assisted first draft. 3. Build core screens visually. 4. Connect realistic data early. 5. Review with the client on real devices. 6. Identify the features that need custom code. 7. Bring in developers or experts for architecture, integrations, and edge cases. 8. Publish, hand off, and keep a clear source-code path for future work. Low-code works best when it is part of the agency’s delivery process, not an isolated experiment. ## What agencies should avoid Low-code can backfire when agencies treat it as a way to skip product thinking or technical review. Avoid: * Promising complex custom behavior before validating platform fit. * Ignoring source code access and handoff expectations. * Building against fake data for too long. * Letting AI-generated output ship without human review. * Treating integrations as an afterthought. * Using low-code for apps whose core value depends on unusual native performance requirements. The stronger model is to use low-code for speed, then apply expert review where the project carries risk. ## FAQ ### Can agencies use low-code for client work? Yes. Low-code can be a strong fit for agency work when the platform supports custom code, integrations, preview, publishing, and source code access. It is especially useful for MVPs, customer portals, internal tools, booking apps, content apps, and companion mobile apps. ### Does low-code make agency work less valuable? No. It changes where the value is. Clients still need strategy, UX, data modeling, integration design, custom code, QA, launch support, and long-term product judgment. Low-code reduces repetitive implementation so agencies can spend more time on those higher-value areas. ### Should agencies tell clients they are using low-code? Usually, yes. It is easier to build trust when the client understands the delivery model, the ownership model, and the handoff path. Source code access and integration flexibility make that conversation stronger. ### How does Draftbit help agencies protect client ownership? Draftbit gives agencies a visual building workflow while preserving access to real React Native and Expo source code. That helps clients avoid being locked into a closed prototype if the app grows. ### When should an agency bring in Draftbit experts? Bring in experts when the project has a risky or time-sensitive piece: backend architecture, API integration, custom components, app store setup, migration from another platform, QA, or code review. ## Conclusion Low-code is most useful to agencies when it improves delivery without weakening quality. The right platform helps the agency move faster, collaborate better, protect margins, and keep a credible technical path for custom work. Draftbit gives agencies a practical way to do that: build visually, use AI agents, connect real services, add custom code, keep source code access, publish across platforms, and bring in experts when the project needs extra depth. --- # Best CI/CD Tools for Mobile App Developers > Compare the best CI/CD and release tools for mobile apps, including Draftbit, Expo EAS, GitHub Actions, Bitrise, Codemagic, Fastlane, Xcode Cloud, CircleCI,… ### Compare the best CI/CD and release tools for mobile apps, including Draftbit, Expo EAS, GitHub Actions, Bitrise, Codemagic, Fastlane, Xcode Cloud, CircleCI, GitLab CI/CD, and Jenkins. Shanika Wickramasingheon December 13, 2021 Application DevelopmentMobile App Development   Mobile CI/CD is harder than web CI/CD. A web app can often be deployed with one build command and a hosting provider. A mobile app has more moving parts: iOS signing, Android keystores, native dependencies, build profiles, simulator and device tests, TestFlight, Google Play testing tracks, app store metadata, staged rollouts, over-the-air updates, and crash monitoring. That is why the best mobile release workflow is not always one tool. It is usually a stack. This guide was originally published as a 2022 roundup. It has been refreshed for today’s Draftbit platform and modern mobile release workflows. Draftbit now combines AI-assisted app building, visual editing, live preview, source code access, integrations, and publishing. For many teams, Draftbit can handle much of the app creation and launch workflow directly. For teams that also need custom CI, exported code, or deeper release automation, the tools below are the ones worth evaluating. If your app is stuck at the “almost ready” stage, [Draftbit Expert Services](/services/) can help with app store setup, build issues, signing, backend integrations, custom code, migrations, QA, and launch support. ## Quick answer: which mobile CI/CD tool should you use? | Need | Strong fit | | -------------------------------------------------------------------------- | ------------------------------------------------------- | | Build visually and publish without managing a full CI stack | [Draftbit](https://draftbit.com/) | | Expo or React Native builds, submissions, updates, and workflow automation | [Expo Application Services](https://docs.expo.dev/eas/) | | General-purpose CI close to your GitHub repo | [GitHub Actions](https://github.com/features/actions) | | Mobile-first CI/CD for iOS and Android teams | [Bitrise](https://bitrise.io/) | | Flutter, React Native, native Android, and native iOS CI/CD | [Codemagic](https://codemagic.io/) | | App store automation, code signing, screenshots, and release lanes | [fastlane](https://fastlane.tools/) | | Apple-native CI/CD inside Xcode and App Store Connect | [Xcode Cloud](https://developer.apple.com/xcode-cloud/) | | Flexible hosted CI for teams already using CircleCI | [CircleCI](https://circleci.com/) | | GitLab-native pipelines and DevSecOps workflows | [GitLab CI/CD](https://docs.gitlab.com/ci/) | | Self-hosted CI where your team controls everything | [Jenkins](https://www.jenkins.io/) | ## What changed since the original 2022 post? The old mobile CI/CD conversation was mostly about which CI server could run builds. The modern conversation is broader: * **AI-generated and AI-edited code still needs release discipline.** AI can speed up implementation, but tests, reviews, signing, and release checks matter more when changes happen faster. * **Expo Application Services has become a core part of many React Native workflows.** EAS includes build, submit, update, metadata, hosting, workflows, and monitoring-related services. * **GitHub Actions is now the default general-purpose CI choice for many teams.** If your source code already lives on GitHub, the automation surface is close to the pull request workflow. * **Mobile-first services still matter.** Bitrise and Codemagic understand signing, native build machines, app store delivery, and mobile build constraints. * **Draftbit changes the release model.** Teams can build visually, preview, export code, connect services, and publish from the platform instead of assembling everything from scratch. ## What a mobile release workflow needs Before choosing tools, decide which release jobs your app actually needs: * **Preview builds:** Internal builds for founders, clients, QA, or early users. * **Automated checks:** Type checks, linting, unit tests, integration tests, and end-to-end tests. * **Native builds:** iOS and Android builds with the right build profiles and native dependencies. * **Code signing:** Certificates, provisioning profiles, keystores, and secure secrets handling. * **Submission:** Uploads to TestFlight, App Store Connect, Google Play internal testing, or production tracks. * **Over-the-air updates:** Small JS or asset updates where the stack supports it. * **Release metadata:** Version numbers, release notes, screenshots, app store descriptions, and compliance details. * **Monitoring:** Crash reports, analytics, performance data, and production feedback. Draftbit can reduce how much of this you need to own directly. But if you export code, use custom native modules, or maintain a mature engineering process, you will still want a clear CI/CD strategy. ## 1. Draftbit **Best for teams that want to build, preview, and publish cross-platform apps without managing every part of CI/CD themselves.** [Draftbit](https://draftbit.com/) is not a traditional CI server. It is a visual app development platform with AI assistance, live preview, code editing, source code export, integrations, and publishing workflows built in. That matters because many mobile teams do not actually want to become CI/CD experts. They want to ship the app. Draftbit helps teams move from idea to launch by keeping design, app structure, backend connections, preview, code access, and publishing in one workspace. Use Draftbit when: * You want to ship web, iOS, and Android from one app-building workflow. * You want visual editing and AI agents without losing source code access. * You need live preview and client/team collaboration. * You want to avoid wiring together a full mobile CI/CD pipeline too early. * You want experts available for launch support, app store setup, custom code, or QA. **Watch out for:** If your app requires a custom native release process, a large engineering org, or deep infrastructure policies, you may still pair Draftbit with GitHub, EAS, GitHub Actions, Bitrise, or another CI/CD system. ## 2. Expo Application Services (EAS) **Best for Expo and React Native teams that need cloud builds, app submissions, updates, workflow automation, and related release services.** [Expo Application Services](https://docs.expo.dev/eas/) are cloud services for Expo and React Native apps. The EAS docs describe services for build, submit, hosting, update, metadata, insights, observe, workflows, and distribution. EAS is one of the most important tools in the React Native ecosystem because it handles painful mobile tasks: compiling and signing Android/iOS apps in the cloud, submitting to stores, triggering builds from CI, and shipping supported over-the-air updates. Use EAS when: * Your app is Expo or React Native. * You need iOS and Android cloud builds. * You want managed app signing and store submissions. * You need update workflows for supported JavaScript and asset changes. * You want mobile-specific release tooling rather than a generic CI server alone. **Watch out for:** EAS is strongest when your app fits the Expo/React Native workflow. If your app has unusual native requirements, validate the build profiles and native configuration early. ## 3. GitHub Actions **Best for teams that keep source code on GitHub and want CI/CD tied directly to pull requests, branches, tags, and releases.** [GitHub Actions](https://github.com/features/actions) is a general-purpose automation platform built into GitHub. For mobile teams, it is often used for linting, type checks, tests, triggering EAS builds, running Fastlane lanes, publishing artifacts, and enforcing pull request checks. GitHub Actions is not mobile-specific, but it is close to the development workflow. That makes it a strong orchestration layer even when the actual mobile build happens in EAS, Bitrise, Codemagic, or Xcode Cloud. Use GitHub Actions when: * Your repo is on GitHub. * You want checks on pull requests. * You need flexible YAML workflows. * You want to trigger EAS, Fastlane, or other release tools from Git events. * You want CI close to code review and branch protection. **Watch out for:** iOS builds require macOS runners and careful secret handling. For production mobile builds, many teams use Actions as the orchestrator and delegate native builds to mobile-focused tooling. ## 4. Bitrise **Best for mobile-first teams that want hosted CI/CD designed around iOS, Android, React Native, Flutter, and app store delivery.** [Bitrise](https://bitrise.io/) is a mobile CI/CD platform. It is built around mobile workflows, signing, build stacks, test steps, deploy steps, and common iOS/Android automation. Bitrise is a good fit when mobile release complexity is high enough that a generic CI service becomes too much maintenance. It gives mobile teams a workflow builder and a large ecosystem of mobile-specific steps. Use Bitrise when: * Your team ships native or cross-platform mobile apps regularly. * You want mobile-specific build steps and workflows. * iOS signing and app store delivery are recurring pain points. * You want a hosted CI platform focused on mobile release. **Watch out for:** Mobile-first platforms can cost more than generic CI when usage grows. Compare pricing against your expected build volume, concurrency, and required machine types. ## 5. Codemagic **Best for Flutter, React Native, native Android, and native iOS teams that want a mobile-focused CI/CD service.** [Codemagic](https://codemagic.io/) is another mobile-focused CI/CD platform. It is well known in Flutter workflows but also supports React Native and native mobile projects. It can handle builds, tests, signing, and app store distribution. Use Codemagic when: * You want a mobile-first CI/CD service. * Your team uses Flutter, React Native, iOS, or Android. * You need code signing, store publishing, and build automation in one place. * You prefer a hosted CI service tuned for mobile projects. **Watch out for:** As with any hosted CI/CD tool, validate build minutes, concurrency, machine types, and signing workflows before standardizing. ## 6. fastlane **Best for automating app store releases, signing, screenshots, metadata, beta distribution, and repeatable release lanes.** [fastlane](https://fastlane.tools/) is not a hosted CI service. It is an automation toolkit that can run locally or inside CI. It remains a key part of many mobile pipelines because it automates work around certificates, provisioning profiles, screenshots, TestFlight, Google Play, release notes, versioning, and store submissions. Use fastlane when: * You need repeatable release scripts. * App Store Connect or Google Play tasks are taking too much manual time. * You want the same release lane locally and in CI. * You use GitHub Actions, CircleCI, Bitrise, Codemagic, Jenkins, or GitLab and need mobile release automation inside the pipeline. **Watch out for:** fastlane is powerful but script-driven. Keep lanes understandable, document secrets, and avoid turning release scripts into tribal knowledge. ## 7. Xcode Cloud **Best for Apple-platform teams that want CI/CD built into Xcode, App Store Connect, and TestFlight.** [Xcode Cloud](https://developer.apple.com/xcode-cloud/) is Apple’s CI/CD service for Apple developers. Apple describes it as built into Xcode and designed for Apple developers, with cloud builds, automated tests, TestFlight delivery, App Store Connect integration, and feedback visibility. Use Xcode Cloud when: * Your team is heavily focused on iOS, iPadOS, watchOS, tvOS, visionOS, or macOS. * You want builds and results inside Xcode. * TestFlight workflows are central. * You prefer Apple’s native developer tooling. **Watch out for:** Xcode Cloud is Apple-centric. If your app is cross-platform and Android is equally important, you may need another tool for the Android side or a broader mobile CI service. ## 8. CircleCI **Best for teams that already use CircleCI and need flexible hosted CI for checks, builds, and release orchestration.** [CircleCI](https://circleci.com/) is a mature CI/CD platform. It is not only for mobile, but it can run many mobile pipeline tasks, especially for teams that already use CircleCI across web, backend, and infrastructure projects. Use CircleCI when: * Your organization already uses CircleCI. * You want reusable configuration and flexible pipelines. * You need CI across mobile, web, backend, and infrastructure. * You are comfortable managing mobile-specific signing and runner needs. **Watch out for:** Mobile builds have special requirements. Make sure macOS executor availability, Android images, caching, and secrets handling fit your release needs. ## 9. GitLab CI/CD **Best for teams using GitLab as their source control and DevSecOps platform.** [GitLab CI/CD](https://docs.gitlab.com/ci/) is built into GitLab. It is useful when your team wants source control, merge requests, CI/CD, package/container registries, security scanning, environments, and release workflows in one platform. Use GitLab CI/CD when: * Your repo is already on GitLab. * You want CI/CD close to merge requests and GitLab permissions. * You need broader DevSecOps workflows. * Your team can maintain mobile-specific runner and signing setup. **Watch out for:** Like GitHub Actions and CircleCI, GitLab CI/CD is general-purpose. Mobile signing, app store submission, and native build machines still need careful configuration. ## 10. Jenkins **Best for teams that need self-hosted CI/CD, deep customization, and full operational control.** [Jenkins](https://www.jenkins.io/) remains a viable CI/CD option when a team needs full control over infrastructure, plugins, build machines, internal networks, and custom workflows. It can run mobile pipelines, but the team owns the operational burden. Use Jenkins when: * You need self-hosted CI for compliance or network reasons. * Your build process is highly custom. * You have existing Jenkins infrastructure. * Your team has the capacity to maintain agents, plugins, security updates, and credentials. **Watch out for:** Jenkins can become expensive in engineering time. For most early-stage mobile teams, managed tools are faster and safer. ## What about Bamboo, Travis CI, Buddy, and Semaphore? Those tools can still be useful in the right organization, but they are no longer the first places we would send most mobile app teams starting fresh: * **Bamboo** fits some Atlassian-heavy enterprises, but many teams now choose GitHub Actions, GitLab CI/CD, CircleCI, or mobile-first tools. * **Travis CI** was historically important, but it is less central to modern mobile release workflows than it once was. * **Buddy** and **Semaphore** can work well for general CI/CD, but mobile teams should compare them against EAS, Bitrise, Codemagic, Xcode Cloud, and Fastlane before committing. ## A practical Draftbit release workflow A Draftbit team might not need a complex CI/CD stack on day one. A pragmatic path is: 1. Build the app visually in Draftbit. 2. Use AI agents to accelerate implementation and iteration. 3. Preview on web and device early. 4. Connect APIs, auth, and backend services. 5. Use Draftbit publishing for launch when it fits your app. 6. Export source code to GitHub when you need deeper engineering workflows. 7. Add GitHub Actions, EAS, Fastlane, or a mobile-first CI tool when custom release automation becomes necessary. 8. Bring in Draftbit experts for signing, app store submission, custom native code, or release troubleshooting. This avoids over-engineering the pipeline before the product needs it. ## Mobile CI/CD checklist Before you ship, make sure your release workflow answers these questions: * Who owns app signing credentials? * Where are secrets stored? * How do you create internal test builds? * What tests run before a release? * How do you handle failed builds? * How do you submit to TestFlight and Google Play testing tracks? * Who writes release notes and app store metadata? * How do you roll back or patch urgent issues? * Where do crash reports and analytics go after launch? * What parts of the workflow can Draftbit handle, and what parts need custom CI? ## FAQ ### What is the best CI/CD tool for React Native? For many React Native apps, Expo Application Services is the best mobile-specific release tool. GitHub Actions is a strong orchestration layer, and Bitrise or Codemagic are strong hosted mobile CI options. Draftbit can reduce the amount of custom CI/CD you need by handling visual building, preview, publishing, and code export. ### Do I need CI/CD before launching an MVP? Not always. If you are building with Draftbit, you can often get much further before introducing a custom pipeline. Add CI/CD when multiple people are committing code, release mistakes become expensive, or app store submissions need repeatable automation. ### Is Draftbit a CI/CD tool? Draftbit is not a traditional CI server. It is an AI-assisted visual app development platform with publishing, preview, integrations, code access, and export. For many teams, it covers enough of the build-and-launch workflow that they can delay or simplify a separate CI/CD setup. ### What is the best tool for app store automation? fastlane remains one of the most useful tools for app store automation. It can run inside GitHub Actions, Bitrise, Codemagic, CircleCI, GitLab CI/CD, Jenkins, or other CI systems. ### What should I use for iOS-only apps? Xcode Cloud is a strong choice for Apple-only teams because it is built into Xcode, App Store Connect, and TestFlight. Cross-platform teams should compare it with EAS, Bitrise, Codemagic, and GitHub Actions. ## Conclusion The best mobile CI/CD setup is the one that matches your release complexity. Early teams should avoid building a heavyweight pipeline before they need it. Mature teams should automate checks, signing, builds, submissions, metadata, and monitoring before release mistakes become expensive. Draftbit gives teams a faster starting point: build visually, use AI agents, connect data, preview, publish, and keep access to real source code. When your app needs deeper release automation, pair Draftbit with EAS, GitHub Actions, fastlane, Xcode Cloud, Bitrise, Codemagic, GitLab CI/CD, CircleCI, or Jenkins based on the workflow your team actually needs. --- # The Complete Guide to React Native Flexbox Layout using Draftbit’s Visual Builder > How Draftbit uses React Native's Flexbox layout to build apps visually. ### How Draftbit uses React Native's Flexbox layout to build apps visually. Aman Mittalon September 8, 2021 React NativeLow CodeMobile App DevelopmentProgrammingNo Code   ‍ In a React Native app, the **Flexbox algorithm** is used to specify the layout of a component and its children. The algorithm itself is designed to provide consistency among different screen sizes. In this tutorial, I am going to introduce you to how to use various Flexbox properties to create different layout patterns using Draftbit. ## What is Draftbit? > [**Draftbit**](https://draftbit.com/) is a visual builder for creating React Native apps. It makes creating layouts using Flexbox easier and faster than hand-coding them.\ > ‍\ > With a Draftbit account, you can build unlimited Flexbox layouts and export the screen code (all for free, no credit card required). ## Building Flexbox Layouts in Draftbit I am going to use a *Blank* screen template to start with that is going to wrap two components. The first child component is going to be the Text of what the example is about, and the second is going to be a View component. In this View component, you are going to see examples of different Flexbox layout properties. An example of the template used in this tutorial with a Text and a View component. This screen is going to be modified throughout this tutorial. ‍  ‍ The goal of this post is to give you an overview of how you can leverage the tooling provided in the Draftbit build tool. For a quick reference, all the layout properties used can be referred to in the **Properties** **panel** on the right side. ## The flexDirection property The flexDirection controls the direction of the main axis in which children components are laid out. By default, it has a value set to column along the main axis. The first step is to create three children View components inside the parent View. Each of the child components is going to have a different background color and set a width and height of 50. With the default flexDirection property value, all of these child components are going to appear vertically aligned adjacently. ‍  ‍ The flexDirection property allows the children component to be placed in the opposite direction. This is easily achievable in Draftbit as well. In the right panel, once the direction of the flex items is set, you can enable the **Reverse** property. The example below shows how to set the value of flexDirection to row-reverse. ‍  ‍ Similarly, column-reverse value can be achieved. ‍  ‍ ## The justifyContent property The justifyContent controls how the children components are aligned within the main axis of their parent component. The default value of this property for each child is flex-start where a child component is aligned at the start of the parent component’s main axis. ‍  ‍ To change the value of this property, let’s say to align all the children component at the center of the main axis, you have to change the value of **Justify** property under **Flex Items**: ‍  ‍ You can set the value to flex-end to align the child components at the end of the parent’s main axis: ‍  ‍ Setting the value to space-between is going to spread the children components across the parent’s main axis by evenly distributing the remaining space between them: ‍  ‍ Setting the value to space-around is going to evenly place the children components on the parent’s main axis, distributing the remaining space around them: ‍  ‍ The last property value is space-evenly which is used to evenly distribute the spacing between each child component. ‍  ‍ ## The alignItems property The value of alignItems property affects the children components to be aligned along with the cross or the secondary axis inside the parent component. The default value of this property is stretch. In the example below the width and height of each child component have a fixed value of 50pt. This overrides the Stretch property. ‍  ‍ The children component must not have a fixed width for this property to affect the secondary axis. The example below shows that when then width is set to auto from the right panel, the alignItems: stretch property works as expected. ‍  ‍ The value flex-start aligns the children at the start of the parent’s secondary axis: ‍  ‍ The value flex-end aligns the children at the end of the parent’s secondary axis: ‍  ‍ The value center aligns the children at the center of the parent’s secondary axis: ‍  ‍ ## The alignSelf property The value of the align-self property is used to change the alignment of an individual child component by overwriting the value of alignItems set by the parent component. For example, when the value of alignItems of the parent component is set to flex-start but the first child has an alignSelf value of flex-end. To change the assign the property of alignSelf to an individual child component, you have to select the child component and then from right panel, go to Selected Item and change the value of Align to flex-end. ‍  ‍ Similarly, when the parent component has the value of flex-end for the alignItems property, set the alignSelf to flex-start of the first child component: ‍  ‍ Setting the value to center for the child component is going to have the following effect: ‍  ‍ On removing the fixed width dimension of the first child component and setting the value to stretch is going to have the following effect: ‍  ‍ ## The flexWrap property The flexWrap property wraps the children components along the main axis on multiple lines when they overflow the size of the parent component. The default value of this property is nowrap: ‍  ‍ The other two values are wrap: ‍  ‍ And the wrap-reverse: ‍  ‍ ## The alignContent property The alignContent property aligns the child components across multiple lines on the secondary axis when they are wrapped using the flexWrap property. The default value of this property is flex-start. ‍  ‍ The second value aligns the wrapped lines in the center of the parent component’s secondary axis. ‍  ‍ The value flex-end aligns the wrapped lines at the end of the parent component’s secondary axis. ‍  ‍ The space-between value distributes the space between the wrapped lines. ‍  ‍ The space-around value evenly distributes the space around the wrapped lines. ‍  ‍ ## The position absolute The property position enables a child component to be positioned relatively within a parent component. The default value of this property known as relative defines each element to be positioned exactly how the flow of the layout. In the example below, the first child component has a fixed margin of 20pt from top and left. The second child has a fixed margin of 40pt from top and left and the third child has a fixed margin of 60pt from top and left. The other two margin properties (right and bottom) are left at auto. ‍  ‍ The absolute value allows a child component to layout independently of its siblings. The margin property for each child element remains the same from the previous example. ‍  ‍ ## The zIndex property This property can control which child component to be displayed on top of its siblings. In the example below, the second child component is displayed on top of the first and the third sibling. The value to control the position is determined by setting the zIndex to 1. To change the value of zIndex, go to the right panel, and under the property Position you will find the Z-Index field, as shown in the example below.  ## Conclusion After completing this tutorial, you’ve got the overview of how to use Flexbox layout elements when building UI components using Draftbit. Here are some links to help you out: * [**Draftbit documentation on Layout properties**](https://docs.draftbit.com/docs/layout) which provides an overview of all the available properties related to Flexbox. * The official [**Yoga Layout documentation**](https://yogalayout.com/playground) and its [playground](https://yogalayout.com/playground). * More information about position property at [MDN web docs](https://developer.mozilla.org/en-US/docs/Web/CSS/position). * React Native [official documentation](https://reactnative.dev/docs/layout-props) on different Layout properties. * [For Flexbox Layout patterns, this post refers to The Full React Native Layout Cheat Sheet](https://medium.com/wix-engineering/the-full-react-native-layout-cheat-sheet-a4147802405c). * Check out more [**tutorials**](https://community.draftbit.com/c/tutorials) on building mobile apps from scratch using Draftbit. > 💜 We at [Draftbit love our Community](https://draftb.it/3vXK2K3) and are always open for your questions, feedback and feature requests. You will also find more resources to learn and build with Draftbit.\ > ‍\ > Reach out to us on [twitter/@draftbit](https://draftb.it/3fg3ueC) for more questions. --- # How to Lower the Cost of Mobile App Development Without Losing Control > Learn how AI-assisted low-code platforms like Draftbit lower mobile app development costs while preserving code access, integrations, publishing, and expert… ### Learn how AI-assisted low-code platforms like Draftbit lower mobile app development costs while preserving code access, integrations, publishing, and expert support. Dave Sebekon December 9, 2022 Small BusinessStartupsLow CodeMobile App Development  Mobile apps get expensive when every decision turns into custom engineering. Screens, navigation, authentication, backend connections, QA, app store setup, and maintenance all add cost. The biggest budget risk is not usually one feature. It is the accumulation of slow handoffs and rework. AI-assisted low-code platforms reduce that cost by changing the workflow. Instead of starting with a blank codebase and building every common pattern from scratch, teams can start with templates, use AI agents, build visually, connect existing services, preview on real devices, publish faster, and add custom code only where the product actually needs it. Draftbit is built for that balance: [visual app development with AI](/platform/), real source code access, integrations, app templates, publishing, and [Expert Services](/services/) when you want experienced help without hiring a full agency. ## The real cost drivers in mobile app development Before comparing low-code and traditional development, it helps to understand where app budgets go: | Cost driver | Why it adds up | | ----------------- | -------------------------------------------------------------------------------------- | | Product scope | More roles, flows, and edge cases mean more build and QA time. | | UI implementation | Every screen has layout, states, responsiveness, and device behavior. | | Backend work | Auth, permissions, database design, APIs, and storage need careful setup. | | Integrations | Payments, analytics, CMS, CRM, maps, notifications, and AI services add complexity. | | Custom code | Some features need developer judgment and testing. | | QA and launch | App store submission, device testing, release notes, and fixes take time. | | Maintenance | Dependencies, platform changes, user feedback, and new features continue after launch. | Low-code helps when it reduces these costs without creating a new lock-in problem later. ## How AI-assisted low-code lowers cost ### Faster first versions The first version of an app is usually about learning. Do users understand the workflow? Does the navigation make sense? Is the data model correct? Does the idea deserve more investment? Draftbit helps teams get to that learning faster with [app templates](/mobile-app-templates/), AI agents, visual editing, and live preview. A working first version is more valuable than a polished static mockup because users can interact with it. ### Less repetitive implementation Many app screens use known patterns: lists, detail views, forms, onboarding flows, account screens, settings, dashboards, and content pages. Rebuilding those from scratch is expensive. Visual building and reusable components reduce the amount of repetitive engineering. Developers and experts can spend more time on architecture, custom logic, performance, security, and edge cases. ### Fewer handoffs Traditional app development often separates product, design, engineering, QA, and release into different phases. Each handoff creates room for misunderstanding and rework. Draftbit keeps more of the work close to the actual app. Teams can change screens visually, ask AI agents for scoped updates, preview on devices, and involve experts when needed. ### Better use of expert time Expert help is most valuable when applied to high-leverage decisions: * Backend architecture. * Auth and permissions. * Custom components. * Payment flows. * App store launch. * Performance and QA. * Migration from another platform. * Code review before release. With Draftbit, you can build a lot yourself and bring in [Expert Services](/services/) for the parts where technical depth matters. That is often more cost-effective than asking an agency to build every screen from the ground up. ## The cost of lock-in The cheapest path at the beginning is not always the cheapest path long term. If a platform helps you build quickly but traps your app in a proprietary runtime, the cost may show up later as a rebuild. When evaluating any low-code platform, ask: * Can I access or export source code? * Can I connect my own backend? * Can I use REST or GraphQL APIs? * Can I add custom code? * Can I use external packages or services? * Can I publish to the platforms my users need? * Can developers continue the project if requirements become more complex? Draftbit is designed to preserve flexibility. You can build visually, connect [REST](/integrations/) and [GraphQL](/graphql/) services, use AI-assisted workflows, edit code, and export source code when needed. ## When low-code is the most cost-effective path AI-assisted low-code is usually a strong fit for: * MVPs and proof-of-concepts. * Founder-led app launches. * Internal tools. * Customer portals. * Marketplaces. * Booking and scheduling apps. * Coaching, fitness, and wellness apps. * Content and community apps. * App rebuilds or migrations. * Existing apps that need a faster iteration workflow. It is especially useful when the app follows common product patterns but still needs to feel custom to the brand and business. ## When traditional development may be worth the cost Traditional development can still be the better investment when: * The app depends on unusual native device features. * Performance constraints are central to the product. * The organization has strict infrastructure or compliance requirements. * The app requires a custom architecture from day one. * A visual builder cannot represent the core experience. * A large engineering team will own the product long term. Even in those cases, Draftbit can still be useful for prototypes, internal tools, companion apps, admin experiences, or early validation before custom engineering begins. ## A practical cost-conscious workflow If you want to control cost without cutting corners, use this workflow: 1. Define the smallest launchable workflow. 2. Start from a Draftbit template or AI-assisted first draft. 3. Build real screens visually. 4. Connect real or realistic data early. 5. Preview on devices before adding secondary features. 6. Use custom code only where it creates real product value. 7. Bring in experts for backend, QA, custom components, or app store launch. 8. Publish, learn, and iterate instead of rebuilding from scratch. This keeps cost aligned with learning. ## FAQ ### Is low-code always cheaper than traditional development? No. Low-code is cheaper when the app fits common patterns and the platform gives you enough flexibility. It can become expensive if you hit platform limits and need to rebuild. That is why code access and integration flexibility matter. ### What is the cheapest way to build a mobile app? The cheapest useful path is usually to start with a focused scope, a proven template, AI-assisted iteration, and real user testing. Building too many features before validation is usually more expensive than the platform choice itself. ### Can Draftbit reduce agency costs? Yes. Draftbit can reduce the amount of work that needs custom implementation. You can build visually, use AI, and bring in Draftbit experts for targeted work instead of paying an agency to hand-build every standard screen. ### Does saving money mean sacrificing code ownership? It should not. Draftbit is designed for teams that want faster visual development while keeping access to real source code and custom code paths. ### When should I pay for Expert Services? Use Expert Services when a technical decision could become expensive if done wrong: auth, backend architecture, custom components, app store setup, performance, migration, or code review before launch. ## Conclusion The most cost-effective way to build a mobile app is not always the lowest upfront quote. It is the workflow that helps you learn quickly, avoid unnecessary custom work, preserve ownership, and invest expert time where it has the most impact. Draftbit gives teams that path: start visually, use AI to move faster, connect real services, keep code access, publish across platforms, and bring in experts when the app needs deeper technical work. --- # The Hapi Path to Express.js for our Backend Services > Draftbit Sr. Software Engineer Shawn Michael Larkin explains the technical context for our switch from Hapi to Express.js, and its advantages for our end-users. ### Draftbit Sr. Software Engineer Shawn Michael Larkin explains the technical context for our switch from Hapi to Express.js, and its advantages for our end-users. Shawn Michael Larkinon December 14, 2021 Backend Development   Draftbit is a web application with a frontend — the Builder that users interact with — and a backend — the hidden services and database that stores data and “does stuff” behind the scenes. Most users will be at home with this paradigm as it mirrors how they are building a mobile frontend within Draftbit and backend using any of our supported services like [Xano](https://www.xano.com/). ‍ Continuing down the path of Draftbit’s backend architecture, our servers run [Node.js](https://nodejs.org/en/) and use the [Apollo Server](https://www.apollographql.com/) framework to serve up [GraphQL](https://graphql.org/) requests to the frontend; this is a fairly popular and conventional setup for building GraphQL backends. However, we also need to deal with the older and more ubiquitous [HTTP REST](https://code.tutsplus.com/tutorials/a-beginners-guide-to-http-and-rest--net-16340) requests to other services that our backend communicates with — all of which are not directly part of the frontend/backend communication cycle. Until recently, we used the “batteries included” framework, [hapi](https://hapi.dev/), for backend HTTP REST requests. Essentially, hapi provides simple abstractions for getting up and running without having to write a lot of boilerplate code (hence, the term “batteries included”.) ‍ However, as Draftbit has grown, the need for a more “lightweight” (aka lacking the batteries included convenience) HTTP REST server has arisen; this is a common pattern with all technology stacks as the nuances, options, and implementation details of how technology works at scale change over time. With hapi, it was easy to get up and running earlier on in the company. But now, Draftbit requires more fine-grained control over it’s REST services. So we transitioned to the Node.js industry standard, [Express.js](https://expressjs.com/) — specifically choosing the [apollo-server-express](https://github.com/apollographql/apollo-server) version, which combines the best of both worlds (GraphQL + HTTP REST). ‍ We now now have access to countless packages written for Express.js, more fine grained controls in our [middleware](https://expressjs.com/en/guide/using-middleware.html), and a wealth of [documentation](https://stackoverflow.com/questions/tagged/express) to fix, troubleshoot, and expand our services with this framework.  This should make it much easier to grow and maintain our backend services regardless if they require GraphQL or REST … ultimately making it easier for us to add more features for users, which are on our roadmap. --- # Top 6 Mobile App Wireframe and Prototyping Tools > These invaluable resources empower app designers and developers to bring their concepts to life, allowing them to create interactive and user-friendly… ### These invaluable resources empower app designers and developers to bring their concepts to life, allowing them to create interactive and user-friendly interfaces. Dave Sebekon June 22, 2023 App Design  In the world of mobile app development, turning an idea into a polished and functional application requires careful planning and visualization. That’s where wireframe and prototyping tools come into play. These invaluable resources empower app designers and developers to bring their concepts to life, allowing them to create interactive and user-friendly interfaces. In this blog post, we will explore the top smartphone app wireframe and prototyping tools that can help you transform your app vision into a reality. ## Sketch Sketch has been a staple in the design community for its intuitive interface and powerful features. While primarily known as a vector design tool, Sketch’s plugin ecosystem has expanded to include wireframing and prototyping capabilities. Its extensive library of UI elements and the ability to create reusable symbols make it a go-to choice for app designers. ## Adobe XD Adobe XD is a versatile tool that caters to both wireframing and prototyping needs. With its clean and user-friendly interface, XD enables designers to create interactive app prototypes with ease. The integration with other Adobe Creative Cloud apps allows for seamless asset management and collaboration. Furthermore, Adobe XD’s auto-animate feature brings motion to your designs, enhancing the overall user experience. ## Figma Figma has gained tremendous popularity in recent years, thanks to its cloud-based collaboration capabilities and cross-platform accessibility. With real-time collaboration and syncing, designers can work simultaneously on wireframes and prototypes, making it ideal for teams. Figma also offers an extensive library of design components, easing the process of creating consistent and visually appealing app interfaces. ## InVision InVision has long been a favorite among designers for its powerful prototyping capabilities. With its comprehensive set of tools, you can transform static screens into interactive prototypes that mimic the app’s actual user experience. InVision’s commenting and feedback system streamlines the design iteration process, allowing for effective collaboration between designers, developers, and stakeholders. ## Marvel Marvel is a user-friendly and feature-rich tool that caters to designers of all levels of expertise. With its intuitive drag-and-drop interface, Marvel enables designers to create interactive app prototypes effortlessly. Its integration with other popular design tools and the ability to preview prototypes on actual devices make it a practical choice for app development projects. ## Pen and Paper While digital wireframing and prototyping tools provide powerful features and convenience, there’s an undeniable appeal and effectiveness in the simplicity of sketching by hand with paper and pens. The rapid iteration, creative freedom, focus on user experience, low barrier to entry, and effective communication make this traditional approach a viable option for designers. So, don’t hesitate to grab a pen and paper, and let your imagination run wild as you bring your app ideas to life through the timeless art of hand-drawn wireframes and prototypes. ## Conclusion When it comes to turning your app idea into a tangible and functional product, wireframe and prototyping tools play a crucial role. The tools mentioned in this blog post, including Sketch, Adobe XD, Figma, InVision, Marvel, or even paper and pen, provide a range of features and capabilities to cater to different design preferences and project requirements. Whether you’re a solo app designer or part of a collaborative team, these tools empower you to unleash your creativity and bring your app ideas to life. So, dive in, explore, and find the perfect wireframe and prototyping tool that will propel your app development journey forward! \---- Looking to build a mobile app for your next startup? With Draftbit’s React Native mobile app builder, technical and non-technical founders, designers, and developers can build and publish their mobile apps in less time and for less money. [Sign up to get started](https://draftbit.com). We also offer expert services that range from writing some custom code to building your app from the ground up. [Get in touch to discuss your idea!](https://draftbit.com/experts) ‍ --- # Mobile App Design Trends That Matter Now > Explore current mobile app design trends, from AI-assisted UX and adaptive interfaces to accessibility, trust, motion, design systems, and real build workflows. ### Explore current mobile app design trends, from AI-assisted UX and adaptive interfaces to accessibility, trust, motion, design systems, and real build workflows. Dave Sebekon January 9, 2023 App DesignMobile App Development  Mobile app design trends used to be mostly visual: flat design, gradients, bold colors, 3D elements, and whatever was popular on Dribbble that month. Visual style still matters, but the best app design work now goes deeper. Users expect apps to be fast, accessible, personalized, trustworthy, and useful immediately. Teams also expect the design process to move faster. AI can help generate screens, design systems can keep products consistent, and visual builders like [Draftbit](/platform/) can turn app ideas into real cross-platform products instead of static mockups. This article was originally written as a 2023 trend roundup. It has been refreshed around the design shifts that matter for mobile app teams now. ## Quick answer: the mobile app design trends worth watching | Trend | Why it matters | | ------------------------ | ---------------------------------------------------------------- | | AI-assisted UX | Teams can explore, iterate, and implement faster. | | Adaptive interfaces | Apps should respond to user context, preferences, and behavior. | | Accessibility by default | Inclusive design is now table stakes, not polish. | | Trust-first design | Permissions, privacy, payments, and AI behavior need clear UX. | | Purposeful motion | Motion should explain state and guide attention, not decorate. | | Design systems that ship | Components need to map to real implementation. | | Data-rich mobile screens | Apps need to make complex data scannable on small screens. | | Real-device preview | Teams need to test layout, touch targets, and performance early. | ## 1. AI-assisted UX becomes part of the normal workflow AI is changing the design process. It can help generate first drafts, explore alternate flows, write empty-state copy, suggest layouts, and speed up repetitive implementation tasks. But the trend is not “let AI design the whole app.” The real trend is AI plus product judgment. In Draftbit, AI agents can help turn plain-English instructions into app changes while the visual editor keeps the result inspectable. That changes the way teams work: a founder can describe a flow, a designer can refine it visually, and a developer can step into code when needed. Design implication: treat AI as an accelerator, not a substitute for user understanding. The winning apps will still have clear information architecture, thoughtful copy, and product decisions based on real users. ## 2. Adaptive interfaces replace one-size-fits-all screens Mobile apps increasingly need to adapt to user context: role, plan, location, device, history, permissions, accessibility settings, and current task. A dashboard for a first-time user should not look the same as a dashboard for a power user. A logged-out onboarding flow should not feel like a generic brochure. Adaptive design can show up as: * Role-based navigation. * Personalized home screens. * Progressive disclosure for complex features. * Context-aware empty states. * Layouts that respond to device size and orientation. * AI-assisted recommendations or next actions. Design implication: plan states early. A beautiful default screen is not enough. Design the first run, empty state, loading state, error state, partial data state, power-user state, and recovery path. ## 3. Accessibility becomes a core product requirement Accessibility is not a final QA checklist. It affects color, contrast, touch target size, text scaling, form labels, focus order, motion, error handling, and content structure. It also improves the experience for everyone, including users on small screens, in bright light, with temporary injuries, or under time pressure. For mobile apps, pay particular attention to: * Sufficient color contrast. * Tap targets that are easy to hit. * Text that still works when scaled. * Forms with clear labels and errors. * Motion that does not block comprehension. * Icons that are not the only source of meaning. * Screen-reader-friendly structure. Design implication: accessibility should be part of the component system, not a per-screen afterthought. ## 4. Trust-first design becomes more important Apps ask users for a lot: personal data, payment details, health information, location, photos, contacts, notifications, and sometimes AI-generated recommendations. The interface has to earn trust. Trust-first design means: * Explain why permissions are needed before the system prompt appears. * Make account, billing, and cancellation paths easy to understand. * Show what AI can and cannot do. * Label generated or suggested content when it matters. * Make destructive actions reversible where possible. * Keep privacy, security, and support paths visible. Design implication: trust is part of conversion. Confusing permission prompts and vague AI behavior can hurt activation as much as a bad landing page. ## 5. Motion gets more purposeful Motion is still valuable, but the best mobile motion is functional. It shows continuity between screens, confirms actions, reveals hierarchy, communicates progress, and makes state changes easier to understand. Good uses of motion include: * Button feedback after a tap. * Skeleton loading that sets expectations. * Progress indicators for multi-step flows. * Shared element transitions between list and detail screens. * Subtle animation for success, failure, or sync state. * Interactive onboarding where motion explains the product. Design implication: if motion does not clarify state or guide attention, cut it. Performance and readability matter more than decorative animation. ## 6. Design systems need to map to real components Design systems used to live mostly in design files. Modern app teams need design systems that map to implementation: components, props, tokens, variants, accessibility rules, and real layout behavior. This is where visual development changes the process. In Draftbit, teams can build reusable components visually, connect data, preview on devices, and still access code. That helps reduce the gap between “the Figma version” and “the app version.” Design implication: define repeatable product patterns, not just colors and typography. Cards, lists, filters, forms, empty states, paywalls, onboarding steps, and settings screens should become reusable building blocks. ## 7. Data-rich screens become more common Mobile apps are no longer only simple feeds and forms. Teams are building dashboards, marketplaces, internal tools, AI chat apps, scheduling tools, CRMs, health apps, finance tools, and operations workflows. These apps need to present dense information without overwhelming the user. For data-rich mobile design: * Prioritize the next action. * Use hierarchy before decoration. * Keep filters and sort controls reachable. * Collapse secondary data until needed. * Design for slow or partial data. * Use charts sparingly and make them readable. * Make search, saved views, and notifications useful. Design implication: mobile density is possible, but only when the information architecture is disciplined. ## 8. Real-device preview matters earlier A design can look polished on a desktop canvas and fail on a phone. Touch targets can be too small. Text can wrap badly. Keyboard behavior can hide fields. Safe areas can break layouts. A screen that feels simple in a design file can feel cramped in a real app. Draftbit’s live preview workflow helps teams catch those issues earlier. You can design visually, preview on devices, connect real data, and keep iterating before publishing. Design implication: do not wait until the end to test on real devices. Preview early, especially for navigation, forms, gestures, and long content. ## What happened to flat design, gradients, bold colors, and 3D? They still exist, but they are no longer strategic trends by themselves. * **Flat design** is now just one visual language among many. * **Bold colors** work when they support brand, hierarchy, and accessibility. * **Gradients** can add depth, but overused gradients quickly date a product. * **3D elements** are useful for product visualization, games, spatial experiences, and high-touch brand moments, but they should not slow the app down. The better question is not “Is this trendy?” The better question is “Does this help the user understand, trust, and complete the task?” ## A practical Draftbit design workflow If you are designing a new mobile app, a modern workflow can look like this: 1. Sketch the main user journey and business rules. 2. Start from a [Draftbit app template](/mobile-app-templates/) or use AI agents to create the first version. 3. Build real screens visually in Draftbit. 4. Connect real or realistic data early. 5. Preview on web and mobile devices. 6. Turn repeated patterns into reusable components. 7. Add custom code only where the product needs it. 8. Bring in [Draftbit Expert Services](/services/) for UI/UX, backend setup, custom components, QA, or launch support. This keeps the design process close to the working product. ## FAQ ### What is the biggest mobile app design trend now? The biggest shift is AI-assisted product development. AI helps teams explore and implement faster, but the apps that win still need strong UX fundamentals: clear navigation, accessible components, trustworthy flows, and useful content. ### Are gradients and 3D design still popular? Yes, but they are style choices, not strategy. Use them when they serve the product. Avoid using them as decoration that makes the app harder to read or slower to use. ### How can I design an app if I am not a designer? Start with proven patterns. Use a Draftbit template, keep navigation simple, test on real devices, and focus on the core user action. Draftbit’s visual editor and AI agents can help you create and refine real screens without starting from a blank canvas. ### When should I hire an app design expert? Bring in an expert when the app has complex onboarding, payments, permissions, dense data, regulated content, custom components, or a launch deadline. Expert help is also useful when an AI-generated or prototype app is close but not polished enough to ship. ## Conclusion Mobile app design is moving from static mockups to working products. The best teams are not only choosing colors and layouts. They are designing systems, states, permissions, data flows, accessibility, and release paths. Draftbit helps with that shift by combining AI agents, visual editing, reusable components, backend integrations, real code access, live preview, and publishing. That gives teams a more direct path from app idea to app store. --- # How Low-Code App Builders Improve Internal Processes > Learn how teams can use AI-assisted low-code app builders like Draftbit to create internal tools, connect existing data, reduce IT backlog, and preserve… ### Learn how teams can use AI-assisted low-code app builders like Draftbit to create internal tools, connect existing data, reduce IT backlog, and preserve source code ownership. Dave Sebekon January 16, 2024 Product Team CollaborationLow CodeDev ToolsEnterprise  Internal processes often outgrow spreadsheets, email threads, and one-off automations before they justify a full custom engineering project. Operations teams need apps for approvals, field work, customer follow-up, scheduling, inventory, onboarding, reporting, and handoffs between departments. Engineering teams need to protect their roadmap. AI-assisted low-code app builders help close that gap. They let business teams move faster while keeping developers involved where the work requires integration, security, architecture, or custom code. Draftbit gives teams a practical way to build those internal apps: [AI agents, visual editing, live preview, code access, integrations, and publishing](/platform/) in one workflow, with [Expert Services](/services/) available when the process needs deeper implementation help. ## Why internal processes are a strong low-code fit Internal apps usually have clear users, clear workflows, and fast feedback loops. That makes them a good fit for low-code because the team can validate the process directly with the people who use it every day. Strong internal-app use cases include: * Field operations and checklists. * Approval workflows. * Customer intake and follow-up. * Inventory or asset tracking. * Training and onboarding. * Event or team coordination. * Executive dashboards. * Internal directories. * Support or escalation workflows. * Mobile companions for existing back-office systems. The goal is not to bypass IT. The goal is to give business teams a faster path to working software while keeping IT focused on the parts that need technical ownership. ## 1. Turn process knowledge into working apps The people closest to a process usually know where the delays and mistakes happen. Low-code gives those teams a way to translate that knowledge into screens, forms, navigation, and review flows without waiting for a full engineering cycle. With Draftbit, a department lead can work from a [mobile app template](/mobile-app-templates/), use AI agents to create first drafts, refine the interface visually, and preview the result on real devices. Developers can then review data access, permissions, custom code, and integrations. ## 2. Reduce the internal app backlog Internal app requests often sit behind customer-facing work. That is understandable, but it can leave teams stuck with manual work for months. Low-code reduces the backlog by moving common implementation tasks into a faster workflow: * Build the first version visually. * Connect existing data sources. * Test with a small internal group. * Fix the process before overbuilding. * Add custom logic only where it matters. * Involve experts or developers at review points. This lets engineering teams provide guardrails without becoming the bottleneck for every screen change. ## 3. Connect to the systems you already use Internal tools are only useful if they work with the real business process. That usually means connecting to existing APIs, databases, and third-party services. Draftbit supports [REST API integrations](/integrations/), [GraphQL integrations](/graphql/), and [MCP servers](/mcp/). That means teams can connect apps to existing systems instead of duplicating data into another platform. Common internal integrations include: * CRM records. * Help desk tickets. * Scheduling systems. * Inventory databases. * HR and onboarding systems. * Payment or billing tools. * Internal APIs. * AI services and workflow automation tools. ## 4. Use AI where it speeds up iteration AI can help internal teams move from idea to working draft quickly. It can generate screens, adjust copy, create forms, reorganize components, and help make repetitive edits. The best pattern is still human-led: * The business team defines the process. * AI accelerates the first build and iteration. * Developers or experts review the parts that touch data, permissions, code, and release. * Users test the workflow before rollout. That balance keeps AI useful without letting unreviewed output become a fragile internal system. ## 5. Preserve a path to custom development Some internal tools stay simple. Others grow into critical operational systems. A low-code platform should not make that growth harder. Before choosing a tool, ask: * Can we access or export the source code? * Can we connect our own backend? * Can developers add custom code? * Can we use external packages or services? * Can we publish to the devices our teams actually use? * Can this app move into a traditional development workflow later? Draftbit is built around real React Native and Expo source code. That gives teams a stronger path from internal prototype to long-term application without rebuilding from scratch. ## 6. Bring in experts for risky parts Internal apps can carry real business risk. Data access, permissions, workflow logic, and integrations deserve review. Draftbit [Expert Services](/services/) can help with: * Process scoping. * UI and workflow design. * Backend connections. * REST and GraphQL CRUD operations. * MCP setup. * Custom components. * Custom code and functions. * Migration from another tool. * QA before rollout. * Publishing and release support. That lets teams keep momentum while getting help where mistakes would be expensive. ## A practical workflow for internal apps Use this sequence: 1. Pick one process with a clear owner. 2. Define the smallest workflow that would save time. 3. Start from a template or AI-assisted draft. 4. Build the core screens visually. 5. Connect realistic data early. 6. Preview with the internal users who do the work. 7. Add permissions, validation, and error states. 8. Bring in experts or developers for integrations and custom code. 9. Launch to a small group. 10. Iterate from real usage instead of assumptions. This keeps the app close to the actual process. ## FAQ ### What internal processes are best for low-code apps? Start with processes that are frequent, manual, and well understood: approvals, checklists, intake forms, field updates, onboarding, inventory, reporting, and customer follow-up. ### Does low-code mean IT loses control? No. The strongest model keeps IT involved in architecture, data access, permissions, code review, and release decisions while allowing business teams to move faster on workflow and interface changes. ### Can Draftbit connect to internal systems? Yes, if the system exposes an API or compatible service. Draftbit supports REST, GraphQL, and MCP connections so teams can build apps around existing systems. ### When should an internal app use custom code? Use custom code for unique logic, custom components, advanced validation, third-party packages, and integration edge cases. Standard screens and flows should stay in the faster visual workflow when possible. ### How do we avoid creating another locked-in tool? Choose a platform with source code access, custom code support, external integrations, and a clear path for developer handoff. Draftbit is designed around real React Native and Expo source code. ## Conclusion Low-code app builders are most valuable for internal processes when they help business teams and technical teams work together. Business teams bring process knowledge. Developers bring technical judgment. AI and visual development shorten the path between them. Draftbit supports that collaboration with AI agents, visual editing, real integrations, live preview, source code access, publishing, and expert help when an internal app needs deeper implementation support. --- # Why Mobile App Startup Founders Should Consider No-Code Development Tools > In this blog post, we will explore why mobile app startup founders should seriously consider using no-code development tools and services. ### In this blog post, we will explore why mobile app startup founders should seriously consider using no-code development tools and services. Dave Sebekon November 1, 2023 App FoundersNo CodeStartups  In the fast-paced world of mobile app development, aspiring startup founders often find themselves faced with a dilemma. They have a fantastic idea for a mobile app but are unsure about the best approach to bring it to life. Traditionally, app development required a significant investment in time, money, and technical expertise. However, today, there’s a more accessible and efficient option: no-code development tools and services. In this blog post, we’ll explore what no-code tools are, why startup founders should consider them, and how platforms like [Draftbit](https://draftbit.com/) can make app development more accessible and efficient ## The Rise of No-Code Development No-code development tools and services empower individuals with little to no coding experience to create fully functional mobile apps and web applications. These platforms offer a visual and intuitive interface that allows users to design, develop, and deploy apps without writing a single line of code. No-code tools provide pre-built components, templates, and a wide range of functionality, enabling users to create custom apps for various purposes. No-code development platforms have gained immense popularity in recent years due to their ability to simplify the app development process. These platforms allow individuals with little to no coding experience to create powerful and functional mobile apps without the need for extensive programming knowledge. No-code platforms democratize app development by making it accessible to a wider audience. Startup founders no longer need to rely on a team of developers; they can create apps themselves or with minimal technical assistance. Traditional app development can take months or even years to complete, but leveraging no-code tools dramatically reduce development time, enabling startups to bring their ideas to market much faster. Developing an app from scratch can be expensive, especially when hiring a development team. No-code tools offer a cost-effective alternative, significantly reducing the financial burden on startup founders. With no-code tools, founders can quickly prototype and launch their apps to test the market demand, reducing the risk of investing significant resources in an unproven concept. And because no-code platforms allow for easy and rapid iteration, they enable founders to make quick adjustments and improvements to their apps as they gather user feedback. ## Why Should Startup Founders Consider No-Code Development? * **Reduced Development Time:** Traditional app development can be time-consuming, especially for those without a technical background. No-code tools drastically reduce development time by providing a streamlined, user-friendly process. As a startup founder, this means you can get your app to market faster and stay ahead of the competition. * **Cost-Efficiency:** Hiring a team of developers or outsourcing the development of a mobile app can be expensive. No-code tools and services eliminate the need for costly development resources, making it a more budget-friendly option for startups. You can allocate your financial resources to marketing, scaling, and growing your business. * **Empowerment:** No-code platforms put the power in the hands of startup founders. You no longer need to rely solely on developers to turn your ideas into reality. With no-code, you have the autonomy to design, test, and iterate your app, ensuring it aligns with your vision. * **Flexibility:** No-code development isn’t just for beginners. It can also be a valuable tool for experienced developers who want to most of the benefits of traditional development with the advantage of a visual builder. The versatility of no-code platforms means they can complement traditional development processes. ## Introducing Draftbit’s Visual App Builder Among the myriad of no-code development tools available, Draftbit stands out as a powerful and versatile solution for mobile app startup founders. Draftbit is a React Native-based visual development platform designed to empower individuals to create stunning, high-quality mobile apps. Here are 10 reasons why Draftbit is a game-changer for startup founders: 1. **Visual Development**: Draftbit’s intuitive interface allows you to design your app visually, making it easy to create layouts, user interfaces, and interactions. 2. **Pre-Built Components**: Draftbit offers a wide range of pre-built components and templates, saving you time and effort in designing and coding common app features. 3. **Real-time Preview**: You can instantly preview your app on web, iOS, and Android devices as you build it, ensuring that it looks and functions exactly as you envision. 4. **Collaboration**: The platform enables real-time collaboration, making it easy for teams to work together in building the app. 5. **Cross-Platform**: When you build apps in Draftbit, you’re actually building three apps at once - for web, iOS, and Android. 6. **Integration-Friendly**: Draftbit supports seamless integration with third-party services and APIs, enabling you to add advanced features to your app. 7. **One-click Publishing**: Once you’ve configured your app for publishing, deploy it to the web, Apple’s App Store, and Google’s Play Store with just a single click. 8. **Custom Code**: Sometimes you just need to do something that requires code - no problem! Draftbit supports your own custom JavaScript. 9. **3rd-party Packages**: Many npm packages for React Native and Expo are compatible with Draftbit allowing you to extend your apps even further. 10. **Code Export**: Since Draftbit uses open source packages under the hood, you can export your codebase and continue working in a traditional development environment ## Draftbit Experts: Taking Your Idea to the Next Level While Draftbit provides the tools and resources for founders to create their apps independently, we understand that not everyone may have the time, expertise, or inclination to do so. That’s why Draftbit also offers development services through its Draftbit Experts team of experienced engineers and designers. The Draftbit Experts team consists of seasoned professionals who are well-versed in mobile app development and design. Draftbit Experts can greatly accelerate the development process, ensuring your app reaches the market faster and you can expect a high-quality, polished product that’s ready to publish. Whether you have a clear vision of your app or need guidance, the our team can create a custom solution tailored to your specific needs and goals. \---- No-code development tools and services have emerged as a revolutionary solution for mobile app startup founders. They offer accessibility, speed, cost-efficiency, flexibility, and market validation, all of which are crucial in the competitive world of app development. Draftbit, with its React Native-based no-code platform and the option to utilize the Draftbit Experts team, provides a compelling opportunity for founders to turn their app ideas into reality. So, if you’re a mobile app startup founder looking to bring your vision to life, consider embracing the power of no-code development with Draftbit. Whether you choose to create your app independently or leverage the expertise of the Draftbit Experts team, you’re on the path to a successful and efficient app development journey. Give it a try, and unlock the potential of your app startup without the traditional coding hurdles. [Start for free](https://draftbit.com/pricing) or [chat with our experts](/experts-requests/). ‍ --- # Why React Native is the Future of Mobile App Development > Why React Native leads mobile app development with native performance, shared codebases, and strong community support. ### Why React Native leads mobile app development with native performance, shared codebases, and strong community support. Dave Sebekon December 9, 2022 Application DevelopmentReact Native  As the world becomes increasingly reliant on mobile technology, the demand for high-quality mobile apps continues to grow. As a result, businesses and developers alike are constantly searching for the most effective and efficient ways to build these apps. [React Native](https://reactnative.dev) is a popular open-source mobile app framework that allows developers to build native mobile apps using the same design as React. In short, React Native allows developers to create truly native mobile apps using the same design principles and codebase as web apps built with React. But why is React Native considered the future of mobile app development? Here are just a few reasons: ### Enhanced Performance In addition to offering an improved user experience, React Native also offers enhanced performance. Because React Native apps are built using native code, they are able to leverage the full power of the device’s hardware and operating system. This means that React Native apps are faster, smoother, and more responsive than traditional hybrid apps. ### Shared Codebase Another major advantage of React Native is the ability to share code between web and mobile apps. This means that developers can reuse their existing codebase and design principles, reducing the time and effort required to build and maintain multiple versions of an app. This also allows for easier collaboration between teams and a more consistent user experience across platforms. ### Strong Community Support React Native is an open-source framework, which means that it has a strong and supportive community of developers behind it. This community is constantly contributing to the framework, adding new features and capabilities and providing support and guidance to other developers. This level of support is invaluable for businesses and developers looking to adopt React Native. ### Versatility and Flexibility Finally, React Native is incredibly versatile and flexible. It can be used to build a wide range of mobile apps, from simple utilities to complex, data-intensive apps. It also offers a wide range of customization options, allowing developers to tailor their apps to the specific needs and preferences of their users. React Native is the future of mobile app development because it offers improved user experience, enhanced performance, a shared codebase, strong community support, and versatility and flexibility. If your business is looking to develop a high-quality mobile app, consider using React Native to take advantage of these benefits. \---- Using Draftbit’s visual mobile app builder, you can design, build, and publish React Native mobile apps right from your browser. [Get a 14-day free trial to try it out](https://draftbit.com). --- # Hippo's founder built a global mobile development team using Draftbit as the hub > How Hippo Social built a 120+ screen social shopping app with a global team of 6+ collaborators using Draftbit as their development hub. Case Study — Startups A 120+ screen social shopping network that aims to transform online purchasing. The Hippo Social team used Draftbit to establish a synchronized mobile development operation spanning 3 countries. 6+ simultaneous collaborators 4 mo to assemble team and launch v1 3 days average onboarding time ## The challenge The Hippo Social team possessed strong web development expertise — with 30+ websites built — but lacked mobile app experience. Leadership needed a platform enabling web developers to quickly onboard a mobile team without sacrificing collaboration. ## The solution CEO Derek Pappas selected Draftbit as the collaborative hub. The platform allowed junior developers with no prior mobile experience to ramp up quickly and work in real-time with the existing web development team. > "We can see the changes that others are making in real-time. We can test in real-time. And we can iterate in real-time. That's unheard-of in traditional app development." > "We literally wouldn't exist without Draftbit." ## Looking ahead The team plans to shift focus toward growth while continuing app iteration, with an ambitious goal of listing products from 1 million stores and brands. ## Tech stack Scala/SPARK, Python, Docker, SLOR, Postgres, Cassandra [← View all customer stories](/customers) --- # Poisera's founders launched their app that helps mothers build resilience, using Draftbit > How Poisera's founders saved $100K+ in development costs and launched their resilience app for mothers using Draftbit. Case Study — Startups When Poisera outgrew no-code tools used for their MVP, the founders turned to Draftbit to build their commercial-grade V1.0 application. $100K+ dev cost savings Key Integrations Xano · Segment · Amplitude · AppsFlyer · FullStory > "Draftbit puts me on the 'same side of the curtain' as my CTO, makes our development roadmap more predictable, and has saved us hundreds of thousands of dollars in freelance app development costs so far." ## The challenge: starting with no-code Poisera began as a web app MVP combining multiple no-code tools: Landbot, WordPress, Airtable, Zapier, Autopilot HQ, Twilio, and Rebrandly. While this validated market fit, the approach became unmaintainable. As the founder noted: "The product became a Frankenstein with no bug or error tracking." They later migrated to Adalo for mobile, but hit limitations: no source code access, impossible custom functionality for payments, authentication, and analytics, unpredictable development timelines, and no separation between testing and production environments. ## The solution: low-code with Draftbit Draftbit provided: * Direct access to app source code * Custom code import capabilities * Faster implementation — Segment integration took one week vs. months in no-code * Familiar GUI similar to Webflow * Rapid UI editing and endpoint setup in under one minute per endpoint ## Business impact * More predictable roadmap planning * Lightning-fast feature testing * Increased founder focus on business strategy * Improved responsiveness to user feedback > "With Draftbit, we can nimbly create changes in the UI based on feedback, rather than a long drawn out dev process. This will add to our brand perception as one that is super responsive to moms and their needs." [← View all customer stories](/customers) --- # Bring AI-first visual development to your entire organization. > Bring AI-first visual development to your organization. Book time to learn about custom onboarding, SSO, and dedicated support. Draftbit for Enterprise Build internal tools and app-store ready apps with source code you own. Book time to learn how Draftbit fits your team's workflow. Custom onboarding SSO & security Dedicated support --- # Build your dream app, no engineering required. > Work with Draftbit's expert designers, developers, and app specialists. Book a consultation for on-demand development help. Experts Consultation Our team of designers, developers, and app experts work with you to build exactly what you need. From small tweaks to full app builds. On-demand development 48-hour cycles Pause anytime --- # Common questions about building with Draftbit > Direct answers about Draftbit pricing, AI agents, visual editing, code ownership, publishing, integrations, expert services, and other app building topics. Draftbit FAQ Each question has a short answer here and a full page when you want the details. Search, or browse by topic. Search all questions Try source code, pricing, or app stores `/` 83 answers Browse by topic 1. [01 Getting started 9](#getting-started) 2. [02 AI agents 9](#ai-agents) 3. [03 Visual editor 6](#visual-editor) 4. [04 Code and ownership 7](#ownership) 5. [05 Platforms and publishing 11](#platforms-publishing) 6. [06 Backends and integrations 9](#backends-integrations) 7. [07 Pricing 8](#pricing) 8. [08 Expert services 12](#expert-services) 9. [09 Teams and support 5](#teams-support) 10. [10 Comparisons 7](#comparisons) 01 ## Getting started What Draftbit is, who it is for, and what you can build. What is Draftbit? + − Draftbit is a browser-based app builder for mobile apps, web apps, and websites. You describe what you want to Claude Code or OpenAI Codex, refine the result in a visual editor, edit the code yourself on paid plans, and publish to the web, the App Store, and Google Play from the same project. Draftbit also has an in-house expert team you can hire. [Read the full answer ](/faq/what-is-draftbit) What can I build with Draftbit? + − You can build native iOS and Android apps with React Native and Expo, browser web apps with Vite, and content websites with Astro, plus an API backend or Supabase backend in the same project. Draftbit templates cover social communities, booking, food delivery, finance, fitness, dashboards, admin tools, ecommerce, portfolios, and marketing sites. Desktop apps are not a target. [Read the full answer ](/faq/what-can-you-build-with-draftbit) Is Draftbit a no-code, low-code, or AI app builder? + − Draftbit is all three, depending on how you work. You can build with prompts to Claude Code or Codex, in a visual editor, or directly in the code, and every path edits the same React Native, Vite, or Astro project. Prompts and visual editing are on every plan. Saving code edits needs Standard or higher. [Read the full answer ](/faq/is-draftbit-no-code-low-code-ai-builder) Who is Draftbit for? + − Draftbit is for people who want to ship a real mobile app, web app, or website without a full engineering team, and for developers who want AI agents and a visual editor on top of a normal React Native, Vite, or Astro codebase. First-time builders can start on the Free plan. Developers get code editing, export, GitHub, and a VS Code tunnel on paid plans. [Read the full answer ](/faq/who-is-draftbit-for) Can I build a production app with Draftbit if I don't know how to code? + − Yes. No coding experience is required to build in Draftbit, and the Free plan includes the AI agents, the visual editor, and web publishing on a draftbit.dev address. Publishing to the App Store and Google Play needs Standard or higher and your own developer accounts. Before launch, have someone technical review authentication, payments, and data access, or hire Draftbit experts to do it. [Read the full answer ](/faq/can-build-production-app-without-code) Is Draftbit for production apps or only prototypes? + − Both. A Draftbit project is a real React Native, Vite, or Astro codebase, and the same project can go from a shareable prototype to a published app. You can share a public prototype link on any plan, publish to the web free on a draftbit.dev address, and publish to the App Store and Google Play on Standard or higher. Production still needs testing, review, and store approval. [Read the full answer ](/faq/draftbit-production-apps-or-prototypes) Can Draftbit build complex apps? + − Yes, within its stack. Draftbit projects are ordinary React Native, Vite, or Astro codebases with optional API and Supabase backends, so agents and developers can add the logic, packages, and services the app needs. Plan limits apply to projects, agents, and sandboxes rather than to screens or features. Hard systems still need architecture, testing, and often an experienced engineer. [Read the full answer ](/faq/can-draftbit-build-complex-apps) How long does it take to build and launch an app with Draftbit? + − Draftbit builds a first version from your description before you ever open the editor, and you can share it or publish it to a draftbit.dev address right away. A launch-ready app takes longer. Draftbit's own expert team scopes an MVP at four to eight weeks and a launch-ready v1 with backend, QA, and store approval at eight to twelve weeks, and Apple and Google control how long their review takes. [Read the full answer ](/faq/how-long-to-build-and-launch) When is Draftbit not the right fit? + − Draftbit is not the right starting point if you need a desktop app, want to import an existing repository, must write your backend in Python, PHP, or C#, are building a graphics-heavy game, or need every tool to run inside your own network. It creates React Native, Vite, and Astro projects in a cloud sandbox, and those are the limits worth checking first. [Read the full answer ](/faq/when-is-draftbit-not-right-fit) 02 ## AI agents How the agents work, which models and keys you can use, and what to do when one gets stuck. How does AI work in Draftbit? + − You describe what you want in a chat thread. A coding agent, Claude Code or OpenAI Codex, runs inside your app's sandbox, reads and edits the real project files, runs checks, and asks you when it needs a decision. The changes land in the same project you edit visually, and you pay with Draftbit credits or your own provider account. [Read the full answer ](/faq/how-does-draftbit-ai-work) Which AI models and coding agents does Draftbit support? + − Draftbit runs two coding agents, Claude Code from Anthropic and Codex from OpenAI. Claude models run through Claude Code, OpenAI models through Codex, and models from Google, xAI, DeepSeek, Meta, and other vendors arrive through OpenRouter. The model picker in the chat shows the current list. A Google Gemini agent is on the roadmap. [Read the full answer ](/faq/which-ai-models-does-draftbit-support) What can Draftbit AI agents do? + − Agents edit your project's source and use built-in tools to type check, lint, add packages, manage environment variables, restart the preview server, call connected REST and GraphQL APIs, read publish history, manage tasks, and search Draftbit docs. They pause to ask you when a decision is needed. [Read the full answer ](/faq/what-can-draftbit-ai-agents-do) Can I run multiple AI agents at the same time in Draftbit? + − Yes, up to your plan's limit. Free and Standard run one agent at a time, Pro up to 5, Team up to 10, and Enterprise has no fixed limit. Each agent runs in its own thread, and threads in one app share that app's sandbox, so give each one a separate part of the project. [Read the full answer ](/faq/can-i-use-multiple-ai-agents) Can I use Claude Code and OpenAI Codex while still editing my app visually? + − Yes. Claude Code and Codex edit the same project files the visual editor renders, so you can prompt an agent, review its changes, then keep working on the canvas. Every plan includes both agents and the visual editor. Saving hand-written code edits requires Standard or higher. [Read the full answer ](/faq/use-claude-code-and-codex-with-visual-editor) Can I use my own OpenAI, Anthropic, or OpenRouter key in Draftbit? + − Yes. Connect an OpenAI, Anthropic, or OpenRouter API key, or sign in with a ChatGPT or Claude subscription, on any plan including Free. Threads that use your own account go straight to the provider and do not use Draftbit credits. Your provider's limits and model availability apply to those threads. [Read the full answer ](/faq/can-i-use-my-own-ai-api-key) Do changes made by an AI agent appear in Draftbit's visual editor? + − Yes. The visual editor builds its Component Tree from the screen's source code, so an agent's edits show up on the canvas and in the style and content panels. Custom code the agent writes still runs, but parts of it may have no visual control and need the Code tab or another prompt. [Read the full answer ](/faq/do-ai-changes-appear-in-visual-editor) What happens if AI gets stuck or my app needs custom engineering? + − Roll back to a working save point, narrow the problem to one failing flow, and try a Read Only thread or the other agent. You can edit the code yourself on Standard and above, reach support through the Get Help chat, or bring in Draftbit Experts to repair the app or build the custom part. [Read the full answer ](/faq/what-if-ai-agent-gets-stuck) Are my prompts and source code used to train AI models? + − Draftbit does not use your code to train AI models, and you own the code you create. Each thread's prompts go to the model provider for its billing path, either through Draftbit's accounts when credits pay or directly under your own key or subscription, and that provider's terms for your account type govern retention and training. [Read the full answer ](/faq/are-prompts-and-source-code-used-for-ai-training) 03 ## Visual editor How the visual editor and the code stay in sync, and what you can do with components and packages. How does Draftbit's visual builder work? + − The visual builder is a live view of your app's source code. You pick a screen, select a component in the preview or the component tree, and change its styles, text, or code in the panel on the right. You can add components from a panel, reorder them in the tree, and preview on several devices at once. Every change edits the same project files the AI agents and the code editor use, and visual editing is included on every plan. [Read the full answer ](/faq/how-does-draftbit-visual-builder-work) Can I create reusable components in Draftbit? + − Yes. A Draftbit project is a normal React Native, React, or Astro codebase, so a shared component is a file you or an agent write once and import wherever it is needed. Components exported from your project show up in the visual builder's Add Component panel, and theme tokens keep them consistent across screens. [Read the full answer ](/faq/can-i-create-reusable-components) Can I edit my app's code directly in Draftbit? + − Yes, on the Standard plan and above. Draftbit has a Code tab for the selected component and a full in-browser Code Editor with a file tree, TypeScript-aware autocomplete, ESLint diagnostics, formatting, and search. Your edits are saved and reverted the same way as agent changes, and you can also export the code as a ZIP or, on Pro, to GitHub. [Read the full answer ](/faq/can-i-edit-code-directly) What are the limits of Draftbit's visual editor? + − The visual editor edits what it can read from your source. It handles screens, the component tree, utility-class styles, static text, and adding or reordering components. Logic, data, dynamic text, inline style objects, packages, and native configuration stay in code, where an agent or the code editor takes over. Saving code edits yourself needs the Standard plan. [Read the full answer ](/faq/what-are-visual-editor-limits) Can I use npm packages and custom native modules in Draftbit? + − Yes for npm packages. You add them in Build Config or ask an agent to install and configure them. Native functionality works through Expo packages and React Native packages that auto-link or ship an Expo config plugin, and native previews must be rebuilt after a native package changes. Draftbit has no workflow for writing your own Swift or Kotlin module, so that work happens outside the builder. [Read the full answer ](/faq/can-i-use-npm-packages-and-native-modules) Can I import an existing React Native or Expo app into Draftbit? + − Yes, for Expo apps in a public GitHub repository. Draftbit checks the repo, detects the framework, and lets you either migrate the app to Draftbit's conventions with an agent or import it with minimal changes and a reduced feature set. Vite web apps and Astro sites import the same way, a React Native app without Expo can only use the minimal path, and Draftbit Classic apps have their own import tab. [Read the full answer ](/faq/can-i-import-existing-react-native-or-expo-app) 04 ## Code and ownership Source code, GitHub, exports, and what happens if you leave. Do I own the source code Draftbit generates? + − Yes. All code created in Draftbit belongs to you, and Draftbit does not use your code to train AI models. On Free you can view a selected component's code from the Code tab. The full code editor and ZIP download need the Standard plan or higher, and pushing to a GitHub repository needs Pro or higher. [Read the full answer ](/faq/do-i-own-source-code-draftbit-generates) Can I export my Draftbit app and continue development outside Draftbit? + − Yes. On Standard or higher you can download the full source as a ZIP, and on Pro or higher you can push it to a GitHub repository. The code is an ordinary React Native, Vite, Astro, Hono, or Payload project that runs with standard tools. Hosting, store publishing, and a Draftbit-provisioned Supabase backend need a new home if you leave. [Read the full answer ](/faq/can-i-export-and-continue-outside-draftbit) Can I connect a Draftbit project to GitHub? + − Yes, on the Pro plan or higher. GitHub Export pushes your app's generated source code to a repository and branch you choose, authenticated with a personal access token. Each export replaces the target branch's contents and skips empty commits, so use a dedicated branch. Draftbit does not pull changes back from GitHub. [Read the full answer ](/faq/can-i-connect-draftbit-to-github) What language and framework does Draftbit use? + − Draftbit projects are written in TypeScript. Mobile apps are React Native with Expo, web apps are React built with Vite, websites are Astro, API backends are Hono, and CMS projects are Payload. Draftbit can also create Supabase backend projects. Exports are ordinary projects for those frameworks. [Read the full answer ](/faq/what-language-and-framework-does-draftbit-use) Do I own my app, data, and intellectual property in Draftbit? + − Yes. Your applications and their code belong to you, and Draftbit does not use your code to train AI models. App data lives in whichever backend the app uses. A Draftbit-provisioned Supabase project can be transferred to your own Supabase organization, and a backend you already run stays under that provider's agreement with you. [Read the full answer ](/faq/do-i-own-my-app-data-and-ip) Can a developer take over a Draftbit app later? + − Yes. Invite a developer into your Draftbit organization as an Editor, push the code to GitHub on Pro or higher, or hand over a ZIP export on Standard or higher. Developers from Draftbit's Expert Services join under a separate Expert role that does not use one of your editor seats. [Read the full answer ](/faq/can-a-developer-take-over-my-draftbit-app) What happens to my app and code if I cancel Draftbit? + − Your projects stay in your account and nothing is deleted. Paid features keep working until the end of the billing period, then the organization moves to the Free plan, which does not include the full code editor, ZIP downloads, GitHub export, custom domains, or app store publishing. Export your code before the paid period ends. [Read the full answer ](/faq/what-happens-to-my-app-if-i-cancel) 05 ## Platforms and publishing Publishing to the web, iOS, and Android, plus previews, app store review, and shipping updates. Which platforms does Draftbit support? + − Draftbit builds iOS and Android apps from one React Native and Expo project, and that same project can publish to the web as a progressive web app. Separate Web and Website project types build browser-only products with Vite and Astro. Desktop targets such as macOS, Windows, and Linux are not supported. [Read the full answer ](/faq/which-platforms-does-draftbit-support) Are Draftbit mobile apps native or web wrappers? + − Draftbit mobile apps are React Native apps built on Expo. They render native iOS and Android interface components and reach device APIs through Expo and React Native packages, so they are not a website wrapped in a web view. [Read the full answer ](/faq/are-draftbit-mobile-apps-native) Can Draftbit apps use camera, location, notifications, and other device features? + − Yes. Draftbit mobile apps are Expo React Native apps, so camera, location, push notifications, file access, secure storage, and other device features come from Expo and React Native packages. You add them in Build Config or by asking the agent, and packages with native code need a new native preview build before they run in the simulators. [Read the full answer ](/faq/can-draftbit-apps-use-device-features) How does live preview work in Draftbit? + − Your app runs in a cloud sandbox while you build, and the Preview Panel shows it on web and phone-sized devices that update as changes happen. The Pro plan adds real iOS and Android simulators in the browser, and the Draftbit Preview app opens the running app on your own phone through a QR code. [Read the full answer ](/faq/how-does-live-preview-work) Can I test a Draftbit app on real devices and simulators? + − Yes. The Draftbit Preview app opens the running app on a real iPhone or Android phone through a QR code. The Pro plan and above adds iOS and Android simulators that run in the browser from native preview builds. On the Standard plan and above, a staging publish reaches testers through TestFlight or the Google Play Internal testing track. [Read the full answer ](/faq/can-i-test-on-real-devices-and-simulators) Can Draftbit publish directly to the Apple App Store, Google Play, and the web? + − Yes. The Publish menu in the builder sends a web build to a draftbit.dev address or your own domain, and sends iOS and Android builds to App Store Connect and Google Play under your developer accounts. iOS, Android, and custom domain publishing start on the Standard plan. Apple and Google still review the app and decide when it goes live. [Read the full answer ](/faq/can-draftbit-publish-to-app-stores-and-web) Can I use my own domain for a Draftbit web app? + − Yes, on the Standard plan and above. You connect a root domain or subdomain you own from the Publishing page, add the CNAME and TXT records Draftbit shows you at your registrar, and verify. Draftbit issues the SSL certificate. Free plan publishes stay on a generated draftbit.dev address. [Read the full answer ](/faq/can-i-use-my-own-domain) Does Draftbit help with Apple App Store and Google Play submission? + − Yes, in two ways. One-click publishing on the Standard plan and above builds, signs, and uploads your iOS and Android apps to App Store Connect and Google Play, and the Pro plan adds App Store Assistance. Draftbit Expert Services can manage a submission for you. Approval and release timing still belong to Apple and Google. [Read the full answer ](/faq/does-draftbit-help-with-app-store-submission) Which developer accounts and fees do I need to publish a mobile app? + − You need your own Apple Developer Program membership, which costs 99 USD per year, and your own Google Play developer account, which has a one-time 25 USD registration fee. Both may ask for government ID verification. Draftbit publishes under these accounts on the Standard plan and above, and the fees are paid to Apple and Google separately from your Draftbit plan. [Read the full answer ](/faq/which-developer-accounts-and-fees-do-i-need) Can I self-host a Draftbit app or publish it manually? + − You can publish manually on the Standard plan and above by exporting the source code as a ZIP, or on the Pro plan by pushing it to GitHub, then building and hosting it with your own tools. Running Draftbit itself on your own infrastructure is offered only as an Enterprise option arranged through sales. [Read the full answer ](/faq/can-i-self-host-or-publish-manually) How do I update a Draftbit app after it is published? + − Make and test the change, then publish again from the Publish menu with a new version name and number. A web update replaces the current deployment when the publish finishes. An iOS or Android update uploads a new build to App Store Connect or Google Play, where Apple and Google review it and control when it reaches users. [Read the full answer ](/faq/how-do-i-update-an-app-after-publishing) 06 ## Backends and integrations APIs, databases, auth, payments, secrets, and MCP servers. Which integrations does Draftbit support? + − Draftbit connects apps and AI agents to REST APIs, GraphQL APIs, and MCP servers. The catalog lists more than 80 providers, including Supabase, Xano, Neon, Stripe, RevenueCat, Sentry, Linear, Cloudflare, Canva, Shopify Storefront, and Contentful. A custom REST, GraphQL, or MCP source covers any other service with a suitable API. [Read the full answer ](/faq/which-integrations-does-draftbit-support) Can Draftbit connect to my existing backend, database, and APIs? + − Yes. Add your API on the Integrations page as a custom REST source, an imported OpenAPI spec, or an introspected GraphQL schema. Its endpoints become tools the agent can call and test, and verified endpoints get a generated client so the app calls your server directly at runtime. Your database stays behind that API or a client library with access rules. [Read the full answer ](/faq/can-draftbit-connect-existing-backend-database-apis) Can Draftbit use MCP servers? + − Yes. The MCPs tab on the Integrations page connects an AI agent to catalog servers such as Supabase, Xano, Directus, Linear, Sentry, Stripe, RevenueCat, Cloudflare, and HighLevel. Adding a custom MCP server by URL needs the Pro plan or higher. MCP tools run while a chat thread is active, so they help the agent build and are not a runtime backend for the published app. [Read the full answer ](/faq/can-draftbit-use-mcp-servers) Can Draftbit connect to REST and GraphQL APIs? + − Draftbit apps and agents can use both. The catalog has REST and GraphQL services plus custom sources, you can import an OpenAPI spec or a GraphQL schema, and every endpoint can be tested in the Builder and exposed to the agent as a tool. Endpoints that pass a test also get a generated client in the app code, so the finished app calls them directly over the network. [Read the full answer ](/faq/can-draftbit-connect-to-rest-and-graphql-apis) Does Draftbit include a backend and database? + − Yes, in open beta. Draftbit can provision a Supabase backend for your app with a Postgres database, authentication, storage, and edge functions that the AI agent manages, and the pricing table lists it on every plan including Free. You can also bring your own backend through REST, GraphQL, or MCP connectors, and you can later transfer a Draftbit-provisioned Supabase project into your own Supabase organization. [Read the full answer ](/faq/does-draftbit-include-backend-and-database) Can I use Supabase, Firebase, or Xano with Draftbit? + − Yes, with different depths. Supabase is the most integrated option, with a Draftbit-provisioned backend in open beta or a connector to your own project. Xano connects through its MCP server and a REST catalog entry. Firebase works through Cloud Firestore and Firebase Auth REST entries or its client SDK, while the Firebase MCP connector is still Coming Soon. [Read the full answer ](/faq/can-i-use-supabase-firebase-or-xano) How does user authentication work in Draftbit apps? + − A Draftbit app authenticates users through the backend you connect. With the open beta Supabase backend, the agent sets up Supabase Auth and the Builder lets you turn on email, phone, and social sign in with providers such as Google, Apple, and GitHub. Clerk, Auth0, Stytch, Firebase Auth, Keycloak, and generic OpenID Connect providers are in the REST catalog. Your backend still decides what each signed in user may access. [Read the full answer ](/faq/how-does-authentication-work) Can I add payments and subscriptions to a Draftbit app? + − Yes. Stripe is in the catalog twice, as a REST integration whose endpoints import from Stripe's official OpenAPI spec and as an MCP server the agent uses to set up payment processing and manage products and prices. RevenueCat and Square have MCP servers for mobile subscriptions, in-app purchases, and commerce. Payment verification and secret keys belong on a server, never in the app. [Read the full answer ](/faq/can-i-add-payments-and-subscriptions) How does Draftbit handle API keys, secrets, and environment variables? + − Build Config stores environment variables per app for development, staging, and production with plain text or sensitive visibility. Plain text values are bundled into the app and visible to users, so Expo apps require the EXPO\_PUBLIC\_ prefix on them. Sensitive values are encrypted at rest, masked after saving, and kept out of compiled app code, and anything private still belongs on a server. [Read the full answer ](/faq/how-does-draftbit-handle-secrets-and-environment-variables) 07 ## Pricing Plans, credits, payment methods, and what happens when you downgrade or cancel. Is Draftbit free and what does it cost to build and publish an app? + − Draftbit has a Free plan with 5,000 one-time credits and no time limit. Paid plans start at 15 USD per month for Standard, 30 USD for Pro, and 150 USD for Team when you bring your own AI account. Draftbit credit packages start at 25 USD per month, yearly billing costs 20 percent less, and one-time credits cost 1 USD per 1,000 on any paid plan. [Read the full answer ](/faq/is-draftbit-free-and-how-much-does-it-cost) Which Draftbit plan do I need? + − Use Free to learn and ship a first web version on your own AI account. Standard fits one person who needs code access, a custom domain, and app store publishing. Pro adds GitHub, custom MCP servers, simulators, parallel agents, and submission help. Team is for groups that need ten seats and live collaboration. [Read the full answer ](/faq/which-draftbit-plan-do-i-need) Can I change or cancel my Draftbit plan at any time? + − Yes. An organization owner or admin can upgrade, downgrade, or cancel from the Billing section at any time. Upgrades apply immediately with a prorated charge and restart your billing cycle. Downgrades and cancellations take effect at the end of the current period, and you keep paid features until then. [Read the full answer ](/faq/can-i-change-or-cancel-my-plan) What happens to my Draftbit projects if I downgrade? + − Nothing is deleted. Every project and app stays in your account and stays accessible. From the date the lower plan starts, you cannot create projects or apps beyond its limits, and features above the plan lock, including code editing and export, mobile publishing, custom domains, GitHub, simulators, and extra editor seats. [Read the full answer ](/faq/what-happens-to-projects-after-downgrade) Do unused Draftbit credits roll over? + − Partly. Monthly plan and credit package credits stay usable for 30 days after the billing period they were granted for, so one month overlaps the next. Yearly credits arrive up front and expire at the end of the year. One-time purchases and the 5,000 signup credits last one year. Reward credits effectively never expire. [Read the full answer ](/faq/do-unused-credits-roll-over) What uses Draftbit credits? + − Draftbit credits pay for the AI model calls that Draftbit funds, mainly agent threads that read, plan, and change your app. Each call costs the provider's token price plus a Draftbit markup, converted at 1,000 credits per USD. Threads that run on your own key or subscription do not use credits. [Read the full answer ](/faq/what-uses-draftbit-credits) Which payment methods does Draftbit accept? + − Draftbit accepts major credit cards, including Visa, Mastercard, and American Express, through Stripe, and all prices are in USD. The same checkout handles subscriptions and one-time credit purchases. Enterprise customers can arrange invoice billing. [Read the full answer ](/faq/which-payment-methods-does-draftbit-accept) What happens when I run out of Draftbit credits? + − Draftbit-funded AI work stops. You cannot start a new thread or message with an empty balance, and a running task stops at its next model call. Your app, code, editor, and publishing keep working. Fix it by buying a one-time top-up or adding a credit package on a paid plan, connecting your own AI key or subscription, or earning credits. [Read the full answer ](/faq/what-happens-when-i-run-out-of-credits) 08 ## Expert services What Draftbit experts can build, fix, publish, and maintain. What are Draftbit Expert Services? + − Expert Services are paid help from Draftbit's own full-time designers, developers, and backend engineers. You can buy a fixed-price package, keep a dedicated team on a monthly plan from 2,000 USD, or add an advisor for 150 USD a week while you keep building yourself. [Read the full answer ](/faq/what-are-draftbit-expert-services) What kinds of Expert Services does Draftbit offer? + − Draftbit offers three engagement types. Fixed-price packages (Starter Backend, MVP, and v1), monthly plans from 2,000 USD with a dedicated team, and an Advisory plan from 150 USD a week. The work covers design, screens, backends, custom code, integrations, custom components, training, QA, and app store submission. [Read the full answer ](/faq/which-expert-services-does-draftbit-offer) What are Draftbit's fixed-price Expert Service packages? + − Three packages are listed today. Starter Backend at 2,500 USD, an MVP at 6,499 USD delivered in 4 to 8 weeks with 30 days of free maintenance, and a v1 at 12,999 USD delivered in 8 to 12 weeks with QA, App Store and Google Play approval, and 60 days of maintenance and support. Scope and price are locked at the start. [Read the full answer ](/faq/what-are-fixed-price-expert-projects) What is the Draftbit Advisory plan? + − Advisory pairs you with a Draftbit expert while you keep building. For 150 USD per week or 500 USD per month you get a shared Slack channel, code review, architecture guidance, troubleshooting, one-on-one training, priority support, and up to 2 hours a week of hands-on work. You can pause or cancel at any time. [Read the full answer ](/faq/what-is-draftbit-advisory-plan) What are Draftbit's monthly Expert development plans? + − Monthly plans put a dedicated Draftbit team on your roadmap. Bronze is 2,000 USD per month for one part-time expert, Silver is 4,000 USD for a part-time team across design, development, and QA, Gold is 7,500 USD for a full product team, and Platinum starts at 12,000 USD for a custom team. Every plan can be paused or canceled at any time. [Read the full answer ](/faq/what-are-monthly-development-plans) How do Expert Services work with the Draftbit platform? + − Draftbit staff add the expert to your organization with an Expert role, which gives editor-level access to your project without using one of your editor seats. Work happens in the same project you use, updates arrive every 48 hours over Slack and email, and the code stays yours. [Read the full answer ](/faq/how-do-experts-work-with-draftbit-platform) Can I get expert help with just one part of my app? + − Yes. Draftbit experts take on small jobs as well as full builds, such as wiring up Stripe or Twilio, building a custom component, fixing a stuck build, adding a backend, cleaning up code, or handling an app store submission. A scoping call sets the estimate, and small ongoing tasks often fit inside the Advisory plan's 2 hours a week of hands-on work. [Read the full answer ](/faq/can-i-get-help-with-one-part-of-my-app) Do I own the code built by Draftbit experts? + − Yes. You own everything Draftbit experts build or help you build, the same as any code created in Draftbit. It stays in your project, you can export it on Standard plans and above or push it to GitHub on Pro and above, and Draftbit never uses your code to train AI models. [Read the full answer ](/faq/do-i-own-code-built-by-draftbit-experts) Can I pause or cancel a monthly Draftbit expert plan? + − Yes. Monthly plans and the Advisory plan can be paused or canceled at any time, with no long-term commitment or seat minimum. Fixed-price packages work differently, because their scope and price are locked at the start and they end when the build and its maintenance period are delivered. [Read the full answer ](/faq/can-i-pause-or-cancel-expert-plan) Can Draftbit experts modernize an old app? + − Yes. Upgrading an old app is one of the three use cases Draftbit experts offer. The work covers a performance audit and optimization, dependency and framework upgrades, a UI refresh, code cleanup and technical debt reduction, and new features on the upgraded base. You keep what already works, and the app can stay outside Draftbit. [Read the full answer ](/faq/can-experts-modernize-an-old-app) Can Draftbit experts migrate an app from another platform? + − Yes. Migration is one of the three use cases Draftbit experts offer. They audit the existing app and data, rebuild the screens in Draftbit, migrate or reconnect the backend and APIs, move data with integrity checks, and test everything before you switch over. The target can be Draftbit or a fully independent codebase. [Read the full answer ](/faq/can-experts-migrate-an-app-to-draftbit) Can Draftbit experts fix a broken AI-generated or vibe-coded app? + − Yes. Rescuing a stuck vibe-coded app is one of the three use cases Draftbit experts take on. They review the code, diagnose the failures, fix broken logic, navigation, and state, restructure the AI-generated parts so they can be maintained, connect or repair backend integrations, and hand back a working app you understand. Rescue work is scoped at 2 to 6 weeks. [Read the full answer ](/faq/can-experts-fix-a-broken-ai-generated-app) 09 ## Teams and support Inviting teammates, roles and seats, support options, and how your data is protected. Can I invite teammates to a Draftbit project? + − Yes. On every plan, an owner or admin can invite people by email as viewers, editors, or admins. Viewers are read-only and do not use a seat. Editor seats are limited to 1 on Free, Standard, and Pro, 10 on Team, and unlimited on Enterprise, and paid plans can buy extra seats. [Read the full answer ](/faq/can-i-invite-teammates) What collaboration features does Draftbit have? + − Every plan has an organization with owner, admin, editor, and viewer roles. Team and Enterprise add live collaboration, which shows who else is in the app with presence avatars, cursors, and open-file markers, plus 10 or more editor seats. Pro and up can export to GitHub for pull requests, and higher plans run more agents at once. [Read the full answer ](/faq/what-collaboration-features-does-draftbit-have) Does Draftbit support single sign-on and SAML? + − SSO with SAML is an Enterprise feature. It is not a setting on the self-serve Free, Standard, Pro, or Team plans, and it is set up as part of an Enterprise agreement, so start with an Enterprise conversation. On other plans, each teammate signs in with their own Draftbit account and you control access through roles and seats. [Read the full answer ](/faq/does-draftbit-support-sso) What support options are available with Draftbit? + − The builder has a Get Help chat in the top bar, and the docs and community forum are open to everyone. Email support starts at Standard, priority support and training sessions at Pro, and a dedicated account manager at Team. Enterprise adds custom SLAs. For hands-on work on your app, Draftbit Expert Services offer advisory from 150 USD per week and retainers from 2,000 USD per month. [Read the full answer ](/faq/what-support-options-are-available) How does Draftbit protect my code, data, and secrets? + − Draftbit encrypts stored credentials such as API keys, OAuth tokens, environment variable values, and database connection strings at rest with AES-256, uses TLS in transit, and does not use your code to train AI models. You own the code. Access is controlled with organization roles, and SSO is available on Enterprise. Your app's own backend and secrets still need your own controls. [Read the full answer ](/faq/how-does-draftbit-protect-code-data-and-secrets) 10 ## Comparisons How Draftbit differs from other builders and custom development. How is Draftbit different from FlutterFlow, Bubble, and Lovable? + − Draftbit produces a real React Native, Vite, or Astro codebase that you can edit, export, and publish, with Claude Code and Codex working in the same project as the visual editor and an in-house expert team behind it. FlutterFlow generates Flutter and Dart, Bubble runs apps on its own platform without source export, and Lovable focuses on web applications rather than native mobile. [Read the full answer ](/faq/how-is-draftbit-different-from-other-app-builders) How does Draftbit compare with FlutterFlow? + − Both offer visual editing, AI agents, code export, GitHub workflows, and mobile publishing. Draftbit generates React Native, Expo, and TypeScript, with Claude Code and Codex editing the same files as the visual editor, ZIP export on Standard, and GitHub export on Pro. FlutterFlow generates Flutter and Dart. Your team's stack is usually the deciding factor. [Read the full answer ](/faq/draftbit-vs-flutterflow) How does Draftbit compare with Bubble? + − Draftbit produces editable, exportable React Native, Vite, or Astro code and works with a backend you choose, including a Supabase backend in open beta. Bubble provides a managed visual runtime, database, workflows, and hosting, but its app source code cannot be exported. On Draftbit, code editing and ZIP export start on Standard and GitHub export starts on Pro. [Read the full answer ](/faq/draftbit-vs-bubble) How does Draftbit compare with Lovable? + − Lovable is focused on AI-built web applications. Draftbit builds native iOS and Android apps with React Native and Expo, plus Vite web apps and Astro websites, with a visual editor tied to the project files and Claude Code and Codex working in the same project. Both give you the source code and a GitHub path, which on Draftbit starts on the Pro plan. [Read the full answer ](/faq/draftbit-vs-lovable) How does Draftbit compare with Adalo? + − Both can build visual apps for web, iOS, and Android. Draftbit exposes a React Native and Expo codebase that Claude Code and Codex edit, that you can edit yourself on Standard or higher, and that you can export as a ZIP on Standard or to GitHub on Pro. Adalo centers on a no-code component, action, and database workflow. [Read the full answer ](/faq/draftbit-vs-adalo) How does Draftbit compare with Bolt, Replit, and Cursor? + − Bolt, Replit, and Cursor are code-focused AI environments with growing visual and mobile tools. Draftbit is built around an app-specific project, a visual editor that reads and writes the real source files, one-click iOS, Android, and web publishing, and an in-house expert team. You can also open a Draftbit sandbox in Cursor, VS Code, or Windsurf on Standard or higher. [Read the full answer ](/faq/draftbit-vs-bolt-replit-cursor) How does Draftbit compare with hiring a developer or agency? + − Draftbit gives you a working React Native, Vite, or Astro project, a visual editor, Claude Code and Codex, and one-click publishing, so a founder or designer can start free and ship without waiting on every code change. Custom development gives a team full control of the stack from day one. You own the Draftbit code and can export it on Standard or higher, so you can start in Draftbit and hand off later, or hire Draftbit's in-house experts for the parts you cannot build. [Read the full answer ](/faq/draftbit-vs-custom-development) No questions match that search. Try fewer words. --- # Are Draftbit mobile apps native or web wrappers? > Learn how Draftbit builds iOS and Android apps with React Native and Expo, and how that differs from wrapping a website in a mobile shell. [ All questions](/faq) A Mobile project in Draftbit is an Expo React Native codebase. React Native describes the interface in JavaScript or TypeScript and renders it with the platform’s own controls, and packages from the Expo and React Native ecosystem give the app access to the camera, location, notifications, storage, and other operating system features. A web view wrapper loads a website inside a browser frame instead, and can only do what that browser allows. The same project can publish to the web as a progressive web app, and the in-browser preview shows web and phone-sized devices side by side while you build. You can still write platform-specific code when iOS and Android need different behavior, permission handling, or design. Native does not mean automatically fast or finished. Long lists, images, animations, network calls, and state updates need testing on real devices, and a package that ships native code needs a fresh native preview build before it shows up in the iOS or Android simulators. If you export the project, it is a standard Expo app that works with normal React Native tooling. ## Useful links * [Read about React Native ](https://reactnative.dev) In this section [Platforms and publishing ](/faq#platforms-publishing) ## Related questions [What language and framework does Draftbit use? ](/faq/what-language-and-framework-does-draftbit-use)[Can Draftbit apps use camera, location, notifications, and other device features? ](/faq/can-draftbit-apps-use-device-features)[Which platforms does Draftbit support? ](/faq/which-platforms-does-draftbit-support) ## Start with your app idea Create a free account and describe what you want to build. [Get started free ](https://app.draftbit.com/signup) --- # Are my prompts and source code used to train AI models? > What Draftbit does with your code and prompts, how the billing path decides which provider terms apply, and how to keep secrets out of threads. [ All questions](/faq) Draftbit does not use your code to train AI models, and the code you create in Draftbit belongs to you. Your prompts and the agent’s replies are stored with the thread so you can review the history later. API keys and other credentials you store are encrypted at rest, and traffic is encrypted in transit. What happens at the model provider depends on which billing path the thread uses. When Draftbit credits pay for a thread, the request goes through Draftbit’s infrastructure to the provider’s API under Draftbit’s accounts. When you connect your own OpenAI, Anthropic, or OpenRouter key, the thread goes straight from the sandbox to that provider under your account. A ChatGPT or Claude subscription works the same way with your subscription credentials, and Anthropic’s policies for Claude subscriptions apply. In every case the provider’s own terms for that account type decide retention and training, so read the terms for the account you connected. The chat and thread history label the provider and billing path for each thread, so you always know which terms apply. Keep production secrets, customer records, and access tokens out of prompts. Store them as sensitive environment variables, which stay out of the app bundle, and use test data when real records are not needed. This page is a product explanation, not a certification. If your organization needs a specific compliance standard, data residency, or contract language, ask us for the current terms in writing before you start. ## Useful links * [Read the Draftbit privacy policy](/privacy) * [Read OpenAI privacy information ](https://openai.com/policies/privacy-policy/) * [Read Anthropic privacy information ](https://www.anthropic.com/legal/privacy) In this section [AI agents ](/faq#ai-agents) ## Related questions [Can I use my own OpenAI, Anthropic, or OpenRouter key in Draftbit? ](/faq/can-i-use-my-own-ai-api-key)[How does Draftbit protect my code, data, and secrets? ](/faq/how-does-draftbit-protect-code-data-and-secrets)[Which AI models and coding agents does Draftbit support? ](/faq/which-ai-models-does-draftbit-support) ## Start with your app idea Create a free account and describe what you want to build. [Get started free ](https://app.draftbit.com/signup) --- # Can a developer take over a Draftbit app later? > How to hand a Draftbit app to a developer through team roles, GitHub Export, or a ZIP download, and what else belongs in the handoff. [ All questions](/faq) Yes, and there are three ways to do it. Invite the developer into your Draftbit organization, hand them a GitHub repository, or give them a ZIP export and let them work in their own editor. Inside Draftbit, invite them from your team page as an Editor, or as an Admin if they will also manage members and billing. A Viewer can look at the project but cannot save changes or export code. Editor seats are limited to one on Free, Standard, and Pro, ten on Team, and unlimited on Enterprise, and paid plans can add seats. Once in, the developer uses the same code editor and AI agents you do. Saving code edits needs Standard or higher, and the editor recognizes JavaScript, TypeScript, JSX, JSON, and Markdown files. If you would rather bring in someone from Draftbit, Expert Services developers join your organization under a separate Expert role. It carries editor-level access and does not take one of your editor seats. Outside Draftbit, GitHub Export on Pro or higher gives the developer a normal repository with commit history, and a ZIP download on Standard or higher gives them a snapshot. Either way they receive an ordinary React Native and Expo project for mobile, or a React, Astro, Hono, or Payload project for the other app types. Whichever path you choose, hand over more than code. Environment variable names, backend access, domain settings, app store records, and the name of any dedicated export branch belong in the handoff. Transfer accounts through their own team controls rather than sharing passwords, and agree on whether Draftbit or the repository is the source of truth before the work starts. ## Useful links * [Connect with Draftbit experts](/services) In this section [Code and ownership ](/faq#ownership) ## Related questions [Can I export my Draftbit app and continue development outside Draftbit? ](/faq/can-i-export-and-continue-outside-draftbit)[Can I connect a Draftbit project to GitHub? ](/faq/can-i-connect-draftbit-to-github)[What language and framework does Draftbit use? ](/faq/what-language-and-framework-does-draftbit-use) ## Start with your app idea Create a free account and describe what you want to build. [Get started free ](https://app.draftbit.com/signup) --- # Can I build a production app with Draftbit if I don't know how to code? > What a nontechnical builder can do in Draftbit, which plan gates apply to code and publishing, and where expert review still matters before launch. [ All questions](/faq) You can get a long way without writing code. Start by describing the app. An agent turns the description into a task list and builds a first version while you watch. Then use the visual editor to adjust screens, connect a backend such as Supabase, and preview the app in the browser. None of this requires coding experience. The Free plan covers this stage. It includes AI agent chat, the visual editor, three projects, 5,000 one-time credits, and one-click web publishing on a draftbit.dev address. With the included credits you build with Codex and OpenAI models. Claude Code also works on Free when you connect your own Anthropic subscription or API key. Publishing to a store is where the plan and outside accounts come in. iOS and Android publishing need Standard or higher, your own Apple Developer and Google Play accounts, and the credentials Draftbit needs to publish on your behalf. Pro adds App Store submission assistance. Apple and Google decide whether the app is approved and when, and they can reject a build that works for policy reasons. The hard parts of production are rarely visible on a screen. One user must not see another user’s data. Payments need failure handling. Push notifications and offline behavior need testing on real devices. Agents can write all of this, and you should still check the result, because a screen that looks right is not proof that the code behind it is. Build the most important flow first and test it with real data. Staging publishes go to TestFlight on iOS and the Internal Testing track on Google Play, which is how you get the app onto real phones before release. Ask someone technical to review authentication, secrets, payments, and data access before launch. If you do not have that person, Draftbit experts fill the gap. Monthly retainers start at 2,000 USD. A fixed-price MVP is 6,499 USD over four to eight weeks, and the 12,999 USD v1 package adds a production backend, QA, and App Store and Google Play approval over eight to twelve weeks. You can own the app without knowing how to code, as long as testing and technical review are part of the plan. ## Useful links * [Start a free project ](https://app.draftbit.com/signup) * [Get help from an expert](/services) In this section [Getting started ](/faq#getting-started) ## Related questions [Is Draftbit for production apps or only prototypes? ](/faq/draftbit-production-apps-or-prototypes)[What happens if AI gets stuck or my app needs custom engineering? ](/faq/what-if-ai-agent-gets-stuck)[When is Draftbit not the right fit? ](/faq/when-is-draftbit-not-right-fit) ## Start with your app idea Create a free account and describe what you want to build. [Get started free ](https://app.draftbit.com/signup) --- # Can Draftbit apps use camera, location, notifications, and other device features? > Learn how Draftbit apps reach camera, location, notifications, and other iOS or Android features through Expo packages, and what setup they need. [ All questions](/faq) A Mobile project is an Expo React Native app, so any device feature with an Expo or React Native package is open to it. The Expo team maintains packages for the camera, location, notifications, the file system, secure storage, and more, and the wider React Native ecosystem covers maps, payments, analytics, and audio. You can add a package by name in the Packages tab of Build Config, or describe the feature in AI Chat and let the agent choose, install, and wire it up. The agent has tools to recommend packages, add and remove them, and run Expo’s compatibility check, and it can add the permission text and configuration a feature needs. Prefer packages that support auto-linking or ship an Expo config plugin. A package that needs hand-edited native project files is usually a poor fit, and the agent can tell you that before you install it. Packages built for native mobile may not work on the web, so ask for a web fallback if you publish to both. Two limits apply. Native code does not appear in the web preview, so after adding a package with native code, create a new iOS or Android preview build on the Pro plan or test on a device. And some features need accounts outside Draftbit. Push notifications, for example, need a free Expo account, Apple push notification credentials on iOS or a Firebase project on Android, and a one-time credential setup in a terminal on your own machine. After that you publish again so the live build picks up the credentials. ## Useful links * [Browse Expo SDK documentation ](https://docs.expo.dev/versions/latest/) In this section [Platforms and publishing ](/faq#platforms-publishing) ## Related questions [Can I use npm packages and custom native modules in Draftbit? ](/faq/can-i-use-npm-packages-and-native-modules)[Are Draftbit mobile apps native or web wrappers? ](/faq/are-draftbit-mobile-apps-native)[Can I test a Draftbit app on real devices and simulators? ](/faq/can-i-test-on-real-devices-and-simulators) ## Start with your app idea Create a free account and describe what you want to build. [Get started free ](https://app.draftbit.com/signup) --- # Can Draftbit build complex apps? > How Draftbit handles complex logic, custom code, packages, backends, and native features, and which plan limits and review steps apply. [ All questions](/faq) Complexity shows up in different places. Some apps have many screens, some have hard business rules, some depend on device hardware, and some have to hold up under real traffic. Draftbit handles the first kind without much fuss and gives you tools for the rest, but it does not make the hard parts easy. There is no screen or workflow cap in the builder. The plan limits are elsewhere. Free allows three projects, two apps per project, one REST integration per project, and one agent at a time. Standard removes the project and integration caps. Pro runs up to five agents and three sandboxes at once and adds custom MCP servers and GitHub. Team goes to ten agents and five sandboxes. Business logic lives in code, and the code is yours to shape. Agents write it, and on Standard or higher you can edit it directly in the builder or in VS Code, Cursor, or Windsurf through a tunnel. When the app needs server-side rules or its own database, add an API backend or a Supabase backend app to the same project instead of forcing everything into the client. The agent can also call your existing REST or GraphQL API while it builds. Native features are the most common wall. Packages that include native code work, but every time you add, remove, or change one you need a new native preview build, and the code editor does not recognize native iOS or Android source for autocomplete or linting. Deep work on a new native SDK may be easier in an exported project with a local native toolchain. A marketplace with payouts, a real-time collaboration app, or a regulated health product needs design decisions no builder can make for you. Test the risky flow before you build the rest of the screens, keep logic in small modules an agent can reason about, and connect GitHub if more than one person is writing code. If the requirements are unusual, an architecture review from Draftbit experts can tell you whether the app fits as-is, needs custom code, or should move part of its work to a separate backend. ## Useful links * [Talk to a Draftbit expert](/services) In this section [Getting started ](/faq#getting-started) ## Related questions [What are the limits of Draftbit's visual editor? ](/faq/what-are-visual-editor-limits)[Can I use npm packages and custom native modules in Draftbit? ](/faq/can-i-use-npm-packages-and-native-modules)[What happens if AI gets stuck or my app needs custom engineering? ](/faq/what-if-ai-agent-gets-stuck) ## Start with your app idea Create a free account and describe what you want to build. [Get started free ](https://app.draftbit.com/signup) --- # Can Draftbit connect to my existing backend, database, and APIs? > Learn how Draftbit connects to a backend you already run through REST, OpenAPI, GraphQL, or MCP, and which parts stay your responsibility. [ All questions](/faq) You do not need to move your backend into Draftbit. On the Integrations page you can add a custom REST source with a base URL, an authentication header, and the endpoints you want to expose. If the API publishes an OpenAPI spec, Draftbit imports it and creates an endpoint for every operation, which works best for smaller specs. For GraphQL, Draftbit introspects the schema and creates one operation per query or mutation, and custom operations you add survive a reimport. Each endpoint has a live request tester in the Builder. Once an endpoint returns a successful JSON response, the agent can call it as a tool during a chat thread, and Draftbit generates a typed client file in the app code so the app itself sends requests to your server over the network. An Integrations Agent sidebar can scaffold endpoints from a plain description of what you need. Supabase, Xano, and Directus have MCP connectors as well. Use the MCP connector when you want the agent to manage the service, for example create tables or deploy functions. Use the REST or GraphQL connector when you only want to expose endpoints from a backend you already own. Your backend keeps responsibility for authorization, validation, and rate limits. Keep the database behind an API or a client library with row-level rules, and treat any header value a mobile or web app sends as visible to its users. A Free plan project includes one REST API integration, and paid plans remove that limit. Connectors also depend on your service staying up and on credentials that have not expired. ## Useful links * [Browse REST integrations](/integrations) * [Browse GraphQL integrations](/graphql) In this section [Backends and integrations ](/faq#backends-integrations) ## Related questions [Can Draftbit connect to REST and GraphQL APIs? ](/faq/can-draftbit-connect-to-rest-and-graphql-apis)[Can I use Supabase, Firebase, or Xano with Draftbit? ](/faq/can-i-use-supabase-firebase-or-xano)[How does Draftbit handle API keys, secrets, and environment variables? ](/faq/how-does-draftbit-handle-secrets-and-environment-variables) ## Start with your app idea Create a free account and describe what you want to build. [Get started free ](https://app.draftbit.com/signup) --- # Can Draftbit connect to REST and GraphQL APIs? > Learn how Draftbit apps and agents use REST endpoints and GraphQL operations, including catalog imports, testing, and generated client code. [ All questions](/faq) A REST source takes a base URL, authentication through an API key, bearer token, or custom headers, and endpoints with a method, path, query parameters, and request body. The catalog currently lists more than 40 REST services and more than 20 GraphQL services, and Draftbit can import an OpenAPI spec to create endpoints in bulk, with a preview step that shows the operation count before anything is written. A GraphQL source takes an endpoint URL and the same authentication options. Import GraphQL introspects the schema and creates one operation per query or mutation. You can test operations before saving, add your own, and reimport the schema later without losing them. Every endpoint has a request tester. After a successful response, the agent can call the endpoint as a tool during a chat thread, and Draftbit writes a typed client file into the app code so the finished app sends the same request itself. A header that reads from an environment variable must use a plain text public variable in a mobile or web app, because that value ships with the app. Anything that needs a private key belongs on a server between the app and the service. Test expired sessions, permission errors, empty results, and pagination before you rely on an integration. On the Free plan each project can hold one REST API integration; every paid plan lifts that cap. ## Useful links * [Browse REST integration guides](/integrations) * [Browse GraphQL integration guides](/graphql) In this section [Backends and integrations ](/faq#backends-integrations) ## Related questions [Can Draftbit connect to my existing backend, database, and APIs? ](/faq/can-draftbit-connect-existing-backend-database-apis)[Which integrations does Draftbit support? ](/faq/which-integrations-does-draftbit-support)[How does Draftbit handle API keys, secrets, and environment variables? ](/faq/how-does-draftbit-handle-secrets-and-environment-variables) ## Start with your app idea Create a free account and describe what you want to build. [Get started free ](https://app.draftbit.com/signup) --- # Can Draftbit publish directly to the Apple App Store, Google Play, and the web? > Learn how one-click publishing works for web, iOS, and Android, which plans include each target, and what Apple and Google still control. [ All questions](/faq) Web publishing is on every plan. A publish goes to a generated address on draftbit.dev at no charge, and the Standard plan and above can attach a custom domain and remove Draftbit branding. Each publish takes a version name, a version number, and an environment, and the production and staging deployments can be published or unpublished separately. iOS and Android publishing start on the Standard plan and apply to Mobile projects. You enter your Apple or Google credentials once on the Publishing page. From then on Draftbit builds the app, handles certificates and signing, and uploads the result to App Store Connect or Google Play. A staging publish goes to TestFlight on iOS or the Internal testing track on Android, so testers can try a build before the production release. Google requires the very first Android binary to be uploaded by hand, so Draftbit hands you that file, and later Android publishes upload automatically. The store listing, privacy policy, and screenshots are still yours to prepare, and the builder includes a screenshot tool for the listing images. Apple and Google make the review decision and set the release timing. If you would rather run your own build and release process, export the code and publish manually. ## Useful links * [See publishing features](/platform) * [Read Apple review guidance ](https://developer.apple.com/app-store/review/) * [Read Google Play launch guidance ](https://support.google.com/googleplay/android-developer/answer/9859152) In this section [Platforms and publishing ](/faq#platforms-publishing) ## Related questions [Does Draftbit help with Apple App Store and Google Play submission? ](/faq/does-draftbit-help-with-app-store-submission)[Which developer accounts and fees do I need to publish a mobile app? ](/faq/which-developer-accounts-and-fees-do-i-need)[Can I self-host a Draftbit app or publish it manually? ](/faq/can-i-self-host-or-publish-manually) ## Start with your app idea Create a free account and describe what you want to build. [Get started free ](https://app.draftbit.com/signup) --- # Can Draftbit use MCP servers? > Learn which MCP servers Draftbit agents can use, how they authenticate, which plan custom servers need, and what MCP does not do. [ All questions](/faq) MCP stands for Model Context Protocol. An MCP connector lets the agent manage a service itself, for example create tables in Supabase, build APIs in Xano, deploy Cloudflare Workers, read Sentry errors, or create Linear issues. A REST or GraphQL connector exposes individual endpoints instead. Most catalog servers authenticate when you sign in to the service and grant Draftbit access. Xano and Directus take a server URL and an access token. Canva is a special case, since connecting it lets you pick a design and start a thread that converts it into React Native screens. The Firebase and Figma connectors are marked Coming Soon. A custom server takes any MCP server URL with OAuth, a header token, or authentication left for the agent to work out, plus optional custom headers and a cache setting. Adding one requires Pro or higher. The billing rules place no plan gate on catalog servers. MCP tools run only while a chat thread is active. They are not a runtime connection for the published app, which needs its own SDK or network calls to reach the service. Give a server the smallest permissions the task needs, use a test environment when it can change outside data, and review what the agent did after a write operation. A connector can also fail when the upstream service is down, a credential expires, or the external API changes. ## Useful links * [Browse Draftbit MCP servers](/mcp) * [Check current MCP plan access](/pricing) In this section [Backends and integrations ](/faq#backends-integrations) ## Related questions [Which integrations does Draftbit support? ](/faq/which-integrations-does-draftbit-support)[What can Draftbit AI agents do? ](/faq/what-can-draftbit-ai-agents-do)[Which Draftbit plan do I need? ](/faq/which-draftbit-plan-do-i-need) ## Start with your app idea Create a free account and describe what you want to build. [Get started free ](https://app.draftbit.com/signup) --- # Can Draftbit experts fix a broken AI-generated or vibe-coded app? > How Draftbit experts diagnose and repair a vibe-coded app with broken logic, state, navigation, or integrations, and how long it takes. [ All questions](/faq) Apps built with AI tools often get most of the way there and then stall. Logic that almost works, state scattered across files, navigation that breaks on one path, and a backend that was never fully connected are the usual symptoms, and another broad prompt rarely fixes them. We see this a lot, and rescue is a named service on the services page. The engagement starts with a deep code review to find what is actually broken. From there the expert fixes the broken logic, navigation, and state management, restructures the AI-generated code so a person can maintain it, and connects or repairs the backend integrations. The goal is a clean, working app that you understand and can keep building on, so the fix targets what is broken instead of rewriting code that already works. Rescue projects are scoped at 2 to 6 weeks. The app does not have to live in Draftbit for us to work on it, since experts work inside Draftbit or in any other platform. If you want to continue in Draftbit afterwards, a public GitHub repository built with Expo, Vite, or Astro can be imported from the dashboard, and the expert can help with that step. Bring the repository, the failing flows, and any error output to the scoping call. If you are building the app in Draftbit and the tangle is small, ask about the Advisory plan first, since its 2 hours a week of hands-on work covers debugging and fixing a stuck build. ## Useful links * [Get an app unstuck](/experts-requests) In this section [Expert services ](/faq#expert-services) ## Related questions [What happens if AI gets stuck or my app needs custom engineering? ](/faq/what-if-ai-agent-gets-stuck)[Can I get expert help with just one part of my app? ](/faq/can-i-get-help-with-one-part-of-my-app)[Can Draftbit experts modernize an old app? ](/faq/can-experts-modernize-an-old-app) ## Start with your app idea Create a free account and describe what you want to build. [Get started free ](https://app.draftbit.com/signup) --- # Can Draftbit experts migrate an app from another platform? > How Draftbit experts move an app from another builder or codebase, what the audit covers, and which imports you can try yourself first. [ All questions](/faq) When a platform starts limiting what you can build, the expert team moves the app for you. The migration service covers a full audit of the existing app and its data, a screen-by-screen rebuild in Draftbit, migration or reconnection of the backend and APIs, a data migration with integrity checks, and testing and QA before the switch. You end up owning the code, either as a Draftbit project or as an independent codebase if you would rather not use Draftbit at all. Two imports exist in the product, and they are worth trying before you pay for a migration. Any user can import a public GitHub repository by URL from the dashboard. If the importer recognizes the project as Expo, Expo Router, Vite with React, Vue, or Svelte, or Astro, an agent can migrate it to Draftbit conventions with the full builder feature set. Any other framework can only be imported with minimal changes, which keeps the code as it is and gives you a simplified builder with chat, code editing, and preview. Apps built in Draftbit Classic import from the same page once Expo Router is enabled on them. Private repository import and zip upload are currently limited to Draftbit staff. Everything outside those paths is expert work. When a no-code platform does not export a codebase the importer understands, the team rebuilds the interface screen by screen and reconnects or replaces the backend. The audit decides how much of the old app is copied, rewritten, or left behind, and the estimate and timeline come out of the scoping call. Bring the current app, an inventory of screens and data, and your store listing details to that call. Keeping the existing bundle identifiers and signing credentials lets the new build update the listing your users already have. ## Useful links * [Plan an app migration](/experts-requests) In this section [Expert services ](/faq#expert-services) ## Related questions [Can I import an existing React Native or Expo app into Draftbit? ](/faq/can-i-import-existing-react-native-or-expo-app)[Can Draftbit experts modernize an old app? ](/faq/can-experts-modernize-an-old-app)[Can I export my Draftbit app and continue development outside Draftbit? ](/faq/can-i-export-and-continue-outside-draftbit) ## Start with your app idea Create a free account and describe what you want to build. [Get started free ](https://app.draftbit.com/signup) --- # Can Draftbit experts modernize an old app? > How Draftbit experts upgrade an aging app, what the audit and cleanup cover, and whether the app has to move into Draftbit. [ All questions](/faq) An app that works but has grown slow, hard to change, or short on features users now expect is the case the upgrade service is built for. The expert team modernizes the stack, cleans up the codebase, improves performance, and adds what is missing, while keeping the parts that already work. The listed scope has five parts. A performance audit followed by optimization, dependency and framework upgrades, a UI and UX refresh using current design patterns, code cleanup that reduces technical debt, and new feature development on the upgraded base. The audit comes first because it decides how much of the rest you need. Ask for the maintenance work and the product work to be estimated separately so you can see which spending keeps the app running and which changes the roadmap. The app does not have to move into Draftbit. Experts work inside Draftbit or in any other platform, so a React Native, Expo, or web codebase can stay where it is and be upgraded in place. If you do want the app in Draftbit afterwards, a public GitHub repository built with Expo, Vite, or Astro can be imported from the dashboard, and the team can plan that move as part of the project. For upkeep after the upgrade, the monthly plans include proactive maintenance and performance tuning along with same-day emergency support. Bronze at 2,000 USD per month covers one part-time expert working one task at a time, which suits steady fixes and small improvements. ## Useful links * [Request an upgrade estimate](/experts-requests) In this section [Expert services ](/faq#expert-services) ## Related questions [Can Draftbit experts migrate an app from another platform? ](/faq/can-experts-migrate-an-app-to-draftbit)[Can Draftbit experts fix a broken AI-generated or vibe-coded app? ](/faq/can-experts-fix-a-broken-ai-generated-app)[Can I import an existing React Native or Expo app into Draftbit? ](/faq/can-i-import-existing-react-native-or-expo-app) ## Start with your app idea Create a free account and describe what you want to build. [Get started free ](https://app.draftbit.com/signup) --- # Can I add payments and subscriptions to a Draftbit app? > Learn how Stripe, RevenueCat, and Square connect to Draftbit apps and what their MCP servers do during a build compared with runtime. [ All questions](/faq) Stripe appears twice in the catalog because the two entries do different jobs. The Stripe MCP connector gives the agent tools while it builds, such as creating products and prices in your Stripe account and wiring payment processing into the app. The Stripe REST integration exposes Stripe API endpoints, imported from Stripe’s OpenAPI spec, that the agent can test and that the app can call at runtime. Requests that use your Stripe secret key must not run inside a mobile or web app, since anything in the bundle is visible to users. Draftbit refuses to generate app client code for a connector header that reads a sensitive environment variable. Put those calls in a Supabase edge function or your own backend, confirm the payment there or through a webhook, and only then mark an order paid. For subscriptions and in-app purchases on iOS and Android, the RevenueCat MCP server lets the agent integrate subscription billing, create products and subscriptions, and manage status and renewals. The Square MCP server connects the agent to customers, orders, and items. Apple and Google still control app review and the policy decisions about what you sell inside a mobile app, so read their rules before you choose a payment path. MCP connectors only run during an active chat thread. The published app needs the provider’s SDK or API calls in its own code, which the agent can write. Test renewal, cancellation, refunds, and restore purchases before release. Provider and store fees are separate from your Draftbit plan. ## Useful links * [Read the Stripe integration page](/integrations/stripe) * [Read the RevenueCat MCP page](/mcp/revenuecat) In this section [Backends and integrations ](/faq#backends-integrations) ## Related questions [Which integrations does Draftbit support? ](/faq/which-integrations-does-draftbit-support)[Which developer accounts and fees do I need to publish a mobile app? ](/faq/which-developer-accounts-and-fees-do-i-need)[How does Draftbit handle API keys, secrets, and environment variables? ](/faq/how-does-draftbit-handle-secrets-and-environment-variables) ## Start with your app idea Create a free account and describe what you want to build. [Get started free ](https://app.draftbit.com/signup) --- # Can I change or cancel my Draftbit plan at any time? > Learn how Draftbit upgrades, downgrades, and cancellation work, when charges and credits change, and how to undo a pending change. [ All questions](/faq) Plan changes live under Billing in the dashboard. The organization owner starts a paid subscription, and owners and admins can change or cancel it afterward. There is no long-term commitment on self-serve plans. An upgrade is any change that raises your commitment, such as a higher tier, more seats, a bigger credit package, or a switch from monthly to yearly billing. It applies right away. Stripe credits you for the unused part of the old plan, charges the new one, and your billing cycle restarts on that day. Credits from a package you already paid for stay in your balance, and the new package’s credits are added when the invoice is paid. A downgrade is scheduled for the end of your current period. You keep the current plan and its features until then, the Plan page shows the pending change and its date, and you can cancel the pending change before it happens. Only one change can be pending at a time, so cancel it first if you want something different. Canceling means choosing the Free plan. The subscription stays active to the end of the paid period and then the organization moves to Free. Credits already granted are not revoked, and they remain usable until their own expiry dates. Your projects and code are not deleted, but Free plan limits apply from that day. If Draftbit manages your plan directly, the Plan page says so and changes go through your Draftbit contact. Invoices and card details are handled in the Stripe billing portal linked from the Billing overview. ## Useful links * [See current pricing terms](/pricing) In this section [Pricing ](/faq#pricing) ## Related questions [What happens to my Draftbit projects if I downgrade? ](/faq/what-happens-to-projects-after-downgrade)[What happens to my app and code if I cancel Draftbit? ](/faq/what-happens-to-my-app-if-i-cancel)[Do unused Draftbit credits roll over? ](/faq/do-unused-credits-roll-over) ## Start with your app idea Create a free account and describe what you want to build. [Get started free ](https://app.draftbit.com/signup) --- # Can I connect a Draftbit project to GitHub? > How Draftbit's GitHub Export works, the Pro plan requirement, the token permissions it needs, and why a dedicated export branch is safer. [ All questions](/faq) Yes, on the Pro plan or higher. GitHub Export pushes your app’s generated source code to a repository and branch you choose. The server enforces the plan requirement, so on Free and Standard the export dialog shows an upgrade prompt instead of the setup form. Setup asks for a repository URL or an org/repo slug, a branch name, and a GitHub personal access token. Draftbit recommends a fine-grained token scoped to that one repository with Contents set to read and write, plus Workflows read and write if your app contains a .github/workflows directory. Check Access confirms that Draftbit can read the repository, though it does not test write access. Save Configuration stores the connection without pushing anything. To push, open the Export menu, click Commit next to GitHub, choose GitHub as the destination, and run the export. Larger apps can take a few minutes. Each export replaces the entire contents of the target branch apart from the .git directory, and an export with no changes creates no commit. Anything committed to that branch outside Draftbit disappears on the next push, so export to a dedicated branch such as draftbit-export and merge from it deliberately. Draftbit does not pull changes from the repository back into the project, so treat the connection as one direction. GitHub Export is separate from the ZIP download, which needs Standard or higher. Exports do not appear on the Activity tab, so check the branch’s commit history to confirm a push. Repository permissions, review rules, and secret scanning are configured in GitHub rather than in Draftbit. ## Useful links * [Read the GitHub connection guide ](https://docs.draftbit.com/guides/connecting-to-github) * [Check current plan access](/pricing) In this section [Code and ownership ](/faq#ownership) ## Related questions [Can I export my Draftbit app and continue development outside Draftbit? ](/faq/can-i-export-and-continue-outside-draftbit)[Can a developer take over a Draftbit app later? ](/faq/can-a-developer-take-over-my-draftbit-app)[What happens to my app and code if I cancel Draftbit? ](/faq/what-happens-to-my-app-if-i-cancel) ## Start with your app idea Create a free account and describe what you want to build. [Get started free ](https://app.draftbit.com/signup) --- # Can I create reusable components in Draftbit? > How shared components work in a Draftbit project, how they appear in the visual builder, and how themes and design blocks keep screens consistent. [ All questions](/faq) New Expo projects start with a component library. The scaffold uses React Native Reusables, a set of shadcn-style primitives, in a components/ui folder, with layout pieces in components/layout, and the agent instructions tell agents to reuse an existing component before creating a new one. Web projects follow the same pattern with shadcn/ui-style components in src/components/ui. You extend these libraries with your own components, either by asking an agent or by writing the file yourself in the Code Editor. The visual builder treats your own components like Draftbit’s. The Add Component panel lists components exported from your project files next to Draftbit’s defaults, so you can select a parent on any screen and drop in a card, header, or form row you built earlier. In the component tree, each use of a shared component appears as a single item. Its internals live in its own file, so to change what is inside the component you open that file, use the Code tab, or ask the agent. Styling the instance where it is used still works from the Styles tab. Consistency comes from the theme instead of copied values. The Themes page holds the shared colors and typography for light and dark mode, and components reference those tokens through utility classes for background, foreground, and the other named colors, so a palette change updates every component at once. For new sections, the Design Blocks gallery offers screens, sections, navigators, and components that the agent adapts to your theme. Tell the agent which parts of a component should stay editable, such as its label text or image, and keep one-off screen sections local. A component only pays off when several places should change together. You can also record conventions like “always use the existing component library before creating new components” in your agent instructions so every future run follows them. ## Useful links * [Read the Draftbit documentation ](https://docs.draftbit.com) In this section [Visual editor ](/faq#visual-editor) ## Related questions [How does Draftbit's visual builder work? ](/faq/how-does-draftbit-visual-builder-work)[Can I edit my app's code directly in Draftbit? ](/faq/can-i-edit-code-directly)[Do changes made by an AI agent appear in Draftbit's visual editor? ](/faq/do-ai-changes-appear-in-visual-editor) ## Start with your app idea Create a free account and describe what you want to build. [Get started free ](https://app.draftbit.com/signup) --- # Can I edit my app's code directly in Draftbit? > How Draftbit's Code tab and in-browser Code Editor work, which languages they support, and which plans include code editing and export. [ All questions](/faq) There are two ways in. In the visual builder, select a component and open the Code tab in the Utility Panel to see and edit the source for that component without leaving the screen. For anything larger, switch to the Code Editor view from the main menu. It shows a file tree of the whole project, including hidden folders when your app has them, and you can add, update, or delete files and folders, or add a file to the AI Chat context so the agent works on it with you. The editor recognizes JavaScript, TypeScript, JSX, JSON, and Markdown. For those it offers TypeScript-aware autocomplete and hover information, ESLint-backed inline diagnostics, formatting, and search. Other languages, including native iOS and Android source, get no autocomplete or linting. Before a file is saved the editor checks it for syntax errors. If it finds one, the save is blocked and the error location is highlighted, so the preview and the agent never see a half-broken file. Your manual edits go through the same save flow as agent changes. The Save button in the top bar shows what is pending, and you can commit everything with a message or discard it. A single file can be reverted from the button at the top of the editor, and the save history lets you roll the whole app back to an earlier save point. Editing and saving code yourself needs the Standard plan or higher. Standard also includes code export, which downloads the project as a ZIP for local work or manual publishing. Exporting to a GitHub repository is a Pro feature. Once code lives outside Draftbit, decide which copy is the source of truth before both sides change the same files. ## Useful links * [Check plans with code access](/pricing) In this section [Visual editor ](/faq#visual-editor) ## Related questions [Can I export my Draftbit app and continue development outside Draftbit? ](/faq/can-i-export-and-continue-outside-draftbit)[What are the limits of Draftbit's visual editor? ](/faq/what-are-visual-editor-limits)[Can I use npm packages and custom native modules in Draftbit? ](/faq/can-i-use-npm-packages-and-native-modules) ## Start with your app idea Create a free account and describe what you want to build. [Get started free ](https://app.draftbit.com/signup) --- # Can I export my Draftbit app and continue development outside Draftbit? > How to export a Draftbit project as a ZIP or to GitHub, which plans include export, and which Draftbit-run services you replace when you leave. [ All questions](/faq) Yes. The export is the full source of the app, the same files the Builder and the AI agents edit, so a developer can install the dependencies, run it locally, and keep working in any editor. Downloading the project as a ZIP requires the Standard plan or higher. Pushing it to a GitHub repository requires Pro or higher. The Free plan lets you read the code inside Draftbit but not download it, so upgrade before the day you plan to leave. What you receive depends on the project type. Mobile apps are React Native with Expo and TypeScript. Web apps are React projects built with Vite, websites are Astro projects, API backends are Hono services, and CMS projects run on Payload. Each one carries its own package.json and build scripts, and the tooling those frameworks use everywhere else works on the export. Code is only part of a running product. Web publishing, custom domains, one-click iOS and Android publishing, and a Draftbit-provisioned Supabase backend are services Draftbit runs for you. If you leave, choose a host and a build process, and either keep the Supabase project by transferring it to your own Supabase organization or move the data somewhere else. App store accounts, domains, and third-party APIs are already in your name. Export runs in one direction. Draftbit pushes to GitHub and does not pull commits back into the project, and each export replaces the contents of the target branch. Before both sides start changing the same files, decide whether Draftbit or the external repository is the source of truth, and record the environment variable names and service accounts the app depends on. ## Useful links * [Read the GitHub export guide ](https://docs.draftbit.com/guides/connecting-to-github) * [Check plans with export](/pricing) In this section [Code and ownership ](/faq#ownership) ## Related questions [Do I own the source code Draftbit generates? ](/faq/do-i-own-source-code-draftbit-generates)[Can I connect a Draftbit project to GitHub? ](/faq/can-i-connect-draftbit-to-github)[Can I self-host a Draftbit app or publish it manually? ](/faq/can-i-self-host-or-publish-manually) ## Start with your app idea Create a free account and describe what you want to build. [Get started free ](https://app.draftbit.com/signup) --- # Can I get expert help with just one part of my app? > How to get focused Draftbit expert help for one integration, component, bug, backend, or store submission without buying a full package. [ All questions](/faq) You do not need a full package to get help. The services and hiring pages list the smaller deliverables the team handles on their own, including screens and navigation, backend, auth, and APIs, custom components, Stripe, Twilio, and other integrations wired up, App Store and Google Play submission, performance audits and code cleanup, and one-on-one training. The path is the same as for a larger project. Book a call through the services page, or leave your number in the builder and an expert calls within one business day. The call takes about 30 minutes, and afterwards you get a written plan with the estimate for the piece you asked about. Two priced options already cover common small jobs. The Advisory plan, at 150 USD per week or 500 USD per month, includes up to 2 hours a week of hands-on work such as debugging, fixing a stuck build, or shipping a small feature, with extra hours at a discounted rate. The Starter Backend package, at 2,500 USD one time, adds authentication, roles, a database schema, and API endpoints to an app that already has its screens. Come to the call with the current state, the result you expect, the steps that fail, and any deadline. The expert will ask what is in and out of the piece before quoting it, so ask what the quote includes in return. A bug fix and a cleanup of the code around it are different jobs. ## Useful links * [Request expert help](/experts-requests) In this section [Expert services ](/faq#expert-services) ## Related questions [What is the Draftbit Advisory plan? ](/faq/what-is-draftbit-advisory-plan)[What happens if AI gets stuck or my app needs custom engineering? ](/faq/what-if-ai-agent-gets-stuck)[What kinds of Expert Services does Draftbit offer? ](/faq/which-expert-services-does-draftbit-offer) ## Start with your app idea Create a free account and describe what you want to build. [Get started free ](https://app.draftbit.com/signup) --- # Can I import an existing React Native or Expo app into Draftbit? > What Draftbit's GitHub import accepts, how the migrate and minimal import modes differ, and what to check before importing an Expo app. [ All questions](/faq) Import lives under Migrate in the dashboard and behind the Continue from an existing project option when you create a project. Paste the URL of a public GitHub repository. Draftbit confirms it can reach the repo, looks for a package.json at the root or at a subpath you give for an app inside a larger repo, checks that the selected folder is a single JavaScript app and not a monorepo workspace root, and reads the dependencies to detect the framework. Expo apps become Mobile projects, Vite apps become Web projects, and Astro sites become Websites. A React Native app that does not depend on Expo, a Next.js app, or anything else is treated as unrecognized. Private repositories are not available for import. Then you choose how to bring it in, and the choice is permanent for that project. Migrate to Draftbit asks an agent to plan and run a migration to Draftbit’s conventions. For an Expo app that means Expo Router for screens, NativeWind for styling with StyleSheet code converted where the conversion is mechanical, an app.config.js, strict TypeScript, and working web support because the sandbox preview is the web build. The agent keeps your existing components, icons, and theming approach, upgrades a very old Expo SDK one version at a time, and reports any abandoned packages it replaces. You get the full builder afterwards, at the cost of a large diff. Import with minimal changes keeps your code and tooling as they are in a simplified builder where you can chat with the agent, edit code, and run a preview. Draftbit’s framework-specific tooling stays off and no agent runs on import. Unrecognized frameworks can only use this mode. Draftbit copies the repository’s default branch into a new project at import time and does not keep a live link to the original repo, so finish or freeze work there first. The migration is an agent run, so it uses credits or your own provider key like any other agent work, and the new project counts toward your plan’s project limit. If you built the original in Draftbit Classic, use the V1 Apps tab instead. It creates an upgraded copy, leaves the original untouched, and requires Expo Router to be enabled in the Classic app first. For a large codebase, or if you would rather hand the migration to someone, Draftbit experts can run it for you. ## Useful links * [Ask about app migration](/services) In this section [Visual editor ](/faq#visual-editor) ## Related questions [Can Draftbit experts migrate an app from another platform? ](/faq/can-experts-migrate-an-app-to-draftbit)[Do changes made by an AI agent appear in Draftbit's visual editor? ](/faq/do-ai-changes-appear-in-visual-editor)[What are the limits of Draftbit's visual editor? ](/faq/what-are-visual-editor-limits) ## Start with your app idea Create a free account and describe what you want to build. [Get started free ](https://app.draftbit.com/signup) --- # Can I invite teammates to a Draftbit project? > How Draftbit team invitations work, which roles exist, how many editor seats each plan includes, and what extra seats cost. [ All questions](/faq) Yes. Teammates join through your organization rather than a single project. An owner or admin opens the Team page, enters one or more email addresses, and picks a role. Each person gets an email with a link to accept, and someone without a Draftbit account creates one along the way. An invitation stays open for 60 days. While it is pending, an admin can resend or cancel it. The roles are Owner, Admin, Editor, and Viewer. Viewers open apps in a read-only preview and do not use a seat, so their number is not tied to your plan. Editors, admins, and the owner each take an editor seat. Free, Standard, and Pro include one seat, Team includes ten, and Enterprise has no limit. Pending editor invitations count toward the limit too. Standard adds seats for 10 USD per seat per month, and Pro and Team add them for 20 USD per seat per month on monthly billing. Free cannot add seats. If a plan change leaves you with more editors than seats, the owner keeps editing while the other editors and admins see a seat limit notice and can only view the app until you add seats or change roles. Only the owner can change a member’s role, and the owner can hand ownership to another member, so keep the owner on an account your company controls. Owners and admins can remove members, and anyone can leave. There is also an Expert role with editor-level access that does not use a seat. Only Draftbit staff can assign it, which lets a Draftbit expert work inside your project without taking one of your seats. ## Useful links * [Check current seat limits](/pricing) In this section [Teams and support ](/faq#teams-support) ## Related questions [What collaboration features does Draftbit have? ](/faq/what-collaboration-features-does-draftbit-have)[Does Draftbit support single sign-on and SAML? ](/faq/does-draftbit-support-sso)[Which Draftbit plan do I need? ](/faq/which-draftbit-plan-do-i-need) ## Start with your app idea Create a free account and describe what you want to build. [Get started free ](https://app.draftbit.com/signup) --- # Can I pause or cancel a monthly Draftbit expert plan? > How pausing or canceling a Draftbit monthly or Advisory plan works, how fixed-price packages differ, and what to settle before a pause. [ All questions](/faq) Every monthly tier, from Bronze at 2,000 USD per month to Platinum, is billed as a fixed monthly amount that you can pause or cancel at any time. The Advisory plan at 150 USD per week or 500 USD per month works the same way, with no long-term commitment and no seat minimum. Pause when you are waiting on customer feedback, funding, or an internal decision, and pick the plan back up when you are ready. Monthly plans also let you scale the team up or down as your needs change. Fixed-price packages are not pause-and-resume items. The Starter Backend, MVP, and v1 packages have a clear scope and a price locked at signing, so the engagement ends when the build is delivered. The MVP includes 30 days of free maintenance after delivery and the v1 includes 60 days of maintenance and support. If you need to stop a package mid-build, talk to the team about what has been delivered and what remains. Before a pause takes effect, agree on which tasks finish and which stop, and collect the current code, setup notes, open issues, and the status of any outside accounts. The code is already in your project, so nothing has to be handed over, but a written summary of where things stand makes the restart easier. Remove any production access the team does not need during a long break, and ask how restart scheduling works if you expect to come back at a specific time. ## Useful links * [See current monthly terms](/services#monthly) In this section [Expert services ](/faq#expert-services) ## Related questions [What are Draftbit's monthly Expert development plans? ](/faq/what-are-monthly-development-plans)[How do Expert Services work with the Draftbit platform? ](/faq/how-do-experts-work-with-draftbit-platform)[Do I own the code built by Draftbit experts? ](/faq/do-i-own-code-built-by-draftbit-experts) ## Start with your app idea Create a free account and describe what you want to build. [Get started free ](https://app.draftbit.com/signup) --- # Can I self-host a Draftbit app or publish it manually? > Learn how manual publishing works with exported code, which plans include export and GitHub, and where self-hosting fits. [ All questions](/faq) Manual publishing is a supported path, and the help docs walk through it for iOS, Android, and the web. Export the project as a ZIP from the Export button in the builder, or on the Pro plan configure GitHub Export on the Publishing page to push the code to a repository and branch you choose. Code export needs the Standard plan or higher. The export is an ordinary project. A Mobile project is an Expo React Native app that you can build with Expo and React Native tooling on your own machine or in your own CI, then upload to App Store Connect or the Play Console yourself. A Web or Website project is a Vite or Astro project that any static host or deployment service can build and serve. Set the app name, slug, icon, and splash screen in Draftbit before you export so those values travel with the code. A manual release puts you in charge of signing credentials, version numbers, environment variables, hosting, and rollbacks. One-click publishing, native preview builds, and Draftbit custom domains only work from inside Draftbit, so plan your own equivalents. Losing a signing key can block future store updates, so keep it somewhere safe. Self-hosting in the sense of running Draftbit on your own infrastructure is not a product feature you can turn on. Private and self-hosted options appear only on the Enterprise plan, which is arranged with sales. ## Useful links * [Check plans with code export](/pricing) In this section [Platforms and publishing ](/faq#platforms-publishing) ## Related questions [Can I export my Draftbit app and continue development outside Draftbit? ](/faq/can-i-export-and-continue-outside-draftbit)[Can Draftbit publish directly to the Apple App Store, Google Play, and the web? ](/faq/can-draftbit-publish-to-app-stores-and-web)[What happens to my app and code if I cancel Draftbit? ](/faq/what-happens-to-my-app-if-i-cancel) ## Start with your app idea Create a free account and describe what you want to build. [Get started free ](https://app.draftbit.com/signup) --- # Can I test a Draftbit app on real devices and simulators? > Learn how to test Draftbit apps on physical phones, browser-based iOS and Android simulators, TestFlight, and Google Play internal testing. [ All questions](/faq) Three testing paths sit outside the web preview, and each fits a different stage of a build. The quickest is the Draftbit Preview app for iOS and Android. Click the QR code button in the builder, scan it with your phone, and the running app opens on the device, so you can check touch targets, the keyboard, and real screen sizes as you go. For iOS and Android simulators in the browser, the Pro plan and above can create native preview builds from the Publishing page or the simulator dropdown in the top bar. Each platform builds separately, takes a few minutes, and shows Saved and Unsaved cards so you can compare the last saved build with your working changes. These are development builds of your actual app, so they include your native packages, and they need rebuilding after you add or remove a package with native code. Native builds apply to Mobile projects only. For release testing, a staging publish on the Standard plan and above sends the build to TestFlight on iOS or the Internal testing track on Google Play, where you invite testers by email. Tester setup and access rules live in Apple’s and Google’s consoles. Some features only prove out on hardware. The iOS simulator cannot receive remote push notifications, for example, so test notifications and other hardware-dependent features on a physical device before you submit. ## Useful links * [Check simulator plan access](/pricing) In this section [Platforms and publishing ](/faq#platforms-publishing) ## Related questions [How does live preview work in Draftbit? ](/faq/how-does-live-preview-work)[Can Draftbit apps use camera, location, notifications, and other device features? ](/faq/can-draftbit-apps-use-device-features)[Does Draftbit help with Apple App Store and Google Play submission? ](/faq/does-draftbit-help-with-app-store-submission) ## Start with your app idea Create a free account and describe what you want to build. [Get started free ](https://app.draftbit.com/signup) --- # Can I run multiple AI agents at the same time in Draftbit? > How many agents each Draftbit plan can run at once, how threads and sandboxes relate, and how to keep parallel edits from colliding. [ All questions](/faq) Yes, within your plan’s limit. Free and Standard run one agent at a time. Pro runs up to 5 at once, Team up to 10, and Enterprise has no fixed limit. Each agent works in its own chat thread, so running several means opening several threads, and each thread can use a different agent and model. Inside a single thread only one run happens at a time. If you send another prompt while the agent is busy, Draftbit queues it and runs it after the current run finishes. The Tasks page is stricter and waits for a running thread in the same app to finish before it starts another task. A related limit is how many apps can have a running sandbox at the same time. Free and Standard allow one, Pro up to 3, Team up to 5, and Enterprise is unlimited. Threads inside one app share that app’s sandbox, so this limit only matters when you want agents working in several apps at once. Parallel work is safest when each thread owns a distinct part of the project. Two agents editing the same navigation file or shared component at the same moment can overwrite each other, because they work on the same files in the same sandbox. Give each thread a narrow goal and name the files or flows it should leave alone. A Read Only thread is a safe way to have one agent investigate while another edits. More agents do not make one feature finish sooner when its pieces depend on each other. A feature with a shared data model and several dependent screens is usually easier to build in sequence, reviewing one result before starting the next. ## Useful links * [Check current plan limits](/pricing) In this section [AI agents ](/faq#ai-agents) ## Related questions [Which Draftbit plan do I need? ](/faq/which-draftbit-plan-do-i-need)[What can Draftbit AI agents do? ](/faq/what-can-draftbit-ai-agents-do)[What collaboration features does Draftbit have? ](/faq/what-collaboration-features-does-draftbit-have) ## Start with your app idea Create a free account and describe what you want to build. [Get started free ](https://app.draftbit.com/signup) --- # Can I use my own OpenAI, Anthropic, or OpenRouter key in Draftbit? > How bring your own key and provider subscriptions work in Draftbit, which plans include them, and what still follows your Draftbit plan. [ All questions](/faq) Yes. Draftbit accepts API keys from OpenAI, Anthropic, and OpenRouter, and you can sign in with a ChatGPT subscription or a Claude subscription instead. A ChatGPT subscription starts Codex threads that draw on your plan’s included usage. A Claude Pro, Max, or Team subscription does the same for Claude Code threads. Every Draftbit plan includes these options, Free included. Connect a key or subscription in Agent Customization for a single app, or under AI Providers in your organization settings so every app in the organization can use it without separate setup. Only organization admins and owners can manage that page, and an app-level connection overrides the organization’s. Threads that run on your key or subscription go straight to the provider and do not consume Draftbit credits. The chat and thread history label the billing path of each thread, and you can mix credit-funded and self-funded threads in the same project. Your provider decides rate limits and model availability for those threads. When a key or subscription hits its usage limit, the chat shows a provider-specific message rather than a generic failure. Draftbit stores keys encrypted at rest and only ever displays the last four characters. Create a key just for Draftbit, set spending limits in the provider dashboard, and remove it when a teammate leaves. Your Draftbit plan still controls product features such as how many agents can run at once. One caveat for Claude subscriptions is that Claude.ai connectors and Remote Control are not available inside Draftbit, and Anthropic’s usage policies continue to apply. ## Useful links * [Read the agent instructions guide ](https://docs.draftbit.com/features/agent-instructions) In this section [AI agents ](/faq#ai-agents) ## Related questions [Which AI models and coding agents does Draftbit support? ](/faq/which-ai-models-does-draftbit-support)[What uses Draftbit credits? ](/faq/what-uses-draftbit-credits)[Are my prompts and source code used to train AI models? ](/faq/are-prompts-and-source-code-used-for-ai-training) ## Start with your app idea Create a free account and describe what you want to build. [Get started free ](https://app.draftbit.com/signup) --- # Can I use my own domain for a Draftbit web app? > Learn how custom domains work for Draftbit web publishing, which plan includes them, and which DNS records your registrar must allow. [ All questions](/faq) Custom domains are part of the Standard plan and above. Without one, every web publish goes to a generated address on draftbit.dev, which works for testing and sharing but not for a launch. To connect a domain, open the Configuration tab on the Publishing page, pick the environment, and enter the hostname. You can use a root domain such as myapp.com or a subdomain such as app.myapp.com, and production and staging can each have their own. Draftbit then shows the DNS records to add at your registrar. A CNAME record points the hostname at Draftbit’s proxy, with an ALIAS record instead when the hostname is a root domain, and a TXT record lets Draftbit issue the SSL certificate. Domains that Draftbit owns, such as anything under draftbit.dev, cannot be used. Your registrar has to allow those records, and some restrict them on entry-level plans. DNS changes usually verify within minutes but can take up to 24 hours. Click Verify Domain once the records are in place, and the configuration shows DNS Verified and SSL Verified when it is ready. From then on each publish for that environment goes to your domain, and you can disconnect it from the same screen. After switching, check login callbacks, payment return URLs, and API allowlists that still point at the old address. ## Useful links * [Check plans with custom domains](/pricing) In this section [Platforms and publishing ](/faq#platforms-publishing) ## Related questions [Can I self-host a Draftbit app or publish it manually? ](/faq/can-i-self-host-or-publish-manually)[Can Draftbit publish directly to the Apple App Store, Google Play, and the web? ](/faq/can-draftbit-publish-to-app-stores-and-web)[Which Draftbit plan do I need? ](/faq/which-draftbit-plan-do-i-need) ## Start with your app idea Create a free account and describe what you want to build. [Get started free ](https://app.draftbit.com/signup) --- # Can I use npm packages and custom native modules in Draftbit? > How to add npm packages in Draftbit, what makes a native package compatible, when to rebuild native previews, and where custom native code fits. [ All questions](/faq) Every Draftbit project has a normal package.json. The Packages tab in Build Config shows its dependencies in two sections, Standard for anything the app needs at runtime and Development for build and test tooling. You can add a row with a package name and version range, edit a version inline, or remove a package. If you would rather not pick the package yourself, ask the agent in AI Chat. It can compare options, check Expo compatibility, install the package, and add the providers, config plugins, permissions, or config files the package needs. Agents also have tools that list recommended packages for your app type, add and remove packages, and, for Expo apps, upgrade the Expo SDK and run expo-doctor afterwards. For mobile apps the native side is where compatibility matters. Draftbit apps run on Expo, so prefer Expo-maintained packages and React Native packages known to work with Expo. A package must either auto-link or provide an Expo config plugin. If it does neither, it is not a good fit and you should look for an alternative. Packages that need hand-edited native project files or heavy custom build steps fall into that group. After you add, remove, or change a package that includes native code, build new native previews before testing on the iOS or Android simulators. The web preview updates on its own, while a native build does not. Custom native modules are where the builder stops. The builder has no workflow for writing your own Swift or Kotlin, and the code editor gives those files no autocomplete or linting. If your app needs one, export the code on the Standard plan and do that work with local native tooling, or package the module with a config plugin so it can be added like any other dependency. Before you commit to a package, ask the agent whether it supports the web. Some native-first packages behave differently or not at all there, and the agent can add a web fallback if you publish to the web. Install one package at a time so a broken preview is easy to trace and undo. ## Useful links * [Read the adding packages guide ](https://docs.draftbit.com/guides/adding-packages-with-ai-chat) In this section [Visual editor ](/faq#visual-editor) ## Related questions [What are the limits of Draftbit's visual editor? ](/faq/what-are-visual-editor-limits)[Can I edit my app's code directly in Draftbit? ](/faq/can-i-edit-code-directly)[Can Draftbit apps use camera, location, notifications, and other device features? ](/faq/can-draftbit-apps-use-device-features) ## Start with your app idea Create a free account and describe what you want to build. [Get started free ](https://app.draftbit.com/signup) --- # Can I use Supabase, Firebase, or Xano with Draftbit? > Compare how Supabase, Firebase, and Xano connect to Draftbit today, including the open beta Supabase backend and what is still Coming Soon. [ All questions](/faq) Supabase has the deepest support. Draftbit can provision a Supabase project for your app from the Supabase tab or during app creation, and the agent can then create tables, set up authentication and storage, write edge functions, and work in a preview branch before you deploy changes to production. If you already have a Supabase project, connect the Supabase MCP by signing in to your account, or add the project URL and publishable key as plain text environment variables and ask the agent to set up the supabase-js client. The publishable key is designed to be public, so row-level security policies are what protect your data. Xano connects through its MCP server. Draftbit needs the Streaming Connection URL and an access token from your Xano MCP server, and Realtime resources must be enabled on your instance or the connection fails with a proxy error. The agent can then model data, build and deploy APIs, and query your database. A Xano REST entry in the catalog covers apps that only need to call existing endpoints. Firebase is different today. Its MCP connector is marked Coming Soon, so the agent cannot manage a Firebase project yet. Cloud Firestore and Firebase Auth have REST catalog entries, and the agent can add the Firebase SDK to the project and write code against it the way it does for any npm package. Whichever you choose, the connector serves the agent during a chat thread and the published app talks to the service through its SDK or API. Pick the backend whose data model, access rules, and pricing fit the product. Moving later means migrating data, authentication, and server logic. ## Useful links * [Read the Supabase integration page](/integrations/supabase) * [Read the Firebase integration page](/integrations/cloud-firestore) * [Read the Xano integration page](/integrations/xano) In this section [Backends and integrations ](/faq#backends-integrations) ## Related questions [Does Draftbit include a backend and database? ](/faq/does-draftbit-include-backend-and-database)[How does user authentication work in Draftbit apps? ](/faq/how-does-authentication-work)[Can Draftbit connect to my existing backend, database, and APIs? ](/faq/can-draftbit-connect-existing-backend-database-apis) ## Start with your app idea Create a free account and describe what you want to build. [Get started free ](https://app.draftbit.com/signup) --- # Do changes made by an AI agent appear in Draftbit's visual editor? > Why Draftbit's visual editor shows agent-written changes, and when custom code needs the Code tab instead of a panel. [ All questions](/faq) Yes, because there is only one project. The visual editor does not keep a separate design file. It parses the screen’s source and builds the Component Tree from the JSX it finds, and every node in that tree points back to a location in the file. When an agent edits a screen, the tree, the canvas, and the Style, Content, Code, and Config tabs show the new code. When you change a style or a prop in the editor, Draftbit writes that change back into the same file the agent reads. Code can still express more than a property panel can. An agent may add a custom hook, a data transformation, or a package integration that has no matching control, and a component it writes may expose only some of its settings visually. The app runs either way. Open the Code tab for that component, edit the file directly, or ask the agent to revise it. If visual editability matters to you, say so in the prompt or in the agent’s instructions file, for example by asking it to use the existing component library before creating new components. Design Blocks help too, since the agent starts from a block you picked and matches your theme. Agent edits and visual edits land in the same save point. Review the affected screens before you save, and use the save history to roll back if a broad change went wrong. ## Useful links * [Explore visual editing](/platform) In this section [AI agents ](/faq#ai-agents) ## Related questions [Can I use Claude Code and OpenAI Codex while still editing my app visually? ](/faq/use-claude-code-and-codex-with-visual-editor)[How does Draftbit's visual builder work? ](/faq/how-does-draftbit-visual-builder-work)[What are the limits of Draftbit's visual editor? ](/faq/what-are-visual-editor-limits) ## Start with your app idea Create a free account and describe what you want to build. [Get started free ](https://app.draftbit.com/signup) --- # Do I own the code built by Draftbit experts? > Who owns code written by Draftbit experts, how you take it with you, and which third-party licenses still apply. [ All questions](/faq) Ownership does not change because a Draftbit employee wrote the code. Our help center states that all code created in Draftbit belongs to you and that you keep full ownership and intellectual property rights, and the expert pages say the same about expert work. Whether an expert builds the whole app under a fixed-price package or advises you while you build it, the result is yours, and Draftbit does not use your code to train AI models. The code lives in your Draftbit project, so there is no delivery to wait for at the end. Code export is included on Standard and above, and the GitHub integration is included on Pro and above, so you can keep a copy outside Draftbit and hand it to your own developers at any point. We will sign an NDA before the scoping call if you ask. Third-party material keeps its own terms. An npm package, font, image, template, or API the expert chose for you carries its license with it, and outside services such as your database, domain, payment account, and store listings belong to whoever holds the account. Keep those accounts under your organization, grant the expert access through each service’s team controls, and remove that access when the engagement ends. If assignment terms matter for a client contract, a financing, or an acquisition, have counsel read the signed engagement agreement alongside the current Draftbit terms. ## Useful links * [Read Draftbit terms](/terms) * [See Expert Services](/services) In this section [Expert services ](/faq#expert-services) ## Related questions [Do I own the source code Draftbit generates? ](/faq/do-i-own-source-code-draftbit-generates)[How do Expert Services work with the Draftbit platform? ](/faq/how-do-experts-work-with-draftbit-platform)[Do I own my app, data, and intellectual property in Draftbit? ](/faq/do-i-own-my-app-data-and-ip) ## Start with your app idea Create a free account and describe what you want to build. [Get started free ](https://app.draftbit.com/signup) --- # Do I own my app, data, and intellectual property in Draftbit? > Who owns a Draftbit app, its code, and its data, where app data is stored, and how Supabase backends, secrets, and third-party licenses fit in. [ All questions](/faq) Your applications and their code belong to you. That includes the screens, copy, and logic that make up the app, and any assets you bring to the project. Draftbit does not use your code to train AI models. The terms of service page has the legal text behind both statements. Where your app’s data lives depends on the backend. Draftbit can provision a Supabase backend for an app, a feature that is currently in open beta, and the AI agent can create tables, authentication, and storage in it. That project runs inside Draftbit’s Supabase organization until you claim it. Claiming transfers the project to a Supabase organization you own, so billing, team members, and ownership become yours, and existing database branches are preserved. The transfer cannot be undone, and Draftbit’s Supabase tools stop managing the project afterwards. You can also delete a Draftbit-provisioned project from the Integrations tab. If you connect a backend you already run, whether through a REST or GraphQL connector or your own Supabase account, that provider holds the data under its agreement with you. Keep those accounts in your company’s name and write down who has administrative access. Secrets you store in Draftbit, such as API keys, are encrypted at rest with AES-256 and travel over TLS. Third-party material keeps its own license no matter who owns the app, so a stock image, a font, an npm package, or an API response can carry terms that exporting the project does not change. For client work, put ownership, account access, and handoff in the contract, and get legal advice for a specific asset or deal. ## Useful links * [Read Draftbit terms](/terms) * [Read the Draftbit privacy policy](/privacy) In this section [Code and ownership ](/faq#ownership) ## Related questions [Do I own the source code Draftbit generates? ](/faq/do-i-own-source-code-draftbit-generates)[How does Draftbit protect my code, data, and secrets? ](/faq/how-does-draftbit-protect-code-data-and-secrets)[What happens to my app and code if I cancel Draftbit? ](/faq/what-happens-to-my-app-if-i-cancel) ## Start with your app idea Create a free account and describe what you want to build. [Get started free ](https://app.draftbit.com/signup) --- # Do I own the source code Draftbit generates? > Who owns Draftbit-generated code, which plans let you download it or push it to GitHub, and which third-party licenses still apply to your app. [ All questions](/faq) Draftbit does not claim any ownership of what you build. All code created in Draftbit belongs to you, along with the rights to the applications built from it, and Draftbit does not use your code to train AI models. The terms of service page carries the legal wording. Owning the code and holding a copy of it are two different things. On Free you can view the code of a selected component from the Code tab in the visual builder. The full code editor, with the ability to save your own edits, and the ZIP download require the Standard plan or higher, and pushing the project to a GitHub repository requires Pro or higher. If you build on Free and later want the files outside Draftbit, budget for one of those upgrades. Ownership does not erase third-party licenses. A package from npm keeps its own license, and fonts, icons, images, and sample data can carry terms of their own. Your team is responsible for checking what the finished app ships with. Keep an external copy before a major release or an account change. GitHub is the better option for that because each export becomes a commit, so a developer can see history and review changes. A ZIP is a snapshot and records no history by itself. If ownership terms matter to a financing, an acquisition, or a client contract, have counsel read the current terms and the licenses in the exported repository before you sign. ## Useful links * [Read Draftbit terms](/terms) * [Check plans with code export](/pricing) In this section [Code and ownership ](/faq#ownership) ## Related questions [Can I export my Draftbit app and continue development outside Draftbit? ](/faq/can-i-export-and-continue-outside-draftbit)[Do I own my app, data, and intellectual property in Draftbit? ](/faq/do-i-own-my-app-data-and-ip)[What happens to my app and code if I cancel Draftbit? ](/faq/what-happens-to-my-app-if-i-cancel) ## Start with your app idea Create a free account and describe what you want to build. [Get started free ](https://app.draftbit.com/signup) --- # Do unused Draftbit credits roll over? > Learn when monthly, yearly, one-time, signup, and reward credits expire in Draftbit and which credits are spent first. [ All questions](/faq) Each grant of credits is its own lot with its own expiry date, and the Credits page under Billing lists every active lot with the date it expires. Monthly subscriptions grant their credits at the start of each billing period, including the credits from a monthly credit package. Those credits stay usable until 30 days after that period ends. In practice you always have the new month’s credits plus whatever was left from the previous month, and the leftover disappears a month later rather than on renewal day. Yearly subscriptions grant twelve months of credits up front. They expire at the end of the yearly term with no grace window. One-time purchases expire one year after purchase, the 5,000 signup credits expire one year after signup, and credits earned through challenges on the Earn Credits page effectively never expire. Spending always takes from the lot that expires soonest, so buying a top-up never causes older credits to go unused. Your balance only counts credits that have not expired. An upgrade that restarts your billing cycle has its own rules for credits, described in the plan change answer. ## Useful links * [Read current credit terms](/pricing) In this section [Pricing ](/faq#pricing) ## Related questions [What uses Draftbit credits? ](/faq/what-uses-draftbit-credits)[What happens when I run out of Draftbit credits? ](/faq/what-happens-when-i-run-out-of-credits)[Can I change or cancel my Draftbit plan at any time? ](/faq/can-i-change-or-cancel-my-plan) ## Start with your app idea Create a free account and describe what you want to build. [Get started free ](https://app.draftbit.com/signup) --- # Does Draftbit help with Apple App Store and Google Play submission? > Learn what Draftbit does during App Store and Google Play submission, what the Pro plan and Expert Services add, and what stays with you. [ All questions](/faq) One-click publishing covers the technical side of a submission. You enter your Apple Developer and App Store Connect details, or your Google Play service account, once on the Publishing page. After that Draftbit builds the app, manages certificates and signing, and uploads the build to App Store Connect or Google Play, with a staging option that ships to TestFlight or the Internal testing track. This needs the Standard plan or higher, and the credentials must be complete before a publish can start. The Pro plan adds App Store Assistance on top of that. If you want someone to run the whole submission, including the listing and any back and forth with reviewers, Draftbit Expert Services offers app store management as a paid engagement. The store side stays with you. Apple and Google verify the developer account, and both stores need a listing, screenshots, and a privacy policy before an app can go out. The builder includes a screenshot tool for the listing images. Neither store lets Draftbit approve an app, so a rejection comes back to you. Read the exact message first, because some rejections only need a setting or an explanation in the store console, while others need a code change and a new build. ## Useful links * [Check current publishing support](/pricing) * [Ask an expert about launch](/services) In this section [Platforms and publishing ](/faq#platforms-publishing) ## Related questions [Can Draftbit publish directly to the Apple App Store, Google Play, and the web? ](/faq/can-draftbit-publish-to-app-stores-and-web)[Which developer accounts and fees do I need to publish a mobile app? ](/faq/which-developer-accounts-and-fees-do-i-need)[How long does it take to build and launch an app with Draftbit? ](/faq/how-long-to-build-and-launch) ## Start with your app idea Create a free account and describe what you want to build. [Get started free ](https://app.draftbit.com/signup) --- # Does Draftbit include a backend and database? > Understand the open beta Supabase backend Draftbit can provision, how preview and production branches work, and when to bring your own backend. [ All questions](/faq) Draftbit does not force one database on every app, but it can give you one. The Supabase tab on the Integrations page, or the app creation flow, creates a Supabase project for the app. The AI agent then builds tables, authentication, storage, and edge functions in that project and writes the app code that uses them. The pricing table lists the built-in Supabase backend as a beta feature on every plan. The project has a preview branch and a production branch. The agent works in the preview branch by default, so schema changes and test data show up in the Builder right away. When you are ready, you deploy the preview branch to production from the Builder, and Draftbit runs a security check on the branch before that deploy goes through. The Builder also shows the project dashboard, tables, auth settings, storage buckets, functions, and logs. While Draftbit manages the project, it lives in Draftbit’s Supabase organization. When you want full control, claim it. The transfer moves the project into a Supabase organization you own, and billing, team members, and existing branches move with it. Draftbit’s Supabase panels disappear for that project, and the agent only reaches the database again after you connect the Supabase MCP with your own account. The claim cannot be undone. Nothing requires you to use it. An existing backend connects through REST, GraphQL, or MCP connectors, and the app keeps calling that backend directly. ## Useful links * [Browse backend integrations](/integrations) In this section [Backends and integrations ](/faq#backends-integrations) ## Related questions [Can Draftbit connect to my existing backend, database, and APIs? ](/faq/can-draftbit-connect-existing-backend-database-apis)[Can I use Supabase, Firebase, or Xano with Draftbit? ](/faq/can-i-use-supabase-firebase-or-xano)[How does user authentication work in Draftbit apps? ](/faq/how-does-authentication-work) ## Start with your app idea Create a free account and describe what you want to build. [Get started free ](https://app.draftbit.com/signup) --- # Does Draftbit support single sign-on and SAML? > Which Draftbit plan includes SSO and SAML, how it gets set up, and how teams on self-serve plans manage sign-in and access. [ All questions](/faq) Single sign-on with SAML is available on Enterprise only. It does not appear as a switch in Free, Standard, Pro, or Team, and there is no self-serve configuration page for it. Enterprise agreements are put together with our team, and SSO is one of the items covered in that conversation along with custom SLAs, dedicated infrastructure, private hosting options, invoice billing, and unlimited editor seats. If you need SSO, book an Enterprise demo and bring the details that shape the setup. Which identity provider you use, which email domains should be covered, how many people need editor access, and whether you expect accounts to be created and removed automatically all affect the rollout, so have answers ready. Mention early if a contractor or an outside agency also needs to reach the project. On every plan, each teammate signs in with their own Draftbit account. Sign-in runs through Clerk, and the sign-in page shows the methods available. Access to your work is then controlled inside Draftbit through organization roles. Owners and admins invite members and remove people who leave, the owner changes roles and can hand ownership to another member, and viewers get a read-only preview without using a seat. SSO covers access to Draftbit itself. Your app’s own users, your backend, GitHub, and the app store accounts each have their own sign-in and permission rules, and SSO for Draftbit does not change those. ## Useful links * [Request an Enterprise conversation](/enterprise-demo) In this section [Teams and support ](/faq#teams-support) ## Related questions [Can I invite teammates to a Draftbit project? ](/faq/can-i-invite-teammates)[How does Draftbit protect my code, data, and secrets? ](/faq/how-does-draftbit-protect-code-data-and-secrets)[Which Draftbit plan do I need? ](/faq/which-draftbit-plan-do-i-need) ## Start with your app idea Create a free account and describe what you want to build. [Get started free ](https://app.draftbit.com/signup) --- # Is Draftbit for production apps or only prototypes? > How a Draftbit project moves from prototype to production, what the share page and staging publishes are for, and what work remains before launch. [ All questions](/faq) A Draftbit project does not have to be thrown away when real users show up. The screens you prototype are the same code you publish. Whether the app is ready for production depends on the app, and the tooling covers both ends. For a prototype, turn on the share page. It gives the app a public link that anyone can open and try without a Draftbit account, which is enough to put a demo in front of a client or a test group. You can also publish to the web on a draftbit.dev address with no configuration, and both of these work on the Free plan. For production, the same project publishes to a custom domain, the Apple App Store, and Google Play on Standard or higher. Native destinations support production and staging publishes. Staging goes to TestFlight or the Google Play Internal Testing track so real devices can run the build before release. Web publishing is hosted on Cloudflare Workers with an SSL certificate issued for your domain. The code stays portable. Standard and higher can export the full source as a zip, Pro can push it to GitHub, and a developer can continue in a normal editor at any point. Production ready describes a specific app. A booking app and a regulated financial app need different checks. Before launch, verify access rules, error states, performance on slow devices, privacy and store policy requirements, and a plan for updates. Apple and Google control review timing and policy decisions, and a prototype that impressed a client can still be rejected over a missing requirement. If you want that work done for you, the v1 expert package covers a production backend, QA, analytics, push notifications, and App Store and Google Play approval over eight to twelve weeks. ## Useful links * [Read customer stories](/customers) * [See publishing features](/platform) In this section [Getting started ](/faq#getting-started) ## Related questions [Can I build a production app with Draftbit if I don't know how to code? ](/faq/can-build-production-app-without-code)[Can Draftbit build complex apps? ](/faq/can-draftbit-build-complex-apps)[Can Draftbit publish directly to the Apple App Store, Google Play, and the web? ](/faq/can-draftbit-publish-to-app-stores-and-web) ## Start with your app idea Create a free account and describe what you want to build. [Get started free ](https://app.draftbit.com/signup) --- # How does Draftbit compare with Adalo? > Compare Draftbit and Adalo across no-code editing, React Native source code, AI agents, databases, web publishing, and native app stores. [ All questions](/faq) Adalo and Draftbit both provide visual tools and can publish to the web, the Apple App Store, and Google Play. Each is meant to help a person build without writing native code by hand. ## Building model Adalo uses a no-code builder with screens, components, actions, and its database or external data connections. Its current help pages describe a responsive builder that can target web and mobile. Draftbit lets you work visually but keeps the source files at the center. It parses the component tree you click on from the real React Native code, anchors each node to a place in a file, and writes a style or prop change back to that file. Claude Code and Codex change the same project, and you can bring your own OpenAI, Anthropic, or OpenRouter key or a ChatGPT or Claude subscription on any plan. On Free you can view a selected component’s code from the Code tab, but the full code editor and saved edits need Standard or higher. ## Ownership and handoff Adalo says you own the intellectual property associated with the app and can export app data. Its public help workflow centers on running and publishing through Adalo-generated builds. You own the code Draftbit generates, and Draftbit does not use it to train models. Standard adds ZIP export and lets you open the sandbox in VS Code, Cursor, or Windsurf. Pro adds export to a GitHub repository. Either path gives a development team a standard Expo project to maintain outside the platform. ## Backend and custom work Adalo can use its own database and connect outside data. Its component marketplace and custom actions extend the visual system. Check whether a needed feature exists in that system and how it is maintained. Draftbit includes a Supabase backend in open beta on every plan and can connect the agent to Xano, REST APIs, and GraphQL APIs while it builds. Custom logic lives in ordinary project files, which gives a developer direct control. It also means your team keeps packages and custom code working over time. ## Publishing Both products reserve some publishing and team features for paid plans. On Draftbit, Free accounts publish to the web on a draftbit.dev address. iOS and Android publishing from the builder, custom domains, and removing Draftbit branding start on Standard. Browser-based iOS and Android simulators and App Store submission assistance start on Pro. Apple and Google still control review. ## A useful test Build one real flow with authentication, data, an error state, and a device feature. Check the released build as well as the editor preview. Then ask how another developer would maintain that flow a year from now. That answer is more useful than comparing the number of components in a feature list. ## Useful links * [Read Adalo general questions ](https://help.adalo.com/resources/general-questions) * [Read Adalo publishing documentation ](https://help.adalo.com/publishing-apps) * [See the Draftbit platform](/platform) In this section [Comparisons ](/faq#comparisons) ## Related questions [How is Draftbit different from FlutterFlow, Bubble, and Lovable? ](/faq/how-is-draftbit-different-from-other-app-builders)[Is Draftbit a no-code, low-code, or AI app builder? ](/faq/is-draftbit-no-code-low-code-ai-builder)[Do I own the source code Draftbit generates? ](/faq/do-i-own-source-code-draftbit-generates) ## Start with your app idea Create a free account and describe what you want to build. [Get started free ](https://app.draftbit.com/signup) --- # How does Draftbit compare with Bolt, Replit, and Cursor? > Compare Draftbit with Bolt, Replit Agent, and Cursor across AI coding, visual editing, Expo mobile apps, code access, publishing, and expert help. [ All questions](/faq) The gap between these tools is narrower than it used to be. Bolt and Replit can create Expo mobile projects. Cursor has agent-driven visual design tools for running web interfaces. All three can write and change real code, and so can Draftbit’s agents. ## Bolt Bolt is a browser-based prompt and code environment for web projects and Expo mobile apps. Its official Expo guide covers code download, device preview, and store publishing through Expo tools. It is prompt-first rather than built around a persistent app component editor like Draftbit’s. ## Replit Replit Agent creates and hosts many kinds of software. Its current mobile workflow uses React Native and Expo with device preview and an App Store path. Replit includes a broad cloud development environment, database, and deployment products. ## Cursor Cursor is a general coding agent and editor for repositories. Its Agent can search, edit, run commands, and test in a browser. Current Design Mode lets users select elements in a running web app and ask the agent to edit the code. Cursor does not define the app stack or product architecture for you. ## Draftbit Draftbit starts from a defined project type. Mobile is React Native with Expo and runs on iOS, Android, and in the browser as a progressive web app from one codebase. Web is Vite and Website is Astro. The visual editor parses the component tree from those source files, anchors each node to a file location, and writes style and prop changes back to the same files, so visual and code work happen in one place. Claude Code and OpenAI Codex are the agents, and every plan lets you bring your own OpenAI, Anthropic, or OpenRouter key or a ChatGPT or Claude subscription. Free and Standard run one agent at a time, Pro runs five, and Team runs ten. Publishing is part of the builder. Free accounts publish web projects to a draftbit.dev address. Standard adds one-click iOS and Android publishing, custom domains, code editing, and ZIP export. Pro adds GitHub export, custom MCP servers, and browser-based iOS and Android simulators. Apple and Google still control review. Draftbit and Cursor are not an either-or choice. On Standard or higher you can open your app’s sandbox in Cursor, VS Code, or Windsurf through a tunnel and edit the same working copy the builder and the agents use. You can also import a public GitHub repository for an Expo, Vite, or Astro project, either migrated to Draftbit conventions or kept close to its current shape with a reduced feature set. When something needs more than another prompt, Draftbit’s in-house experts can take on design, architecture, migrations, native work, or a launch. Choose based on the work after the first prompt. If you want a general coding environment and expect to manage the stack yourself, Bolt, Replit, or Cursor may fit. If a shared visual app editor, integrated publishing, and a human delivery path matter, Draftbit may fit. Test the export and mobile release path you plan to use before you commit. ## Useful links * [Read Bolt mobile app documentation ](https://support.bolt.new/integrations/expo) * [Read Replit mobile app documentation ](https://docs.replit.com/build/mobile-app) * [Read Cursor Design Mode documentation ](https://cursor.com/docs/agent/design-mode) In this section [Comparisons ](/faq#comparisons) ## Related questions [Can I use Claude Code and OpenAI Codex while still editing my app visually? ](/faq/use-claude-code-and-codex-with-visual-editor)[What happens if AI gets stuck or my app needs custom engineering? ](/faq/what-if-ai-agent-gets-stuck)[Can Draftbit publish directly to the Apple App Store, Google Play, and the web? ](/faq/can-draftbit-publish-to-app-stores-and-web) ## Start with your app idea Create a free account and describe what you want to build. [Get started free ](https://app.draftbit.com/signup) --- # How does Draftbit compare with Bubble? > Compare Draftbit and Bubble across source code export, backend ownership, visual workflows, AI, web apps, native mobile apps, and hosting. [ All questions](/faq) Bubble and Draftbit both let people create working products through a visual editor and AI help. The main difference is what the application becomes and where it runs. ## Source code and runtime A Draftbit project is source code. Mobile projects are React Native with Expo and TypeScript, web projects are Vite, and websites are Astro. On Standard or higher you can edit that code in the builder, download it as a ZIP, and open the sandbox in VS Code, Cursor, or Windsurf. Pro adds export to a GitHub repository. A development team can run the result with normal tools and move it to an outside workflow. You own the code, and Draftbit does not use it to train models. Bubble’s official ownership page says Bubble apps can only run on the Bubble platform and cannot be exported as application code. You own the app design and data, but moving the application logic means rebuilding it. ## Backend Bubble includes its database, backend workflows, hosting, plugin system, and visual logic in one service. This can reduce setup when the product fits that system. Draftbit does not force one database. Every plan includes a Draftbit-provisioned Supabase backend, currently in open beta, that the agent can use for tables, authentication, and storage. The agent can also work against Xano, REST APIs, and GraphQL APIs during a build, and Pro and higher can add custom MCP servers. Those connectors run only while a chat thread is active, and the published app calls the same services over the network like any other app. A Firebase connector is marked Coming Soon. Draftbit also ships a preconfigured REST connector for Bubble, so a team that keeps its data in Bubble can connect a Draftbit app to it. Whatever you pick, your team designs and operates that backend, or pays a service to do it. ## Mobile and web Bubble has web tools and current native mobile tooling. Its mobile publishing documentation covers Apple and Google releases. A Draftbit Mobile project runs on iOS, Android, and in the browser as a progressive web app from one codebase, and the builder publishes to all three on Standard or higher. Free accounts can publish to the web on a draftbit.dev address. Apple and Google still control app review. ## A practical choice Bubble may fit a team that wants a closed visual full-stack environment and expects to keep operating there. Draftbit may fit a team that wants a portable TypeScript codebase, an outside backend choice, and a path for developers to take over. Check the hardest workflow, plan limits, backend costs, mobile maturity, and exit path before choosing. ## Useful links * [Read Bubble application ownership documentation ](https://manual.bubble.io/account-and-marketplace/application-and-data-ownership) * [Read Bubble native mobile documentation ](https://manual.bubble.io/help-guides/publishing-your-app/native-mobile-app) * [See the Draftbit platform](/platform) In this section [Comparisons ](/faq#comparisons) ## Related questions [How is Draftbit different from FlutterFlow, Bubble, and Lovable? ](/faq/how-is-draftbit-different-from-other-app-builders)[Do I own the source code Draftbit generates? ](/faq/do-i-own-source-code-draftbit-generates)[Does Draftbit include a backend and database? ](/faq/does-draftbit-include-backend-and-database) ## Start with your app idea Create a free account and describe what you want to build. [Get started free ](https://app.draftbit.com/signup) --- # How does Draftbit compare with hiring a developer or agency? > Compare Draftbit with a freelance developer, internal team, or agency on speed, control, cost, code ownership, maintenance, and handoff. [ All questions](/faq) Draftbit gives a team a working project structure, a visual editor, AI agents, a preview, service connections, and publishing tools. That shortens the setup phase and lets a founder or designer change the app without waiting for every code edit. A developer or agency can choose any stack, build system, native API, hosting setup, and architecture. That control matters for unusual products, strict company infrastructure, or deep platform work. It usually costs more engineering time and needs a clearer handoff process. ## What Draftbit gives you on day one A Mobile project is React Native with Expo and TypeScript, and it runs on iOS, Android, and in the browser as a progressive web app from one codebase. Web projects are Vite and websites are Astro. Claude Code and OpenAI Codex edit the project, and you can use your own OpenAI, Anthropic, or OpenRouter key or a ChatGPT or Claude subscription on any plan. The visual editor reads the component tree from the source and writes changes back to the same files. The builder publishes to the web on every plan and to iOS and Android on Standard or higher, and Apple and Google still control review. ## Cost and speed Draftbit is inexpensive to test. The Free plan includes 5,000 one-time credits and web publishing on a draftbit.dev address. Standard costs 15 USD per month, and you can add a Draftbit credit package from 25 USD per month when you want Draftbit to fund the AI. A custom team costs more at the start but may avoid a later migration when the requirements sit outside what the builder does well. Do not compare only the monthly platform price with an agency quote. Include backend work, design, QA, developer accounts, maintenance, security review, and the hours your own team spends. ## Ownership and maintenance You own the code Draftbit generates, and Draftbit does not use it to train models. Standard adds code editing, ZIP export, and a tunnel that opens the sandbox in VS Code, Cursor, or Windsurf. Pro adds export to a GitHub repository. A developer can take over inside Draftbit, through GitHub, or entirely outside the platform, and you can import a public GitHub repository for an Expo, Vite, or Astro project back into Draftbit. On Free you can view a selected component’s code from the Code tab, but the full code editor and saved edits need Standard or higher. Custom development quality depends on the people and the process. Ask for repository access, tests, setup notes, service account ownership, release credentials, and a maintenance plan before work starts. ## A middle path Draftbit’s Expert Services sit between self-serve and an outside agency. The team is salaried Draftbit staff rather than freelancers. Monthly retainers run from Bronze at 2,000 USD per month to Platinum at 12,000 USD per month and up. Fixed-scope packages include a Starter Backend for 2,500 USD, an MVP for 6,499 USD in an estimated 4 to 8 weeks, and a v1 release with backend, QA, and store submission for 12,999 USD in 8 to 12 weeks. Advisory costs 150 USD per week or 500 USD per month and gives you code review and architecture guidance while you keep building. The services page has current prices. A common path is to use Draftbit for the first production version and add a developer as complexity grows. Another is to keep Draftbit for visual work while a technical team handles custom code and backend systems. ## Useful links * [See Draftbit Expert Services](/services) * [Read customer stories](/customers) In this section [Comparisons ](/faq#comparisons) ## Related questions [Can a developer take over a Draftbit app later? ](/faq/can-a-developer-take-over-my-draftbit-app)[What are Draftbit Expert Services? ](/faq/what-are-draftbit-expert-services)[When is Draftbit not the right fit? ](/faq/when-is-draftbit-not-right-fit) ## Start with your app idea Create a free account and describe what you want to build. [Get started free ](https://app.draftbit.com/signup) --- # How does Draftbit compare with FlutterFlow? > Compare Draftbit and FlutterFlow across React Native and Flutter, visual editing, AI agents, code export, GitHub, and app publishing. [ All questions](/faq) Draftbit and FlutterFlow are both serious visual app builders. Each can generate a project, let people edit it visually, use AI agents, preview the result, connect services, export code, and prepare store releases. The differences are in the stack, the agent setup, and how the code leaves the product. ## The code stack Draftbit mobile apps use React Native, Expo, and TypeScript, and one codebase runs on iOS, Android, and in the browser as a progressive web app, though not on desktop operating systems. FlutterFlow uses Flutter and Dart. Neither stack is automatically right for every team. Check the libraries you need, the developers you can hire, the codebase you already have, and the native features on your roadmap before you weigh anything else. ## AI and visual work Draftbit runs Claude Code and OpenAI Codex inside the same project as its visual editor, and you can bring your own OpenAI, Anthropic, or OpenRouter key or a ChatGPT or Claude subscription on any plan, including Free. The visual editor is not a separate design layer. It parses the component tree from the source files, anchors each node to a location in a file, and writes visual edits back to the same files. Styles are utility classes, NativeWind on mobile and Tailwind on web, so a developer sees ordinary class names in the code. FlutterFlow now documents its own Codex workflow and AI agent features, with FlutterFlow remaining the source of truth for visual editing. Both products can create custom code that is not fully represented by visual controls. Test round-trip editing with the kind of component your app needs rather than a starter screen. ## Export and GitHub Both products document code export and GitHub or external development workflows. On Draftbit, code editing and ZIP export start on Standard, GitHub export starts on Pro, and the export writes to a branch you name. On Free you can view a selected component’s code from the Code tab, but the full code editor and saved edits need Standard or higher. Sync and overwrite rules differ between the two products, so use a test repository and confirm how custom changes survive the next visual edit or export. ## Publishing Draftbit publishes to iOS, Android, and the web from the builder on Standard or higher, with a staging option that ships to TestFlight or Google’s internal testing track. Free accounts can publish to the web on a draftbit.dev address. You can also export the code and publish manually. Apple and Google still control review and release timing. ## Where Draftbit stands apart The stack suits teams already working in React and TypeScript. Draftbit’s in-house Expert Services team can also take a focused blocker, ongoing development, a migration from another platform, or launch work, which is a different kind of help from a self-serve feature list. If the choice is important, build one difficult flow in each product. Compare the exported code, device behavior, package setup, and the plan tier your team would need. ## Useful links * [Read FlutterFlow code export documentation ](https://docs.flutterflow.io/flutterflow-cli/exporting/) * [Read FlutterFlow Codex documentation ](https://docs.flutterflow.io/flutterflow-cli/codex/) * [See the Draftbit platform](/platform) In this section [Comparisons ](/faq#comparisons) ## Related questions [How is Draftbit different from FlutterFlow, Bubble, and Lovable? ](/faq/how-is-draftbit-different-from-other-app-builders)[What language and framework does Draftbit use? ](/faq/what-language-and-framework-does-draftbit-use)[Can I export my Draftbit app and continue development outside Draftbit? ](/faq/can-i-export-and-continue-outside-draftbit) ## Start with your app idea Create a free account and describe what you want to build. [Get started free ](https://app.draftbit.com/signup) --- # How does Draftbit compare with Lovable? > Compare Draftbit and Lovable across native mobile support, web stacks, AI agents, visual editing, GitHub, source code, backends, and deployment. [ All questions](/faq) Lovable and Draftbit both let a user describe an app, generate working code, connect backend services, publish, and keep source code through GitHub. They focus on different product targets. ## Mobile support Lovable’s current FAQ says it is focused on web applications and does not support mobile app development. It can create a responsive web app that works on a phone browser. A Draftbit Mobile project is React Native with Expo and TypeScript. One codebase runs on iOS, Android, and in the browser as a progressive web app, and the builder publishes to the App Store and Google Play on Standard or higher, with a staging option for TestFlight and Google’s internal testing track. Pro adds iOS and Android simulators in the browser. Choose Draftbit when app store distribution or native device behavior is a core requirement. ## Web stack and backend Lovable’s current web stack has changed over time. Its FAQ describes newer projects using TanStack Start and older projects using React with Vite. It supports Lovable Cloud, Supabase, and outside APIs. Draftbit has separate project types for the web. A Web project is Vite with React and TypeScript, a Website project is Astro, and both use Tailwind utility classes. Free accounts can publish web projects to a draftbit.dev address, and custom domains start on Standard. For data, every plan includes a Draftbit-provisioned Supabase backend in open beta, and the agent can also connect to Xano, REST APIs, and GraphQL APIs while it builds. The published app calls those services over the network like any other app. ## Editing after the prompt Lovable centers on a conversational build workflow with code in GitHub. Draftbit pairs its agents with a visual editor that reads the component tree from the source files and writes style and prop changes back to them, so a designer can keep adjusting supported screens without expressing every change as a prompt. Claude Code and OpenAI Codex are the two agents, and you can use your own OpenAI, Anthropic, or OpenRouter key or a ChatGPT or Claude subscription on any plan, including Free. Direct code editing and ZIP export start on Standard, and GitHub export starts on Pro. ## Human help Draftbit has an in-house team for custom engineering, migrations from another platform, and release work, sold as fixed-scope packages, monthly retainers, or an advisory plan. This can matter when the generated app reaches a problem that needs more than another agent run. Use Lovable for a web-first product when its stack and workflow fit. Use Draftbit when native mobile, visual screen editing, or its service model is important. Plan details change in both products, so confirm the tier you would need for export, publishing, and seats. ## Useful links * [Read the Lovable FAQ ](https://docs.lovable.dev/introduction/faq) * [Read Lovable GitHub documentation ](https://docs.lovable.dev/integrations/github) * [See the Draftbit platform](/platform) In this section [Comparisons ](/faq#comparisons) ## Related questions [How is Draftbit different from FlutterFlow, Bubble, and Lovable? ](/faq/how-is-draftbit-different-from-other-app-builders)[Which platforms does Draftbit support? ](/faq/which-platforms-does-draftbit-support)[Can I use Claude Code and OpenAI Codex while still editing my app visually? ](/faq/use-claude-code-and-codex-with-visual-editor) ## Start with your app idea Create a free account and describe what you want to build. [Get started free ](https://app.draftbit.com/signup) --- # How do Expert Services work with the Draftbit platform? > How a Draftbit expert joins your project, what the Expert role can do, how updates arrive, and what stays in your control. [ All questions](/faq) Draftbit has a dedicated Expert role for this. Alongside Owner, Admin, Editor, and Viewer, an organization can hold Expert members, and Draftbit staff assign that role when an engagement starts. It carries the same access as Editor, so the expert can change code and screens in your project, and it does not count against your editor seats. Free, Standard, and Pro include one editor seat, Team includes ten, and Enterprise has no limit, so bringing in an expert never forces a seat upgrade. You will not see Expert in your own invite dialog, because only Draftbit staff can assign it. Because the expert works in your project, you watch the same code, screens, and history the whole time instead of waiting for a handoff at the end. Updates come every 48 hours through Slack and email. Monthly plans add a private Slack channel, daily progress updates, and weekly sprint prioritization with your team. Work that has to happen outside Draftbit, such as a backend, a GitHub repository, or a store listing, runs through that system’s own team access, and the team works in any other platform your app depends on. At the end you keep everything. The code is yours, you can export it on Standard and above or connect GitHub on Pro and above, and we can hand off to your team at any point. ## Useful links * [See Expert Services](/services) In this section [Expert services ](/faq#expert-services) ## Related questions [Do I own the code built by Draftbit experts? ](/faq/do-i-own-code-built-by-draftbit-experts)[What are Draftbit Expert Services? ](/faq/what-are-draftbit-expert-services)[Can a developer take over a Draftbit app later? ](/faq/can-a-developer-take-over-my-draftbit-app) ## Start with your app idea Create a free account and describe what you want to build. [Get started free ](https://app.draftbit.com/signup) --- # How do I update a Draftbit app after it is published? > Learn how to ship web, iOS, and Android updates from Draftbit, how staging and version numbers work, and what Apple and Google still control. [ All questions](/faq) Every publish in Draftbit is a fresh build of the saved project for one platform and one environment, production or staging. Open the Publish menu, pick the destination, enter a version name and version number, and start it. The Publishing page tracks progress and history. Draftbit blocks a second publish to the same platform and environment while one is running, though a different platform can run in parallel. For the web, the new build takes over the existing draftbit.dev address or custom domain when it succeeds. Use the staging environment to check a change on a separate deployment first, and unpublish either environment from the Publish menu if you need to take it down. For iOS and Android, an update means a new signed build with a new version number, which Draftbit uploads to App Store Connect or Google Play. A staging publish goes to TestFlight or the Internal testing track so testers can try it before the production release. Apple and Google review the build and decide when it reaches users. If the update adds or removes packages with native code, refresh your native preview builds too. If an update goes wrong, Git History in the builder can roll the project back to an earlier commit, recorded as a new commit, and you publish again from there. Rebuild and republish after changing credentials or app configuration, since installed apps only pick those up with the next build. ## Useful links * [Read Apple review guidance ](https://developer.apple.com/app-store/review/) * [Read Google Play launch guidance ](https://support.google.com/googleplay/android-developer/answer/9859152) In this section [Platforms and publishing ](/faq#platforms-publishing) ## Related questions [Can Draftbit publish directly to the Apple App Store, Google Play, and the web? ](/faq/can-draftbit-publish-to-app-stores-and-web)[Can I test a Draftbit app on real devices and simulators? ](/faq/can-i-test-on-real-devices-and-simulators)[Can I connect a Draftbit project to GitHub? ](/faq/can-i-connect-draftbit-to-github) ## Start with your app idea Create a free account and describe what you want to build. [Get started free ](https://app.draftbit.com/signup) --- # How does user authentication work in Draftbit apps? > Learn how sign in works in Draftbit apps with Supabase Auth or another provider, and why authorization still belongs to your backend. [ All questions](/faq) Authentication proves who the user is. Authorization decides what that user can see or change. The finished app needs both, and how Draftbit helps with the first part depends on the backend you pick. With the Supabase backend, the agent can build sign up, sign in, password reset, and profile screens on Supabase Auth and handle the session in the app. The Supabase panel in the Builder exposes the project’s auth settings. You can enable email and phone sign in, configure multi-factor authentication, manage redirect URLs, and turn on social providers including Google, Apple, GitHub, Microsoft Entra ID, Discord, Facebook, GitLab, LinkedIn, Notion, Slack, Spotify, Twitch, X, Keycloak, WorkOS, and Zoom, as well as Solana and Ethereum wallet sign in. Each social provider needs a client ID and secret from your account with that provider. If you use another provider, the REST catalog has entries for Clerk, Auth0, Stytch, Firebase Auth, Keycloak, and generic OpenID Connect endpoints, and the agent can add a provider’s client SDK to the project. Some of those APIs are meant to be called from a backend, as the Stytch entry notes, and a header that needs a private key cannot ship inside a mobile or web app. Wherever the session comes from, your backend must check it on every protected operation and enforce roles or record ownership. With Supabase that means row-level security policies, because the publishable key in the app is public. Test with users who hold different permissions, and check callback URLs and deep links on both web and mobile when the app targets both. ## Useful links * [Browse authentication integrations](/integrations) In this section [Backends and integrations ](/faq#backends-integrations) ## Related questions [Can Draftbit connect to my existing backend, database, and APIs? ](/faq/can-draftbit-connect-existing-backend-database-apis)[Does Draftbit include a backend and database? ](/faq/does-draftbit-include-backend-and-database)[How does Draftbit protect my code, data, and secrets? ](/faq/how-does-draftbit-protect-code-data-and-secrets) ## Start with your app idea Create a free account and describe what you want to build. [Get started free ](https://app.draftbit.com/signup) --- # How does AI work in Draftbit? > How Draftbit agents run inside your app sandbox, edit real source files, use project tools, and bill through credits or your own key. [ All questions](/faq) You work with the agent in the AI Chat tab of the Builder. Each conversation is a thread. When you start one you pick the agent, Claude Code from Anthropic or Codex from OpenAI, and the model it should use. Defaults for both live in Agent Customization, next to a CLAUDE.md or AGENTS.md file you can edit to tell the agent about your project’s conventions and important files. The agent runs inside the same sandbox as your app’s preview server, so it works on the real project source rather than a copy, whether that is a React Native and Expo app, a Vite web app, or an Astro website. Beyond editing code, it has tools to type check and lint the project, add or remove npm packages, check the preview server’s status and logs or restart it, manage environment variables, call REST and GraphQL endpoints you have connected, and search the Draftbit docs. When it needs more information, or approval for a sensitive step, it pauses the run and asks you in the chat. You can add context by selecting a component on the canvas, referencing a file, attaching an image, or choosing a Design Block. Edits from the agent appear in the same project the visual editor and code editor use. You save the result as a save point and can roll back to an earlier one if a change goes wrong. Agent usage is paid with Draftbit credits, or you can connect your own OpenAI, Anthropic, or OpenRouter key, or a ChatGPT or Claude subscription. Threads on your own account skip credits entirely, on every plan including Free. ## Useful links * [Read about AI agents](/platform) In this section [AI agents ](/faq#ai-agents) ## Related questions [What can Draftbit AI agents do? ](/faq/what-can-draftbit-ai-agents-do)[Do changes made by an AI agent appear in Draftbit's visual editor? ](/faq/do-ai-changes-appear-in-visual-editor)[Which AI models and coding agents does Draftbit support? ](/faq/which-ai-models-does-draftbit-support) ## Start with your app idea Create a free account and describe what you want to build. [Get started free ](https://app.draftbit.com/signup) --- # How does Draftbit handle API keys, secrets, and environment variables? > Learn how Build Config handles plain text and sensitive environment variables, what Draftbit encrypts, and why private keys never belong in app code. [ All questions](/faq) Build Config in the Builder holds each app’s environment variables. A variable has a name, a value, a visibility, and the environments it applies to, which can be any mix of development, staging, and production. One name can therefore point at a test backend while you build and at the live one when you publish. Visibility decides where a value can go. Plain text variables are injected into the app and visible to anyone who inspects the compiled code, so use them only for public configuration such as an API base URL or a Supabase publishable key. Expo apps require the `EXPO_PUBLIC_` prefix on plain text names, and web apps and websites built with Vite or Astro use those frameworks’ public prefixes. Sensitive variables stay out of runtime app code and compiled bundles. They are available to build and configuration files and to the agent’s sandbox, and the Builder masks them after you save. On Draftbit’s side, stored variable values are encrypted with field-level encryption, as are OAuth tokens, MCP credentials, Supabase keys, and other stored secrets, and traffic is protected with TLS. Draftbit’s documentation describes the encryption of stored keys as AES-256. The agent’s sandbox receives the development values so it can run tooling that depends on them, and the agent can add or update variables when you ask. If a REST connector header reads a sensitive variable, Draftbit refuses to generate frontend client code for it instead of shipping the value. A database administrator key, payment secret, or AI provider key still needs a trusted server. Call it from a Supabase edge function or your own backend and return only the data the user should see. If a key was ever committed or shipped in a build, rotate it. Removing it from the current file does not remove it from history or from installed builds. ## Useful links * [Read the Draftbit documentation ](https://docs.draftbit.com) In this section [Backends and integrations ](/faq#backends-integrations) ## Related questions [Can Draftbit connect to my existing backend, database, and APIs? ](/faq/can-draftbit-connect-existing-backend-database-apis)[How does Draftbit protect my code, data, and secrets? ](/faq/how-does-draftbit-protect-code-data-and-secrets)[Can I add payments and subscriptions to a Draftbit app? ](/faq/can-i-add-payments-and-subscriptions) ## Start with your app idea Create a free account and describe what you want to build. [Get started free ](https://app.draftbit.com/signup) --- # How does Draftbit protect my code, data, and secrets? > What Draftbit encrypts and never trains on, how access is controlled, where secrets belong in your app, and what stays your responsibility. [ All questions](/faq) Draftbit’s published security statement makes a few commitments. Your code is never used to train AI models, and you keep ownership and intellectual property rights over everything you build. API keys and credentials are encrypted at rest with AES-256, data in transit uses TLS, access controls limit who can see sensitive values, and the platform has regular security audits. In the code itself, encryption at rest is applied field by field to the values that matter most. GitHub access and refresh tokens, organization and app secrets, environment variable values, database connection strings, MCP server tokens, and Supabase keys and passwords are stored encrypted rather than as plain text. Where a value lives in your app matters as much as how we store it. Sensitive values in Build Config are meant for build-time configuration and server-side tooling, and they are not exposed to the compiled app. Plain text variables use the EXPO\_PUBLIC\_ prefix and are bundled into the app, so anyone who installs it can read them. Put only public identifiers there, and keep private keys on a backend that checks who is asking before it acts. Access to a project is controlled through organization roles. Viewers get a read-only preview, editors change the app, owners and admins invite and remove members, and only the owner changes roles. Single sign-on with SAML is an Enterprise feature, and Enterprise agreements can also cover custom SLAs, dedicated infrastructure, and private hosting options. Two things stay with you. Customer data usually lives in the backend you choose, so that backend’s permissions, backups, and retention rules are yours to set. And when you connect your own AI subscription or API key, that provider’s terms apply to the requests it handles. If your security review needs a certification, a data location commitment, or incident terms in writing, ask about Enterprise terms rather than inferring them from this page. ## Useful links * [Read the Draftbit privacy policy](/privacy) * [Read Draftbit terms](/terms) * [Ask about Enterprise controls](/enterprise-demo) In this section [Teams and support ](/faq#teams-support) ## Related questions [How does Draftbit handle API keys, secrets, and environment variables? ](/faq/how-does-draftbit-handle-secrets-and-environment-variables)[Are my prompts and source code used to train AI models? ](/faq/are-prompts-and-source-code-used-for-ai-training)[Does Draftbit support single sign-on and SAML? ](/faq/does-draftbit-support-sso) ## Start with your app idea Create a free account and describe what you want to build. [Get started free ](https://app.draftbit.com/signup) --- # How does Draftbit's visual builder work? > How Draftbit's screens list, component tree, preview canvas, and Styles, Content, and Code tabs edit the same source files the AI agents use. [ All questions](/faq) Every Draftbit project is a real codebase. Mobile apps are React Native with Expo, web apps use Vite, and websites use Astro. The visual builder has no separate design file. It parses the screen you have open, finds each element along with its exact position in the source, and draws that as the component tree. Turn on Selection Mode and a click on the preview maps back to the line that renders the element. The left side lists your screens and folders. Their arrangement defines the app’s routes, and you can add a screen or folder there. Below it is the component tree for the selected screen. A plus button opens the Add Component panel, where you choose from Draftbit’s components for your app type or from components exported by your own project files, then click or drag one into the selected parent. You can also reorder items in the tree. Add Component From Template opens the Design Blocks gallery, which hands a block to the agent to adapt to your theme. The center is the preview canvas. Add as many devices as you want, mix web and native sizes, rotate them, and view one route or every route at once. Double-click text in the preview to edit it in place. Web previews are available on every plan, iOS and Android simulators running in the browser need the Pro plan, and the Draftbit Preview app shows the app on a real phone through a QR code. The right side is the Utility Panel. The Styles tab turns utility classes, NativeWind on mobile and Tailwind on web, into controls for layout, flex, spacing, sizing, position, borders, background, opacity, and typography, with a breakpoint selector and a field for typing any class. The Content tab edits the text of a Text or Button. The Code tab shows the selected component’s source for hand edits, and the Chat tab is where the agents work on the same files. Nothing is final until you save. The Save button shows pending changes, you can discard them or save them with a message, and the save history lets you roll back to an earlier save point. ## Useful links * [Explore the visual builder](/platform) In this section [Visual editor ](/faq#visual-editor) ## Related questions [Do changes made by an AI agent appear in Draftbit's visual editor? ](/faq/do-ai-changes-appear-in-visual-editor)[Can I edit my app's code directly in Draftbit? ](/faq/can-i-edit-code-directly)[Can I create reusable components in Draftbit? ](/faq/can-i-create-reusable-components) ## Start with your app idea Create a free account and describe what you want to build. [Get started free ](https://app.draftbit.com/signup) --- # How does live preview work in Draftbit? > Learn what the Draftbit Preview Panel shows, how device previews, native simulators, and on-device preview differ, and where to find runtime logs. [ All questions](/faq) The Preview Panel sits in the center of the builder. Add one or more preview devices, choose laptop and desktop sizes or phone and tablet sizes, rotate them, and pan and zoom across an infinite canvas that can show every screen of the app at once. Edits from the agent, the design tools, or the code editor appear in these previews as they happen. Double-click any text in a preview to edit it in place. The Logs panel shows runtime output and errors while you work, and a Restart preview control reloads the app after a dependency or configuration change. The default previews are web renderings of your app. For real native behavior, the Pro plan and above can build iOS and Android simulators that run inside the browser. Those builds take a few minutes, keep separate Saved and Unsaved versions so you can compare the last saved build with your working changes, and need a rebuild whenever you add or remove packages with native code. For a real phone or tablet, install the Draftbit Preview app for iOS or Android, click the QR code button in the builder, and scan it. The iOS simulator cannot receive remote push notifications, for example, so test hardware features on a device before a store submission. ## Useful links * [Explore live preview](/platform) In this section [Platforms and publishing ](/faq#platforms-publishing) ## Related questions [Can I test a Draftbit app on real devices and simulators? ](/faq/can-i-test-on-real-devices-and-simulators)[How does Draftbit's visual builder work? ](/faq/how-does-draftbit-visual-builder-work)[Can Draftbit apps use camera, location, notifications, and other device features? ](/faq/can-draftbit-apps-use-device-features) ## Start with your app idea Create a free account and describe what you want to build. [Get started free ](https://app.draftbit.com/signup) --- # How is Draftbit different from FlutterFlow, Bubble, and Lovable? > Compare Draftbit with FlutterFlow, Bubble, and Lovable on code ownership, visual editing, AI agents, backends, native mobile apps, and human help. [ All questions](/faq) These products overlap, but they make different choices about the project underneath the editor. Draftbit keeps a normal codebase at the center. A Mobile project is React Native with Expo and TypeScript, and one codebase runs on iOS, Android, and in the browser as a progressive web app. A Web project is Vite and a Website project is Astro. Claude Code and OpenAI Codex edit those files, the visual editor parses its component tree from them and writes changes back to them, and the code can leave as a ZIP on Standard or as a GitHub export on Pro. You own the code, and Draftbit does not use it to train models. ## Draftbit and FlutterFlow Both support visual editing, AI-assisted work, mobile and web apps, code export, GitHub workflows, and app publishing. The clearest difference is the stack. Draftbit mobile apps use React Native, Expo, and TypeScript. FlutterFlow generates Flutter and Dart. That choice shapes which packages you can use, who you can hire, and what the exported project looks like, so it is usually the deciding factor. ## Draftbit and Bubble Bubble provides its own visual full-stack system with a built-in database, workflows, hosting, AI tools, and native mobile features. Bubble’s documentation says an app can only run on Bubble and cannot be exported as application source code. With Draftbit you can edit and export the code on Standard or higher and choose your own backend. Every plan includes a Draftbit-provisioned Supabase backend in open beta, and the agent can connect to Xano, REST APIs, and GraphQL APIs while it builds. Bubble may fit a team that wants to stay inside one managed visual system. Draftbit may fit a team that needs a portable codebase. ## Draftbit and Lovable Lovable is focused on full-stack web applications. Its current documentation says it does not support mobile app development, though it can build mobile-friendly web apps. Lovable projects can sync to GitHub and use a React-based web stack. Draftbit targets native iOS and Android beside the web, and its visual editor is specific to the app project rather than a general design surface. ## The part that is easy to miss An in-house team of salaried designers and developers at Draftbit can take on design, code, backends, a migration from another platform, or a store release. The services page lists fixed-scope packages, monthly retainers, and an advisory option. That matters when a project needs judgment or custom engineering beyond another prompt. Do not pick from a feature count alone. Build the hardest flow in each product, export the code if ownership matters, test the result on a real device, and price the backend and release work before deciding. ## Useful links * [Compare Draftbit and FlutterFlow](/faq/draftbit-vs-flutterflow) * [Compare Draftbit and Bubble](/faq/draftbit-vs-bubble) * [Compare Draftbit and Lovable](/faq/draftbit-vs-lovable) In this section [Comparisons ](/faq#comparisons) ## Related questions [How does Draftbit compare with FlutterFlow? ](/faq/draftbit-vs-flutterflow)[How does Draftbit compare with Bubble? ](/faq/draftbit-vs-bubble)[How does Draftbit compare with Lovable? ](/faq/draftbit-vs-lovable) ## Start with your app idea Create a free account and describe what you want to build. [Get started free ](https://app.draftbit.com/signup) --- # How long does it take to build and launch an app with Draftbit? > A realistic view of Draftbit timelines, from the first generated version through testing, staging builds, and app store review. [ All questions](/faq) The first version arrives fast. When you create a project you describe the app, an agent breaks that description into tasks and builds an initial version, and you watch it come together in the web preview before you open the editor. From there you can share a public link or publish to a draftbit.dev address with no setup. That gets you a demo. A launch takes more. What takes the time is everything around the screens. Connecting a real backend, handling errors, testing on real devices, writing store listings, and fixing what testers find all happen after the first build. The schedule slows when requirements change mid-build, when an API is unfinished, or when testing waits until the end. The expert packages are a useful benchmark because they come with dates attached. A fixed-scope MVP built by Draftbit’s team is scoped at four to eight weeks. The v1 package, which adds a production backend, QA, analytics, push notifications, and App Store and Google Play approval, is scoped at eight to twelve weeks. A solo builder working evenings should plan for a longer calendar than a dedicated team. Mobile adds fixed steps. Native preview builds take a few minutes each, and you need a fresh one whenever you add, remove, or change packages with native code. Staging publishes go to TestFlight and the Google Play Internal Testing track so you can test on real phones. Apple and Google then run their own review on their own timing, and they can reject a build for policy reasons, so leave room for at least one round of fixes. Start with one complete path through the product, connect real data early, and test on the slowest device you expect to support. If the product allows it, publish to the web first. A web release skips the store queue and gives you users while the mobile build is in review. ## Useful links * [See fixed scope expert projects](/services) In this section [Getting started ](/faq#getting-started) ## Related questions [What can I build with Draftbit? ](/faq/what-can-you-build-with-draftbit)[Can I build a production app with Draftbit if I don't know how to code? ](/faq/can-build-production-app-without-code)[Does Draftbit help with Apple App Store and Google Play submission? ](/faq/does-draftbit-help-with-app-store-submission) ## Start with your app idea Create a free account and describe what you want to build. [Get started free ](https://app.draftbit.com/signup) --- # Is Draftbit free and what does it cost to build and publish an app? > See what the Draftbit Free plan includes, what Standard, Pro, and Team cost, how credit packages work, and which outside costs remain. [ All questions](/faq) The Free plan costs nothing and does not expire. It includes one editor seat, the visual editor, Claude Code and Codex, a built-in Supabase backend (beta), and web publishing on a draftbit.dev address. You get 5,000 credits once at signup, good for a year, with no daily or monthly refill. On Free those credits run Codex with supported OpenAI models, or you can connect your own OpenAI, Anthropic, or OpenRouter key or subscription at any time. Free allows 3 projects, 2 apps per project, one REST integration per project, and one sandbox at a time. Paid plans are a platform fee plus an optional credit package. Standard is 15 USD per month, Pro is 30 USD, and Team is 150 USD with ten editor seats included. Yearly billing costs 20 percent less, so Standard is 144 USD a year, Pro 288 USD, and Team 1,440 USD. To have Draftbit fund the AI, add a monthly credit package from 25 USD, which buys 26,250 credits, up to 1,000 USD, with a larger bonus on bigger packages. One-time top-ups cost 1 USD per 1,000 credits on any paid plan. Extra editor seats are 10 USD per month on Standard and 20 USD on Pro and Team. Standard unlocks unlimited projects and integrations, code editing and export, custom domains, iOS and Android publishing, removing Draftbit branding, and any supported agent and model with credits. Pro adds GitHub export, custom MCP servers, iOS and Android simulators, up to three sandboxes and five agents at once, App Store submission help, and priority support. Team adds live collaboration, ten agents at once, training, and an account manager. Enterprise is quoted per organization and can include invoice billing. Draftbit is not the whole cost of an app. Apple and Google developer accounts, a domain, and outside services such as email, payments, or analytics carry their own fees. ## Useful links * [See current Draftbit pricing](/pricing) In this section [Pricing ](/faq#pricing) ## Related questions [Which Draftbit plan do I need? ](/faq/which-draftbit-plan-do-i-need)[What uses Draftbit credits? ](/faq/what-uses-draftbit-credits)[Which developer accounts and fees do I need to publish a mobile app? ](/faq/which-developer-accounts-and-fees-do-i-need) ## Start with your app idea Create a free account and describe what you want to build. [Get started free ](https://app.draftbit.com/signup) --- # Is Draftbit a no-code, low-code, or AI app builder? > How the no-code, low-code, and AI builder labels apply to Draftbit, and how prompts, the visual editor, and the code editor change one project. [ All questions](/faq) The label describes the person more than the product. Draftbit gives you three ways to change an app, and all of them work on the same project in one workspace. If you do not code, you work with prompts and the visual editor. Describe a feature and Claude Code or Codex plans the tasks and writes the code. Then adjust layout, styles, and content on the canvas, connect a backend, and preview the result in the browser. No coding experience is required for this path, and the Free plan includes it. If you code a little, you can view a selected component’s code from the Code tab on any plan. The full code editor, with saved edits, needs Standard or higher, and the same tier lets you open the sandbox in VS Code, Cursor, or Windsurf through a tunnel. The editor recognizes JavaScript, TypeScript, JSX, JSON, and Markdown. If you are a developer, treat it as an AI-assisted code project with a visual layer. Agents run in a cloud sandbox, their changes land in the project files, and Pro adds GitHub export, custom MCP servers, and up to five agents working at once. Switching modes does not reset anything. The screen you laid out visually is the same app an agent edits next, and the files are always there to read in the code editor. That is the practical difference from a no-code tool that hides the implementation, and from a chat tool that hands you snippets to paste somewhere else. No-code does not mean no technical decisions. A production app still needs a data model, access rules, error handling, and testing. The agent writes code quickly, and someone still has to check that the code meets the product and security requirements, whether that is you, a developer you bring in, or a Draftbit expert. ## Useful links * [Explore the platform](/platform) In this section [Getting started ](/faq#getting-started) ## Related questions [How does AI work in Draftbit? ](/faq/how-does-draftbit-ai-work)[How does Draftbit's visual builder work? ](/faq/how-does-draftbit-visual-builder-work)[Can I edit my app's code directly in Draftbit? ](/faq/can-i-edit-code-directly) ## Start with your app idea Create a free account and describe what you want to build. [Get started free ](https://app.draftbit.com/signup) --- # Can I use Claude Code and OpenAI Codex while still editing my app visually? > How Claude Code and OpenAI Codex fit with Draftbit's visual editor, how to switch between them, and which plans include code editing. [ All questions](/faq) Yes. Claude Code and Codex run inside your app’s sandbox and edit the same source files the visual editor renders, so there is no export or import step between them. Prompt an agent, review its changes, then open the screen on the canvas and keep adjusting spacing or copy by hand. Switch direction whenever you like. You might ask Codex to connect an API, tune the layout visually, then start a Claude Code thread to add error handling. You are not tied to one agent. Every thread chooses its own agent and model, and you can set defaults in Agent Customization. Each agent reads its own instructions file, CLAUDE.md for Claude Code and AGENTS.md for Codex, which is the place to record conventions such as which component library to use. Plan matters for the hand-editing side. Every plan includes both agents and the visual editor. Saving manual code edits, exporting the code, and opening the sandbox in VS Code, Cursor, or Windsurf require Standard or higher. On Free you can view a selected component’s code from the Code tab, but the full editor and saved edits are paid features. Syncing to GitHub requires Pro. Highly custom code is the one place the round trip narrows. A component an agent writes may expose only some of its settings in the panels. It still runs, and you can edit it in the Code tab or ask for a revision. Review the current project before each broad agent task so it does not build on a stale assumption, and save a point before letting an agent refactor widely. ## Useful links * [Read the agent instructions guide ](https://docs.draftbit.com/features/agent-instructions) * [Explore the visual builder](/platform) In this section [AI agents ](/faq#ai-agents) ## Related questions [Do changes made by an AI agent appear in Draftbit's visual editor? ](/faq/do-ai-changes-appear-in-visual-editor)[Can I edit my app's code directly in Draftbit? ](/faq/can-i-edit-code-directly)[Which AI models and coding agents does Draftbit support? ](/faq/which-ai-models-does-draftbit-support) ## Start with your app idea Create a free account and describe what you want to build. [Get started free ](https://app.draftbit.com/signup) --- # What are Draftbit Expert Services? > What Draftbit Expert Services cover, who does the work, and how fixed-price packages, monthly plans, and advisory differ. [ All questions](/faq) Draftbit employs its own designers, developers, and backend engineers, and Expert Services is how you hire them for your app. They are salaried staff rather than freelancers pulled from a marketplace. The services page lists the work they take on, which includes design and UI, screen building, backend development, custom code, integrations and SDKs, custom components, one-on-one training, app store management, and planning. Small fixes and complete app builds both qualify. There are three ways to engage. Fixed-price packages cover a defined build, currently a Starter Backend at 2,500 USD, an MVP at 6,499 USD, or a store-ready v1 at 12,999 USD. Monthly plans give you a dedicated team month to month from 2,000 USD, and you can pause or cancel at any time. Advisory costs 150 USD per week or 500 USD per month and keeps an expert in a shared channel while you remain the main builder. Work starts with a scoping call. Book one from the services page, or leave your number in the builder and an expert calls within one business day. We sign an NDA when you ask for one. Once the engagement begins you get updates every 48 hours through Slack and email, and the expert can join your Draftbit project directly through an Expert role, so you watch progress in the same place you build. The code they write is yours. ## Useful links * [See Expert Services](/services) In this section [Expert services ](/faq#expert-services) ## Related questions [What kinds of Expert Services does Draftbit offer? ](/faq/which-expert-services-does-draftbit-offer)[Can I get expert help with just one part of my app? ](/faq/can-i-get-help-with-one-part-of-my-app)[How do Expert Services work with the Draftbit platform? ](/faq/how-do-experts-work-with-draftbit-platform) ## Start with your app idea Create a free account and describe what you want to build. [Get started free ](https://app.draftbit.com/signup) --- # What are Draftbit's fixed-price Expert Service packages? > What the Starter Backend, MVP, and v1 packages include, what they cost, how long they take, and what is locked at signing. [ All questions](/faq) Starter Backend costs 2,500 USD one time. It gives a Draftbit app a minimal backend with secure authentication and user roles, GraphQL and REST CRUD endpoints, a database schema designed to grow, cloud-ready deployment, and API documentation. Pick it when the screens exist and the app needs real data behind them. The MVP package costs 6,499 USD one time and delivers a complete, focused app in 4 to 8 weeks. The app is built mobile first and works on desktop, the scope, timeline, and price are agreed before work starts, and a team covering design, development, and launch works with you through iterative rounds. Thirty days of free maintenance follow delivery. It is meant for validating an idea and collecting early user feedback. The v1 package costs 12,999 USD one time and is the MVP plus a production backend, QA, and store submission. Over 8 to 12 weeks you get a backend with authentication and user roles, cloud deployment, QA testing, analytics and push notifications, and submission through to App Store and Google Play approval, followed by 60 days of maintenance and support. Progress updates arrive daily during the build. Because the price is fixed, the scope is fixed too. Screens, flows, integrations, and anything that sits outside the package are settled on the scoping call and locked at signing. If you want to add a feature mid-build, raise it with the team early, because the package does not stretch on its own. Apple and Google still run their own review, so the submission work is ours and the approval timing is theirs. ## Useful links * [See current project packages](/services) In this section [Expert services ](/faq#expert-services) ## Related questions [What are Draftbit Expert Services? ](/faq/what-are-draftbit-expert-services)[What are Draftbit's monthly Expert development plans? ](/faq/what-are-monthly-development-plans)[How long does it take to build and launch an app with Draftbit? ](/faq/how-long-to-build-and-launch) ## Start with your app idea Create a free account and describe what you want to build. [Get started free ](https://app.draftbit.com/signup) --- # What are Draftbit's monthly Expert development plans? > Compare the Bronze, Silver, Gold, and Platinum monthly plans, what every plan includes, and how team capacity changes by tier. [ All questions](/faq) Bronze costs 2,000 USD per month and gives you one part-time expert dedicated to your project who works one task at a time. It suits steady feature work, bug fixes, and ongoing improvements. Silver costs 4,000 USD per month and replaces the single expert with a part-time team across design, development, and QA, so several workstreams move in parallel at a steady pace. Gold costs 7,500 USD per month for a full product team running parallel streams across design, development, backend, and QA when the timeline is aggressive. Platinum starts at 12,000 USD per month and is a custom team, where we pick the mix of designers, developers, backend engineers, and QA your project needs. Every monthly plan includes the same working arrangement. You get a private Slack channel with the team, daily progress updates, and weekly sprint prioritization with your own people. The experts are full-time salaried Draftbit staff, never freelancers, and they work inside Draftbit or in any other platform your app already uses. Plans also cover proactive maintenance and performance tuning, same-day emergency support, and scaling the team up or down as your needs change. The price is a fixed monthly amount, and you can pause or cancel at any time. Monthly plans work for launching a new app or leveling up an existing one. If the work is one defined build with a known end, compare the fixed-price MVP and v1 packages first. ## Useful links * [See current monthly plans](/services#monthly) In this section [Expert services ](/faq#expert-services) ## Related questions [What are Draftbit's fixed-price Expert Service packages? ](/faq/what-are-fixed-price-expert-projects)[Can I pause or cancel a monthly Draftbit expert plan? ](/faq/can-i-pause-or-cancel-expert-plan)[How do Expert Services work with the Draftbit platform? ](/faq/how-do-experts-work-with-draftbit-platform) ## Start with your app idea Create a free account and describe what you want to build. [Get started free ](https://app.draftbit.com/signup) --- # What are the limits of Draftbit's visual editor? > Which parts of a Draftbit app stay visual, where the Styles and Content tabs stop, and when work moves to an agent, the code editor, or an expert. [ All questions](/faq) The visual editor is a view over real source files, so its limits follow from what it can parse and what it has controls for. It reads the JSX in mobile and web screens and the markup in Astro pages, shows each element in the component tree with its source position, and lets you select, add, reorder, style, and edit text. Anything that is not an element in that file, such as a hook, a data fetch, a navigation handler, or a value computed at runtime, has no visual control. The Styles tab covers a fixed set of utility-class controls for layout, flex, spacing, sizing, position, borders, background color, opacity, and typography, plus a field for typing any other class and a breakpoint selector. It works on class names, so styles written as inline style objects or calculated in code stay in code. The Content tab edits text only when that text is a plain string in the file. Text that comes from a prop, a variable, or an API response is not editable there, and the tree shows conditionals and mapped lists as branches while the condition itself is edited in code. Adding components has rules too. You add into a selected parent, some parents do not accept certain children, and some components ask for required props or configuration before they can be placed. Components defined in other files show up as one item each, so their internals are edited in their own file. Beyond the canvas, the code editor recognizes JavaScript, TypeScript, JSX, JSON, and Markdown but not native iOS or Android source. Native packages need fresh native preview builds, and publishing to the stores needs your own Apple and Google credentials. The builder itself is supported in Chromium browsers and Firefox, with Safari and embedded webviews not officially supported. None of this is a dead end. Ask an agent to make the change, open the Code tab or the Code Editor, add a package, export the project, or bring in a Draftbit expert. The trade-off is that a heavily customized area may no longer be adjustable from the Styles or Content tabs. Visual editing itself is included on every plan, while saving code edits yourself needs the Standard plan or higher. ## Useful links * [Get help from an expert](/services) In this section [Visual editor ](/faq#visual-editor) ## Related questions [Can I edit my app's code directly in Draftbit? ](/faq/can-i-edit-code-directly)[Can I use npm packages and custom native modules in Draftbit? ](/faq/can-i-use-npm-packages-and-native-modules)[When is Draftbit not the right fit? ](/faq/when-is-draftbit-not-right-fit) ## Start with your app idea Create a free account and describe what you want to build. [Get started free ](https://app.draftbit.com/signup) --- # What can Draftbit AI agents do? > The code changes and built-in tools Draftbit agents can use inside an app project, and the limits that still apply. [ All questions](/faq) An agent edits your project’s source, so it can make any change a developer could make there. That covers new screens, shared components, navigation, forms and validation, data logic, and fixes for errors it can reproduce. It can start a project from a description or work inside an app you already have, across as many files as the change needs. It has tools that go beyond editing files. It can type check and lint the project, add or remove npm packages, update the Expo SDK version and run expo doctor, read the preview server’s logs and restart it, and manage environment variables. If you have connected REST or GraphQL APIs, it can list and call them to inspect live responses before wiring them into app code, and it can create REST endpoints or import them from an OpenAPI spec. It can set up a Draftbit-managed Supabase project, read your publish history and build logs, search the Draftbit docs, and create, update, and comment on tasks on the Tasks page. Before a sensitive or irreversible step, it stops and asks for your approval. A few limits are worth knowing. MCP and API connectors run only while a chat thread is active, so they help the agent during a build and are unavailable to your published app at runtime. Custom MCP servers require the Pro plan. Fully delegating work to agents that keep running while you are away is listed as Coming Soon. The agent still needs your judgment. It does not know an unstated business rule or legal requirement, and it can make a technically valid change that is wrong for your users. Give it acceptance criteria, ask for one working flow at a time, and review anything that touches security, data, or billing before you save. ## Useful links * [Explore Draftbit AI features](/platform) In this section [AI agents ](/faq#ai-agents) ## Related questions [How does AI work in Draftbit? ](/faq/how-does-draftbit-ai-work)[What happens if AI gets stuck or my app needs custom engineering? ](/faq/what-if-ai-agent-gets-stuck)[Can I run multiple AI agents at the same time in Draftbit? ](/faq/can-i-use-multiple-ai-agents) ## Start with your app idea Create a free account and describe what you want to build. [Get started free ](https://app.draftbit.com/signup) --- # What can I build with Draftbit? > The project types Draftbit creates, examples of apps people build with each, and where backend, native, or expert work is still needed. [ All questions](/faq) Draftbit creates three kinds of front-end app and two kinds of backend, and a project can hold more than one of them. Mobile apps use React Native and Expo. One codebase builds for iOS and Android, and you can also publish it to the browser as a progressive web app. Web apps use Vite and run in the browser. Websites use Astro for marketing pages, blogs, and portfolios. When the app needs its own server logic or database, add an API backend or a Supabase backend to the same project. Nothing in Draftbit targets desktop apps for macOS, Windows, or Linux. The starter templates show the range. Mobile templates include a photo and video social community, a dermatology appointment booker, a personal banking app, a food delivery app with cart and live order tracking, a hotel booking app with a map view, an AI assistant with threaded chat and subscription plans, a microblogging app, and a fitness app with workouts and a member community. Web app templates lean toward dashboards, admin panels, ERP and HR tools, messaging, ecommerce, real estate, and event management. Website templates cover portfolios, agency sites, SaaS marketing pages, blogs, and directories. You can also start from a blank app or from a prompt in any category Draftbit tracks, which include marketplaces, education, medical, finance, travel, and internal tools. Draftbit fits apps built from accounts, lists, forms, search, media, messaging, maps, payments, and data from an API. While it builds, the agent can call any REST or GraphQL endpoint you connect and use MCP integrations for services such as Supabase, Xano, Directus, and Stripe. Those connectors are tools for the agent during a build. The published app talks to the same services over the network like any other app, so the backend you choose still has to exist and be paid for. Some products need more than screens and data. A marketplace needs payment splitting and moderation. A health app has privacy rules. An offline field tool needs sync logic. You can build all of these because the code is editable on Standard and higher, but the work does not disappear. Draftbit experts can take on architecture, backend work, security, QA, and store submission when you do not have a developer. Write down the hardest user flow, the outside services, and any device features before you start, then build that flow first. A polished sign-in screen proves less than a working checkout. ## Useful links * [Browse app templates](/templates) * [Read customer stories](/customers) In this section [Getting started ](/faq#getting-started) ## Related questions [Can Draftbit build complex apps? ](/faq/can-draftbit-build-complex-apps)[Which platforms does Draftbit support? ](/faq/which-platforms-does-draftbit-support)[Does Draftbit include a backend and database? ](/faq/does-draftbit-include-backend-and-database) ## Start with your app idea Create a free account and describe what you want to build. [Get started free ](https://app.draftbit.com/signup) --- # What collaboration features does Draftbit have? > How Draftbit teams share an organization, see each other live in the builder, run agents in parallel, and review code in GitHub. [ All questions](/faq) Every plan includes an organization with owner, admin, editor, and viewer roles, so a small team can share projects before it needs anything more. Viewers see a read-only preview, editors change the app, and owners and admins invite and remove members. Live collaboration is part of Team and Enterprise. When teammates open the same app, avatars in the top bar show who else is there, their cursors are visible as they move, and the file explorer marks the file another person has open. Team includes ten editor seats and Enterprise has no seat limit, which is what makes side-by-side editing practical. Two people editing the same screen at the same moment can conflict. Draftbit tries to surface the conflict when it happens, and saving your changes before you reload is the safe habit. The Activity tab lists recent agent actions, edits, and file changes, so a teammate can catch up on what happened while they were away. Concurrent agents scale with the plan as well, with one agent at a time on Free and Standard, five on Pro, ten on Team, and no fixed limit on Enterprise. Give each agent its own task and files, because two agents changing the same component can undo each other’s work. Teams that review code outside Draftbit can export to GitHub on Pro and above. Each export that changes the code becomes a commit, and engineers can pull the repository, open pull requests, and run their own checks. Standard and higher plans can also open the app’s sandbox in VS Code, Cursor, or Windsurf through a tunnel. Team also comes with custom onboarding, training sessions, and a dedicated account manager. ## Useful links * [Compare team features](/pricing) In this section [Teams and support ](/faq#teams-support) ## Related questions [Can I invite teammates to a Draftbit project? ](/faq/can-i-invite-teammates)[Can I connect a Draftbit project to GitHub? ](/faq/can-i-connect-draftbit-to-github)[Can I run multiple AI agents at the same time in Draftbit? ](/faq/can-i-use-multiple-ai-agents) ## Start with your app idea Create a free account and describe what you want to build. [Get started free ](https://app.draftbit.com/signup) --- # What happens to my app and code if I cancel Draftbit? > What happens to your projects, code, exports, publishing, seats, and credits after you cancel a paid Draftbit plan, and what to do before it ends. [ All questions](/faq) Canceling a paid plan schedules it to end at the close of the current billing period, and everything works as before until that date. After it, your organization moves to the Free plan and your projects stay exactly where they are. Nothing in Draftbit deletes or archives an app because a subscription ended. What changes is what you can do with those projects. Free allows three projects with two apps each, one REST integration per project, one running agent, one sandbox, and one editor seat. You can still build with the agents, edit screens visually, view a selected component’s code from the Code tab, publish to the web on a draftbit.dev address, and use your own AI key or subscription. The full code editor with saved edits, ZIP downloads, GitHub export, custom domains, iOS and Android publishing, and simulators are paid features and stop being available. That last point matters if you plan to leave. Code export needs Standard or higher and GitHub Export needs Pro or higher, so take your final export while the paid period is still running. If the account has more editors than the Free plan’s single seat, the owner keeps editing and the other members are limited to read-only access until someone frees a seat or upgrades again. Check how your live app is published, since custom domains and store publishing are paid features, and read the credit expiry rules on the pricing page for any balance you are holding. Canceling is not the same as deleting your account. Account deletion is a separate action that removes your organizations and apps, so do not use it as a way to stop paying. ## Useful links * [Check current plan rules](/pricing) * [Read Draftbit terms](/terms) In this section [Code and ownership ](/faq#ownership) ## Related questions [Can I export my Draftbit app and continue development outside Draftbit? ](/faq/can-i-export-and-continue-outside-draftbit)[What happens to my Draftbit projects if I downgrade? ](/faq/what-happens-to-projects-after-downgrade)[Can I self-host a Draftbit app or publish it manually? ](/faq/can-i-self-host-or-publish-manually) ## Start with your app idea Create a free account and describe what you want to build. [Get started free ](https://app.draftbit.com/signup) --- # What happens to my Draftbit projects if I downgrade? > Learn what stays accessible after a Draftbit downgrade and which project, code, publishing, seat, sandbox, and credit limits change. [ All questions](/faq) A downgrade does not delete or archive anything. Projects, apps, web apps published on a draftbit.dev address, and your credit balance all carry over. The change applies at the end of your current billing period, so you have until then to prepare. Once the lower plan starts, its limits apply to new work rather than existing work. On Free that means 3 projects, 2 apps per project, and one REST integration per project. If you already have more, everything stays open, but Draftbit blocks creating another project or app until you are under the limit or upgrade again. Features above the new plan lock. Below Standard, the code editor is blurred, code export and ZIP downloads stop, and you cannot set up custom domains, publish to the App Store or Google Play, remove Draftbit branding, or open the sandbox in VS Code. Below Pro, GitHub export, custom MCP servers, and iOS and Android simulators are unavailable, and the plan allows one sandbox at a time. Web publishing to a draftbit.dev address works on every plan. Seats follow the same pattern. If the organization has more editors than the new plan allows, the owner keeps editing while every other editor, admins included, sees a seat limit notice and can only view the app read-only until you upgrade or remove members. Viewers are not counted. Credits you already received keep their own expiry dates, so monthly credits from the old plan stay usable for 30 days after the period they belonged to. Before the switch, export the code if you will lose export access, and decide where a live custom domain should point, since the custom domain tools lock below Standard. ## Useful links * [Check current plan limits](/pricing) In this section [Pricing ](/faq#pricing) ## Related questions [Can I change or cancel my Draftbit plan at any time? ](/faq/can-i-change-or-cancel-my-plan)[What happens to my app and code if I cancel Draftbit? ](/faq/what-happens-to-my-app-if-i-cancel)[Can I export my Draftbit app and continue development outside Draftbit? ](/faq/can-i-export-and-continue-outside-draftbit) ## Start with your app idea Create a free account and describe what you want to build. [Get started free ](https://app.draftbit.com/signup) --- # What happens when I run out of Draftbit credits? > Learn what stops when a Draftbit credit balance hits zero, what keeps working, and the top-up, credit package, own key, and earned credit options. [ All questions](/faq) When your organization has no usable credits, Draftbit refuses to start a new Draftbit-funded thread or message. It takes at least one credit to begin. If a task is already running when the balance reaches zero, the next model call is rejected and the run stops there. Whatever the agent changed before that point is still in your sandbox, so read the files before you continue or publish, because a half finished change may not be safe to ship. Nothing else is affected. Your app, its code, the visual editor, previews, and publishing keep working, and you can pick the work back up once credits are available. On a paid plan you can buy a one-time top-up from 5 USD at 1,000 credits per USD, add or enlarge a monthly credit package, which applies right away, or both. Top-ups need an active paid subscription and are not available on Free or on a plan that Draftbit manages for you. An organization owner or admin makes these purchases from the Billing section. On any plan, including Free, you can connect your own OpenAI, Anthropic, or OpenRouter key or a ChatGPT or Claude subscription. Threads on those paths go straight to the provider and never touch your Draftbit balance, though the provider’s own limits and billing apply. You can also earn credits through referrals, testimonials, and other challenges on the Earn Credits page, and those credits effectively never expire. The Credits page shows your balance and each lot’s expiry date, so check it before a large build. ## Useful links * [See current credit options](/pricing) In this section [Pricing ](/faq#pricing) ## Related questions [What uses Draftbit credits? ](/faq/what-uses-draftbit-credits)[Can I use my own OpenAI, Anthropic, or OpenRouter key in Draftbit? ](/faq/can-i-use-my-own-ai-api-key)[Do unused Draftbit credits roll over? ](/faq/do-unused-credits-roll-over) ## Start with your app idea Create a free account and describe what you want to build. [Get started free ](https://app.draftbit.com/signup) --- # What happens if AI gets stuck or my app needs custom engineering? > What to do when a Draftbit agent loops on a bad fix or cannot finish, including rollback, switching agents, support, and expert help. [ All questions](/faq) Start by changing the input rather than repeating it. Roll back to the last save point that worked, using the save history in the Builder or the Git History view. Rolling back creates a new commit that restores the earlier state, so nothing is lost. Then narrow the problem to one failing flow and give the agent the error text, the expected result, and the steps to reproduce it. A Read Only thread lets an agent investigate and explain without changing files. You can ask it to check the preview server logs, type check the project, or run expo doctor. Try the other agent in a new thread. Claude Code and Codex read code differently and one may spot what the other missed. If you would rather fix it yourself, open the Code tab or open the sandbox in VS Code, Cursor, or Windsurf. Saving manual edits requires Standard or higher. When an agent decides it cannot recover the app on its own, it can flag the app, and you see an External Support Needed notice in the top bar. Use the Get Help chat in the Builder or ask in the Draftbit community, and mention which thread went wrong. Some problems call for engineering judgment rather than another prompt, such as architecture, a custom native module, a data migration, or a security review. Draftbit Experts take on exactly this kind of rescue work. They untangle an AI-generated codebase, fix broken logic and state, reconnect backends, and hand back an app you understand. Advisory time and monthly teams are available when you want ongoing help. ## Useful links * [Get help from an expert](/services) * [Visit the Draftbit help center ](https://help.draftbit.com) In this section [AI agents ](/faq#ai-agents) ## Related questions [Can Draftbit experts fix a broken AI-generated or vibe-coded app? ](/faq/can-experts-fix-a-broken-ai-generated-app)[Can I edit my app's code directly in Draftbit? ](/faq/can-i-edit-code-directly)[Can I get expert help with just one part of my app? ](/faq/can-i-get-help-with-one-part-of-my-app) ## Start with your app idea Create a free account and describe what you want to build. [Get started free ](https://app.draftbit.com/signup) --- # What is the Draftbit Advisory plan? > What the Draftbit Advisory plan includes, what it costs, how the 2 hours of weekly hands-on help work, and when to choose a build instead. [ All questions](/faq) Advisory is for people who want to stay the builder. You keep writing prompts and code, and an expert stays in your corner to review what you ship, help you make structural decisions before they get expensive, and work through the bug or edge case that has you stuck. It costs 150 USD per week or 500 USD per month. We set up a shared Slack or Discord channel with you, your team, and our experts. Questions, code, and screenshots go there rather than into a ticket queue, and your requests get answered ahead of general support. The plan includes one-on-one training sessions on topics such as state, authentication, and app patterns, plus up to 2 hours a week of hands-on work in which the expert debugs a problem, fixes a stuck build, or ships a small feature for you. Additional hours are available at a discounted rate. When you sign up, an expert reaches out within one business day to introduce themselves and learn what you are building. There is no long-term commitment and no seat minimum, and you can pause or cancel whenever you like. Everything you build with the expert’s help belongs to you. Advisory is not a substitute for a development team. If you need someone to own a roadmap or deliver a full build, look at the monthly plans or the fixed-price packages instead. ## Useful links * [See current Advisory details](/services#advisory) In this section [Expert services ](/faq#expert-services) ## Related questions [Can I get expert help with just one part of my app? ](/faq/can-i-get-help-with-one-part-of-my-app)[What are Draftbit's monthly Expert development plans? ](/faq/what-are-monthly-development-plans)[What happens if AI gets stuck or my app needs custom engineering? ](/faq/what-if-ai-agent-gets-stuck) ## Start with your app idea Create a free account and describe what you want to build. [Get started free ](https://app.draftbit.com/signup) --- # What is Draftbit? > What Draftbit is, which project types it creates, how its AI agents, visual editor, and code editor fit together, and where the plan limits sit. [ All questions](/faq) Draftbit runs in your browser (Chromium browsers and Firefox are supported) and builds working applications. You start by describing the app. An AI agent turns that description into a task list and builds a first version while you watch in the web preview. After that you can work on the same project three ways. Ask an agent for a change, adjust the result in the visual editor, or open the files in the code editor. The agents are Claude Code from Anthropic and Codex from OpenAI. They run in a cloud sandbox attached to your project, so there is nothing to install. You can pay for agent time with Draftbit credits or connect your own OpenAI, Anthropic, or OpenRouter key on any plan, including Free. A project holds one or more apps, and each app has a type. Mobile apps use React Native and Expo, build for iOS and Android, and can also be published to the browser as a progressive web app. Web apps use Vite. Websites use Astro. You can add an API backend or a Supabase backend to the same project when the app needs server logic and a database. Desktop apps for macOS, Windows, or Linux are not a target. Publishing is part of the builder. Every plan can publish to the web on a draftbit.dev address. Standard and higher add custom domains, iOS and Android publishing, the full code editor, and a zip export of the source. On Free you can view a selected component’s code from the Code tab, but the full editor and saved edits are paid features. Pro adds GitHub export. Apple and Google still run their own review before a mobile app goes live. More than 200,000 builders have created over 50,000 apps this way. When you would rather have someone else do the work, Draftbit has an in-house expert team for fixed-price builds, monthly retainers, and rescue work on apps that stalled. ## Useful links * [See the Draftbit platform](/platform) In this section [Getting started ](/faq#getting-started) ## Related questions [What can I build with Draftbit? ](/faq/what-can-you-build-with-draftbit)[Is Draftbit a no-code, low-code, or AI app builder? ](/faq/is-draftbit-no-code-low-code-ai-builder)[Who is Draftbit for? ](/faq/who-is-draftbit-for) ## Start with your app idea Create a free account and describe what you want to build. [Get started free ](https://app.draftbit.com/signup) --- # What language and framework does Draftbit use? > Which languages and frameworks Draftbit uses for mobile apps, web apps, websites, API backends, and CMS projects, and what an export contains. [ All questions](/faq) New Draftbit projects are written in TypeScript, and the framework depends on the project type you pick when you create the app. Mobile apps are React Native with Expo. They use Expo Router for file-based navigation and NativeWind, which brings Tailwind classes to React Native, and one codebase runs on iOS, Android, and the web. Web apps are React single-page apps built with Vite, using React Router file-based routes and Tailwind CSS. Websites are Astro projects that render static pages and use React only for interactive islands. API backends are Hono services with typed OpenAPI routes that run on the Cloudflare Workers runtime, with Drizzle available for SQL databases. CMS projects are Payload with a Next.js admin panel. A Supabase backend project holds the SQL migrations and Edge Functions for a managed Supabase instance. An export contains the same files, so a developer sees an ordinary project for that framework with its own package.json, dependencies, and build scripts. The built-in code editor recognizes JavaScript, TypeScript, JSX, JSON, and Markdown. Other languages are not recognized for autocomplete or linting. Framework versions move with each release, so read the project’s package.json rather than assuming a particular version of React Native, Expo, or anything else. ## Useful links * [Read the Draftbit documentation ](https://docs.draftbit.com) In this section [Code and ownership ](/faq#ownership) ## Related questions [Are Draftbit mobile apps native or web wrappers? ](/faq/are-draftbit-mobile-apps-native)[Can I export my Draftbit app and continue development outside Draftbit? ](/faq/can-i-export-and-continue-outside-draftbit)[Can I use npm packages and custom native modules in Draftbit? ](/faq/can-i-use-npm-packages-and-native-modules) ## Start with your app idea Create a free account and describe what you want to build. [Get started free ](https://app.draftbit.com/signup) --- # What support options are available with Draftbit? > What support each Draftbit plan includes, where to get help in the builder, docs, and community, and when Expert Services fit. [ All questions](/faq) Start inside the builder. The Get Help button in the top bar opens the in-app support chat, and the agent itself can often explain an error or a stuck build if you ask it first. The documentation covers features, guides, common issues, and known limitations, and the community forum is open to everyone on any plan. Staffed support follows the plan. Free includes community support. Standard adds email support, which you can reach at . Pro adds priority support and training sessions. Team adds a dedicated account manager and custom onboarding. Enterprise adds custom SLAs and a dedicated success manager. The pricing page has the full table. Feature requests go on the Roadmap in the builder, where you can upvote items so we know what to prioritize. If something feels like a missing feature rather than a bug, that is the fastest way to get it in front of the team. Support answers product and account questions. It is not the same as someone building or fixing your app for you, which is what Expert Services are for. Advisory gives you an expert for code review, architecture questions, and troubleshooting at 150 USD per week or 500 USD per month while you keep building. Monthly plans put a part-time expert or a small team on your project from 2,000 USD per month, and fixed-price packages cover a starter backend, an MVP, or a full v1 launch. When you report a problem, include the app name, the screen or flow, the steps to reproduce it, what you expected, and what happened. Remove secrets and customer data from screenshots and logs before you send them. ## Useful links * [Read the Draftbit documentation ](https://docs.draftbit.com) * [Compare support by plan](/pricing) In this section [Teams and support ](/faq#teams-support) ## Related questions [Which Draftbit plan do I need? ](/faq/which-draftbit-plan-do-i-need)[What are Draftbit Expert Services? ](/faq/what-are-draftbit-expert-services)[What happens if AI gets stuck or my app needs custom engineering? ](/faq/what-if-ai-agent-gets-stuck) ## Start with your app idea Create a free account and describe what you want to build. [Get started free ](https://app.draftbit.com/signup) --- # What uses Draftbit credits? > Learn which AI actions consume Draftbit credits, how the cost of a call is calculated, and how your own provider key changes billing. [ All questions](/faq) Credits are spent on one thing, the AI model calls Draftbit pays for. Those happen in agent threads, and every request an agent makes while it reads files, plans, writes code, or answers a question is metered. Visual editing, previews, publishing, and the sandbox itself do not draw credits. The charge for a call is the provider’s price for that model plus a Draftbit markup, turned into credits at 1,000 credits per USD and rounded up. Input and output tokens, including reasoning, prompt cache reads and writes, and web searches all count, so a long task that touches many files and loops through several attempts costs far more than a short question or a targeted edit. Models differ in token price. The Credits and Usage pages under Billing, and the usage details on each thread, show what a run consumed by model and provider. Threads that run on your own OpenAI, Anthropic, or OpenRouter key, or on a ChatGPT or Claude subscription, go straight to that provider and skip Draftbit credits. That works on every plan, including Free. On Free, Draftbit credits themselves only run Codex with supported OpenAI models. Give the agent a clear goal and the files that matter. If an approach fails twice, change the instructions rather than resending the same prompt. ## Useful links * [See current credit options](/pricing) In this section [Pricing ](/faq#pricing) ## Related questions [Can I use my own OpenAI, Anthropic, or OpenRouter key in Draftbit? ](/faq/can-i-use-my-own-ai-api-key)[Do unused Draftbit credits roll over? ](/faq/do-unused-credits-roll-over)[What happens when I run out of Draftbit credits? ](/faq/what-happens-when-i-run-out-of-credits) ## Start with your app idea Create a free account and describe what you want to build. [Get started free ](https://app.draftbit.com/signup) --- # When is Draftbit not the right fit? > The cases where Draftbit does not fit, including desktop targets, existing repositories, unsupported languages, on-premise requirements, and games. [ All questions](/faq) Most bad fits follow from what Draftbit is. It creates React Native and Expo apps for iOS and Android, Vite web apps, and Astro websites, with optional API and Supabase backends, and it runs those projects in a cloud sandbox you reach from a browser. Desktop apps are out. There is no build target for macOS, Windows, or Linux. If the product has to run as a native desktop application, start somewhere else, or plan a web app and accept the browser as the desktop experience. Existing code comes in only through import. Draftbit can import a public GitHub repository that holds an Expo, Vite, or Astro app, and it can import a Draftbit Classic app. Private repositories, other frameworks, and monorepos are not supported. A team with a mature codebase, a custom build system, and strict local tooling cannot move that setup into Draftbit, though it can use Draftbit for a new project and export the result. The code editor recognizes JavaScript, TypeScript, JSX, JSON, and Markdown. If your backend must be written in Python, PHP, C#, or another language, you can connect to it over REST or GraphQL, but you cannot build or edit it inside Draftbit. Some products need a different engine. A casual quiz or word game is an ordinary app. A physics-heavy 2D or 3D game belongs in a game engine, which Draftbit does not include. An app built around a brand new operating system API is easier to start in Swift or Kotlin, and deep native work in Draftbit means exporting the project and using a local native toolchain. A few things are not shipped yet. The agents today are Claude Code and Codex, with Google Gemini on the roadmap. Firebase and Figma MCP integrations are marked Coming Soon, and so is delegating background work to agents that keep running while you are away. If one of those is a day-one requirement, wait for it or plan around it. Network and compliance rules matter too. The builder is a hosted service that needs an internet connection, an account, and a Chromium browser or Firefox. Self-hosting and SSO with SAML appear only as Enterprise options, so if policy requires every editor and build system to run inside your own network, talk to sales before you commit. If your app is stuck on another platform, Draftbit experts also handle migrations, either into Draftbit or into a standalone codebase you own. ## Useful links * [Talk through your requirements](/request-demo) In this section [Getting started ](/faq#getting-started) ## Related questions [Can Draftbit build complex apps? ](/faq/can-draftbit-build-complex-apps)[What are the limits of Draftbit's visual editor? ](/faq/what-are-visual-editor-limits)[How is Draftbit different from FlutterFlow, Bubble, and Lovable? ](/faq/how-is-draftbit-different-from-other-app-builders) ## Start with your app idea Create a free account and describe what you want to build. [Get started free ](https://app.draftbit.com/signup) --- # Which AI models and coding agents does Draftbit support? > Which coding agents and model providers work inside Draftbit, how plan and billing path affect the choice, and how that differs from AI in your app. [ All questions](/faq) Two coding agents run inside Draftbit today, Claude Code from Anthropic and Codex from OpenAI. Google Gemini is on the roadmap and is not available yet. Each thread pairs an agent with a model. Anthropic’s Claude models run through Claude Code, and OpenAI’s models run through Codex. Models from other vendors reach Draftbit through OpenRouter. That catalog currently includes models from Google, xAI, DeepSeek, Meta, Moonshot AI, MiniMax, Qwen, and Z.ai, and it changes as vendors ship and retire models. OpenRouter models run through Codex, and some can run through Claude Code as well. The model picker in the chat shows what your account can use right now, and Agent Customization lets you set a default agent and model. Your plan matters when Draftbit credits pay for the thread. On the Free plan, credit-funded threads use Codex with supported OpenAI models. Paid plans get the full agent and model choice with credits. If you connect your own OpenAI, Anthropic, or OpenRouter key or a ChatGPT or Claude subscription, which every plan allows, model availability follows what your provider account permits rather than a Draftbit list. Adding AI to the app you are building is a separate question. Your app can call any model API you choose, and the agent can help you write that code. Keep the provider key in a sensitive environment variable. Plain text EXPO\_PUBLIC variables are bundled into the app, so a private key must never go there. ## Useful links * [Read the agent instructions guide ](https://docs.draftbit.com/features/agent-instructions) In this section [AI agents ](/faq#ai-agents) ## Related questions [Can I use Claude Code and OpenAI Codex while still editing my app visually? ](/faq/use-claude-code-and-codex-with-visual-editor)[Can I use my own OpenAI, Anthropic, or OpenRouter key in Draftbit? ](/faq/can-i-use-my-own-ai-api-key)[How does AI work in Draftbit? ](/faq/how-does-draftbit-ai-work) ## Start with your app idea Create a free account and describe what you want to build. [Get started free ](https://app.draftbit.com/signup) --- # Which developer accounts and fees do I need to publish a mobile app? > See the Apple and Google developer accounts, current fees, verification steps, and Draftbit plan you need before publishing a mobile app. [ All questions](/faq) Publishing to the Apple App Store needs an Apple account enrolled in the Apple Developer Program. Apple charges 99 USD per year for the membership and may ask you to verify your identity with a government-issued photo ID. Once enrolled, you create a Bundle ID for the app, add the app in App Store Connect, and generate an App Store Connect API key with the App Manager role. Draftbit needs that key file along with your Team ID, Issuer ID, Key ID, and the app’s App Store ID to upload builds for you. Google Play needs a Google Play developer account, which has a one-time 25 USD registration fee and can also require photo ID verification. You then create the app in the Play Console, set up a Google Cloud service account with access to the Google Play Android Developer API, and invite that service account into your Play Console so Draftbit can upload builds. Enroll under the person or company that should appear as the publisher, and start early, because account verification can take longer than building the app. Some features add accounts of their own. Push notifications need a free Expo account, plus a Firebase project on Android. The store fees are separate from your Draftbit plan, and iOS and Android publishing need the Standard plan or higher. Apple and Google set these amounts and can change them, so confirm the current figures on their pages before you budget. ## Useful links * [Check Apple membership details ](https://developer.apple.com/support/compare-memberships/) * [Check Google Play registration details ](https://support.google.com/googleplay/android-developer/answer/14659200) In this section [Platforms and publishing ](/faq#platforms-publishing) ## Related questions [Can Draftbit publish directly to the Apple App Store, Google Play, and the web? ](/faq/can-draftbit-publish-to-app-stores-and-web)[Does Draftbit help with Apple App Store and Google Play submission? ](/faq/does-draftbit-help-with-app-store-submission)[Can I add payments and subscriptions to a Draftbit app? ](/faq/can-i-add-payments-and-subscriptions) ## Start with your app idea Create a free account and describe what you want to build. [Get started free ](https://app.draftbit.com/signup) --- # Which Draftbit plan do I need? > Choose between Draftbit Free, Standard, Pro, Team, and Enterprise based on code access, publishing, agents, seats, and support. [ All questions](/faq) Start on Free if you are learning the editor, building a first version, or plan to run the AI on your own OpenAI, Anthropic, or OpenRouter account. It allows 3 projects with 2 apps each, one REST integration per project, one sandbox at a time, and web publishing on a draftbit.dev address. Draftbit credits on Free only run Codex with supported OpenAI models. Move to Standard when you need to read and edit the code, export it, publish to the App Store or Google Play, use a custom domain, or remove Draftbit branding. Standard also lifts the project and integration caps and can open the sandbox in VS Code, Cursor, or Windsurf. It is the usual plan for one person shipping a real app. Pick Pro when you want GitHub export, custom MCP servers, iOS and Android simulators in the browser, up to three sandboxes running at once, several agents working in parallel, App Store submission help, and priority support. Pick Team when more than one person edits. It includes ten editor seats, live collaboration, up to five sandboxes, training sessions, and an account manager. Standard and Pro include one editor seat, and any paid plan can add up to ten more seats, so a two person shop can stay on Pro. Viewers do not use a seat. Enterprise is arranged directly with Draftbit and covers SSO, custom SLAs, dedicated or private hosting, invoice billing, and custom seat and credit allocations. If one capability would block your launch, find that row in the pricing page comparison table before you subscribe. ## Useful links * [Compare current plans](/pricing) In this section [Pricing ](/faq#pricing) ## Related questions [Is Draftbit free and what does it cost to build and publish an app? ](/faq/is-draftbit-free-and-how-much-does-it-cost)[Can I run multiple AI agents at the same time in Draftbit? ](/faq/can-i-use-multiple-ai-agents)[What collaboration features does Draftbit have? ](/faq/what-collaboration-features-does-draftbit-have) ## Start with your app idea Create a free account and describe what you want to build. [Get started free ](https://app.draftbit.com/signup) --- # What kinds of Expert Services does Draftbit offer? > The three ways to hire Draftbit experts, what each covers, and which fits a new build, an ongoing roadmap, or a stuck app. [ All questions](/faq) The services page groups expert work into nine areas. Design and UI/UX, screen building, backend development, custom code and functions, integrations and SDKs, custom components, one-on-one training, app store management, and planning and strategy. The same people cover all nine, so one engagement can carry a project from design through store submission. You buy that work in one of three shapes. A fixed-price package fits when the deliverable is clear and you want a known price. The current packages are a Starter Backend at 2,500 USD, an MVP at 6,499 USD delivered in 4 to 8 weeks, and a v1 at 12,999 USD delivered in 8 to 12 weeks with App Store and Google Play approval included. A monthly plan fits an ongoing roadmap. Bronze starts at 2,000 USD per month for one part-time expert, and the tiers scale up to a custom team at 12,000 USD and above. Advisory, at 150 USD per week or 500 USD per month, fits a builder who wants code review, architecture guidance, and up to 2 hours a week of hands-on help while doing most of the work themselves. The team also takes on apps that already exist. The services page names three cases. Upgrading an old app that has grown slow or hard to maintain, migrating an app from another platform into Draftbit or into an independent codebase, and rescuing a vibe-coded app that an AI tool left almost working. Rescue work is scoped at 2 to 6 weeks, and a new build runs 4 to 12 weeks depending on whether you stop at an MVP or go on to a v1. If you are unsure which shape fits, book the scoping call. It takes about 30 minutes and ends with a written plan. ## Useful links * [Compare Expert Services](/services) In this section [Expert services ](/faq#expert-services) ## Related questions [What are Draftbit's fixed-price Expert Service packages? ](/faq/what-are-fixed-price-expert-projects)[What are Draftbit's monthly Expert development plans? ](/faq/what-are-monthly-development-plans)[What is the Draftbit Advisory plan? ](/faq/what-is-draftbit-advisory-plan) ## Start with your app idea Create a free account and describe what you want to build. [Get started free ](https://app.draftbit.com/signup) --- # Which integrations does Draftbit support? > See the REST, GraphQL, and MCP integrations Draftbit supports, what the catalog covers, and how connectors differ from a runtime backend. [ All questions](/faq) The Integrations page in the Builder has four tabs. MCPs connect an AI agent to a service it can manage for you. REST APIs and GraphQL let you add a catalog service, import an OpenAPI spec or a GraphQL schema, or configure a custom source, then expose its endpoints to the agent as tools. The Supabase tab creates and manages a Draftbit-provisioned Supabase backend, which is in open beta. The catalog holds more than 80 providers. They cover backends and databases, content management, authentication, payments and subscriptions, commerce, automation webhooks, email, media, search, monitoring, project management, design, and infrastructure. Entries include Supabase, Xano, Directus, Neon, Airtable, Contentful, Sanity, Strapi, WordPress, Shopify Storefront, Stripe, Square, RevenueCat, Clerk, Auth0, Zapier, Resend, Cloudinary, Algolia, Sentry, Linear, Cloudflare, and Canva. The Firebase and Figma MCP connectors are marked Coming Soon, although Cloud Firestore and Firebase Auth have REST entries. A service without a catalog entry still works when it has a REST or GraphQL API. MCP and REST connectors run only while a chat thread is active, so they give the agent tools during the build. The published app reaches a service by calling the same endpoints over the network from its own code, and the agent can write that code for you. A Free plan project includes one REST API integration; paid plans have no limit. ## Useful links * [Browse REST integrations](/integrations) * [Browse GraphQL integrations](/graphql) * [Browse MCP servers](/mcp) In this section [Backends and integrations ](/faq#backends-integrations) ## Related questions [Can Draftbit connect to my existing backend, database, and APIs? ](/faq/can-draftbit-connect-existing-backend-database-apis)[Can Draftbit use MCP servers? ](/faq/can-draftbit-use-mcp-servers)[Can Draftbit connect to REST and GraphQL APIs? ](/faq/can-draftbit-connect-to-rest-and-graphql-apis) ## Start with your app idea Create a free account and describe what you want to build. [Get started free ](https://app.draftbit.com/signup) --- # Which payment methods does Draftbit accept? > See which cards Draftbit accepts, how Stripe checkout and the billing portal work, and when invoice billing is available. [ All questions](/faq) Stripe processes every self-serve payment. Draftbit lists Visa, Mastercard, and American Express as accepted cards, and every plan, seat, credit package, and top-up is priced in USD. When you subscribe or buy credits, Draftbit sends you to Stripe Checkout, and Stripe can save the card for later purchases if you choose. Each one-time credit purchase produces a Stripe invoice. Once your organization has a Stripe billing account, the Billing overview shows an Invoices and Payments button that opens the Stripe billing portal for your invoices and payment details. The organization owner starts a subscription, and owners and admins can buy credits and open the portal. Enterprise agreements can include invoice billing instead of a card. If your organization needs a purchase order, tax form, or vendor review before paying, raise it with Draftbit before you subscribe. ## Useful links * [See Draftbit pricing](/pricing) In this section [Pricing ](/faq#pricing) ## Related questions [Is Draftbit free and what does it cost to build and publish an app? ](/faq/is-draftbit-free-and-how-much-does-it-cost)[Can I change or cancel my Draftbit plan at any time? ](/faq/can-i-change-or-cancel-my-plan)[Which Draftbit plan do I need? ](/faq/which-draftbit-plan-do-i-need) ## Start with your app idea Create a free account and describe what you want to build. [Get started free ](https://app.draftbit.com/signup) --- # Which platforms does Draftbit support? > See which platforms Draftbit targets, how the mobile, web, and website project types differ, and what is not supported. [ All questions](/faq) You pick a project type when you create an app. A Mobile project is a React Native app built on Expo, and it is the type that reaches the Apple App Store, Google Play, and the web from one codebase. A Web project uses Vite and a Website project uses Astro. Both run in the browser only, so choose Mobile when the same product needs to live in the stores and on the web. Draftbit offers API Backend and Supabase Backend project types as well, for the server side of an app. Sharing one codebase does not make every platform identical. A phone layout and a wide desktop layout often need different navigation, permission prompts differ between iOS and Android, and the app stores have review rules that a web release never goes through. Preview each platform at its real size while you build, and test device features on the actual operating system before a release. Web publishing is available on every plan, while iOS and Android publishing start on the Standard plan. Desktop native apps for macOS, Windows, or Linux are not a target. If you only need a browser product, a Web or Website project skips the mobile build and store steps entirely. ## Useful links * [Explore platform features](/platform) In this section [Platforms and publishing ](/faq#platforms-publishing) ## Related questions [Are Draftbit mobile apps native or web wrappers? ](/faq/are-draftbit-mobile-apps-native)[Can Draftbit publish directly to the Apple App Store, Google Play, and the web? ](/faq/can-draftbit-publish-to-app-stores-and-web)[What language and framework does Draftbit use? ](/faq/what-language-and-framework-does-draftbit-use) ## Start with your app idea Create a free account and describe what you want to build. [Get started free ](https://app.draftbit.com/signup) --- # Who is Draftbit for? > Who gets the most from Draftbit, whether you are a first-time founder, a designer, a developer, an agency, or a product team, and what each should check first. [ All questions](/faq) Draftbit was built for people with less coding experience who still want to ship real software, and it keeps the project open to the developers around them. In practice that covers a few groups with different needs. Founders and first-time builders describe an app, let the agent build the first version, then shape it in the visual editor. The Free plan includes AI agent chat, the visual editor, three projects, 5,000 one-time credits, and web publishing on a draftbit.dev address, so you can reach a shareable version before paying. Publishing to the App Store or Google Play needs Standard or higher plus your own Apple and Google developer accounts. Designers get an infinite canvas with control over styles, layout, and content, with undo, redo, and history. The visual editor works on the same React Native, Vite, or Astro project that the code editor shows, so the design work does not have to be rebuilt by an engineer later. Developers get a normal codebase. On Standard and higher you can edit files in the built-in code editor, open the sandbox in VS Code, Cursor, or Windsurf through a tunnel, and export the source as a zip. Pro adds GitHub export, custom MCP servers, and up to five agents running at once. The code editor recognizes JavaScript, TypeScript, JSX, JSON, and Markdown. Agencies and product teams can invite teammates or clients and share work. Editor seats are the thing to check. Free, Standard, and Pro include one editor seat each. Team includes ten, adds live collaboration, and raises the concurrent agent limit to ten. Enterprise removes the seat and agent caps and is where SSO and self-hosting are discussed. Draftbit is a weaker fit if your team must keep working inside an existing repository, needs a desktop app, or maintains a backend in a language the code editor does not recognize, such as Python or PHP. You can connect to that backend over REST or GraphQL, but you cannot edit it in Draftbit. Import covers public GitHub repositories that hold an Expo, Vite, or Astro app, plus Draftbit Classic apps, and nothing else. When you want the app built or fixed for you, Draftbit experts take on retainers and fixed-price projects. ## Useful links * [Read customer stories](/customers) * [See expert services](/services) In this section [Getting started ](/faq#getting-started) ## Related questions [Can I build a production app with Draftbit if I don't know how to code? ](/faq/can-build-production-app-without-code)[When is Draftbit not the right fit? ](/faq/when-is-draftbit-not-right-fit)[Can a developer take over a Draftbit app later? ](/faq/can-a-developer-take-over-my-draftbit-app) ## Start with your app idea Create a free account and describe what you want to build. [Get started free ](https://app.draftbit.com/signup) --- # GraphQL endpoints for your Draftbit app > Connect any GraphQL endpoint to your Draftbit app. Preconfigured for Hasura, AWS AppSync, Sanity, Storyblok, Strapi, and more — or introspect your own schema. GraphQL integrations Use any GraphQL endpoint from a Draftbit app. 22 services are preconfigured, and any custom GraphQL URL works via schema introspection. ## What is a GraphQL integration in Draftbit? A GraphQL integration is a single endpoint URL your Draftbit app talks to using GraphQL queries, mutations, and subscriptions. Draftbit introspects the schema at add-time so operations are discoverable across the builder — bind them to components, drive lists from them, or let an AI agent compose queries against the live schema. Auth headers are stored once per app. Working with a plain REST API instead? Use a [REST integration](/integrations/). To let AI agents act on a service while you build, add an [MCP server](/mcp/). * [](/graphql/aws-appsync/) [AWS AppSync](/graphql/aws-appsync/) [Managed GraphQL on AWS](/graphql/aws-appsync/) [Read more →](/graphql/aws-appsync/) * [](/graphql/bigcommerce-storefront/) [BigCommerce Storefront](/graphql/bigcommerce-storefront/) [BigCommerce Storefront GraphQL API](/graphql/bigcommerce-storefront/) [Read more →](/graphql/bigcommerce-storefront/) * [](/graphql/caisy/) [Caisy](/graphql/caisy/) [Headless CMS with a flexible GraphQL API](/graphql/caisy/) [Read more →](/graphql/caisy/) * [](/graphql/contentful-graphql/) [Contentful (GraphQL)](/graphql/contentful-graphql/) [Headless CMS with a GraphQL Content API](/graphql/contentful-graphql/) [Read more →](/graphql/contentful-graphql/) * [](/graphql/crystallize/) [Crystallize](/graphql/crystallize/) [Crystallize Catalogue API](/graphql/crystallize/) [Read more →](/graphql/crystallize/) * [](/graphql/datocms/) [DatoCMS](/graphql/datocms/) [Headless CMS with a fast GraphQL CDN](/graphql/datocms/) [Read more →](/graphql/datocms/) * [](/graphql/goldsky/) [Goldsky](/graphql/goldsky/) [Subgraph hosting for web3](/graphql/goldsky/) [Read more →](/graphql/goldsky/) * [](/graphql/hasura-cloud/) [Hasura Cloud](/graphql/hasura-cloud/) [Instant GraphQL on your Postgres database](/graphql/hasura-cloud/) [Read more →](/graphql/hasura-cloud/) * [](/graphql/hasura-ddn/) [Hasura DDN](/graphql/hasura-ddn/) [Hasura's distributed data supergraph](/graphql/hasura-ddn/) [Read more →](/graphql/hasura-ddn/) * [](/graphql/hygraph/) [Hygraph](/graphql/hygraph/) [GraphQL-native headless CMS](/graphql/hygraph/) [Read more →](/graphql/hygraph/) * [](/graphql/nhost/) [Nhost](/graphql/nhost/) [Nhost GraphQL backend](/graphql/nhost/) [Read more →](/graphql/nhost/) * [](/graphql/prismic-graphql/) [Prismic (GraphQL)](/graphql/prismic-graphql/) [Prismic GraphQL Content Delivery API](/graphql/prismic-graphql/) [Read more →](/graphql/prismic-graphql/) * [](/graphql/saleor/) [Saleor](/graphql/saleor/) [Open-source headless commerce platform](/graphql/saleor/) [Read more →](/graphql/saleor/) * [](/graphql/sanity-graphql/) [Sanity (GraphQL)](/graphql/sanity-graphql/) [Sanity Content Lake GraphQL API](/graphql/sanity-graphql/) [Read more →](/graphql/sanity-graphql/) * [](/graphql/shopify-storefront/) [Shopify Storefront](/graphql/shopify-storefront/) [Shopify Storefront GraphQL API](/graphql/shopify-storefront/) [Read more →](/graphql/shopify-storefront/) * [](/graphql/storyblok-graphql/) [Storyblok (GraphQL)](/graphql/storyblok-graphql/) [Visual headless CMS with a GraphQL API](/graphql/storyblok-graphql/) [Read more →](/graphql/storyblok-graphql/) * [](/graphql/strapi-graphql/) [Strapi (GraphQL)](/graphql/strapi-graphql/) [Self-hosted headless CMS GraphQL plugin](/graphql/strapi-graphql/) [Read more →](/graphql/strapi-graphql/) * [](/graphql/supabase-graphql/) [Supabase GraphQL](/graphql/supabase-graphql/) [GraphQL over your Supabase Postgres (pg\_graphql)](/graphql/supabase-graphql/) [Read more →](/graphql/supabase-graphql/) * [](/graphql/the-graph/) [The Graph](/graphql/the-graph/) [Decentralized subgraph indexer for web3](/graphql/the-graph/) [Read more →](/graphql/the-graph/) * [](/graphql/vendure/) [Vendure](/graphql/vendure/) [Vendure Shop API for storefronts](/graphql/vendure/) [Read more →](/graphql/vendure/) * [](/graphql/webiny/) [Webiny](/graphql/webiny/) [Self-hosted headless CMS GraphQL Read API](/graphql/webiny/) [Read more →](/graphql/webiny/) * [](/graphql/wpgraphql/) [WPGraphQL](/graphql/wpgraphql/) [GraphQL for WordPress](/graphql/wpgraphql/) [Read more →](/graphql/wpgraphql/) * [Add a custom GraphQL endpoint](/signup?psource=graphql-hub) [Paste any GraphQL URL in Integrations → GraphQL. Draftbit introspects the schema and exposes operations to your app and AI agents.](/signup?psource=graphql-hub) [Start free →](/signup?psource=graphql-hub) [MCP servers](/mcp/) [Let AI agents act on third-party services while building.](/mcp/) [→](/mcp/) [REST API integrations](/integrations/) [65+ preconfigured REST APIs, plus your own.](/integrations/) [→](/integrations/) [Get started free](/signup?psource=graphql-hub-cta) [See the Draftbit platform](/platform) --- # AWS AppSync GraphQL integration for Draftbit > Managed GraphQL on AWS Connect AWS AppSync's GraphQL endpoint to a Draftbit app and use it across screens and AI agents. 1. [Home](/) 2. / 3. [GraphQL](/graphql/) 4. / 5. AWS AppSync ## What is AWS AppSync? AWS AppSync provides a managed GraphQL service with subscriptions, designed for mobile and web clients via the Amplify SDK. API key auth shown here; Cognito/IAM auth requires custom signing. ## Use AWS AppSync with Draftbit * Schema discovered automatically via GraphQL introspection. * Queries, mutations, and subscriptions usable across screens and AI agents. * Auth headers configured once and reused for every operation. * Works with custom AWS AppSync schemas and federated graphs. ## Example `aws-appsync-query.graphql` ``` # Example query against AWS AppSync query GetItems { items(limit: 10) { id name createdAt } } ``` ## Use cases * Query exactly the fields a screen needs and nothing more * Compose data from multiple sources in a single round trip * Subscribe to live updates over a single GraphQL endpoint ## Authentication Add any required auth headers when you connect AWS AppSync. Headers are stored per app and applied to every operation. ### Use AWS AppSync in a Draftbit app today Start free, connect AWS AppSync in minutes, and ship with AI agents that know how to use it. [Start building free](/signup?psource=graphql-aws-appsync-midpage) ## Frequently asked questions ### What is the AWS AppSync GraphQL integration? AWS AppSync provides a managed GraphQL service with subscriptions, designed for mobile and web clients via the Amplify SDK. API key auth shown here; Cognito/IAM auth requires custom signing. ### How do I connect AWS AppSync to a Draftbit app? In your Draftbit app, go to Integrations and then GraphQL and choose AWS AppSync. Enter the endpoint URL and any auth headers. Draftbit introspects the schema and exposes its operations to your app and to the AI agents. ### Do I need to write GraphQL queries by hand? No. Once Draftbit has introspected the AWS AppSync schema, you can bind components to operations visually, and the AI agents can compose queries against the live schema. ### What can I build with AWS AppSync and Draftbit? Most teams use AWS AppSync as a GraphQL service for their app. You might use AWS AppSync to query exactly the fields a screen needs and nothing more, or to compose data from multiple sources in a single round trip. ## Related GraphQL * [](/graphql/hasura-ddn/) [Hasura DDN](/graphql/hasura-ddn/) [Hasura's distributed data supergraph](/graphql/hasura-ddn/) * [](/graphql/nhost/) [Nhost](/graphql/nhost/) [Nhost GraphQL backend](/graphql/nhost/) * [](/graphql/the-graph/) [The Graph](/graphql/the-graph/) [Decentralized subgraph indexer for web3](/graphql/the-graph/) * [](/graphql/goldsky/) [Goldsky](/graphql/goldsky/) [Subgraph hosting for web3](/graphql/goldsky/) [Get started free ](/signup?psource=graphql-aws-appsync-footer)[Browse all GraphQL](/graphql/) --- # BigCommerce Storefront GraphQL integration for Draftbit > BigCommerce Storefront GraphQL API Connect BigCommerce Storefront's GraphQL endpoint to a Draftbit app and use it across screens and AI agents. 1. [Home](/) 2. / 3. [GraphQL](/graphql/) 4. / 5. BigCommerce Storefront ## What is BigCommerce Storefront? Client-safe GraphQL API for storefronts. Use a Storefront token (1-hour to permanent), scoped to the channel. ## Use BigCommerce Storefront with Draftbit * Schema discovered automatically via GraphQL introspection. * Queries, mutations, and subscriptions usable across screens and AI agents. * Auth headers configured once and reused for every operation. * Works with custom BigCommerce Storefront schemas and federated graphs. ## Example `bigcommerce-storefront-query.graphql` ``` # Example query against BigCommerce Storefront query GetItems { items(limit: 10) { id name createdAt } } ``` ## Use cases * Show a product catalog with prices and inventory * Add a cart, checkout, and order history * Sync orders between the storefront and the app ## Authentication Add any required auth headers when you connect BigCommerce Storefront. Headers are stored per app and applied to every operation. ### Use BigCommerce Storefront in a Draftbit app today Start free, connect BigCommerce Storefront in minutes, and ship with AI agents that know how to use it. [Start building free](/signup?psource=graphql-bigcommerce-storefront-midpage) ## Frequently asked questions ### What is the BigCommerce Storefront GraphQL integration? Client-safe GraphQL API for storefronts. Use a Storefront token (1-hour to permanent), scoped to the channel. ### How do I connect BigCommerce Storefront to a Draftbit app? In your Draftbit app, go to Integrations and then GraphQL and choose BigCommerce Storefront. Enter the endpoint URL and any auth headers. Draftbit introspects the schema and exposes its operations to your app and to the AI agents. ### Do I need to write GraphQL queries by hand? No. Once Draftbit has introspected the BigCommerce Storefront schema, you can bind components to operations visually, and the AI agents can compose queries against the live schema. ### What can I build with BigCommerce Storefront and Draftbit? Most teams use BigCommerce Storefront as a commerce platform for their app. You might use BigCommerce Storefront to show a product catalog with prices and inventory, or to add a cart, checkout, and order history. ## Related GraphQL * [](/graphql/shopify-storefront/) [Shopify Storefront](/graphql/shopify-storefront/) [Shopify Storefront GraphQL API](/graphql/shopify-storefront/) * [](/graphql/saleor/) [Saleor](/graphql/saleor/) [Open-source headless commerce platform](/graphql/saleor/) * [](/graphql/vendure/) [Vendure](/graphql/vendure/) [Vendure Shop API for storefronts](/graphql/vendure/) * [](/graphql/crystallize/) [Crystallize](/graphql/crystallize/) [Crystallize Catalogue API](/graphql/crystallize/) [Get started free ](/signup?psource=graphql-bigcommerce-storefront-footer)[Browse all GraphQL](/graphql/) --- # Caisy GraphQL integration for Draftbit > Headless CMS with a flexible GraphQL API Connect Caisy's GraphQL endpoint to a Draftbit app and use it across screens and AI agents. 1. [Home](/) 2. / 3. [GraphQL](/graphql/) 4. / 5. Caisy ## What is Caisy? Caisy is a GraphQL-first headless CMS. Use a read-scoped API key from the project dashboard. ## Use Caisy with Draftbit * Schema discovered automatically via GraphQL introspection. * Queries, mutations, and subscriptions usable across screens and AI agents. * Auth headers configured once and reused for every operation. * Works with custom Caisy schemas and federated graphs. ## Example `caisy-query.graphql` ``` # Example query against Caisy query GetItems { items(limit: 10) { id name createdAt } } ``` ## Use cases * Drive a blog, news feed, or content section from a headless CMS * Let non-engineers publish app content without a release * Localize copy and assets without code changes ## Authentication Add any required auth headers when you connect Caisy. Headers are stored per app and applied to every operation. ### Use Caisy in a Draftbit app today Start free, connect Caisy in minutes, and ship with AI agents that know how to use it. [Start building free](/signup?psource=graphql-caisy-midpage) ## Frequently asked questions ### What is the Caisy GraphQL integration? Caisy is a GraphQL-first headless CMS. Use a read-scoped API key from the project dashboard. ### How do I connect Caisy to a Draftbit app? In your Draftbit app, go to Integrations and then GraphQL and choose Caisy. Enter the endpoint URL and any auth headers. Draftbit introspects the schema and exposes its operations to your app and to the AI agents. ### Do I need to write GraphQL queries by hand? No. Once Draftbit has introspected the Caisy schema, you can bind components to operations visually, and the AI agents can compose queries against the live schema. ### What can I build with Caisy and Draftbit? Most teams use Caisy as a headless CMS for their app. You might use Caisy to drive a blog, news feed, or content section from a headless CMS, or to let non-engineers publish app content without a release. ## Related GraphQL * [](/graphql/contentful-graphql/) [Contentful (GraphQL)](/graphql/contentful-graphql/) [Headless CMS with a GraphQL Content API](/graphql/contentful-graphql/) * [](/graphql/hygraph/) [Hygraph](/graphql/hygraph/) [GraphQL-native headless CMS](/graphql/hygraph/) * [](/graphql/datocms/) [DatoCMS](/graphql/datocms/) [Headless CMS with a fast GraphQL CDN](/graphql/datocms/) * [](/graphql/storyblok-graphql/) [Storyblok (GraphQL)](/graphql/storyblok-graphql/) [Visual headless CMS with a GraphQL API](/graphql/storyblok-graphql/) [Get started free ](/signup?psource=graphql-caisy-footer)[Browse all GraphQL](/graphql/) --- # Contentful (GraphQL) GraphQL integration for Draftbit > Headless CMS with a GraphQL Content API Connect Contentful (GraphQL)'s GraphQL endpoint to a Draftbit app and use it across screens and AI agents. 1. [Home](/) 2. / 3. [GraphQL](/graphql/) 4. / 5. Contentful (GraphQL) ## What is Contentful (GraphQL)? Contentful's GraphQL Content API delivers published entries via a CDN. Use a Content Delivery API token (read-only, safe to ship in clients) — defaults to the \`master\` environment. ## Use Contentful (GraphQL) with Draftbit * Schema discovered automatically via GraphQL introspection. * Queries, mutations, and subscriptions usable across screens and AI agents. * Auth headers configured once and reused for every operation. * Works with custom Contentful (GraphQL) schemas and federated graphs. ## More ways to connect Contentful Need a REST API connection instead? Use [the Contentful REST API integration](/integrations/contentful/) . ## Example `contentful-graphql-query.graphql` ``` # Example query against Contentful (GraphQL) query GetItems { items(limit: 10) { id name createdAt } } ``` ## Use cases * Drive a blog, news feed, or content section from a headless CMS * Let non-engineers publish app content without a release * Localize copy and assets without code changes ## Authentication Add any required auth headers when you connect Contentful (GraphQL). Headers are stored per app and applied to every operation. ### Use Contentful (GraphQL) in a Draftbit app today Start free, connect Contentful (GraphQL) in minutes, and ship with AI agents that know how to use it. [Start building free](/signup?psource=graphql-contentful-graphql-midpage) ## Frequently asked questions ### What is the Contentful (GraphQL) GraphQL integration? Contentful's GraphQL Content API delivers published entries via a CDN. Use a Content Delivery API token (read-only, safe to ship in clients) — defaults to the \`master\` environment. ### How do I connect Contentful (GraphQL) to a Draftbit app? In your Draftbit app, go to Integrations and then GraphQL and choose Contentful (GraphQL). Enter the endpoint URL and any auth headers. Draftbit introspects the schema and exposes its operations to your app and to the AI agents. ### Do I need to write GraphQL queries by hand? No. Once Draftbit has introspected the Contentful (GraphQL) schema, you can bind components to operations visually, and the AI agents can compose queries against the live schema. ### What can I build with Contentful (GraphQL) and Draftbit? Most teams use Contentful (GraphQL) as a headless CMS for their app. You might use Contentful (GraphQL) to drive a blog, news feed, or content section from a headless CMS, or to let non-engineers publish app content without a release. ## Related GraphQL * [](/graphql/hygraph/) [Hygraph](/graphql/hygraph/) [GraphQL-native headless CMS](/graphql/hygraph/) * [](/graphql/datocms/) [DatoCMS](/graphql/datocms/) [Headless CMS with a fast GraphQL CDN](/graphql/datocms/) * [](/graphql/storyblok-graphql/) [Storyblok (GraphQL)](/graphql/storyblok-graphql/) [Visual headless CMS with a GraphQL API](/graphql/storyblok-graphql/) * [](/graphql/sanity-graphql/) [Sanity (GraphQL)](/graphql/sanity-graphql/) [Sanity Content Lake GraphQL API](/graphql/sanity-graphql/) [Get started free ](/signup?psource=graphql-contentful-graphql-footer)[Browse all GraphQL](/graphql/) --- # Crystallize GraphQL integration for Draftbit > Crystallize Catalogue API Connect Crystallize's GraphQL endpoint to a Draftbit app and use it across screens and AI agents. 1. [Home](/) 2. / 3. [GraphQL](/graphql/) 4. / 5. Crystallize ## What is Crystallize? The Catalogue API is Crystallize's read-only storefront endpoint. Public catalogues need no auth; protected catalogues require a static auth token. ## Use Crystallize with Draftbit * Schema discovered automatically via GraphQL introspection. * Queries, mutations, and subscriptions usable across screens and AI agents. * Auth headers configured once and reused for every operation. * Works with custom Crystallize schemas and federated graphs. ## Example `crystallize-query.graphql` ``` # Example query against Crystallize query GetItems { items(limit: 10) { id name createdAt } } ``` ## Use cases * Show a product catalog with prices and inventory * Add a cart, checkout, and order history * Sync orders between the storefront and the app ## Authentication Add any required auth headers when you connect Crystallize. Headers are stored per app and applied to every operation. ### Use Crystallize in a Draftbit app today Start free, connect Crystallize in minutes, and ship with AI agents that know how to use it. [Start building free](/signup?psource=graphql-crystallize-midpage) ## Frequently asked questions ### What is the Crystallize GraphQL integration? The Catalogue API is Crystallize's read-only storefront endpoint. Public catalogues need no auth; protected catalogues require a static auth token. ### How do I connect Crystallize to a Draftbit app? In your Draftbit app, go to Integrations and then GraphQL and choose Crystallize. Enter the endpoint URL and any auth headers. Draftbit introspects the schema and exposes its operations to your app and to the AI agents. ### Do I need to write GraphQL queries by hand? No. Once Draftbit has introspected the Crystallize schema, you can bind components to operations visually, and the AI agents can compose queries against the live schema. ### What can I build with Crystallize and Draftbit? Most teams use Crystallize as a commerce platform for their app. You might use Crystallize to show a product catalog with prices and inventory, or to add a cart, checkout, and order history. ## Related GraphQL * [](/graphql/shopify-storefront/) [Shopify Storefront](/graphql/shopify-storefront/) [Shopify Storefront GraphQL API](/graphql/shopify-storefront/) * [](/graphql/bigcommerce-storefront/) [BigCommerce Storefront](/graphql/bigcommerce-storefront/) [BigCommerce Storefront GraphQL API](/graphql/bigcommerce-storefront/) * [](/graphql/saleor/) [Saleor](/graphql/saleor/) [Open-source headless commerce platform](/graphql/saleor/) * [](/graphql/vendure/) [Vendure](/graphql/vendure/) [Vendure Shop API for storefronts](/graphql/vendure/) [Get started free ](/signup?psource=graphql-crystallize-footer)[Browse all GraphQL](/graphql/) --- # DatoCMS GraphQL integration for Draftbit > Headless CMS with a fast GraphQL CDN Connect DatoCMS's GraphQL endpoint to a Draftbit app and use it across screens and AI agents. 1. [Home](/) 2. / 3. [GraphQL](/graphql/) 4. / 5. DatoCMS ## What is DatoCMS? DatoCMS exposes published content via a GraphQL endpoint backed by a global CDN. Use a read-only API token from the project dashboard. ## Use DatoCMS with Draftbit * Schema discovered automatically via GraphQL introspection. * Queries, mutations, and subscriptions usable across screens and AI agents. * Auth headers configured once and reused for every operation. * Works with custom DatoCMS schemas and federated graphs. ## Example `datocms-query.graphql` ``` # Example query against DatoCMS query GetItems { items(limit: 10) { id name createdAt } } ``` ## Use cases * Drive a blog, news feed, or content section from a headless CMS * Let non-engineers publish app content without a release * Localize copy and assets without code changes ## Authentication Add any required auth headers when you connect DatoCMS. Headers are stored per app and applied to every operation. ### Use DatoCMS in a Draftbit app today Start free, connect DatoCMS in minutes, and ship with AI agents that know how to use it. [Start building free](/signup?psource=graphql-datocms-midpage) ## Frequently asked questions ### What is the DatoCMS GraphQL integration? DatoCMS exposes published content via a GraphQL endpoint backed by a global CDN. Use a read-only API token from the project dashboard. ### How do I connect DatoCMS to a Draftbit app? In your Draftbit app, go to Integrations and then GraphQL and choose DatoCMS. Enter the endpoint URL and any auth headers. Draftbit introspects the schema and exposes its operations to your app and to the AI agents. ### Do I need to write GraphQL queries by hand? No. Once Draftbit has introspected the DatoCMS schema, you can bind components to operations visually, and the AI agents can compose queries against the live schema. ### What can I build with DatoCMS and Draftbit? Most teams use DatoCMS as a headless CMS for their app. You might use DatoCMS to drive a blog, news feed, or content section from a headless CMS, or to let non-engineers publish app content without a release. ## Related GraphQL * [](/graphql/contentful-graphql/) [Contentful (GraphQL)](/graphql/contentful-graphql/) [Headless CMS with a GraphQL Content API](/graphql/contentful-graphql/) * [](/graphql/hygraph/) [Hygraph](/graphql/hygraph/) [GraphQL-native headless CMS](/graphql/hygraph/) * [](/graphql/storyblok-graphql/) [Storyblok (GraphQL)](/graphql/storyblok-graphql/) [Visual headless CMS with a GraphQL API](/graphql/storyblok-graphql/) * [](/graphql/sanity-graphql/) [Sanity (GraphQL)](/graphql/sanity-graphql/) [Sanity Content Lake GraphQL API](/graphql/sanity-graphql/) [Get started free ](/signup?psource=graphql-datocms-footer)[Browse all GraphQL](/graphql/) --- # Goldsky GraphQL integration for Draftbit > Subgraph hosting for web3 Connect Goldsky's GraphQL endpoint to a Draftbit app and use it across screens and AI agents. 1. [Home](/) 2. / 3. [GraphQL](/graphql/) 4. / 5. Goldsky ## What is Goldsky? Goldsky hosts subgraphs with public and private endpoints. Public endpoints need no auth; private endpoints take a project secret in \`Authorization\`. ## Use Goldsky with Draftbit * Schema discovered automatically via GraphQL introspection. * Queries, mutations, and subscriptions usable across screens and AI agents. * Auth headers configured once and reused for every operation. * Works with custom Goldsky schemas and federated graphs. ## Example `goldsky-query.graphql` ``` # Example query against Goldsky query GetItems { items(limit: 10) { id name createdAt } } ``` ## Use cases * Query exactly the fields a screen needs and nothing more * Compose data from multiple sources in a single round trip * Subscribe to live updates over a single GraphQL endpoint ## Authentication Add any required auth headers when you connect Goldsky. Headers are stored per app and applied to every operation. ### Use Goldsky in a Draftbit app today Start free, connect Goldsky in minutes, and ship with AI agents that know how to use it. [Start building free](/signup?psource=graphql-goldsky-midpage) ## Frequently asked questions ### What is the Goldsky GraphQL integration? Goldsky hosts subgraphs with public and private endpoints. Public endpoints need no auth; private endpoints take a project secret in \`Authorization\`. ### How do I connect Goldsky to a Draftbit app? In your Draftbit app, go to Integrations and then GraphQL and choose Goldsky. Enter the endpoint URL and any auth headers. Draftbit introspects the schema and exposes its operations to your app and to the AI agents. ### Do I need to write GraphQL queries by hand? No. Once Draftbit has introspected the Goldsky schema, you can bind components to operations visually, and the AI agents can compose queries against the live schema. ### What can I build with Goldsky and Draftbit? Most teams use Goldsky as a GraphQL service for their app. You might use Goldsky to query exactly the fields a screen needs and nothing more, or to compose data from multiple sources in a single round trip. ## Related GraphQL * [](/graphql/hasura-ddn/) [Hasura DDN](/graphql/hasura-ddn/) [Hasura's distributed data supergraph](/graphql/hasura-ddn/) * [](/graphql/aws-appsync/) [AWS AppSync](/graphql/aws-appsync/) [Managed GraphQL on AWS](/graphql/aws-appsync/) * [](/graphql/nhost/) [Nhost](/graphql/nhost/) [Nhost GraphQL backend](/graphql/nhost/) * [](/graphql/the-graph/) [The Graph](/graphql/the-graph/) [Decentralized subgraph indexer for web3](/graphql/the-graph/) [Get started free ](/signup?psource=graphql-goldsky-footer)[Browse all GraphQL](/graphql/) --- # Hasura Cloud GraphQL integration for Draftbit > Instant GraphQL on your Postgres database Connect Hasura Cloud's GraphQL endpoint to a Draftbit app and use it across screens and AI agents. 1. [Home](/) 2. / 3. [GraphQL](/graphql/) 4. / 5. Hasura Cloud ## What is Hasura Cloud? Hasura Cloud provides an instant GraphQL API over your Postgres database with row-level security via JWT auth — designed for direct use from web and mobile clients. ## Use Hasura Cloud with Draftbit * Schema discovered automatically via GraphQL introspection. * Queries, mutations, and subscriptions usable across screens and AI agents. * Auth headers configured once and reused for every operation. * Works with custom Hasura Cloud schemas and federated graphs. ## Example `hasura-cloud-query.graphql` ``` # Example query against Hasura Cloud query GetItems { items(limit: 10) { id name createdAt } } ``` ## Use cases * Power a mobile app with a hosted database and APIs * Add search, filtering, and pagination to a list-driven feature * Read and write app data without managing your own server ## Authentication Add any required auth headers when you connect Hasura Cloud. Headers are stored per app and applied to every operation. ### Use Hasura Cloud in a Draftbit app today Start free, connect Hasura Cloud in minutes, and ship with AI agents that know how to use it. [Start building free](/signup?psource=graphql-hasura-cloud-midpage) ## Frequently asked questions ### What is the Hasura Cloud GraphQL integration? Hasura Cloud provides an instant GraphQL API over your Postgres database with row-level security via JWT auth — designed for direct use from web and mobile clients. ### How do I connect Hasura Cloud to a Draftbit app? In your Draftbit app, go to Integrations and then GraphQL and choose Hasura Cloud. Enter the endpoint URL and any auth headers. Draftbit introspects the schema and exposes its operations to your app and to the AI agents. ### Do I need to write GraphQL queries by hand? No. Once Draftbit has introspected the Hasura Cloud schema, you can bind components to operations visually, and the AI agents can compose queries against the live schema. ### What can I build with Hasura Cloud and Draftbit? Most teams use Hasura Cloud as a backend platform for their app. You might use Hasura Cloud to power a mobile app with a hosted database and APIs, or to add search, filtering, and pagination to a list-driven feature. ## Related GraphQL * [](/graphql/supabase-graphql/) [Supabase GraphQL](/graphql/supabase-graphql/) [GraphQL over your Supabase Postgres (pg\_graphql)](/graphql/supabase-graphql/) [Get started free ](/signup?psource=graphql-hasura-cloud-footer)[Browse all GraphQL](/graphql/) --- # Hasura DDN GraphQL integration for Draftbit > Hasura's distributed data supergraph Connect Hasura DDN's GraphQL endpoint to a Draftbit app and use it across screens and AI agents. 1. [Home](/) 2. / 3. [GraphQL](/graphql/) 4. / 5. Hasura DDN ## What is Hasura DDN? Hasura DDN federates multiple data sources behind a single GraphQL supergraph. Add a JWT from your auth provider to scope queries by role. ## Use Hasura DDN with Draftbit * Schema discovered automatically via GraphQL introspection. * Queries, mutations, and subscriptions usable across screens and AI agents. * Auth headers configured once and reused for every operation. * Works with custom Hasura DDN schemas and federated graphs. ## Example `hasura-ddn-query.graphql` ``` # Example query against Hasura DDN query GetItems { items(limit: 10) { id name createdAt } } ``` ## Use cases * Query exactly the fields a screen needs and nothing more * Compose data from multiple sources in a single round trip * Subscribe to live updates over a single GraphQL endpoint ## Authentication Add any required auth headers when you connect Hasura DDN. Headers are stored per app and applied to every operation. ### Use Hasura DDN in a Draftbit app today Start free, connect Hasura DDN in minutes, and ship with AI agents that know how to use it. [Start building free](/signup?psource=graphql-hasura-ddn-midpage) ## Frequently asked questions ### What is the Hasura DDN GraphQL integration? Hasura DDN federates multiple data sources behind a single GraphQL supergraph. Add a JWT from your auth provider to scope queries by role. ### How do I connect Hasura DDN to a Draftbit app? In your Draftbit app, go to Integrations and then GraphQL and choose Hasura DDN. Enter the endpoint URL and any auth headers. Draftbit introspects the schema and exposes its operations to your app and to the AI agents. ### Do I need to write GraphQL queries by hand? No. Once Draftbit has introspected the Hasura DDN schema, you can bind components to operations visually, and the AI agents can compose queries against the live schema. ### What can I build with Hasura DDN and Draftbit? Most teams use Hasura DDN as a GraphQL service for their app. You might use Hasura DDN to query exactly the fields a screen needs and nothing more, or to compose data from multiple sources in a single round trip. ## Related GraphQL * [](/graphql/aws-appsync/) [AWS AppSync](/graphql/aws-appsync/) [Managed GraphQL on AWS](/graphql/aws-appsync/) * [](/graphql/nhost/) [Nhost](/graphql/nhost/) [Nhost GraphQL backend](/graphql/nhost/) * [](/graphql/the-graph/) [The Graph](/graphql/the-graph/) [Decentralized subgraph indexer for web3](/graphql/the-graph/) * [](/graphql/goldsky/) [Goldsky](/graphql/goldsky/) [Subgraph hosting for web3](/graphql/goldsky/) [Get started free ](/signup?psource=graphql-hasura-ddn-footer)[Browse all GraphQL](/graphql/) --- # Hygraph GraphQL integration for Draftbit > GraphQL-native headless CMS Connect Hygraph's GraphQL endpoint to a Draftbit app and use it across screens and AI agents. 1. [Home](/) 2. / 3. [GraphQL](/graphql/) 4. / 5. Hygraph ## What is Hygraph? Hygraph (formerly GraphCMS) is a GraphQL-native headless CMS. Issue a public-read PAT for the environment you want to query. ## Use Hygraph with Draftbit * Schema discovered automatically via GraphQL introspection. * Queries, mutations, and subscriptions usable across screens and AI agents. * Auth headers configured once and reused for every operation. * Works with custom Hygraph schemas and federated graphs. ## Example `hygraph-query.graphql` ``` # Example query against Hygraph query GetItems { items(limit: 10) { id name createdAt } } ``` ## Use cases * Drive a blog, news feed, or content section from a headless CMS * Let non-engineers publish app content without a release * Localize copy and assets without code changes ## Authentication Add any required auth headers when you connect Hygraph. Headers are stored per app and applied to every operation. ### Use Hygraph in a Draftbit app today Start free, connect Hygraph in minutes, and ship with AI agents that know how to use it. [Start building free](/signup?psource=graphql-hygraph-midpage) ## Frequently asked questions ### What is the Hygraph GraphQL integration? Hygraph (formerly GraphCMS) is a GraphQL-native headless CMS. Issue a public-read PAT for the environment you want to query. ### How do I connect Hygraph to a Draftbit app? In your Draftbit app, go to Integrations and then GraphQL and choose Hygraph. Enter the endpoint URL and any auth headers. Draftbit introspects the schema and exposes its operations to your app and to the AI agents. ### Do I need to write GraphQL queries by hand? No. Once Draftbit has introspected the Hygraph schema, you can bind components to operations visually, and the AI agents can compose queries against the live schema. ### What can I build with Hygraph and Draftbit? Most teams use Hygraph as a headless CMS for their app. You might use Hygraph to drive a blog, news feed, or content section from a headless CMS, or to let non-engineers publish app content without a release. ## Related GraphQL * [](/graphql/contentful-graphql/) [Contentful (GraphQL)](/graphql/contentful-graphql/) [Headless CMS with a GraphQL Content API](/graphql/contentful-graphql/) * [](/graphql/datocms/) [DatoCMS](/graphql/datocms/) [Headless CMS with a fast GraphQL CDN](/graphql/datocms/) * [](/graphql/storyblok-graphql/) [Storyblok (GraphQL)](/graphql/storyblok-graphql/) [Visual headless CMS with a GraphQL API](/graphql/storyblok-graphql/) * [](/graphql/sanity-graphql/) [Sanity (GraphQL)](/graphql/sanity-graphql/) [Sanity Content Lake GraphQL API](/graphql/sanity-graphql/) [Get started free ](/signup?psource=graphql-hygraph-footer)[Browse all GraphQL](/graphql/) --- # Nhost GraphQL integration for Draftbit > Nhost GraphQL backend Connect Nhost's GraphQL endpoint to a Draftbit app and use it across screens and AI agents. 1. [Home](/) 2. / 3. [GraphQL](/graphql/) 4. / 5. Nhost ## What is Nhost? Nhost is a Postgres + Hasura + Auth stack designed for client apps. The Bearer JWT from Nhost Auth scopes queries by user. ## Use Nhost with Draftbit * Schema discovered automatically via GraphQL introspection. * Queries, mutations, and subscriptions usable across screens and AI agents. * Auth headers configured once and reused for every operation. * Works with custom Nhost schemas and federated graphs. ## Example `nhost-query.graphql` ``` # Example query against Nhost query GetItems { items(limit: 10) { id name createdAt } } ``` ## Use cases * Query exactly the fields a screen needs and nothing more * Compose data from multiple sources in a single round trip * Subscribe to live updates over a single GraphQL endpoint ## Authentication Add any required auth headers when you connect Nhost. Headers are stored per app and applied to every operation. ### Use Nhost in a Draftbit app today Start free, connect Nhost in minutes, and ship with AI agents that know how to use it. [Start building free](/signup?psource=graphql-nhost-midpage) ## Frequently asked questions ### What is the Nhost GraphQL integration? Nhost is a Postgres + Hasura + Auth stack designed for client apps. The Bearer JWT from Nhost Auth scopes queries by user. ### How do I connect Nhost to a Draftbit app? In your Draftbit app, go to Integrations and then GraphQL and choose Nhost. Enter the endpoint URL and any auth headers. Draftbit introspects the schema and exposes its operations to your app and to the AI agents. ### Do I need to write GraphQL queries by hand? No. Once Draftbit has introspected the Nhost schema, you can bind components to operations visually, and the AI agents can compose queries against the live schema. ### What can I build with Nhost and Draftbit? Most teams use Nhost as a GraphQL service for their app. You might use Nhost to query exactly the fields a screen needs and nothing more, or to compose data from multiple sources in a single round trip. ## Related GraphQL * [](/graphql/hasura-ddn/) [Hasura DDN](/graphql/hasura-ddn/) [Hasura's distributed data supergraph](/graphql/hasura-ddn/) * [](/graphql/aws-appsync/) [AWS AppSync](/graphql/aws-appsync/) [Managed GraphQL on AWS](/graphql/aws-appsync/) * [](/graphql/the-graph/) [The Graph](/graphql/the-graph/) [Decentralized subgraph indexer for web3](/graphql/the-graph/) * [](/graphql/goldsky/) [Goldsky](/graphql/goldsky/) [Subgraph hosting for web3](/graphql/goldsky/) [Get started free ](/signup?psource=graphql-nhost-footer)[Browse all GraphQL](/graphql/) --- # Prismic (GraphQL) GraphQL integration for Draftbit > Prismic GraphQL Content Delivery API Connect Prismic (GraphQL)'s GraphQL endpoint to a Draftbit app and use it across screens and AI agents. 1. [Home](/) 2. / 3. [GraphQL](/graphql/) 4. / 5. Prismic (GraphQL) ## What is Prismic (GraphQL)? Prismic ships a GraphQL endpoint per repository. The current ref pins queries to a content version; rotate it on publish. ## Use Prismic (GraphQL) with Draftbit * Schema discovered automatically via GraphQL introspection. * Queries, mutations, and subscriptions usable across screens and AI agents. * Auth headers configured once and reused for every operation. * Works with custom Prismic (GraphQL) schemas and federated graphs. ## More ways to connect Prismic Need a REST API connection instead? Use [the Prismic REST API integration](/integrations/prismic/) . ## Example `prismic-graphql-query.graphql` ``` # Example query against Prismic (GraphQL) query GetItems { items(limit: 10) { id name createdAt } } ``` ## Use cases * Drive a blog, news feed, or content section from a headless CMS * Let non-engineers publish app content without a release * Localize copy and assets without code changes ## Authentication Add any required auth headers when you connect Prismic (GraphQL). Headers are stored per app and applied to every operation. ### Use Prismic (GraphQL) in a Draftbit app today Start free, connect Prismic (GraphQL) in minutes, and ship with AI agents that know how to use it. [Start building free](/signup?psource=graphql-prismic-graphql-midpage) ## Frequently asked questions ### What is the Prismic (GraphQL) GraphQL integration? Prismic ships a GraphQL endpoint per repository. The current ref pins queries to a content version; rotate it on publish. ### How do I connect Prismic (GraphQL) to a Draftbit app? In your Draftbit app, go to Integrations and then GraphQL and choose Prismic (GraphQL). Enter the endpoint URL and any auth headers. Draftbit introspects the schema and exposes its operations to your app and to the AI agents. ### Do I need to write GraphQL queries by hand? No. Once Draftbit has introspected the Prismic (GraphQL) schema, you can bind components to operations visually, and the AI agents can compose queries against the live schema. ### What can I build with Prismic (GraphQL) and Draftbit? Most teams use Prismic (GraphQL) as a headless CMS for their app. You might use Prismic (GraphQL) to drive a blog, news feed, or content section from a headless CMS, or to let non-engineers publish app content without a release. ## Related GraphQL * [](/graphql/contentful-graphql/) [Contentful (GraphQL)](/graphql/contentful-graphql/) [Headless CMS with a GraphQL Content API](/graphql/contentful-graphql/) * [](/graphql/hygraph/) [Hygraph](/graphql/hygraph/) [GraphQL-native headless CMS](/graphql/hygraph/) * [](/graphql/datocms/) [DatoCMS](/graphql/datocms/) [Headless CMS with a fast GraphQL CDN](/graphql/datocms/) * [](/graphql/storyblok-graphql/) [Storyblok (GraphQL)](/graphql/storyblok-graphql/) [Visual headless CMS with a GraphQL API](/graphql/storyblok-graphql/) [Get started free ](/signup?psource=graphql-prismic-graphql-footer)[Browse all GraphQL](/graphql/) --- # Saleor GraphQL integration for Draftbit > Open-source headless commerce platform Connect Saleor's GraphQL endpoint to a Draftbit app and use it across screens and AI agents. 1. [Home](/) 2. / 3. [GraphQL](/graphql/) 4. / 5. Saleor ## What is Saleor? Saleor's storefront API supports anonymous and authenticated reads. The Bearer JWT scopes the request to a logged-in user. ## Use Saleor with Draftbit * Schema discovered automatically via GraphQL introspection. * Queries, mutations, and subscriptions usable across screens and AI agents. * Auth headers configured once and reused for every operation. * Works with custom Saleor schemas and federated graphs. ## Example `saleor-query.graphql` ``` # Example query against Saleor query GetItems { items(limit: 10) { id name createdAt } } ``` ## Use cases * Show a product catalog with prices and inventory * Add a cart, checkout, and order history * Sync orders between the storefront and the app ## Authentication Add any required auth headers when you connect Saleor. Headers are stored per app and applied to every operation. ### Use Saleor in a Draftbit app today Start free, connect Saleor in minutes, and ship with AI agents that know how to use it. [Start building free](/signup?psource=graphql-saleor-midpage) ## Frequently asked questions ### What is the Saleor GraphQL integration? Saleor's storefront API supports anonymous and authenticated reads. The Bearer JWT scopes the request to a logged-in user. ### How do I connect Saleor to a Draftbit app? In your Draftbit app, go to Integrations and then GraphQL and choose Saleor. Enter the endpoint URL and any auth headers. Draftbit introspects the schema and exposes its operations to your app and to the AI agents. ### Do I need to write GraphQL queries by hand? No. Once Draftbit has introspected the Saleor schema, you can bind components to operations visually, and the AI agents can compose queries against the live schema. ### What can I build with Saleor and Draftbit? Most teams use Saleor as a commerce platform for their app. You might use Saleor to show a product catalog with prices and inventory, or to add a cart, checkout, and order history. ## Related GraphQL * [](/graphql/shopify-storefront/) [Shopify Storefront](/graphql/shopify-storefront/) [Shopify Storefront GraphQL API](/graphql/shopify-storefront/) * [](/graphql/bigcommerce-storefront/) [BigCommerce Storefront](/graphql/bigcommerce-storefront/) [BigCommerce Storefront GraphQL API](/graphql/bigcommerce-storefront/) * [](/graphql/vendure/) [Vendure](/graphql/vendure/) [Vendure Shop API for storefronts](/graphql/vendure/) * [](/graphql/crystallize/) [Crystallize](/graphql/crystallize/) [Crystallize Catalogue API](/graphql/crystallize/) [Get started free ](/signup?psource=graphql-saleor-footer)[Browse all GraphQL](/graphql/) --- # Sanity (GraphQL) GraphQL integration for Draftbit > Sanity Content Lake GraphQL API Connect Sanity (GraphQL)'s GraphQL endpoint to a Draftbit app and use it across screens and AI agents. 1. [Home](/) 2. / 3. [GraphQL](/graphql/) 4. / 5. Sanity (GraphQL) ## What is Sanity (GraphQL)? Sanity exposes a deployed GraphQL API per dataset. For public datasets no auth is needed; otherwise paste a viewer token. ## Use Sanity (GraphQL) with Draftbit * Schema discovered automatically via GraphQL introspection. * Queries, mutations, and subscriptions usable across screens and AI agents. * Auth headers configured once and reused for every operation. * Works with custom Sanity (GraphQL) schemas and federated graphs. ## More ways to connect Sanity Need a REST API connection instead? Use [the Sanity REST API integration](/integrations/sanity/) . ## Example `sanity-graphql-query.graphql` ``` # Example query against Sanity (GraphQL) query GetItems { items(limit: 10) { id name createdAt } } ``` ## Use cases * Drive a blog, news feed, or content section from a headless CMS * Let non-engineers publish app content without a release * Localize copy and assets without code changes ## Authentication Add any required auth headers when you connect Sanity (GraphQL). Headers are stored per app and applied to every operation. ### Use Sanity (GraphQL) in a Draftbit app today Start free, connect Sanity (GraphQL) in minutes, and ship with AI agents that know how to use it. [Start building free](/signup?psource=graphql-sanity-graphql-midpage) ## Frequently asked questions ### What is the Sanity (GraphQL) GraphQL integration? Sanity exposes a deployed GraphQL API per dataset. For public datasets no auth is needed; otherwise paste a viewer token. ### How do I connect Sanity (GraphQL) to a Draftbit app? In your Draftbit app, go to Integrations and then GraphQL and choose Sanity (GraphQL). Enter the endpoint URL and any auth headers. Draftbit introspects the schema and exposes its operations to your app and to the AI agents. ### Do I need to write GraphQL queries by hand? No. Once Draftbit has introspected the Sanity (GraphQL) schema, you can bind components to operations visually, and the AI agents can compose queries against the live schema. ### What can I build with Sanity (GraphQL) and Draftbit? Most teams use Sanity (GraphQL) as a headless CMS for their app. You might use Sanity (GraphQL) to drive a blog, news feed, or content section from a headless CMS, or to let non-engineers publish app content without a release. ## Related GraphQL * [](/graphql/contentful-graphql/) [Contentful (GraphQL)](/graphql/contentful-graphql/) [Headless CMS with a GraphQL Content API](/graphql/contentful-graphql/) * [](/graphql/hygraph/) [Hygraph](/graphql/hygraph/) [GraphQL-native headless CMS](/graphql/hygraph/) * [](/graphql/datocms/) [DatoCMS](/graphql/datocms/) [Headless CMS with a fast GraphQL CDN](/graphql/datocms/) * [](/graphql/storyblok-graphql/) [Storyblok (GraphQL)](/graphql/storyblok-graphql/) [Visual headless CMS with a GraphQL API](/graphql/storyblok-graphql/) [Get started free ](/signup?psource=graphql-sanity-graphql-footer)[Browse all GraphQL](/graphql/) --- # Shopify Storefront GraphQL integration for Draftbit > Shopify Storefront GraphQL API Connect Shopify Storefront's GraphQL endpoint to a Draftbit app and use it across screens and AI agents. 1. [Home](/) 2. / 3. [GraphQL](/graphql/) 4. / 5. Shopify Storefront ## What is Shopify Storefront? Shopify's Storefront API is designed for client apps — products, collections, carts, and checkout. Use a public Storefront access token. ## Use Shopify Storefront with Draftbit * Schema discovered automatically via GraphQL introspection. * Queries, mutations, and subscriptions usable across screens and AI agents. * Auth headers configured once and reused for every operation. * Works with custom Shopify Storefront schemas and federated graphs. ## Example `shopify-storefront-query.graphql` ``` # Example query against Shopify Storefront query GetItems { items(limit: 10) { id name createdAt } } ``` ## Use cases * Show a product catalog with prices and inventory * Add a cart, checkout, and order history * Sync orders between the storefront and the app ## Authentication Add any required auth headers when you connect Shopify Storefront. Headers are stored per app and applied to every operation. ### Use Shopify Storefront in a Draftbit app today Start free, connect Shopify Storefront in minutes, and ship with AI agents that know how to use it. [Start building free](/signup?psource=graphql-shopify-storefront-midpage) ## Frequently asked questions ### What is the Shopify Storefront GraphQL integration? Shopify's Storefront API is designed for client apps — products, collections, carts, and checkout. Use a public Storefront access token. ### How do I connect Shopify Storefront to a Draftbit app? In your Draftbit app, go to Integrations and then GraphQL and choose Shopify Storefront. Enter the endpoint URL and any auth headers. Draftbit introspects the schema and exposes its operations to your app and to the AI agents. ### Do I need to write GraphQL queries by hand? No. Once Draftbit has introspected the Shopify Storefront schema, you can bind components to operations visually, and the AI agents can compose queries against the live schema. ### What can I build with Shopify Storefront and Draftbit? Most teams use Shopify Storefront as a commerce platform for their app. You might use Shopify Storefront to show a product catalog with prices and inventory, or to add a cart, checkout, and order history. ## Related GraphQL * [](/graphql/bigcommerce-storefront/) [BigCommerce Storefront](/graphql/bigcommerce-storefront/) [BigCommerce Storefront GraphQL API](/graphql/bigcommerce-storefront/) * [](/graphql/saleor/) [Saleor](/graphql/saleor/) [Open-source headless commerce platform](/graphql/saleor/) * [](/graphql/vendure/) [Vendure](/graphql/vendure/) [Vendure Shop API for storefronts](/graphql/vendure/) * [](/graphql/crystallize/) [Crystallize](/graphql/crystallize/) [Crystallize Catalogue API](/graphql/crystallize/) [Get started free ](/signup?psource=graphql-shopify-storefront-footer)[Browse all GraphQL](/graphql/) --- # Storyblok (GraphQL) GraphQL integration for Draftbit > Visual headless CMS with a GraphQL API Connect Storyblok (GraphQL)'s GraphQL endpoint to a Draftbit app and use it across screens and AI agents. 1. [Home](/) 2. / 3. [GraphQL](/graphql/) 4. / 5. Storyblok (GraphQL) ## What is Storyblok (GraphQL)? Storyblok's GraphQL Content Delivery API. Token + Version are both required — pick \`published\` for production traffic and \`draft\` for previews. ## Use Storyblok (GraphQL) with Draftbit * Schema discovered automatically via GraphQL introspection. * Queries, mutations, and subscriptions usable across screens and AI agents. * Auth headers configured once and reused for every operation. * Works with custom Storyblok (GraphQL) schemas and federated graphs. ## More ways to connect Storyblok Need a REST API connection instead? Use [the Storyblok REST API integration](/integrations/storyblok/) . ## Example `storyblok-graphql-query.graphql` ``` # Example query against Storyblok (GraphQL) query GetItems { items(limit: 10) { id name createdAt } } ``` ## Use cases * Drive a blog, news feed, or content section from a headless CMS * Let non-engineers publish app content without a release * Localize copy and assets without code changes ## Authentication Add any required auth headers when you connect Storyblok (GraphQL). Headers are stored per app and applied to every operation. ### Use Storyblok (GraphQL) in a Draftbit app today Start free, connect Storyblok (GraphQL) in minutes, and ship with AI agents that know how to use it. [Start building free](/signup?psource=graphql-storyblok-graphql-midpage) ## Frequently asked questions ### What is the Storyblok (GraphQL) GraphQL integration? Storyblok's GraphQL Content Delivery API. Token + Version are both required — pick \`published\` for production traffic and \`draft\` for previews. ### How do I connect Storyblok (GraphQL) to a Draftbit app? In your Draftbit app, go to Integrations and then GraphQL and choose Storyblok (GraphQL). Enter the endpoint URL and any auth headers. Draftbit introspects the schema and exposes its operations to your app and to the AI agents. ### Do I need to write GraphQL queries by hand? No. Once Draftbit has introspected the Storyblok (GraphQL) schema, you can bind components to operations visually, and the AI agents can compose queries against the live schema. ### What can I build with Storyblok (GraphQL) and Draftbit? Most teams use Storyblok (GraphQL) as a headless CMS for their app. You might use Storyblok (GraphQL) to drive a blog, news feed, or content section from a headless CMS, or to let non-engineers publish app content without a release. ## Related GraphQL * [](/graphql/contentful-graphql/) [Contentful (GraphQL)](/graphql/contentful-graphql/) [Headless CMS with a GraphQL Content API](/graphql/contentful-graphql/) * [](/graphql/hygraph/) [Hygraph](/graphql/hygraph/) [GraphQL-native headless CMS](/graphql/hygraph/) * [](/graphql/datocms/) [DatoCMS](/graphql/datocms/) [Headless CMS with a fast GraphQL CDN](/graphql/datocms/) * [](/graphql/sanity-graphql/) [Sanity (GraphQL)](/graphql/sanity-graphql/) [Sanity Content Lake GraphQL API](/graphql/sanity-graphql/) [Get started free ](/signup?psource=graphql-storyblok-graphql-footer)[Browse all GraphQL](/graphql/) --- # Strapi (GraphQL) GraphQL integration for Draftbit > Self-hosted headless CMS GraphQL plugin Connect Strapi (GraphQL)'s GraphQL endpoint to a Draftbit app and use it across screens and AI agents. 1. [Home](/) 2. / 3. [GraphQL](/graphql/) 4. / 5. Strapi (GraphQL) ## What is Strapi (GraphQL)? Strapi v5's GraphQL plugin. Use a public API token (read-only, scoped to permitted content types) — safe to ship in client apps. ## Use Strapi (GraphQL) with Draftbit * Schema discovered automatically via GraphQL introspection. * Queries, mutations, and subscriptions usable across screens and AI agents. * Auth headers configured once and reused for every operation. * Works with custom Strapi (GraphQL) schemas and federated graphs. ## More ways to connect Strapi Need a REST API connection instead? Use [the Strapi REST API integration](/integrations/strapi/) . ## Example `strapi-graphql-query.graphql` ``` # Example query against Strapi (GraphQL) query GetItems { items(limit: 10) { id name createdAt } } ``` ## Use cases * Drive a blog, news feed, or content section from a headless CMS * Let non-engineers publish app content without a release * Localize copy and assets without code changes ## Authentication Add any required auth headers when you connect Strapi (GraphQL). Headers are stored per app and applied to every operation. ### Use Strapi (GraphQL) in a Draftbit app today Start free, connect Strapi (GraphQL) in minutes, and ship with AI agents that know how to use it. [Start building free](/signup?psource=graphql-strapi-graphql-midpage) ## Frequently asked questions ### What is the Strapi (GraphQL) GraphQL integration? Strapi v5's GraphQL plugin. Use a public API token (read-only, scoped to permitted content types) — safe to ship in client apps. ### How do I connect Strapi (GraphQL) to a Draftbit app? In your Draftbit app, go to Integrations and then GraphQL and choose Strapi (GraphQL). Enter the endpoint URL and any auth headers. Draftbit introspects the schema and exposes its operations to your app and to the AI agents. ### Do I need to write GraphQL queries by hand? No. Once Draftbit has introspected the Strapi (GraphQL) schema, you can bind components to operations visually, and the AI agents can compose queries against the live schema. ### What can I build with Strapi (GraphQL) and Draftbit? Most teams use Strapi (GraphQL) as a headless CMS for their app. You might use Strapi (GraphQL) to drive a blog, news feed, or content section from a headless CMS, or to let non-engineers publish app content without a release. ## Related GraphQL * [](/graphql/contentful-graphql/) [Contentful (GraphQL)](/graphql/contentful-graphql/) [Headless CMS with a GraphQL Content API](/graphql/contentful-graphql/) * [](/graphql/hygraph/) [Hygraph](/graphql/hygraph/) [GraphQL-native headless CMS](/graphql/hygraph/) * [](/graphql/datocms/) [DatoCMS](/graphql/datocms/) [Headless CMS with a fast GraphQL CDN](/graphql/datocms/) * [](/graphql/storyblok-graphql/) [Storyblok (GraphQL)](/graphql/storyblok-graphql/) [Visual headless CMS with a GraphQL API](/graphql/storyblok-graphql/) [Get started free ](/signup?psource=graphql-strapi-graphql-footer)[Browse all GraphQL](/graphql/) --- # Supabase GraphQL GraphQL integration for Draftbit > GraphQL over your Supabase Postgres (pg_graphql) Connect Supabase GraphQL's GraphQL endpoint to a Draftbit app and use it across screens and AI agents. 1. [Home](/) 2. / 3. [GraphQL](/graphql/) 4. / 5. Supabase GraphQL ## What is Supabase GraphQL? Supabase exposes pg\_graphql automatically. The anon key is safe to ship in clients; an optional Bearer JWT from Supabase Auth scopes queries by user. ## Use Supabase GraphQL with Draftbit * Schema discovered automatically via GraphQL introspection. * Queries, mutations, and subscriptions usable across screens and AI agents. * Auth headers configured once and reused for every operation. * Works with custom Supabase GraphQL schemas and federated graphs. ## More ways to connect Supabase Need a REST API connection instead? Use [the Supabase REST API integration](/integrations/supabase/) . Want AI agents to query and act on Supabase while you build? Use [the Supabase MCP server](/mcp/supabase/) . ## Example `supabase-graphql-query.graphql` ``` # Example query against Supabase GraphQL query GetItems { items(limit: 10) { id name createdAt } } ``` ## Use cases * Power a mobile app with a hosted database and APIs * Add search, filtering, and pagination to a list-driven feature * Read and write app data without managing your own server ## Authentication Add any required auth headers when you connect Supabase GraphQL. Headers are stored per app and applied to every operation. ### Use Supabase GraphQL in a Draftbit app today Start free, connect Supabase GraphQL in minutes, and ship with AI agents that know how to use it. [Start building free](/signup?psource=graphql-supabase-graphql-midpage) ## Frequently asked questions ### What is the Supabase GraphQL GraphQL integration? Supabase exposes pg\_graphql automatically. The anon key is safe to ship in clients; an optional Bearer JWT from Supabase Auth scopes queries by user. ### How do I connect Supabase GraphQL to a Draftbit app? In your Draftbit app, go to Integrations and then GraphQL and choose Supabase GraphQL. Enter the endpoint URL and any auth headers. Draftbit introspects the schema and exposes its operations to your app and to the AI agents. ### Do I need to write GraphQL queries by hand? No. Once Draftbit has introspected the Supabase GraphQL schema, you can bind components to operations visually, and the AI agents can compose queries against the live schema. ### What can I build with Supabase GraphQL and Draftbit? Most teams use Supabase GraphQL as a backend platform for their app. You might use Supabase GraphQL to power a mobile app with a hosted database and APIs, or to add search, filtering, and pagination to a list-driven feature. ## Related GraphQL * [](/graphql/hasura-cloud/) [Hasura Cloud](/graphql/hasura-cloud/) [Instant GraphQL on your Postgres database](/graphql/hasura-cloud/) [Get started free ](/signup?psource=graphql-supabase-graphql-footer)[Browse all GraphQL](/graphql/) --- # The Graph GraphQL integration for Draftbit > Decentralized subgraph indexer for web3 Connect The Graph's GraphQL endpoint to a Draftbit app and use it across screens and AI agents. 1. [Home](/) 2. / 3. [GraphQL](/graphql/) 4. / 5. The Graph ## What is The Graph? The Graph's decentralized network exposes subgraphs via GraphQL. The API key sits in the URL path; rate-limit it to your origins for client use. ## Use The Graph with Draftbit * Schema discovered automatically via GraphQL introspection. * Queries, mutations, and subscriptions usable across screens and AI agents. * Auth headers configured once and reused for every operation. * Works with custom The Graph schemas and federated graphs. ## Example `the-graph-query.graphql` ``` # Example query against The Graph query GetItems { items(limit: 10) { id name createdAt } } ``` ## Use cases * Query exactly the fields a screen needs and nothing more * Compose data from multiple sources in a single round trip * Subscribe to live updates over a single GraphQL endpoint ## Authentication Add any required auth headers when you connect The Graph. Headers are stored per app and applied to every operation. ### Use The Graph in a Draftbit app today Start free, connect The Graph in minutes, and ship with AI agents that know how to use it. [Start building free](/signup?psource=graphql-the-graph-midpage) ## Frequently asked questions ### What is the The Graph GraphQL integration? The Graph's decentralized network exposes subgraphs via GraphQL. The API key sits in the URL path; rate-limit it to your origins for client use. ### How do I connect The Graph to a Draftbit app? In your Draftbit app, go to Integrations and then GraphQL and choose The Graph. Enter the endpoint URL and any auth headers. Draftbit introspects the schema and exposes its operations to your app and to the AI agents. ### Do I need to write GraphQL queries by hand? No. Once Draftbit has introspected the The Graph schema, you can bind components to operations visually, and the AI agents can compose queries against the live schema. ### What can I build with The Graph and Draftbit? Most teams use The Graph as a GraphQL service for their app. You might use The Graph to query exactly the fields a screen needs and nothing more, or to compose data from multiple sources in a single round trip. ## Related GraphQL * [](/graphql/hasura-ddn/) [Hasura DDN](/graphql/hasura-ddn/) [Hasura's distributed data supergraph](/graphql/hasura-ddn/) * [](/graphql/aws-appsync/) [AWS AppSync](/graphql/aws-appsync/) [Managed GraphQL on AWS](/graphql/aws-appsync/) * [](/graphql/nhost/) [Nhost](/graphql/nhost/) [Nhost GraphQL backend](/graphql/nhost/) * [](/graphql/goldsky/) [Goldsky](/graphql/goldsky/) [Subgraph hosting for web3](/graphql/goldsky/) [Get started free ](/signup?psource=graphql-the-graph-footer)[Browse all GraphQL](/graphql/) --- # Vendure GraphQL integration for Draftbit > Vendure Shop API for storefronts Connect Vendure's GraphQL endpoint to a Draftbit app and use it across screens and AI agents. 1. [Home](/) 2. / 3. [GraphQL](/graphql/) 4. / 5. Vendure ## What is Vendure? The Vendure Shop API is the public storefront endpoint. Bearer-token auth uses the \`vendure-auth-token\` returned by login mutations. ## Use Vendure with Draftbit * Schema discovered automatically via GraphQL introspection. * Queries, mutations, and subscriptions usable across screens and AI agents. * Auth headers configured once and reused for every operation. * Works with custom Vendure schemas and federated graphs. ## Example `vendure-query.graphql` ``` # Example query against Vendure query GetItems { items(limit: 10) { id name createdAt } } ``` ## Use cases * Show a product catalog with prices and inventory * Add a cart, checkout, and order history * Sync orders between the storefront and the app ## Authentication Add any required auth headers when you connect Vendure. Headers are stored per app and applied to every operation. ### Use Vendure in a Draftbit app today Start free, connect Vendure in minutes, and ship with AI agents that know how to use it. [Start building free](/signup?psource=graphql-vendure-midpage) ## Frequently asked questions ### What is the Vendure GraphQL integration? The Vendure Shop API is the public storefront endpoint. Bearer-token auth uses the \`vendure-auth-token\` returned by login mutations. ### How do I connect Vendure to a Draftbit app? In your Draftbit app, go to Integrations and then GraphQL and choose Vendure. Enter the endpoint URL and any auth headers. Draftbit introspects the schema and exposes its operations to your app and to the AI agents. ### Do I need to write GraphQL queries by hand? No. Once Draftbit has introspected the Vendure schema, you can bind components to operations visually, and the AI agents can compose queries against the live schema. ### What can I build with Vendure and Draftbit? Most teams use Vendure as a commerce platform for their app. You might use Vendure to show a product catalog with prices and inventory, or to add a cart, checkout, and order history. ## Related GraphQL * [](/graphql/shopify-storefront/) [Shopify Storefront](/graphql/shopify-storefront/) [Shopify Storefront GraphQL API](/graphql/shopify-storefront/) * [](/graphql/bigcommerce-storefront/) [BigCommerce Storefront](/graphql/bigcommerce-storefront/) [BigCommerce Storefront GraphQL API](/graphql/bigcommerce-storefront/) * [](/graphql/saleor/) [Saleor](/graphql/saleor/) [Open-source headless commerce platform](/graphql/saleor/) * [](/graphql/crystallize/) [Crystallize](/graphql/crystallize/) [Crystallize Catalogue API](/graphql/crystallize/) [Get started free ](/signup?psource=graphql-vendure-footer)[Browse all GraphQL](/graphql/) --- # Webiny GraphQL integration for Draftbit > Self-hosted headless CMS GraphQL Read API Connect Webiny's GraphQL endpoint to a Draftbit app and use it across screens and AI agents. 1. [Home](/) 2. / 3. [GraphQL](/graphql/) 4. / 5. Webiny ## What is Webiny? Webiny's Read API delivers published content via GraphQL. Use a PAT from the Webiny admin (API Keys). ## Use Webiny with Draftbit * Schema discovered automatically via GraphQL introspection. * Queries, mutations, and subscriptions usable across screens and AI agents. * Auth headers configured once and reused for every operation. * Works with custom Webiny schemas and federated graphs. ## Example `webiny-query.graphql` ``` # Example query against Webiny query GetItems { items(limit: 10) { id name createdAt } } ``` ## Use cases * Drive a blog, news feed, or content section from a headless CMS * Let non-engineers publish app content without a release * Localize copy and assets without code changes ## Authentication Add any required auth headers when you connect Webiny. Headers are stored per app and applied to every operation. ### Use Webiny in a Draftbit app today Start free, connect Webiny in minutes, and ship with AI agents that know how to use it. [Start building free](/signup?psource=graphql-webiny-midpage) ## Frequently asked questions ### What is the Webiny GraphQL integration? Webiny's Read API delivers published content via GraphQL. Use a PAT from the Webiny admin (API Keys). ### How do I connect Webiny to a Draftbit app? In your Draftbit app, go to Integrations and then GraphQL and choose Webiny. Enter the endpoint URL and any auth headers. Draftbit introspects the schema and exposes its operations to your app and to the AI agents. ### Do I need to write GraphQL queries by hand? No. Once Draftbit has introspected the Webiny schema, you can bind components to operations visually, and the AI agents can compose queries against the live schema. ### What can I build with Webiny and Draftbit? Most teams use Webiny as a headless CMS for their app. You might use Webiny to drive a blog, news feed, or content section from a headless CMS, or to let non-engineers publish app content without a release. ## Related GraphQL * [](/graphql/contentful-graphql/) [Contentful (GraphQL)](/graphql/contentful-graphql/) [Headless CMS with a GraphQL Content API](/graphql/contentful-graphql/) * [](/graphql/hygraph/) [Hygraph](/graphql/hygraph/) [GraphQL-native headless CMS](/graphql/hygraph/) * [](/graphql/datocms/) [DatoCMS](/graphql/datocms/) [Headless CMS with a fast GraphQL CDN](/graphql/datocms/) * [](/graphql/storyblok-graphql/) [Storyblok (GraphQL)](/graphql/storyblok-graphql/) [Visual headless CMS with a GraphQL API](/graphql/storyblok-graphql/) [Get started free ](/signup?psource=graphql-webiny-footer)[Browse all GraphQL](/graphql/) --- # WPGraphQL GraphQL integration for Draftbit > GraphQL for WordPress Connect WPGraphQL's GraphQL endpoint to a Draftbit app and use it across screens and AI agents. 1. [Home](/) 2. / 3. [GraphQL](/graphql/) 4. / 5. WPGraphQL ## What is WPGraphQL? WPGraphQL exposes a WordPress site as a GraphQL API. Use a JWT from the JWT Authentication plugin for authenticated reads, or leave blank for public content. ## Use WPGraphQL with Draftbit * Schema discovered automatically via GraphQL introspection. * Queries, mutations, and subscriptions usable across screens and AI agents. * Auth headers configured once and reused for every operation. * Works with custom WPGraphQL schemas and federated graphs. ## More ways to connect WPGraphQL Need a REST API connection instead? Use [the WordPress REST API integration](/integrations/wordpress/) . ## Example `wpgraphql-query.graphql` ``` # Example query against WPGraphQL query GetItems { items(limit: 10) { id name createdAt } } ``` ## Use cases * Drive a blog, news feed, or content section from a headless CMS * Let non-engineers publish app content without a release * Localize copy and assets without code changes ## Authentication Add any required auth headers when you connect WPGraphQL. Headers are stored per app and applied to every operation. ### Use WPGraphQL in a Draftbit app today Start free, connect WPGraphQL in minutes, and ship with AI agents that know how to use it. [Start building free](/signup?psource=graphql-wpgraphql-midpage) ## Frequently asked questions ### What is the WPGraphQL GraphQL integration? WPGraphQL exposes a WordPress site as a GraphQL API. Use a JWT from the JWT Authentication plugin for authenticated reads, or leave blank for public content. ### How do I connect WPGraphQL to a Draftbit app? In your Draftbit app, go to Integrations and then GraphQL and choose WPGraphQL. Enter the endpoint URL and any auth headers. Draftbit introspects the schema and exposes its operations to your app and to the AI agents. ### Do I need to write GraphQL queries by hand? No. Once Draftbit has introspected the WPGraphQL schema, you can bind components to operations visually, and the AI agents can compose queries against the live schema. ### What can I build with WPGraphQL and Draftbit? Most teams use WPGraphQL as a headless CMS for their app. You might use WPGraphQL to drive a blog, news feed, or content section from a headless CMS, or to let non-engineers publish app content without a release. ## Related GraphQL * [](/graphql/contentful-graphql/) [Contentful (GraphQL)](/graphql/contentful-graphql/) [Headless CMS with a GraphQL Content API](/graphql/contentful-graphql/) * [](/graphql/hygraph/) [Hygraph](/graphql/hygraph/) [GraphQL-native headless CMS](/graphql/hygraph/) * [](/graphql/datocms/) [DatoCMS](/graphql/datocms/) [Headless CMS with a fast GraphQL CDN](/graphql/datocms/) * [](/graphql/storyblok-graphql/) [Storyblok (GraphQL)](/graphql/storyblok-graphql/) [Visual headless CMS with a GraphQL API](/graphql/storyblok-graphql/) [Get started free ](/signup?psource=graphql-wpgraphql-footer)[Browse all GraphQL](/graphql/) --- # AI gets you started. We get you shipped. > We pair a hand-picked team of designers and developers with modern AI tooling. We ship real apps, fast, for 25% the time and cost of an agency. We ship real software for founders, startups, and teams. A full-time, US-based studio of designers, developers, and product managers — we plug into your roadmap and put your software on the App Stores for about 25% of an agency's time and cost. [Book a 30-min intro ](/experts-requests)[See how we work ](#engagement) \#proj-northstar Private channel · 4 humans, 1 PM live Lead designer · 9:14 Pushed the onboarding revisions to staging. No app-store gore. Senior dev · 9:31 Pagination is in. Search is wired to the new endpoint. TestFlight before EOD. You You · 9:44 Love it. Move the metrics tab above settings before tomorrow's investor demo? Day 12 of 42 Avg. time to TestFlight 14 days On-Demand Team Expert Talent Pause Anytime 48-Hour Cycles Roads to success ## Pick the relationship. Every engagement is shaped around where your app actually is — not where a sales deck assumes it is. Start small, scale up, pause whenever. * ### [Start from a sketch on a napkin.](/experts-requests) [Bring an idea, a Figma file, or a one-line wishlist. We scope it, design it, and ship it — in weeks, not quarters.](/experts-requests) [4 – 12 weeks · MVP to v1](/experts-requests) [Get an estimate ](/experts-requests) * ### [Resuscitate a vibe-coded app.](/experts-requests) [AI got you 80% there. Now it is stuck and so are you. We untangle the logic, rebuild the broken bits, and hand back something you can keep building on.](/experts-requests) [Rescue · 2 – 6 weeks](/experts-requests) [Get it unstuck ](/experts-requests) * ### [Stand alongside your team, month to month.](/services#monthly) [A dedicated crew — design, dev, backend, QA — pointed at your roadmap. Daily updates over Slack. Pause whenever you like.](/services#monthly) [Retainer · from $2,000/mo](/services#monthly) [Meet the team ](/services#monthly) * ### [Keep an expert in your corner.](/services#advisory) [You build, we guide. Code review, architecture, troubleshooting — a senior advisor on call so you stop guessing.](/services#advisory) [Advisory · $150/week](/services#advisory) [Add an advisor ](/services#advisory) [Compare every option ](/services) What we handle ## The whole thing, or just the part that's got you stuck. One studio for the entire surface of your app — design, frontend, backend, integrations, store submission, the polish. No vendor stitching, no handoffs that drop the ball. * Design & UI/UX * Screens & navigation * Backend, auth, APIs * Custom components * Stripe, Twilio, anything else wired up * App Store & Google Play submission * Performance audits & code cleanup * 1-on-1 training [Scope a project ](/experts-requests) Success stories ## Real teams. Real launches. A few of the apps we've helped get from sketch to App Store.  ### Trident Mindset [tridentmindset.com ](https://www.tridentmindset.com/) Mental toughness and mental health training, built by Navy SEALs and neuroscientists. [App Store ](https://apps.apple.com/us/app/trident-mindset/id1616593368)[Google Play ](https://play.google.com/store/apps/details?id=com.pikwxwpq5b1i.plgj6rakapp)  ### Montage [searchmontage.com ](https://searchmontage.com/) Discover and shop the styles you see on TV, tagged from thousands of shows and movies. [App Store ](https://apps.apple.com/us/app/montage-search-tv-style/id6445878135)[Google Play ](https://play.google.com/store/apps/details?id=com.searchmontage.app)  ### StoryNest [storynest.ca ](https://www.storynest.ca/) Gentle, ad-free audio stories for kids ages 3–9, curated by parents. [App Store ](https://apps.apple.com/us/app/storynest-kids-stories-songs/id6446899129)[Google Play ](https://play.google.com/store/apps/details?id=ca.storynest.storynestapp) [See all customer stories ](/customers) How we ship Updates every 2 days,\ not every 2 weeks. ------------------ ### Tell us about the work. A 30-minute call. We listen, ask the right questions, and write back with a plan. ### Choose how to engage. Fixed package, monthly retainer, or advisory. No long contracts, no salesy back-and-forth. ### We ship every 48 hours. Updates over Slack and email. You see progress on real screens, not status decks. [ Pick a time for the 30-min call](https://app.cal.com/team/draftbit/experts-lb/embed?layout=week_view\&embedType=inline\&embed=experts-lb) Build it yourself ## Take full control and drive. The same visual editor, agents, and device previews we use internally. Open the workspace yourself — and bring in an Expert when you want one. [Start building free ](/signup)[Tour the platform](/platform) Every Platform plan can layer an Expert on top. [You build, we guide →](/services#advisory) ### Claude & Codex on tap Switch models per task. Default to the best agent for the job. ### Bring your own keys Plug in Anthropic and OpenAI keys directly. No markup, no middlemen. ### Native app previews Run your build on a real device while you work. iOS, Android, web. ### One-click publish From idea to App Store from inside the workspace. Run the math ## What you'd spend vs what you'd save. Four inputs. One honest number. We ship in roughly a third the time and a fraction of the cost of building it in-house — slide what your project actually looks like. Your project 01\. Engineers you'd hire 3 3 02\. Designers & PMs 1 1 03\. Project complexity Standard MVP 2 04\. Weeks until you need it live 12 wk 12 Your projected upside 3× return $45,000 saved vs. building it in-house, shipped in half the time. * In-house cost $60,000 * Draftbit $15,000 * Ship in 6 wk * Ahead of your deadline 6 wk [Get a real quote ](/experts-requests) Compared to building this in-house. Ready when you are ## Tell us about the work. You'll hear back today. No long forms, no qualification gauntlet. A real person reads what you send and replies with a real next step. [Start the conversation ](/experts-requests)[See the menu](/services) Avg. reply < 4 hours --- # REST APIs for your Draftbit app > Connect REST APIs to your Draftbit app. Built-in support for Supabase, Airtable, Firebase, Xano, Algolia, Cloudinary, Webflow, and dozens more. REST API integrations Connect REST APIs to a Draftbit app without writing fetch code. 45 integrations come preconfigured — paste your key, point at your data, and start binding endpoints to screens, forms, lists, and AI agent actions. ## What is a REST integration in Draftbit? A REST integration is a connection your Draftbit app keeps to a third-party HTTP API. Endpoints are described once — base URL, headers, request body templates — and become available across the app builder. Bind them visually to screens, drive list views from them, or let an AI agent call them while building. Auth secrets stay scoped to the app and never appear in generated client code. Connecting a GraphQL endpoint instead? Use a [GraphQL integration](/graphql/). To let AI agents act on a service while you build, add an [MCP server](/mcp/). * [](/integrations/airtable/) [Airtable](/integrations/airtable/) [Use Airtable bases as app data sources](/integrations/airtable/) [Read more →](/integrations/airtable/) * [](/integrations/algolia/) [Algolia](/integrations/algolia/) [Search Algolia indexes from apps](/integrations/algolia/) [Read more →](/integrations/algolia/) * [](/integrations/appwrite/) [Appwrite](/integrations/appwrite/) [Connect to Appwrite databases and storage](/integrations/appwrite/) [Read more →](/integrations/appwrite/) * [](/integrations/auth0-oidc/) [Auth0 OIDC](/integrations/auth0-oidc/) [Use Auth0 OIDC token and profile endpoints](/integrations/auth0-oidc/) [Read more →](/integrations/auth0-oidc/) * [](/integrations/backendless/) [Backendless](/integrations/backendless/) [Backendless app data, users, and backend services](/integrations/backendless/) [Read more →](/integrations/backendless/) * [](/integrations/blockchair/) [Blockchair](/integrations/blockchair/) [Read multi-chain blockchain data](/integrations/blockchair/) [Read more →](/integrations/blockchair/) * [](/integrations/bubble/) [Bubble](/integrations/bubble/) [Connect to Bubble Data API objects](/integrations/bubble/) [Read more →](/integrations/bubble/) * [](/integrations/clerk/) [Clerk](/integrations/clerk/) [User authentication and management](/integrations/clerk/) [Read more →](/integrations/clerk/) * [](/integrations/cloud-firestore/) [Cloud Firestore](/integrations/cloud-firestore/) [Read and write Firestore documents over REST](/integrations/cloud-firestore/) [Read more →](/integrations/cloud-firestore/) * [](/integrations/cloudinary/) [Cloudinary](/integrations/cloudinary/) [Upload media with unsigned Cloudinary presets](/integrations/cloudinary/) [Read more →](/integrations/cloudinary/) * [](/integrations/coincap/) [CoinCap](/integrations/coincap/) [Fetch cryptocurrency asset and market data](/integrations/coincap/) [Read more →](/integrations/coincap/) * [](/integrations/coingecko/) [CoinGecko](/integrations/coingecko/) [Fetch crypto prices and market data](/integrations/coingecko/) [Read more →](/integrations/coingecko/) * [](/integrations/coinpaprika/) [CoinPaprika](/integrations/coinpaprika/) [Fetch crypto coins, tickers, and exchange data](/integrations/coinpaprika/) [Read more →](/integrations/coinpaprika/) * [](/integrations/contentful/) [Contentful](/integrations/contentful/) [Fetch published content from Contentful](/integrations/contentful/) [Read more →](/integrations/contentful/) * [](/integrations/defillama/) [DefiLlama](/integrations/defillama/) [Fetch DeFi TVL and protocol data](/integrations/defillama/) [Read more →](/integrations/defillama/) * [](/integrations/dex-screener/) [DEX Screener](/integrations/dex-screener/) [Search DEX pairs and token markets](/integrations/dex-screener/) [Read more →](/integrations/dex-screener/) * [](/integrations/directus/) [Directus](/integrations/directus/) [Read and manage Directus collections](/integrations/directus/) [Read more →](/integrations/directus/) * [](/integrations/etherscan/) [Etherscan](/integrations/etherscan/) [Read Ethereum account and transaction data](/integrations/etherscan/) [Read more →](/integrations/etherscan/) * [](/integrations/example-data/) [Example Data](/integrations/example-data/) [Draftbit-hosted sample data for testing apps](/integrations/example-data/) [Read more →](/integrations/example-data/) * [](/integrations/firebase-auth/) [Firebase Auth](/integrations/firebase-auth/) [Sign in users with Firebase Auth REST endpoints](/integrations/firebase-auth/) [Read more →](/integrations/firebase-auth/) * [](/integrations/geckoterminal/) [GeckoTerminal](/integrations/geckoterminal/) [Fetch DEX pool and token data](/integrations/geckoterminal/) [Read more →](/integrations/geckoterminal/) * [](/integrations/generic-oidc/) [Generic OIDC](/integrations/generic-oidc/) [Connect to standards-based OpenID Connect providers](/integrations/generic-oidc/) [Read more →](/integrations/generic-oidc/) * [](/integrations/ghost/) [Ghost](/integrations/ghost/) [Fetch published Ghost content](/integrations/ghost/) [Read more →](/integrations/ghost/) * [](/integrations/ifttt-webhook/) [IFTTT Webhook](/integrations/ifttt-webhook/) [Trigger IFTTT applets with Webhooks](/integrations/ifttt-webhook/) [Read more →](/integrations/ifttt-webhook/) * [](/integrations/keycloak-oidc/) [Keycloak OIDC](/integrations/keycloak-oidc/) [Connect to Keycloak OpenID Connect realms](/integrations/keycloak-oidc/) [Read more →](/integrations/keycloak-oidc/) * [](/integrations/kontent-ai/) [Kontent.ai](/integrations/kontent-ai/) [Fetch Kontent.ai content items](/integrations/kontent-ai/) [Read more →](/integrations/kontent-ai/) * [](/integrations/make-webhook/) [Make Webhook](/integrations/make-webhook/) [Trigger Make scenarios with custom webhooks](/integrations/make-webhook/) [Read more →](/integrations/make-webhook/) * [](/integrations/n8n-webhook/) [n8n Webhook](/integrations/n8n-webhook/) [Trigger n8n workflows with webhook URLs](/integrations/n8n-webhook/) [Read more →](/integrations/n8n-webhook/) * [](/integrations/nocodb/) [NocoDB](/integrations/nocodb/) [Use NocoDB tables as REST data sources](/integrations/nocodb/) [Read more →](/integrations/nocodb/) * [](/integrations/pipedream-workflow/) [Pipedream Workflow](/integrations/pipedream-workflow/) [Trigger Pipedream workflows over HTTP](/integrations/pipedream-workflow/) [Read more →](/integrations/pipedream-workflow/) * [](/integrations/prismic/) [Prismic](/integrations/prismic/) [Query Prismic documents over REST](/integrations/prismic/) [Read more →](/integrations/prismic/) * [](/integrations/resend/) [Resend](/integrations/resend/) [Send transactional emails built for developers](/integrations/resend/) [Read more →](/integrations/resend/) * [](/integrations/sanity/) [Sanity](/integrations/sanity/) [Query Sanity datasets from apps](/integrations/sanity/) [Read more →](/integrations/sanity/) * [](/integrations/sheety/) [Sheety](/integrations/sheety/) [Turn Google Sheets into REST API data](/integrations/sheety/) [Read more →](/integrations/sheety/) * [](/integrations/storyblok/) [Storyblok](/integrations/storyblok/) [Fetch Storyblok stories and links](/integrations/storyblok/) [Read more →](/integrations/storyblok/) * [](/integrations/strapi/) [Strapi](/integrations/strapi/) [Use Strapi collection REST endpoints](/integrations/strapi/) [Read more →](/integrations/strapi/) * [](/integrations/stripe/) [Stripe](/integrations/stripe/) [Accept payments and manage subscriptions](/integrations/stripe/) [Read more →](/integrations/stripe/) * [](/integrations/stytch/) [Stytch](/integrations/stytch/) [Use Stytch auth APIs from a secure backend](/integrations/stytch/) [Read more →](/integrations/stytch/) * [](/integrations/supabase/) [Supabase](/integrations/supabase/) [Connect to Supabase PostgREST tables](/integrations/supabase/) [Read more →](/integrations/supabase/) * [](/integrations/supabase-auth/) [Supabase Auth](/integrations/supabase-auth/) [Use Supabase Auth REST endpoints](/integrations/supabase-auth/) [Read more →](/integrations/supabase-auth/) * [](/integrations/unsplash/) [Unsplash](/integrations/unsplash/) [Search and retrieve Unsplash photos](/integrations/unsplash/) [Read more →](/integrations/unsplash/) * [](/integrations/webflow/) [Webflow](/integrations/webflow/) [Read and manage Webflow CMS collections](/integrations/webflow/) [Read more →](/integrations/webflow/) * [](/integrations/wordpress/) [WordPress](/integrations/wordpress/) [Use WordPress content through the REST API](/integrations/wordpress/) [Read more →](/integrations/wordpress/) * [](/integrations/xano/) [Xano](/integrations/xano/) [Connect to Xano API groups](/integrations/xano/) [Read more →](/integrations/xano/) * [](/integrations/zapier/) [Zapier](/integrations/zapier/) [Manage Zapier workflows through the Workflow API](/integrations/zapier/) [Read more →](/integrations/zapier/) * [Add a custom REST API](/signup?psource=integrations-hub) [Got an HTTP endpoint? Add the URL, headers, and request bodies in Integrations → REST APIs. Reuse the connection across your app.](/signup?psource=integrations-hub) [Start free →](/signup?psource=integrations-hub) [MCP servers](/mcp/) [Let AI agents act on third-party services while building.](/mcp/) [→](/mcp/) [GraphQL integrations](/graphql/) [Introspect any GraphQL endpoint and use it across screens and agents.](/graphql/) [→](/graphql/) [Get started free](/signup?psource=integrations-hub-cta) [See the Draftbit platform](/platform) --- # Airtable REST API integration for Draftbit > Use Airtable bases as app data sources Connect Airtable to a Draftbit app and bind its endpoints to screens and AI agents. 1. [Home](/) 2. / 3. [Integrations](/integrations/) 4. / 5. Airtable ## What is Airtable? Airtable's Web API lets apps list, read, create, update, and delete records in a base. Add a personal access token and base ID, then use table-specific endpoints for app data. ## Use Airtable with Draftbit * Built-in endpoints: List records, Get records, Create records, Update records, Delete records. * Bind any Airtable endpoint to a screen, list, form, or AI agent action. * Authentication is configured once per app — secrets stay on the server. * Add custom request and response transforms without forking Airtable's client library. ## Example `airtable-example.ts` ``` // Example: fetch from Airtable const response = await fetch("https://api.airtable.com/v0/{base_id}/{table_name}", { headers: { "Authorization": "Bearer YOUR_AIRTABLE_TOKEN", }, }); const data = await response.json(); ``` ## Use cases * Power a mobile app with a hosted database and APIs * Add search, filtering, and pagination to a list-driven feature * Read and write app data without managing your own server ## Authentication Authentication uses the \`Authorization\` header. Paste your key once in Draftbit and every request to Airtable carries it automatically — secrets stay on the server side. ### Use Airtable in a Draftbit app today Start free, connect Airtable in minutes, and ship with AI agents that know how to use it. [Start building free](/signup?psource=rest-airtable-midpage) ## Frequently asked questions ### What is the Airtable REST integration? Airtable's Web API lets apps list, read, create, update, and delete records in a base. Add a personal access token and base ID, then use table-specific endpoints for app data. ### How do I connect Airtable to a Draftbit app? Go to Integrations and then REST APIs in your Draftbit app and pick Airtable from the catalog. Paste your API key or token and fill in any base URL variables, such as a project ID or host. The endpoints are then available across your screens and to the AI agents while you build. ### Does Airtable require authentication? Most Airtable endpoints expect a key or token sent as a header. The preconfigured endpoints include List records, Get records, Create records, Update records. ### What can I build with Airtable and Draftbit? Most teams use Airtable as a backend platform for a mobile or web app. You might use Airtable to power a mobile app with a hosted database and APIs, or to add search, filtering, and pagination to a list-driven feature. ## Related Integrations * [](/integrations/example-data/) [Example Data](/integrations/example-data/) [Draftbit-hosted sample data for testing apps](/integrations/example-data/) * [](/integrations/backendless/) [Backendless](/integrations/backendless/) [Backendless app data, users, and backend services](/integrations/backendless/) * [](/integrations/bubble/) [Bubble](/integrations/bubble/) [Connect to Bubble Data API objects](/integrations/bubble/) * [](/integrations/sheety/) [Sheety](/integrations/sheety/) [Turn Google Sheets into REST API data](/integrations/sheety/) [Get started free ](/signup?psource=rest-airtable-footer)[Browse all Integrations](/integrations/) --- # Algolia REST API integration for Draftbit > Search Algolia indexes from apps Connect Algolia to a Draftbit app and bind its endpoints to screens and AI agents. 1. [Home](/) 2. / 3. [Integrations](/integrations/) 4. / 5. Algolia ## What is Algolia? Algolia's Search API is designed for frontend search when used with a search-only API key. Add your application ID and search key to query indexes and fetch records. ## Use Algolia with Draftbit * Built-in endpoints: Search index, Get object, Multiple queries. * Bind any Algolia endpoint to a screen, list, form, or AI agent action. * Authentication is configured once per app — secrets stay on the server. * Add custom request and response transforms without forking Algolia's client library. ## Example `algolia-example.ts` ``` // Example: fetch from Algolia const response = await fetch("https://{application_id}-dsn.algolia.net/1/indexes/{index_name}/query", { headers: { "X-Algolia-Application-Id": "YOUR_ALGOLIA_TOKEN", "X-Algolia-API-Key": "YOUR_ALGOLIA_VALUE_2", }, }); const data = await response.json(); ``` ## Use cases * Power a typeahead search box with sub-second results * Rank app content by relevance and popularity * Filter and facet across thousands of records ## Authentication Authentication uses 2 headers (\`X-Algolia-Application-Id\`, \`X-Algolia-API-Key\`). Paste each value once in Draftbit and every request to Algolia carries them automatically — secrets stay on the server side. ### Use Algolia in a Draftbit app today Start free, connect Algolia in minutes, and ship with AI agents that know how to use it. [Start building free](/signup?psource=rest-algolia-midpage) ## Frequently asked questions ### What is the Algolia REST integration? Algolia's Search API is designed for frontend search when used with a search-only API key. Add your application ID and search key to query indexes and fetch records. ### How do I connect Algolia to a Draftbit app? Go to Integrations and then REST APIs in your Draftbit app and pick Algolia from the catalog. Paste your API key or token and fill in any base URL variables, such as a project ID or host. The endpoints are then available across your screens and to the AI agents while you build. ### Does Algolia require authentication? Most Algolia endpoints expect a key or token sent as a header. The preconfigured endpoints include Search index, Get object, Multiple queries. ### What can I build with Algolia and Draftbit? Most teams use Algolia as a search platform for a mobile or web app. You might use Algolia to power a typeahead search box with sub-second results, or to rank app content by relevance and popularity. [Get started free ](/signup?psource=rest-algolia-footer)[Browse all Integrations](/integrations/) --- # Appwrite REST API integration for Draftbit > Connect to Appwrite databases and storage Connect Appwrite to a Draftbit app and bind its endpoints to screens and AI agents. 1. [Home](/) 2. / 3. [Integrations](/integrations/) 4. / 5. Appwrite ## What is Appwrite? Appwrite exposes REST APIs for databases, storage, auth, and other app backend services. Add your Appwrite host and project ID, then use a user JWT only for requests protected by Appwrite permissions. ## Use Appwrite with Draftbit * Built-in endpoints: List documents, Get documents, Create documents, Update documents, Delete documents, List files. * Bind any Appwrite endpoint to a screen, list, form, or AI agent action. * Authentication is configured once per app — secrets stay on the server. * Add custom request and response transforms without forking Appwrite's client library. ## Example `appwrite-example.ts` ``` // Example: fetch from Appwrite const response = await fetch("https://{appwrite_host}/v1/databases/{database_id}/collections/{collection_id}/documents", { headers: { "X-Appwrite-Project": "YOUR_APPWRITE_TOKEN", "X-Appwrite-JWT": "YOUR_APPWRITE_VALUE_2", }, }); const data = await response.json(); ``` ## Use cases * Power a mobile app with a hosted database and APIs * Add search, filtering, and pagination to a list-driven feature * Read and write app data without managing your own server ## Authentication Authentication uses 2 headers (\`X-Appwrite-Project\`, \`X-Appwrite-JWT\`). Paste each value once in Draftbit and every request to Appwrite carries them automatically — secrets stay on the server side. ### Use Appwrite in a Draftbit app today Start free, connect Appwrite in minutes, and ship with AI agents that know how to use it. [Start building free](/signup?psource=rest-appwrite-midpage) ## Frequently asked questions ### What is the Appwrite REST integration? Appwrite exposes REST APIs for databases, storage, auth, and other app backend services. Add your Appwrite host and project ID, then use a user JWT only for requests protected by Appwrite permissions. ### How do I connect Appwrite to a Draftbit app? Go to Integrations and then REST APIs in your Draftbit app and pick Appwrite from the catalog. Paste your API key or token and fill in any base URL variables, such as a project ID or host. The endpoints are then available across your screens and to the AI agents while you build. ### Does Appwrite require authentication? Most Appwrite endpoints expect a key or token sent as a header. The preconfigured endpoints include List documents, Get documents, Create documents, Update documents. ### What can I build with Appwrite and Draftbit? Most teams use Appwrite as a backend platform for a mobile or web app. You might use Appwrite to power a mobile app with a hosted database and APIs, or to add search, filtering, and pagination to a list-driven feature. ## Related Integrations * [](/integrations/example-data/) [Example Data](/integrations/example-data/) [Draftbit-hosted sample data for testing apps](/integrations/example-data/) * [](/integrations/airtable/) [Airtable](/integrations/airtable/) [Use Airtable bases as app data sources](/integrations/airtable/) * [](/integrations/backendless/) [Backendless](/integrations/backendless/) [Backendless app data, users, and backend services](/integrations/backendless/) * [](/integrations/bubble/) [Bubble](/integrations/bubble/) [Connect to Bubble Data API objects](/integrations/bubble/) [Get started free ](/signup?psource=rest-appwrite-footer)[Browse all Integrations](/integrations/) --- # Auth0 OIDC REST API integration for Draftbit > Use Auth0 OIDC token and profile endpoints Connect Auth0 OIDC to a Draftbit app and bind its endpoints to screens and AI agents. 1. [Home](/) 2. / 3. [Integrations](/integrations/) 4. / 5. Auth0 OIDC ## What is Auth0 OIDC? Auth0 exposes OpenID Connect discovery, token exchange, userinfo, and JWKS endpoints. Use Authorization Code with PKCE for frontend apps and avoid exposing client secrets. ## Use Auth0 OIDC with Draftbit * Built-in endpoints: Get discovery document, Exchange authorization code, Get userinfo, Get JWKS. * Bind any Auth0 OIDC endpoint to a screen, list, form, or AI agent action. * Authentication is configured once per app — secrets stay on the server. * Add custom request and response transforms without forking Auth0 OIDC's client library. ## Example `auth0-oidc-example.ts` ``` // Example: fetch from Auth0 OIDC const response = await fetch("https://{auth0_domain}/.well-known/openid-configuration", { headers: { "Authorization": "Bearer YOUR_AUTH0_OIDC_TOKEN", }, }); const data = await response.json(); ``` ## Use cases * Add sign-up, sign-in, and password reset flows to a mobile app * Gate premium features behind authenticated user sessions * Sync user profiles across web and native clients ## Authentication Authentication uses the \`Authorization\` header. Paste your key once in Draftbit and every request to Auth0 OIDC carries it automatically — secrets stay on the server side. ### Use Auth0 OIDC in a Draftbit app today Start free, connect Auth0 OIDC in minutes, and ship with AI agents that know how to use it. [Start building free](/signup?psource=rest-auth0-oidc-midpage) ## Frequently asked questions ### What is the Auth0 OIDC REST integration? Auth0 exposes OpenID Connect discovery, token exchange, userinfo, and JWKS endpoints. Use Authorization Code with PKCE for frontend apps and avoid exposing client secrets. ### How do I connect Auth0 OIDC to a Draftbit app? Go to Integrations and then REST APIs in your Draftbit app and pick Auth0 OIDC from the catalog. Paste your API key or token and fill in any base URL variables, such as a project ID or host. The endpoints are then available across your screens and to the AI agents while you build. ### Does Auth0 OIDC require authentication? Most Auth0 OIDC endpoints expect a key or token sent as a header. The preconfigured endpoints include Get discovery document, Exchange authorization code, Get userinfo, Get JWKS. ### What can I build with Auth0 OIDC and Draftbit? Most teams use Auth0 OIDC as a authentication service for a mobile or web app. You might use Auth0 OIDC to add sign-up, sign-in, and password reset flows to a mobile app, or to gate premium features behind authenticated user sessions. ## Related Integrations * [](/integrations/clerk/) [Clerk](/integrations/clerk/) [User authentication and management](/integrations/clerk/) * [](/integrations/firebase-auth/) [Firebase Auth](/integrations/firebase-auth/) [Sign in users with Firebase Auth REST endpoints](/integrations/firebase-auth/) * [](/integrations/supabase-auth/) [Supabase Auth](/integrations/supabase-auth/) [Use Supabase Auth REST endpoints](/integrations/supabase-auth/) * [](/integrations/generic-oidc/) [Generic OIDC](/integrations/generic-oidc/) [Connect to standards-based OpenID Connect providers](/integrations/generic-oidc/) [Get started free ](/signup?psource=rest-auth0-oidc-footer)[Browse all Integrations](/integrations/) --- # Backendless REST API integration for Draftbit > Backendless app data, users, and backend services Connect Backendless to a Draftbit app and bind its endpoints to screens and AI agents. 1. [Home](/) 2. / 3. [Integrations](/integrations/) 4. / 5. Backendless ## What is Backendless? Backendless exposes REST endpoints for app database tables, users, files, messaging, and other backend services. Use your app subdomain and optional user token for permissioned requests. ## Use Backendless with Draftbit * Built-in endpoints: List objects, Get objects, Create objects, Update objects, Delete objects. * Bind any Backendless endpoint to a screen, list, form, or AI agent action. * Authentication is configured once per app — secrets stay on the server. * Add custom request and response transforms without forking Backendless's client library. ## Example `backendless-example.ts` ``` // Example: fetch from Backendless const response = await fetch("https://{subdomain}.backendless.app/api/data/{table_name}", { headers: { "user-token": "YOUR_BACKENDLESS_TOKEN", }, }); const data = await response.json(); ``` ## Use cases * Power a mobile app with a hosted database and APIs * Add search, filtering, and pagination to a list-driven feature * Read and write app data without managing your own server ## Authentication Authentication uses the \`user-token\` header. Paste your key once in Draftbit and every request to Backendless carries it automatically — secrets stay on the server side. ### Use Backendless in a Draftbit app today Start free, connect Backendless in minutes, and ship with AI agents that know how to use it. [Start building free](/signup?psource=rest-backendless-midpage) ## Frequently asked questions ### What is the Backendless REST integration? Backendless exposes REST endpoints for app database tables, users, files, messaging, and other backend services. Use your app subdomain and optional user token for permissioned requests. ### How do I connect Backendless to a Draftbit app? Go to Integrations and then REST APIs in your Draftbit app and pick Backendless from the catalog. Paste your API key or token and fill in any base URL variables, such as a project ID or host. The endpoints are then available across your screens and to the AI agents while you build. ### Does Backendless require authentication? Most Backendless endpoints expect a key or token sent as a header. The preconfigured endpoints include List objects, Get objects, Create objects, Update objects. ### What can I build with Backendless and Draftbit? Most teams use Backendless as a backend platform for a mobile or web app. You might use Backendless to power a mobile app with a hosted database and APIs, or to add search, filtering, and pagination to a list-driven feature. ## Related Integrations * [](/integrations/example-data/) [Example Data](/integrations/example-data/) [Draftbit-hosted sample data for testing apps](/integrations/example-data/) * [](/integrations/airtable/) [Airtable](/integrations/airtable/) [Use Airtable bases as app data sources](/integrations/airtable/) * [](/integrations/bubble/) [Bubble](/integrations/bubble/) [Connect to Bubble Data API objects](/integrations/bubble/) * [](/integrations/sheety/) [Sheety](/integrations/sheety/) [Turn Google Sheets into REST API data](/integrations/sheety/) [Get started free ](/signup?psource=rest-backendless-footer)[Browse all Integrations](/integrations/) --- # Blockchair REST API integration for Draftbit > Read multi-chain blockchain data Connect Blockchair to a Draftbit app and bind its endpoints to screens and AI agents. 1. [Home](/) 2. / 3. [Integrations](/integrations/) 4. / 5. Blockchair ## What is Blockchair? Blockchair provides REST endpoints for blockchain dashboards, addresses, transactions, blocks, and statistics across supported chains. ## Use Blockchair with Draftbit * Built-in endpoints: Get blockchain stats, Get address dashboard, Get transaction dashboard, Search blockchain. * Bind any Blockchair endpoint to a screen, list, form, or AI agent action. * Authentication is configured once per app — secrets stay on the server. * Add custom request and response transforms without forking Blockchair's client library. ## Example `blockchair-example.ts` ``` // Example: fetch from Blockchair // Blockchair doesn't require an auth header for this endpoint — // some providers authenticate via a query param or app-level token. // Check Blockchair's docs for auth requirements on protected endpoints. const response = await fetch("https://api.blockchair.com/{chain}/stats"); const data = await response.json(); ``` ## Use cases * Power a mobile app with a hosted database and APIs * Add search, filtering, and pagination to a list-driven feature * Read and write app data without managing your own server ## Authentication Add any required auth headers when you connect Blockchair in Draftbit. Secrets stay on the server side. ### Use Blockchair in a Draftbit app today Start free, connect Blockchair in minutes, and ship with AI agents that know how to use it. [Start building free](/signup?psource=rest-blockchair-midpage) ## Frequently asked questions ### What is the Blockchair REST integration? Blockchair provides REST endpoints for blockchain dashboards, addresses, transactions, blocks, and statistics across supported chains. ### How do I connect Blockchair to a Draftbit app? Go to Integrations and then REST APIs in your Draftbit app and pick Blockchair from the catalog. Fill in any base URL variables, such as a project ID or host, and the endpoints are available across your screens and to the AI agents while you build. The preconfigured calls need no auth header. ### Does Blockchair require authentication? The preconfigured Blockchair endpoints do not need an auth header. Some providers authenticate with a query parameter or an app-level token, and others are public read-only APIs, so check the Blockchair docs before you call a protected endpoint. The preconfigured endpoints include Get blockchain stats, Get address dashboard, Get transaction dashboard, Search blockchain. ### What can I build with Blockchair and Draftbit? Most teams use Blockchair as a backend platform for a mobile or web app. You might use Blockchair to power a mobile app with a hosted database and APIs, or to add search, filtering, and pagination to a list-driven feature. ## Related Integrations * [](/integrations/example-data/) [Example Data](/integrations/example-data/) [Draftbit-hosted sample data for testing apps](/integrations/example-data/) * [](/integrations/airtable/) [Airtable](/integrations/airtable/) [Use Airtable bases as app data sources](/integrations/airtable/) * [](/integrations/backendless/) [Backendless](/integrations/backendless/) [Backendless app data, users, and backend services](/integrations/backendless/) * [](/integrations/bubble/) [Bubble](/integrations/bubble/) [Connect to Bubble Data API objects](/integrations/bubble/) [Get started free ](/signup?psource=rest-blockchair-footer)[Browse all Integrations](/integrations/) --- # Bubble REST API integration for Draftbit > Connect to Bubble Data API objects Connect Bubble to a Draftbit app and bind its endpoints to screens and AI agents. 1. [Home](/) 2. / 3. [Integrations](/integrations/) 4. / 5. Bubble ## What is Bubble? Bubble's Data API exposes app data types as REST resources. Use your Bubble app domain or custom domain and a bearer token when privacy rules require authentication. ## Use Bubble with Draftbit * Built-in endpoints: List objects, Get objects, Create objects, Update objects, Delete objects. * Bind any Bubble endpoint to a screen, list, form, or AI agent action. * Authentication is configured once per app — secrets stay on the server. * Add custom request and response transforms without forking Bubble's client library. ## Example `bubble-example.ts` ``` // Example: fetch from Bubble const response = await fetch("https://{app_domain}/api/1.1/obj/{type_name}", { headers: { "Authorization": "Bearer YOUR_BUBBLE_TOKEN", }, }); const data = await response.json(); ``` ## Use cases * Power a mobile app with a hosted database and APIs * Add search, filtering, and pagination to a list-driven feature * Read and write app data without managing your own server ## Authentication Authentication uses the \`Authorization\` header. Paste your key once in Draftbit and every request to Bubble carries it automatically — secrets stay on the server side. ### Use Bubble in a Draftbit app today Start free, connect Bubble in minutes, and ship with AI agents that know how to use it. [Start building free](/signup?psource=rest-bubble-midpage) ## Frequently asked questions ### What is the Bubble REST integration? Bubble's Data API exposes app data types as REST resources. Use your Bubble app domain or custom domain and a bearer token when privacy rules require authentication. ### How do I connect Bubble to a Draftbit app? Go to Integrations and then REST APIs in your Draftbit app and pick Bubble from the catalog. Paste your API key or token and fill in any base URL variables, such as a project ID or host. The endpoints are then available across your screens and to the AI agents while you build. ### Does Bubble require authentication? Most Bubble endpoints expect a key or token sent as a header. The preconfigured endpoints include List objects, Get objects, Create objects, Update objects. ### What can I build with Bubble and Draftbit? Most teams use Bubble as a backend platform for a mobile or web app. You might use Bubble to power a mobile app with a hosted database and APIs, or to add search, filtering, and pagination to a list-driven feature. ## Related Integrations * [](/integrations/example-data/) [Example Data](/integrations/example-data/) [Draftbit-hosted sample data for testing apps](/integrations/example-data/) * [](/integrations/airtable/) [Airtable](/integrations/airtable/) [Use Airtable bases as app data sources](/integrations/airtable/) * [](/integrations/backendless/) [Backendless](/integrations/backendless/) [Backendless app data, users, and backend services](/integrations/backendless/) * [](/integrations/sheety/) [Sheety](/integrations/sheety/) [Turn Google Sheets into REST API data](/integrations/sheety/) [Get started free ](/signup?psource=rest-bubble-footer)[Browse all Integrations](/integrations/) --- # Clerk REST API integration for Draftbit > User authentication and management Connect Clerk to a Draftbit app and bind its endpoints to screens and AI agents. 1. [Home](/) 2. / 3. [Integrations](/integrations/) 4. / 5. Clerk ## What is Clerk? Clerk's Backend REST API — manage users, sessions, and organizations from server-side code. Add your secret key to issue session tokens and look up users. ## Use Clerk with Draftbit * Built-in endpoints: List users, Get user, Update user, Delete user, List sessions. * Bind any Clerk endpoint to a screen, list, form, or AI agent action. * Authentication is configured once per app — secrets stay on the server. * Add custom request and response transforms without forking Clerk's client library. ## Example `clerk-example.ts` ``` // Example: fetch from Clerk const response = await fetch("https://api.clerk.com/v1/users", { headers: { "Authorization": "Bearer YOUR_CLERK_TOKEN", }, }); const data = await response.json(); ``` ## Use cases * Add sign-up, sign-in, and password reset flows to a mobile app * Gate premium features behind authenticated user sessions * Sync user profiles across web and native clients ## Authentication Authentication uses the \`Authorization\` header. Paste your key once in Draftbit and every request to Clerk carries it automatically — secrets stay on the server side. ### Use Clerk in a Draftbit app today Start free, connect Clerk in minutes, and ship with AI agents that know how to use it. [Start building free](/signup?psource=rest-clerk-midpage) ## Frequently asked questions ### What is the Clerk REST integration? Clerk's Backend REST API — manage users, sessions, and organizations from server-side code. Add your secret key to issue session tokens and look up users. ### How do I connect Clerk to a Draftbit app? Go to Integrations and then REST APIs in your Draftbit app and pick Clerk from the catalog. Paste your API key or token and fill in any base URL variables, such as a project ID or host. The endpoints are then available across your screens and to the AI agents while you build. ### Does Clerk require authentication? Most Clerk endpoints expect a key or token sent as a header. The preconfigured endpoints include List users, Get user, Update user, Delete user. ### What can I build with Clerk and Draftbit? Most teams use Clerk as a authentication service for a mobile or web app. You might use Clerk to add sign-up, sign-in, and password reset flows to a mobile app, or to gate premium features behind authenticated user sessions. ## Related Integrations * [](/integrations/firebase-auth/) [Firebase Auth](/integrations/firebase-auth/) [Sign in users with Firebase Auth REST endpoints](/integrations/firebase-auth/) * [](/integrations/supabase-auth/) [Supabase Auth](/integrations/supabase-auth/) [Use Supabase Auth REST endpoints](/integrations/supabase-auth/) * [](/integrations/generic-oidc/) [Generic OIDC](/integrations/generic-oidc/) [Connect to standards-based OpenID Connect providers](/integrations/generic-oidc/) * [](/integrations/auth0-oidc/) [Auth0 OIDC](/integrations/auth0-oidc/) [Use Auth0 OIDC token and profile endpoints](/integrations/auth0-oidc/) [Get started free ](/signup?psource=rest-clerk-footer)[Browse all Integrations](/integrations/) --- # Cloud Firestore REST API integration for Draftbit > Read and write Firestore documents over REST Connect Cloud Firestore to a Draftbit app and bind its endpoints to screens and AI agents. 1. [Home](/) 2. / 3. [Integrations](/integrations/) 4. / 5. Cloud Firestore ## What is Cloud Firestore? Cloud Firestore's REST API lets apps read, create, update, and delete documents when Firebase Security Rules allow it. Add your Firebase project ID and optionally a Firebase Auth ID token for protected data. ## Use Cloud Firestore with Draftbit * Built-in endpoints: List documents, Get document, Create document, Update document, Delete document. * Bind any Cloud Firestore endpoint to a screen, list, form, or AI agent action. * Authentication is configured once per app — secrets stay on the server. * Add custom request and response transforms without forking Cloud Firestore's client library. ## Example `cloud-firestore-example.ts` ``` // Example: fetch from Cloud Firestore const response = await fetch("https://firestore.googleapis.com/v1/projects/{project_id}/databases/(default)/documents/{collection_id}", { headers: { "Authorization": "Bearer YOUR_CLOUD_FIRESTORE_TOKEN", }, }); const data = await response.json(); ``` ## Use cases * Power a mobile app with a hosted database and APIs * Add search, filtering, and pagination to a list-driven feature * Read and write app data without managing your own server ## Authentication Authentication uses the \`Authorization\` header. Paste your key once in Draftbit and every request to Cloud Firestore carries it automatically — secrets stay on the server side. ### Use Cloud Firestore in a Draftbit app today Start free, connect Cloud Firestore in minutes, and ship with AI agents that know how to use it. [Start building free](/signup?psource=rest-cloud-firestore-midpage) ## Frequently asked questions ### What is the Cloud Firestore REST integration? Cloud Firestore's REST API lets apps read, create, update, and delete documents when Firebase Security Rules allow it. Add your Firebase project ID and optionally a Firebase Auth ID token for protected data. ### How do I connect Cloud Firestore to a Draftbit app? Go to Integrations and then REST APIs in your Draftbit app and pick Cloud Firestore from the catalog. Paste your API key or token and fill in any base URL variables, such as a project ID or host. The endpoints are then available across your screens and to the AI agents while you build. ### Does Cloud Firestore require authentication? Most Cloud Firestore endpoints expect a key or token sent as a header. The preconfigured endpoints include List documents, Get document, Create document, Update document. ### What can I build with Cloud Firestore and Draftbit? Most teams use Cloud Firestore as a backend platform for a mobile or web app. You might use Cloud Firestore to power a mobile app with a hosted database and APIs, or to add search, filtering, and pagination to a list-driven feature. ## Related Integrations * [](/integrations/example-data/) [Example Data](/integrations/example-data/) [Draftbit-hosted sample data for testing apps](/integrations/example-data/) * [](/integrations/airtable/) [Airtable](/integrations/airtable/) [Use Airtable bases as app data sources](/integrations/airtable/) * [](/integrations/backendless/) [Backendless](/integrations/backendless/) [Backendless app data, users, and backend services](/integrations/backendless/) * [](/integrations/bubble/) [Bubble](/integrations/bubble/) [Connect to Bubble Data API objects](/integrations/bubble/) [Get started free ](/signup?psource=rest-cloud-firestore-footer)[Browse all Integrations](/integrations/) --- # Cloudinary REST API integration for Draftbit > Upload media with unsigned Cloudinary presets Connect Cloudinary to a Draftbit app and bind its endpoints to screens and AI agents. 1. [Home](/) 2. / 3. [Integrations](/integrations/) 4. / 5. Cloudinary ## What is Cloudinary? Cloudinary supports unsigned upload presets for browser and mobile clients. Add your cloud name and upload preset to upload images, video, or raw files without exposing API secrets. ## Use Cloudinary with Draftbit * Built-in endpoints: Upload image by URL, Upload video by URL, Upload raw file by URL. * Bind any Cloudinary endpoint to a screen, list, form, or AI agent action. * Authentication is configured once per app — secrets stay on the server. * Add custom request and response transforms without forking Cloudinary's client library. ## Example `cloudinary-example.ts` ``` // Example: fetch from Cloudinary // Cloudinary doesn't require an auth header for this endpoint — // some providers authenticate via a query param or app-level token. // Check Cloudinary's docs for auth requirements on protected endpoints. const response = await fetch("https://api.cloudinary.com/v1_1/{cloud_name}/image/upload"); const data = await response.json(); ``` ## Use cases * Search and embed stock photography in app content * Generate optimized image variants for each device * Lazy-load high-resolution media without slowing the UI ## Authentication Add any required auth headers when you connect Cloudinary in Draftbit. Secrets stay on the server side. ### Use Cloudinary in a Draftbit app today Start free, connect Cloudinary in minutes, and ship with AI agents that know how to use it. [Start building free](/signup?psource=rest-cloudinary-midpage) ## Frequently asked questions ### What is the Cloudinary REST integration? Cloudinary supports unsigned upload presets for browser and mobile clients. Add your cloud name and upload preset to upload images, video, or raw files without exposing API secrets. ### How do I connect Cloudinary to a Draftbit app? Go to Integrations and then REST APIs in your Draftbit app and pick Cloudinary from the catalog. Fill in any base URL variables, such as a project ID or host, and the endpoints are available across your screens and to the AI agents while you build. The preconfigured calls need no auth header. ### Does Cloudinary require authentication? The preconfigured Cloudinary endpoints do not need an auth header. Some providers authenticate with a query parameter or an app-level token, and others are public read-only APIs, so check the Cloudinary docs before you call a protected endpoint. The preconfigured endpoints include Upload image by URL, Upload video by URL, Upload raw file by URL. ### What can I build with Cloudinary and Draftbit? Most teams use Cloudinary as a media platform for a mobile or web app. You might use Cloudinary to search and embed stock photography in app content, or to generate optimized image variants for each device. ## Related Integrations * [](/integrations/unsplash/) [Unsplash](/integrations/unsplash/) [Search and retrieve Unsplash photos](/integrations/unsplash/) [Get started free ](/signup?psource=rest-cloudinary-footer)[Browse all Integrations](/integrations/) --- # CoinCap REST API integration for Draftbit > Fetch cryptocurrency asset and market data Connect CoinCap to a Draftbit app and bind its endpoints to screens and AI agents. 1. [Home](/) 2. / 3. [Integrations](/integrations/) 4. / 5. CoinCap ## What is CoinCap? CoinCap provides crypto asset, rate, exchange, and market data over REST. Add a CoinCap API key when your plan requires authenticated requests. ## Use CoinCap with Draftbit * Built-in endpoints: List assets, Get asset, List rates, List markets. * Bind any CoinCap endpoint to a screen, list, form, or AI agent action. * Authentication is configured once per app — secrets stay on the server. * Add custom request and response transforms without forking CoinCap's client library. ## Example `coincap-example.ts` ``` // Example: fetch from CoinCap const response = await fetch("https://rest.coincap.io/v3/assets", { headers: { "Authorization": "Bearer YOUR_COINCAP_TOKEN", }, }); const data = await response.json(); ``` ## Use cases * Power a mobile app with a hosted database and APIs * Add search, filtering, and pagination to a list-driven feature * Read and write app data without managing your own server ## Authentication Authentication uses the \`Authorization\` header. Paste your key once in Draftbit and every request to CoinCap carries it automatically — secrets stay on the server side. ### Use CoinCap in a Draftbit app today Start free, connect CoinCap in minutes, and ship with AI agents that know how to use it. [Start building free](/signup?psource=rest-coincap-midpage) ## Frequently asked questions ### What is the CoinCap REST integration? CoinCap provides crypto asset, rate, exchange, and market data over REST. Add a CoinCap API key when your plan requires authenticated requests. ### How do I connect CoinCap to a Draftbit app? Go to Integrations and then REST APIs in your Draftbit app and pick CoinCap from the catalog. Paste your API key or token and fill in any base URL variables, such as a project ID or host. The endpoints are then available across your screens and to the AI agents while you build. ### Does CoinCap require authentication? Most CoinCap endpoints expect a key or token sent as a header. The preconfigured endpoints include List assets, Get asset, List rates, List markets. ### What can I build with CoinCap and Draftbit? Most teams use CoinCap as a backend platform for a mobile or web app. You might use CoinCap to power a mobile app with a hosted database and APIs, or to add search, filtering, and pagination to a list-driven feature. ## Related Integrations * [](/integrations/example-data/) [Example Data](/integrations/example-data/) [Draftbit-hosted sample data for testing apps](/integrations/example-data/) * [](/integrations/airtable/) [Airtable](/integrations/airtable/) [Use Airtable bases as app data sources](/integrations/airtable/) * [](/integrations/backendless/) [Backendless](/integrations/backendless/) [Backendless app data, users, and backend services](/integrations/backendless/) * [](/integrations/bubble/) [Bubble](/integrations/bubble/) [Connect to Bubble Data API objects](/integrations/bubble/) [Get started free ](/signup?psource=rest-coincap-footer)[Browse all Integrations](/integrations/) --- # CoinGecko REST API integration for Draftbit > Fetch crypto prices and market data Connect CoinGecko to a Draftbit app and bind its endpoints to screens and AI agents. 1. [Home](/) 2. / 3. [Integrations](/integrations/) 4. / 5. CoinGecko ## What is CoinGecko? CoinGecko provides cryptocurrency prices, coin metadata, market charts, trending coins, and global market data. Add a demo API key when your plan requires authenticated requests. ## Use CoinGecko with Draftbit * Built-in endpoints: Simple price, Coin markets, Get coin, Trending coins. * Bind any CoinGecko endpoint to a screen, list, form, or AI agent action. * Authentication is configured once per app — secrets stay on the server. * Add custom request and response transforms without forking CoinGecko's client library. ## Example `coingecko-example.ts` ``` // Example: fetch from CoinGecko const response = await fetch("https://api.coingecko.com/api/v3/simple/price", { headers: { "x-cg-demo-api-key": "YOUR_COINGECKO_TOKEN", }, }); const data = await response.json(); ``` ## Use cases * Power a mobile app with a hosted database and APIs * Add search, filtering, and pagination to a list-driven feature * Read and write app data without managing your own server ## Authentication Authentication uses the \`x-cg-demo-api-key\` header. Paste your key once in Draftbit and every request to CoinGecko carries it automatically — secrets stay on the server side. ### Use CoinGecko in a Draftbit app today Start free, connect CoinGecko in minutes, and ship with AI agents that know how to use it. [Start building free](/signup?psource=rest-coingecko-midpage) ## Frequently asked questions ### What is the CoinGecko REST integration? CoinGecko provides cryptocurrency prices, coin metadata, market charts, trending coins, and global market data. Add a demo API key when your plan requires authenticated requests. ### How do I connect CoinGecko to a Draftbit app? Go to Integrations and then REST APIs in your Draftbit app and pick CoinGecko from the catalog. Paste your API key or token and fill in any base URL variables, such as a project ID or host. The endpoints are then available across your screens and to the AI agents while you build. ### Does CoinGecko require authentication? Most CoinGecko endpoints expect a key or token sent as a header. The preconfigured endpoints include Simple price, Coin markets, Get coin, Trending coins. ### What can I build with CoinGecko and Draftbit? Most teams use CoinGecko as a backend platform for a mobile or web app. You might use CoinGecko to power a mobile app with a hosted database and APIs, or to add search, filtering, and pagination to a list-driven feature. ## Related Integrations * [](/integrations/example-data/) [Example Data](/integrations/example-data/) [Draftbit-hosted sample data for testing apps](/integrations/example-data/) * [](/integrations/airtable/) [Airtable](/integrations/airtable/) [Use Airtable bases as app data sources](/integrations/airtable/) * [](/integrations/backendless/) [Backendless](/integrations/backendless/) [Backendless app data, users, and backend services](/integrations/backendless/) * [](/integrations/bubble/) [Bubble](/integrations/bubble/) [Connect to Bubble Data API objects](/integrations/bubble/) [Get started free ](/signup?psource=rest-coingecko-footer)[Browse all Integrations](/integrations/) --- # CoinPaprika REST API integration for Draftbit > Fetch crypto coins, tickers, and exchange data Connect CoinPaprika to a Draftbit app and bind its endpoints to screens and AI agents. 1. [Home](/) 2. / 3. [Integrations](/integrations/) 4. / 5. CoinPaprika ## What is CoinPaprika? CoinPaprika exposes cryptocurrency coins, tickers, markets, exchanges, and global market data through REST endpoints useful for dashboards and apps. ## Use CoinPaprika with Draftbit * Built-in endpoints: List coins, Get coin, Get ticker, Global market data. * Bind any CoinPaprika endpoint to a screen, list, form, or AI agent action. * Authentication is configured once per app — secrets stay on the server. * Add custom request and response transforms without forking CoinPaprika's client library. ## Example `coinpaprika-example.ts` ``` // Example: fetch from CoinPaprika // CoinPaprika doesn't require an auth header for this endpoint — // some providers authenticate via a query param or app-level token. // Check CoinPaprika's docs for auth requirements on protected endpoints. const response = await fetch("https://api.coinpaprika.com/v1/coins"); const data = await response.json(); ``` ## Use cases * Power a mobile app with a hosted database and APIs * Add search, filtering, and pagination to a list-driven feature * Read and write app data without managing your own server ## Authentication Add any required auth headers when you connect CoinPaprika in Draftbit. Secrets stay on the server side. ### Use CoinPaprika in a Draftbit app today Start free, connect CoinPaprika in minutes, and ship with AI agents that know how to use it. [Start building free](/signup?psource=rest-coinpaprika-midpage) ## Frequently asked questions ### What is the CoinPaprika REST integration? CoinPaprika exposes cryptocurrency coins, tickers, markets, exchanges, and global market data through REST endpoints useful for dashboards and apps. ### How do I connect CoinPaprika to a Draftbit app? Go to Integrations and then REST APIs in your Draftbit app and pick CoinPaprika from the catalog. Fill in any base URL variables, such as a project ID or host, and the endpoints are available across your screens and to the AI agents while you build. The preconfigured calls need no auth header. ### Does CoinPaprika require authentication? The preconfigured CoinPaprika endpoints do not need an auth header. Some providers authenticate with a query parameter or an app-level token, and others are public read-only APIs, so check the CoinPaprika docs before you call a protected endpoint. The preconfigured endpoints include List coins, Get coin, Get ticker, Global market data. ### What can I build with CoinPaprika and Draftbit? Most teams use CoinPaprika as a backend platform for a mobile or web app. You might use CoinPaprika to power a mobile app with a hosted database and APIs, or to add search, filtering, and pagination to a list-driven feature. ## Related Integrations * [](/integrations/example-data/) [Example Data](/integrations/example-data/) [Draftbit-hosted sample data for testing apps](/integrations/example-data/) * [](/integrations/airtable/) [Airtable](/integrations/airtable/) [Use Airtable bases as app data sources](/integrations/airtable/) * [](/integrations/backendless/) [Backendless](/integrations/backendless/) [Backendless app data, users, and backend services](/integrations/backendless/) * [](/integrations/bubble/) [Bubble](/integrations/bubble/) [Connect to Bubble Data API objects](/integrations/bubble/) [Get started free ](/signup?psource=rest-coinpaprika-footer)[Browse all Integrations](/integrations/) --- # Contentful REST API integration for Draftbit > Fetch published content from Contentful Connect Contentful to a Draftbit app and bind its endpoints to screens and AI agents. 1. [Home](/) 2. / 3. [Integrations](/integrations/) 4. / 5. Contentful ## What is Contentful? Contentful's Content Delivery API is a read-only REST API for published entries, assets, and content types. Add a delivery token, space ID, and environment ID to fetch content into apps and websites. ## Use Contentful with Draftbit * Built-in endpoints: List entries, Get entry, List assets, Get asset, List content types. * Bind any Contentful endpoint to a screen, list, form, or AI agent action. * Authentication is configured once per app — secrets stay on the server. * Add custom request and response transforms without forking Contentful's client library. ## More ways to connect Contentful Prefer GraphQL? Connect to [the Contentful GraphQL integration](/graphql/contentful-graphql/) instead. ## Example `contentful-example.ts` ``` // Example: fetch from Contentful const response = await fetch("https://cdn.contentful.com/spaces/{space_id}/environments/{environment_id}/entries", { headers: { "Authorization": "Bearer YOUR_CONTENTFUL_TOKEN", }, }); const data = await response.json(); ``` ## Use cases * Drive a blog, news feed, or content section from a headless CMS * Let non-engineers publish app content without a release * Localize copy and assets without code changes ## Authentication Authentication uses the \`Authorization\` header. Paste your key once in Draftbit and every request to Contentful carries it automatically — secrets stay on the server side. ### Use Contentful in a Draftbit app today Start free, connect Contentful in minutes, and ship with AI agents that know how to use it. [Start building free](/signup?psource=rest-contentful-midpage) ## Frequently asked questions ### What is the Contentful REST integration? Contentful's Content Delivery API is a read-only REST API for published entries, assets, and content types. Add a delivery token, space ID, and environment ID to fetch content into apps and websites. ### How do I connect Contentful to a Draftbit app? Go to Integrations and then REST APIs in your Draftbit app and pick Contentful from the catalog. Paste your API key or token and fill in any base URL variables, such as a project ID or host. The endpoints are then available across your screens and to the AI agents while you build. ### Does Contentful require authentication? Most Contentful endpoints expect a key or token sent as a header. The preconfigured endpoints include List entries, Get entry, List assets, Get asset. ### What can I build with Contentful and Draftbit? Most teams use Contentful as a headless CMS for a mobile or web app. You might use Contentful to drive a blog, news feed, or content section from a headless CMS, or to let non-engineers publish app content without a release. ## Related Integrations * [](/integrations/directus/) [Directus](/integrations/directus/) [Read and manage Directus collections](/integrations/directus/) * [](/integrations/webflow/) [Webflow](/integrations/webflow/) [Read and manage Webflow CMS collections](/integrations/webflow/) * [](/integrations/wordpress/) [WordPress](/integrations/wordpress/) [Use WordPress content through the REST API](/integrations/wordpress/) * [](/integrations/ghost/) [Ghost](/integrations/ghost/) [Fetch published Ghost content](/integrations/ghost/) [Get started free ](/signup?psource=rest-contentful-footer)[Browse all Integrations](/integrations/) --- # DefiLlama REST API integration for Draftbit > Fetch DeFi TVL and protocol data Connect DefiLlama to a Draftbit app and bind its endpoints to screens and AI agents. 1. [Home](/) 2. / 3. [Integrations](/integrations/) 4. / 5. DefiLlama ## What is DefiLlama? DefiLlama provides public DeFi protocol, chain, and TVL data over REST. It is useful for dashboards and apps that need protocol metrics without exchange credentials. ## Use DefiLlama with Draftbit * Built-in endpoints: List protocols, Get protocol, Chain historical TVL, Protocol chart. * Bind any DefiLlama endpoint to a screen, list, form, or AI agent action. * Authentication is configured once per app — secrets stay on the server. * Add custom request and response transforms without forking DefiLlama's client library. ## Example `defillama-example.ts` ``` // Example: fetch from DefiLlama // DefiLlama doesn't require an auth header for this endpoint — // some providers authenticate via a query param or app-level token. // Check DefiLlama's docs for auth requirements on protected endpoints. const response = await fetch("https://api.llama.fi/protocols"); const data = await response.json(); ``` ## Use cases * Power a mobile app with a hosted database and APIs * Add search, filtering, and pagination to a list-driven feature * Read and write app data without managing your own server ## Authentication Add any required auth headers when you connect DefiLlama in Draftbit. Secrets stay on the server side. ### Use DefiLlama in a Draftbit app today Start free, connect DefiLlama in minutes, and ship with AI agents that know how to use it. [Start building free](/signup?psource=rest-defillama-midpage) ## Frequently asked questions ### What is the DefiLlama REST integration? DefiLlama provides public DeFi protocol, chain, and TVL data over REST. It is useful for dashboards and apps that need protocol metrics without exchange credentials. ### How do I connect DefiLlama to a Draftbit app? Go to Integrations and then REST APIs in your Draftbit app and pick DefiLlama from the catalog. Fill in any base URL variables, such as a project ID or host, and the endpoints are available across your screens and to the AI agents while you build. The preconfigured calls need no auth header. ### Does DefiLlama require authentication? The preconfigured DefiLlama endpoints do not need an auth header. Some providers authenticate with a query parameter or an app-level token, and others are public read-only APIs, so check the DefiLlama docs before you call a protected endpoint. The preconfigured endpoints include List protocols, Get protocol, Chain historical TVL, Protocol chart. ### What can I build with DefiLlama and Draftbit? Most teams use DefiLlama as a backend platform for a mobile or web app. You might use DefiLlama to power a mobile app with a hosted database and APIs, or to add search, filtering, and pagination to a list-driven feature. ## Related Integrations * [](/integrations/example-data/) [Example Data](/integrations/example-data/) [Draftbit-hosted sample data for testing apps](/integrations/example-data/) * [](/integrations/airtable/) [Airtable](/integrations/airtable/) [Use Airtable bases as app data sources](/integrations/airtable/) * [](/integrations/backendless/) [Backendless](/integrations/backendless/) [Backendless app data, users, and backend services](/integrations/backendless/) * [](/integrations/bubble/) [Bubble](/integrations/bubble/) [Connect to Bubble Data API objects](/integrations/bubble/) [Get started free ](/signup?psource=rest-defillama-footer)[Browse all Integrations](/integrations/) --- # DEX Screener REST API integration for Draftbit > Search DEX pairs and token markets Connect DEX Screener to a Draftbit app and bind its endpoints to screens and AI agents. 1. [Home](/) 2. / 3. [Integrations](/integrations/) 4. / 5. DEX Screener ## What is DEX Screener? DEX Screener provides public DEX pair, token, and search data across supported chains. Use it for token discovery, pair pages, and market widgets. ## Use DEX Screener with Draftbit * Built-in endpoints: Search pairs, Get pair, Token pairs, Get tokens. * Bind any DEX Screener endpoint to a screen, list, form, or AI agent action. * Authentication is configured once per app — secrets stay on the server. * Add custom request and response transforms without forking DEX Screener's client library. ## Example `dex-screener-example.ts` ``` // Example: fetch from DEX Screener // DEX Screener doesn't require an auth header for this endpoint — // some providers authenticate via a query param or app-level token. // Check DEX Screener's docs for auth requirements on protected endpoints. const response = await fetch("https://api.dexscreener.com/latest/dex/search"); const data = await response.json(); ``` ## Use cases * Power a mobile app with a hosted database and APIs * Add search, filtering, and pagination to a list-driven feature * Read and write app data without managing your own server ## Authentication Add any required auth headers when you connect DEX Screener in Draftbit. Secrets stay on the server side. ### Use DEX Screener in a Draftbit app today Start free, connect DEX Screener in minutes, and ship with AI agents that know how to use it. [Start building free](/signup?psource=rest-dex-screener-midpage) ## Frequently asked questions ### What is the DEX Screener REST integration? DEX Screener provides public DEX pair, token, and search data across supported chains. Use it for token discovery, pair pages, and market widgets. ### How do I connect DEX Screener to a Draftbit app? Go to Integrations and then REST APIs in your Draftbit app and pick DEX Screener from the catalog. Fill in any base URL variables, such as a project ID or host, and the endpoints are available across your screens and to the AI agents while you build. The preconfigured calls need no auth header. ### Does DEX Screener require authentication? The preconfigured DEX Screener endpoints do not need an auth header. Some providers authenticate with a query parameter or an app-level token, and others are public read-only APIs, so check the DEX Screener docs before you call a protected endpoint. The preconfigured endpoints include Search pairs, Get pair, Token pairs, Get tokens. ### What can I build with DEX Screener and Draftbit? Most teams use DEX Screener as a backend platform for a mobile or web app. You might use DEX Screener to power a mobile app with a hosted database and APIs, or to add search, filtering, and pagination to a list-driven feature. ## Related Integrations * [](/integrations/example-data/) [Example Data](/integrations/example-data/) [Draftbit-hosted sample data for testing apps](/integrations/example-data/) * [](/integrations/airtable/) [Airtable](/integrations/airtable/) [Use Airtable bases as app data sources](/integrations/airtable/) * [](/integrations/backendless/) [Backendless](/integrations/backendless/) [Backendless app data, users, and backend services](/integrations/backendless/) * [](/integrations/bubble/) [Bubble](/integrations/bubble/) [Connect to Bubble Data API objects](/integrations/bubble/) [Get started free ](/signup?psource=rest-dex-screener-footer)[Browse all Integrations](/integrations/) --- # Directus REST API integration for Draftbit > Read and manage Directus collections Connect Directus to a Draftbit app and bind its endpoints to screens and AI agents. 1. [Home](/) 2. / 3. [Integrations](/integrations/) 4. / 5. Directus ## What is Directus? Directus generates REST endpoints for collections in your project. Use your Directus host and optionally a static token or access token for private collections. ## Use Directus with Draftbit * Built-in endpoints: List items, Get items, Create items, Update items, Delete items. * Bind any Directus endpoint to a screen, list, form, or AI agent action. * Authentication is configured once per app — secrets stay on the server. * Add custom request and response transforms without forking Directus's client library. ## More ways to connect Directus Want AI agents to query and act on Directus while you build? Use [the Directus MCP server](/mcp/directus/) . ## Example `directus-example.ts` ``` // Example: fetch from Directus const response = await fetch("https://{directus_host}/items/{collection}", { headers: { "Authorization": "Bearer YOUR_DIRECTUS_TOKEN", }, }); const data = await response.json(); ``` ## Use cases * Drive a blog, news feed, or content section from a headless CMS * Let non-engineers publish app content without a release * Localize copy and assets without code changes ## Authentication Authentication uses the \`Authorization\` header. Paste your key once in Draftbit and every request to Directus carries it automatically — secrets stay on the server side. ### Use Directus in a Draftbit app today Start free, connect Directus in minutes, and ship with AI agents that know how to use it. [Start building free](/signup?psource=rest-directus-midpage) ## Frequently asked questions ### What is the Directus REST integration? Directus generates REST endpoints for collections in your project. Use your Directus host and optionally a static token or access token for private collections. ### How do I connect Directus to a Draftbit app? Go to Integrations and then REST APIs in your Draftbit app and pick Directus from the catalog. Paste your API key or token and fill in any base URL variables, such as a project ID or host. The endpoints are then available across your screens and to the AI agents while you build. ### Does Directus require authentication? Most Directus endpoints expect a key or token sent as a header. The preconfigured endpoints include List items, Get items, Create items, Update items. ### What can I build with Directus and Draftbit? Most teams use Directus as a headless CMS for a mobile or web app. You might use Directus to drive a blog, news feed, or content section from a headless CMS, or to let non-engineers publish app content without a release. ## Related Integrations * [](/integrations/contentful/) [Contentful](/integrations/contentful/) [Fetch published content from Contentful](/integrations/contentful/) * [](/integrations/webflow/) [Webflow](/integrations/webflow/) [Read and manage Webflow CMS collections](/integrations/webflow/) * [](/integrations/wordpress/) [WordPress](/integrations/wordpress/) [Use WordPress content through the REST API](/integrations/wordpress/) * [](/integrations/ghost/) [Ghost](/integrations/ghost/) [Fetch published Ghost content](/integrations/ghost/) [Get started free ](/signup?psource=rest-directus-footer)[Browse all Integrations](/integrations/) --- # Etherscan REST API integration for Draftbit > Read Ethereum account and transaction data Connect Etherscan to a Draftbit app and bind its endpoints to screens and AI agents. 1. [Home](/) 2. / 3. [Integrations](/integrations/) 4. / 5. Etherscan ## What is Etherscan? Etherscan's API exposes account balances, transactions, token transfers, gas data, and contract utilities. Add an API key and chain ID for the network you want to query. ## Use Etherscan with Draftbit * Built-in endpoints: Get account balance, List normal transactions, Get gas oracle. * Bind any Etherscan endpoint to a screen, list, form, or AI agent action. * Authentication is configured once per app — secrets stay on the server. * Add custom request and response transforms without forking Etherscan's client library. ## Example `etherscan-example.ts` ``` // Example: fetch from Etherscan // Etherscan doesn't require an auth header for this endpoint — // some providers authenticate via a query param or app-level token. // Check Etherscan's docs for auth requirements on protected endpoints. const response = await fetch("https://api.etherscan.io/v2/api/"); const data = await response.json(); ``` ## Use cases * Power a mobile app with a hosted database and APIs * Add search, filtering, and pagination to a list-driven feature * Read and write app data without managing your own server ## Authentication Add any required auth headers when you connect Etherscan in Draftbit. Secrets stay on the server side. ### Use Etherscan in a Draftbit app today Start free, connect Etherscan in minutes, and ship with AI agents that know how to use it. [Start building free](/signup?psource=rest-etherscan-midpage) ## Frequently asked questions ### What is the Etherscan REST integration? Etherscan's API exposes account balances, transactions, token transfers, gas data, and contract utilities. Add an API key and chain ID for the network you want to query. ### How do I connect Etherscan to a Draftbit app? Go to Integrations and then REST APIs in your Draftbit app and pick Etherscan from the catalog. Fill in any base URL variables, such as a project ID or host, and the endpoints are available across your screens and to the AI agents while you build. The preconfigured calls need no auth header. ### Does Etherscan require authentication? The preconfigured Etherscan endpoints do not need an auth header. Some providers authenticate with a query parameter or an app-level token, and others are public read-only APIs, so check the Etherscan docs before you call a protected endpoint. The preconfigured endpoints include Get account balance, List normal transactions, Get gas oracle. ### What can I build with Etherscan and Draftbit? Most teams use Etherscan as a backend platform for a mobile or web app. You might use Etherscan to power a mobile app with a hosted database and APIs, or to add search, filtering, and pagination to a list-driven feature. ## Related Integrations * [](/integrations/example-data/) [Example Data](/integrations/example-data/) [Draftbit-hosted sample data for testing apps](/integrations/example-data/) * [](/integrations/airtable/) [Airtable](/integrations/airtable/) [Use Airtable bases as app data sources](/integrations/airtable/) * [](/integrations/backendless/) [Backendless](/integrations/backendless/) [Backendless app data, users, and backend services](/integrations/backendless/) * [](/integrations/bubble/) [Bubble](/integrations/bubble/) [Connect to Bubble Data API objects](/integrations/bubble/) [Get started free ](/signup?psource=rest-etherscan-footer)[Browse all Integrations](/integrations/) --- # Example Data REST API integration for Draftbit > Draftbit-hosted sample data for testing apps Connect Example Data to a Draftbit app and bind its endpoints to screens and AI agents. 1. [Home](/) 2. / 3. [Integrations](/integrations/) 4. / 5. Example Data ## What is Example Data? Draftbit's Example Data service (example-data.com) provides unauthenticated sample data for app prototypes, demos, and tests. Use products, people, books, restaurants, todos, and 100+ other collections without creating a backend first. List responses are wrapped in a { data, meta, links } envelope with page/limit pagination. ## Use Example Data with Draftbit * Built-in endpoints: List products, Get product, Search books, List people, List product reviews, Create product. * Bind any Example Data endpoint to a screen, list, form, or AI agent action. * Authentication is configured once per app — secrets stay on the server. * Add custom request and response transforms without forking Example Data's client library. ## Example `example-data-example.ts` ``` // Example: fetch from Example Data // Example Data doesn't require an auth header for this endpoint — // some providers authenticate via a query param or app-level token. // Check Example Data's docs for auth requirements on protected endpoints. const response = await fetch("https://example-data.com/api/v1/products"); const data = await response.json(); ``` ## Use cases * Power a mobile app with a hosted database and APIs * Add search, filtering, and pagination to a list-driven feature * Read and write app data without managing your own server ## Authentication Add any required auth headers when you connect Example Data in Draftbit. Secrets stay on the server side. ### Use Example Data in a Draftbit app today Start free, connect Example Data in minutes, and ship with AI agents that know how to use it. [Start building free](/signup?psource=rest-example-data-midpage) ## Frequently asked questions ### What is the Example Data REST integration? Draftbit's Example Data service (example-data.com) provides unauthenticated sample data for app prototypes, demos, and tests. Use products, people, books, restaurants, todos, and 100+ other collections without creating a backend first. List responses are wrapped in a { data, meta, links } envelope with page/limit pagination. ### How do I connect Example Data to a Draftbit app? Go to Integrations and then REST APIs in your Draftbit app and pick Example Data from the catalog. Fill in any base URL variables, such as a project ID or host, and the endpoints are available across your screens and to the AI agents while you build. The preconfigured calls need no auth header. ### Does Example Data require authentication? The preconfigured Example Data endpoints do not need an auth header. Some providers authenticate with a query parameter or an app-level token, and others are public read-only APIs, so check the Example Data docs before you call a protected endpoint. The preconfigured endpoints include List products, Get product, Search books, List people. ### What can I build with Example Data and Draftbit? Most teams use Example Data as a backend platform for a mobile or web app. You might use Example Data to power a mobile app with a hosted database and APIs, or to add search, filtering, and pagination to a list-driven feature. ## Related Integrations * [](/integrations/airtable/) [Airtable](/integrations/airtable/) [Use Airtable bases as app data sources](/integrations/airtable/) * [](/integrations/backendless/) [Backendless](/integrations/backendless/) [Backendless app data, users, and backend services](/integrations/backendless/) * [](/integrations/bubble/) [Bubble](/integrations/bubble/) [Connect to Bubble Data API objects](/integrations/bubble/) * [](/integrations/sheety/) [Sheety](/integrations/sheety/) [Turn Google Sheets into REST API data](/integrations/sheety/) [Get started free ](/signup?psource=rest-example-data-footer)[Browse all Integrations](/integrations/) --- # Firebase Auth REST API integration for Draftbit > Sign in users with Firebase Auth REST endpoints Connect Firebase Auth to a Draftbit app and bind its endpoints to screens and AI agents. 1. [Home](/) 2. / 3. [Integrations](/integrations/) 4. / 5. Firebase Auth ## What is Firebase Auth? Firebase Authentication exposes REST endpoints for email/password sign-up, sign-in, password reset, and account lookup. Use a Firebase Web API key and rely on Firebase Security Rules for app data authorization. ## Use Firebase Auth with Draftbit * Built-in endpoints: Sign up with email, Sign in with email, Send password reset, Get account info. * Bind any Firebase Auth endpoint to a screen, list, form, or AI agent action. * Authentication is configured once per app — secrets stay on the server. * Add custom request and response transforms without forking Firebase Auth's client library. ## Example `firebase-auth-example.ts` ``` // Example: fetch from Firebase Auth // Firebase Auth doesn't require an auth header for this endpoint — // some providers authenticate via a query param or app-level token. // Check Firebase Auth's docs for auth requirements on protected endpoints. const response = await fetch("https://identitytoolkit.googleapis.com/v1/accounts:signUp"); const data = await response.json(); ``` ## Use cases * Add sign-up, sign-in, and password reset flows to a mobile app * Gate premium features behind authenticated user sessions * Sync user profiles across web and native clients ## Authentication Add any required auth headers when you connect Firebase Auth in Draftbit. Secrets stay on the server side. ### Use Firebase Auth in a Draftbit app today Start free, connect Firebase Auth in minutes, and ship with AI agents that know how to use it. [Start building free](/signup?psource=rest-firebase-auth-midpage) ## Frequently asked questions ### What is the Firebase Auth REST integration? Firebase Authentication exposes REST endpoints for email/password sign-up, sign-in, password reset, and account lookup. Use a Firebase Web API key and rely on Firebase Security Rules for app data authorization. ### How do I connect Firebase Auth to a Draftbit app? Go to Integrations and then REST APIs in your Draftbit app and pick Firebase Auth from the catalog. Fill in any base URL variables, such as a project ID or host, and the endpoints are available across your screens and to the AI agents while you build. The preconfigured calls need no auth header. ### Does Firebase Auth require authentication? The preconfigured Firebase Auth endpoints do not need an auth header. Some providers authenticate with a query parameter or an app-level token, and others are public read-only APIs, so check the Firebase Auth docs before you call a protected endpoint. The preconfigured endpoints include Sign up with email, Sign in with email, Send password reset, Get account info. ### What can I build with Firebase Auth and Draftbit? Most teams use Firebase Auth as a authentication service for a mobile or web app. You might use Firebase Auth to add sign-up, sign-in, and password reset flows to a mobile app, or to gate premium features behind authenticated user sessions. ## Related Integrations * [](/integrations/clerk/) [Clerk](/integrations/clerk/) [User authentication and management](/integrations/clerk/) * [](/integrations/supabase-auth/) [Supabase Auth](/integrations/supabase-auth/) [Use Supabase Auth REST endpoints](/integrations/supabase-auth/) * [](/integrations/generic-oidc/) [Generic OIDC](/integrations/generic-oidc/) [Connect to standards-based OpenID Connect providers](/integrations/generic-oidc/) * [](/integrations/auth0-oidc/) [Auth0 OIDC](/integrations/auth0-oidc/) [Use Auth0 OIDC token and profile endpoints](/integrations/auth0-oidc/) [Get started free ](/signup?psource=rest-firebase-auth-footer)[Browse all Integrations](/integrations/) --- # GeckoTerminal REST API integration for Draftbit > Fetch DEX pool and token data Connect GeckoTerminal to a Draftbit app and bind its endpoints to screens and AI agents. 1. [Home](/) 2. / 3. [Integrations](/integrations/) 4. / 5. GeckoTerminal ## What is GeckoTerminal? GeckoTerminal's public REST API exposes supported networks, pools, tokens, and pool search for decentralized exchange market data. ## Use GeckoTerminal with Draftbit * Built-in endpoints: List networks, Get pool, Get token, Search pools. * Bind any GeckoTerminal endpoint to a screen, list, form, or AI agent action. * Authentication is configured once per app — secrets stay on the server. * Add custom request and response transforms without forking GeckoTerminal's client library. ## Example `geckoterminal-example.ts` ``` // Example: fetch from GeckoTerminal // GeckoTerminal doesn't require an auth header for this endpoint — // some providers authenticate via a query param or app-level token. // Check GeckoTerminal's docs for auth requirements on protected endpoints. const response = await fetch("https://api.geckoterminal.com/api/v2/networks"); const data = await response.json(); ``` ## Use cases * Power a mobile app with a hosted database and APIs * Add search, filtering, and pagination to a list-driven feature * Read and write app data without managing your own server ## Authentication Add any required auth headers when you connect GeckoTerminal in Draftbit. Secrets stay on the server side. ### Use GeckoTerminal in a Draftbit app today Start free, connect GeckoTerminal in minutes, and ship with AI agents that know how to use it. [Start building free](/signup?psource=rest-geckoterminal-midpage) ## Frequently asked questions ### What is the GeckoTerminal REST integration? GeckoTerminal's public REST API exposes supported networks, pools, tokens, and pool search for decentralized exchange market data. ### How do I connect GeckoTerminal to a Draftbit app? Go to Integrations and then REST APIs in your Draftbit app and pick GeckoTerminal from the catalog. Fill in any base URL variables, such as a project ID or host, and the endpoints are available across your screens and to the AI agents while you build. The preconfigured calls need no auth header. ### Does GeckoTerminal require authentication? The preconfigured GeckoTerminal endpoints do not need an auth header. Some providers authenticate with a query parameter or an app-level token, and others are public read-only APIs, so check the GeckoTerminal docs before you call a protected endpoint. The preconfigured endpoints include List networks, Get pool, Get token, Search pools. ### What can I build with GeckoTerminal and Draftbit? Most teams use GeckoTerminal as a backend platform for a mobile or web app. You might use GeckoTerminal to power a mobile app with a hosted database and APIs, or to add search, filtering, and pagination to a list-driven feature. ## Related Integrations * [](/integrations/example-data/) [Example Data](/integrations/example-data/) [Draftbit-hosted sample data for testing apps](/integrations/example-data/) * [](/integrations/airtable/) [Airtable](/integrations/airtable/) [Use Airtable bases as app data sources](/integrations/airtable/) * [](/integrations/backendless/) [Backendless](/integrations/backendless/) [Backendless app data, users, and backend services](/integrations/backendless/) * [](/integrations/bubble/) [Bubble](/integrations/bubble/) [Connect to Bubble Data API objects](/integrations/bubble/) [Get started free ](/signup?psource=rest-geckoterminal-footer)[Browse all Integrations](/integrations/) --- # Generic OIDC REST API integration for Draftbit > Connect to standards-based OpenID Connect providers Connect Generic OIDC to a Draftbit app and bind its endpoints to screens and AI agents. 1. [Home](/) 2. / 3. [Integrations](/integrations/) 4. / 5. Generic OIDC ## What is Generic OIDC? OpenID Connect providers expose discovery, token, userinfo, and JWKS endpoints. Use discovery first to confirm exact endpoint paths for your identity provider. ## Use Generic OIDC with Draftbit * Built-in endpoints: Get discovery document, Exchange authorization code, Get userinfo, Get JWKS. * Bind any Generic OIDC endpoint to a screen, list, form, or AI agent action. * Authentication is configured once per app — secrets stay on the server. * Add custom request and response transforms without forking Generic OIDC's client library. ## Example `generic-oidc-example.ts` ``` // Example: fetch from Generic OIDC const response = await fetch("https://{issuer_host}/{issuer_path}/.well-known/openid-configuration", { headers: { "Authorization": "Bearer YOUR_GENERIC_OIDC_TOKEN", }, }); const data = await response.json(); ``` ## Use cases * Add sign-up, sign-in, and password reset flows to a mobile app * Gate premium features behind authenticated user sessions * Sync user profiles across web and native clients ## Authentication Authentication uses the \`Authorization\` header. Paste your key once in Draftbit and every request to Generic OIDC carries it automatically — secrets stay on the server side. ### Use Generic OIDC in a Draftbit app today Start free, connect Generic OIDC in minutes, and ship with AI agents that know how to use it. [Start building free](/signup?psource=rest-generic-oidc-midpage) ## Frequently asked questions ### What is the Generic OIDC REST integration? OpenID Connect providers expose discovery, token, userinfo, and JWKS endpoints. Use discovery first to confirm exact endpoint paths for your identity provider. ### How do I connect Generic OIDC to a Draftbit app? Go to Integrations and then REST APIs in your Draftbit app and pick Generic OIDC from the catalog. Paste your API key or token and fill in any base URL variables, such as a project ID or host. The endpoints are then available across your screens and to the AI agents while you build. ### Does Generic OIDC require authentication? Most Generic OIDC endpoints expect a key or token sent as a header. The preconfigured endpoints include Get discovery document, Exchange authorization code, Get userinfo, Get JWKS. ### What can I build with Generic OIDC and Draftbit? Most teams use Generic OIDC as a authentication service for a mobile or web app. You might use Generic OIDC to add sign-up, sign-in, and password reset flows to a mobile app, or to gate premium features behind authenticated user sessions. ## Related Integrations * [](/integrations/clerk/) [Clerk](/integrations/clerk/) [User authentication and management](/integrations/clerk/) * [](/integrations/firebase-auth/) [Firebase Auth](/integrations/firebase-auth/) [Sign in users with Firebase Auth REST endpoints](/integrations/firebase-auth/) * [](/integrations/supabase-auth/) [Supabase Auth](/integrations/supabase-auth/) [Use Supabase Auth REST endpoints](/integrations/supabase-auth/) * [](/integrations/auth0-oidc/) [Auth0 OIDC](/integrations/auth0-oidc/) [Use Auth0 OIDC token and profile endpoints](/integrations/auth0-oidc/) [Get started free ](/signup?psource=rest-generic-oidc-footer)[Browse all Integrations](/integrations/) --- # Ghost REST API integration for Draftbit > Fetch published Ghost content Connect Ghost to a Draftbit app and bind its endpoints to screens and AI agents. 1. [Home](/) 2. / 3. [Integrations](/integrations/) 4. / 5. Ghost ## What is Ghost? Ghost's Content API is designed for public app and website reads. Add your Ghost site domain and content API key to load posts, pages, tags, authors, and settings. ## Use Ghost with Draftbit * Built-in endpoints: List posts, Get post by slug, List pages, List tags, List authors. * Bind any Ghost endpoint to a screen, list, form, or AI agent action. * Authentication is configured once per app — secrets stay on the server. * Add custom request and response transforms without forking Ghost's client library. ## Example `ghost-example.ts` ``` // Example: fetch from Ghost // Ghost doesn't require an auth header for this endpoint — // some providers authenticate via a query param or app-level token. // Check Ghost's docs for auth requirements on protected endpoints. const response = await fetch("https://{site_domain}/ghost/api/content/posts/"); const data = await response.json(); ``` ## Use cases * Drive a blog, news feed, or content section from a headless CMS * Let non-engineers publish app content without a release * Localize copy and assets without code changes ## Authentication Add any required auth headers when you connect Ghost in Draftbit. Secrets stay on the server side. ### Use Ghost in a Draftbit app today Start free, connect Ghost in minutes, and ship with AI agents that know how to use it. [Start building free](/signup?psource=rest-ghost-midpage) ## Frequently asked questions ### What is the Ghost REST integration? Ghost's Content API is designed for public app and website reads. Add your Ghost site domain and content API key to load posts, pages, tags, authors, and settings. ### How do I connect Ghost to a Draftbit app? Go to Integrations and then REST APIs in your Draftbit app and pick Ghost from the catalog. Fill in any base URL variables, such as a project ID or host, and the endpoints are available across your screens and to the AI agents while you build. The preconfigured calls need no auth header. ### Does Ghost require authentication? The preconfigured Ghost endpoints do not need an auth header. Some providers authenticate with a query parameter or an app-level token, and others are public read-only APIs, so check the Ghost docs before you call a protected endpoint. The preconfigured endpoints include List posts, Get post by slug, List pages, List tags. ### What can I build with Ghost and Draftbit? Most teams use Ghost as a headless CMS for a mobile or web app. You might use Ghost to drive a blog, news feed, or content section from a headless CMS, or to let non-engineers publish app content without a release. ## Related Integrations * [](/integrations/contentful/) [Contentful](/integrations/contentful/) [Fetch published content from Contentful](/integrations/contentful/) * [](/integrations/directus/) [Directus](/integrations/directus/) [Read and manage Directus collections](/integrations/directus/) * [](/integrations/webflow/) [Webflow](/integrations/webflow/) [Read and manage Webflow CMS collections](/integrations/webflow/) * [](/integrations/wordpress/) [WordPress](/integrations/wordpress/) [Use WordPress content through the REST API](/integrations/wordpress/) [Get started free ](/signup?psource=rest-ghost-footer)[Browse all Integrations](/integrations/) --- # IFTTT Webhook REST API integration for Draftbit > Trigger IFTTT applets with Webhooks Connect IFTTT Webhook to a Draftbit app and bind its endpoints to screens and AI agents. 1. [Home](/) 2. / 3. [Integrations](/integrations/) 4. / 5. IFTTT Webhook ## What is IFTTT Webhook? IFTTT Webhooks trigger applets from simple HTTP requests. Use your Webhooks key and event name to send up to three values or a JSON payload. ## Use IFTTT Webhook with Draftbit * Built-in endpoints: Trigger event, Trigger event with query values. * Bind any IFTTT Webhook endpoint to a screen, list, form, or AI agent action. * Authentication is configured once per app — secrets stay on the server. * Add custom request and response transforms without forking IFTTT Webhook's client library. ## Example `ifttt-webhook-example.ts` ``` // Example: fetch from IFTTT Webhook // IFTTT Webhook doesn't require an auth header for this endpoint — // some providers authenticate via a query param or app-level token. // Check IFTTT Webhook's docs for auth requirements on protected endpoints. const response = await fetch("https://maker.ifttt.com/trigger/{event}/with/key/{webhooks_key}"); const data = await response.json(); ``` ## Use cases * Trigger downstream workflows from app events * Connect form submissions to a Google Sheet or CRM * Stitch together third-party services without writing glue code ## Authentication Add any required auth headers when you connect IFTTT Webhook in Draftbit. Secrets stay on the server side. ### Use IFTTT Webhook in a Draftbit app today Start free, connect IFTTT Webhook in minutes, and ship with AI agents that know how to use it. [Start building free](/signup?psource=rest-ifttt-webhook-midpage) ## Frequently asked questions ### What is the IFTTT Webhook REST integration? IFTTT Webhooks trigger applets from simple HTTP requests. Use your Webhooks key and event name to send up to three values or a JSON payload. ### How do I connect IFTTT Webhook to a Draftbit app? Go to Integrations and then REST APIs in your Draftbit app and pick IFTTT Webhook from the catalog. Fill in any base URL variables, such as a project ID or host, and the endpoints are available across your screens and to the AI agents while you build. The preconfigured calls need no auth header. ### Does IFTTT Webhook require authentication? The preconfigured IFTTT Webhook endpoints do not need an auth header. Some providers authenticate with a query parameter or an app-level token, and others are public read-only APIs, so check the IFTTT Webhook docs before you call a protected endpoint. The preconfigured endpoints include Trigger event, Trigger event with query values. ### What can I build with IFTTT Webhook and Draftbit? Most teams use IFTTT Webhook as a workflow automation platform for a mobile or web app. You might use IFTTT Webhook to trigger downstream workflows from app events, or to connect form submissions to a Google Sheet or CRM. ## Related Integrations * [](/integrations/zapier/) [Zapier](/integrations/zapier/) [Manage Zapier workflows through the Workflow API](/integrations/zapier/) * [](/integrations/make-webhook/) [Make Webhook](/integrations/make-webhook/) [Trigger Make scenarios with custom webhooks](/integrations/make-webhook/) * [](/integrations/n8n-webhook/) [n8n Webhook](/integrations/n8n-webhook/) [Trigger n8n workflows with webhook URLs](/integrations/n8n-webhook/) * [](/integrations/pipedream-workflow/) [Pipedream Workflow](/integrations/pipedream-workflow/) [Trigger Pipedream workflows over HTTP](/integrations/pipedream-workflow/) [Get started free ](/signup?psource=rest-ifttt-webhook-footer)[Browse all Integrations](/integrations/) --- # Keycloak OIDC REST API integration for Draftbit > Connect to Keycloak OpenID Connect realms Connect Keycloak OIDC to a Draftbit app and bind its endpoints to screens and AI agents. 1. [Home](/) 2. / 3. [Integrations](/integrations/) 4. / 5. Keycloak OIDC ## What is Keycloak OIDC? Keycloak exposes standards-based OIDC endpoints per realm. Use Authorization Code with PKCE for frontend apps, and use the discovery document to confirm issuer configuration. ## Use Keycloak OIDC with Draftbit * Built-in endpoints: Get discovery document, Exchange authorization code, Get userinfo, Get JWKS. * Bind any Keycloak OIDC endpoint to a screen, list, form, or AI agent action. * Authentication is configured once per app — secrets stay on the server. * Add custom request and response transforms without forking Keycloak OIDC's client library. ## Example `keycloak-oidc-example.ts` ``` // Example: fetch from Keycloak OIDC const response = await fetch("https://{keycloak_host}/realms/{realm}/.well-known/openid-configuration", { headers: { "Authorization": "Bearer YOUR_KEYCLOAK_OIDC_TOKEN", }, }); const data = await response.json(); ``` ## Use cases * Add sign-up, sign-in, and password reset flows to a mobile app * Gate premium features behind authenticated user sessions * Sync user profiles across web and native clients ## Authentication Authentication uses the \`Authorization\` header. Paste your key once in Draftbit and every request to Keycloak OIDC carries it automatically — secrets stay on the server side. ### Use Keycloak OIDC in a Draftbit app today Start free, connect Keycloak OIDC in minutes, and ship with AI agents that know how to use it. [Start building free](/signup?psource=rest-keycloak-oidc-midpage) ## Frequently asked questions ### What is the Keycloak OIDC REST integration? Keycloak exposes standards-based OIDC endpoints per realm. Use Authorization Code with PKCE for frontend apps, and use the discovery document to confirm issuer configuration. ### How do I connect Keycloak OIDC to a Draftbit app? Go to Integrations and then REST APIs in your Draftbit app and pick Keycloak OIDC from the catalog. Paste your API key or token and fill in any base URL variables, such as a project ID or host. The endpoints are then available across your screens and to the AI agents while you build. ### Does Keycloak OIDC require authentication? Most Keycloak OIDC endpoints expect a key or token sent as a header. The preconfigured endpoints include Get discovery document, Exchange authorization code, Get userinfo, Get JWKS. ### What can I build with Keycloak OIDC and Draftbit? Most teams use Keycloak OIDC as a authentication service for a mobile or web app. You might use Keycloak OIDC to add sign-up, sign-in, and password reset flows to a mobile app, or to gate premium features behind authenticated user sessions. ## Related Integrations * [](/integrations/clerk/) [Clerk](/integrations/clerk/) [User authentication and management](/integrations/clerk/) * [](/integrations/firebase-auth/) [Firebase Auth](/integrations/firebase-auth/) [Sign in users with Firebase Auth REST endpoints](/integrations/firebase-auth/) * [](/integrations/supabase-auth/) [Supabase Auth](/integrations/supabase-auth/) [Use Supabase Auth REST endpoints](/integrations/supabase-auth/) * [](/integrations/generic-oidc/) [Generic OIDC](/integrations/generic-oidc/) [Connect to standards-based OpenID Connect providers](/integrations/generic-oidc/) [Get started free ](/signup?psource=rest-keycloak-oidc-footer)[Browse all Integrations](/integrations/) --- # Kontent.ai REST API integration for Draftbit > Fetch Kontent.ai content items Connect Kontent.ai to a Draftbit app and bind its endpoints to screens and AI agents. 1. [Home](/) 2. / 3. [Integrations](/integrations/) 4. / 5. Kontent.ai ## What is Kontent.ai? Kontent.ai's Delivery API lets frontend clients fetch published content items, content types, and taxonomies. Add your environment ID and an optional bearer token for secured delivery or preview content. ## Use Kontent.ai with Draftbit * Built-in endpoints: List items, Get item, List content types, List taxonomies. * Bind any Kontent.ai endpoint to a screen, list, form, or AI agent action. * Authentication is configured once per app — secrets stay on the server. * Add custom request and response transforms without forking Kontent.ai's client library. ## Example `kontent-ai-example.ts` ``` // Example: fetch from Kontent.ai const response = await fetch("https://deliver.kontent.ai/{environment_id}/items", { headers: { "Authorization": "Bearer YOUR_KONTENT_AI_TOKEN", }, }); const data = await response.json(); ``` ## Use cases * Drive a blog, news feed, or content section from a headless CMS * Let non-engineers publish app content without a release * Localize copy and assets without code changes ## Authentication Authentication uses the \`Authorization\` header. Paste your key once in Draftbit and every request to Kontent.ai carries it automatically — secrets stay on the server side. ### Use Kontent.ai in a Draftbit app today Start free, connect Kontent.ai in minutes, and ship with AI agents that know how to use it. [Start building free](/signup?psource=rest-kontent-ai-midpage) ## Frequently asked questions ### What is the Kontent.ai REST integration? Kontent.ai's Delivery API lets frontend clients fetch published content items, content types, and taxonomies. Add your environment ID and an optional bearer token for secured delivery or preview content. ### How do I connect Kontent.ai to a Draftbit app? Go to Integrations and then REST APIs in your Draftbit app and pick Kontent.ai from the catalog. Paste your API key or token and fill in any base URL variables, such as a project ID or host. The endpoints are then available across your screens and to the AI agents while you build. ### Does Kontent.ai require authentication? Most Kontent.ai endpoints expect a key or token sent as a header. The preconfigured endpoints include List items, Get item, List content types, List taxonomies. ### What can I build with Kontent.ai and Draftbit? Most teams use Kontent.ai as a headless CMS for a mobile or web app. You might use Kontent.ai to drive a blog, news feed, or content section from a headless CMS, or to let non-engineers publish app content without a release. ## Related Integrations * [](/integrations/contentful/) [Contentful](/integrations/contentful/) [Fetch published content from Contentful](/integrations/contentful/) * [](/integrations/directus/) [Directus](/integrations/directus/) [Read and manage Directus collections](/integrations/directus/) * [](/integrations/webflow/) [Webflow](/integrations/webflow/) [Read and manage Webflow CMS collections](/integrations/webflow/) * [](/integrations/wordpress/) [WordPress](/integrations/wordpress/) [Use WordPress content through the REST API](/integrations/wordpress/) [Get started free ](/signup?psource=rest-kontent-ai-footer)[Browse all Integrations](/integrations/) --- # Make Webhook REST API integration for Draftbit > Trigger Make scenarios with custom webhooks Connect Make Webhook to a Draftbit app and bind its endpoints to screens and AI agents. 1. [Home](/) 2. / 3. [Integrations](/integrations/) 4. / 5. Make Webhook ## What is Make Webhook? Make custom webhooks let apps send JSON payloads into scenarios. Use the webhook host from your Make scenario URL, such as hook.us1.make.com. ## Use Make Webhook with Draftbit * Built-in endpoints: Trigger webhook, Trigger webhook with query. * Bind any Make Webhook endpoint to a screen, list, form, or AI agent action. * Authentication is configured once per app — secrets stay on the server. * Add custom request and response transforms without forking Make Webhook's client library. ## Example `make-webhook-example.ts` ``` // Example: fetch from Make Webhook // Make Webhook doesn't require an auth header for this endpoint — // some providers authenticate via a query param or app-level token. // Check Make Webhook's docs for auth requirements on protected endpoints. const response = await fetch("https://{make_webhook_host}/{webhook_id}"); const data = await response.json(); ``` ## Use cases * Trigger downstream workflows from app events * Connect form submissions to a Google Sheet or CRM * Stitch together third-party services without writing glue code ## Authentication Add any required auth headers when you connect Make Webhook in Draftbit. Secrets stay on the server side. ### Use Make Webhook in a Draftbit app today Start free, connect Make Webhook in minutes, and ship with AI agents that know how to use it. [Start building free](/signup?psource=rest-make-webhook-midpage) ## Frequently asked questions ### What is the Make Webhook REST integration? Make custom webhooks let apps send JSON payloads into scenarios. Use the webhook host from your Make scenario URL, such as hook.us1.make.com. ### How do I connect Make Webhook to a Draftbit app? Go to Integrations and then REST APIs in your Draftbit app and pick Make Webhook from the catalog. Fill in any base URL variables, such as a project ID or host, and the endpoints are available across your screens and to the AI agents while you build. The preconfigured calls need no auth header. ### Does Make Webhook require authentication? The preconfigured Make Webhook endpoints do not need an auth header. Some providers authenticate with a query parameter or an app-level token, and others are public read-only APIs, so check the Make Webhook docs before you call a protected endpoint. The preconfigured endpoints include Trigger webhook, Trigger webhook with query. ### What can I build with Make Webhook and Draftbit? Most teams use Make Webhook as a workflow automation platform for a mobile or web app. You might use Make Webhook to trigger downstream workflows from app events, or to connect form submissions to a Google Sheet or CRM. ## Related Integrations * [](/integrations/zapier/) [Zapier](/integrations/zapier/) [Manage Zapier workflows through the Workflow API](/integrations/zapier/) * [](/integrations/n8n-webhook/) [n8n Webhook](/integrations/n8n-webhook/) [Trigger n8n workflows with webhook URLs](/integrations/n8n-webhook/) * [](/integrations/ifttt-webhook/) [IFTTT Webhook](/integrations/ifttt-webhook/) [Trigger IFTTT applets with Webhooks](/integrations/ifttt-webhook/) * [](/integrations/pipedream-workflow/) [Pipedream Workflow](/integrations/pipedream-workflow/) [Trigger Pipedream workflows over HTTP](/integrations/pipedream-workflow/) [Get started free ](/signup?psource=rest-make-webhook-footer)[Browse all Integrations](/integrations/) --- # n8n Webhook REST API integration for Draftbit > Trigger n8n workflows with webhook URLs Connect n8n Webhook to a Draftbit app and bind its endpoints to screens and AI agents. 1. [Home](/) 2. / 3. [Integrations](/integrations/) 4. / 5. n8n Webhook ## What is n8n Webhook? n8n Webhook Trigger nodes expose production and test webhook URLs. Use the production /webhook path for deployed workflows and /webhook-test while building. ## Use n8n Webhook with Draftbit * Built-in endpoints: Trigger production webhook, Trigger test webhook, Get production webhook. * Bind any n8n Webhook endpoint to a screen, list, form, or AI agent action. * Authentication is configured once per app — secrets stay on the server. * Add custom request and response transforms without forking n8n Webhook's client library. ## Example `n8n-webhook-example.ts` ``` // Example: fetch from n8n Webhook // n8n Webhook doesn't require an auth header for this endpoint — // some providers authenticate via a query param or app-level token. // Check n8n Webhook's docs for auth requirements on protected endpoints. const response = await fetch("https://{n8n_host}/webhook/{webhook_path}"); const data = await response.json(); ``` ## Use cases * Trigger downstream workflows from app events * Connect form submissions to a Google Sheet or CRM * Stitch together third-party services without writing glue code ## Authentication Add any required auth headers when you connect n8n Webhook in Draftbit. Secrets stay on the server side. ### Use n8n Webhook in a Draftbit app today Start free, connect n8n Webhook in minutes, and ship with AI agents that know how to use it. [Start building free](/signup?psource=rest-n8n-webhook-midpage) ## Frequently asked questions ### What is the n8n Webhook REST integration? n8n Webhook Trigger nodes expose production and test webhook URLs. Use the production /webhook path for deployed workflows and /webhook-test while building. ### How do I connect n8n Webhook to a Draftbit app? Go to Integrations and then REST APIs in your Draftbit app and pick n8n Webhook from the catalog. Fill in any base URL variables, such as a project ID or host, and the endpoints are available across your screens and to the AI agents while you build. The preconfigured calls need no auth header. ### Does n8n Webhook require authentication? The preconfigured n8n Webhook endpoints do not need an auth header. Some providers authenticate with a query parameter or an app-level token, and others are public read-only APIs, so check the n8n Webhook docs before you call a protected endpoint. The preconfigured endpoints include Trigger production webhook, Trigger test webhook, Get production webhook. ### What can I build with n8n Webhook and Draftbit? Most teams use n8n Webhook as a workflow automation platform for a mobile or web app. You might use n8n Webhook to trigger downstream workflows from app events, or to connect form submissions to a Google Sheet or CRM. ## Related Integrations * [](/integrations/zapier/) [Zapier](/integrations/zapier/) [Manage Zapier workflows through the Workflow API](/integrations/zapier/) * [](/integrations/make-webhook/) [Make Webhook](/integrations/make-webhook/) [Trigger Make scenarios with custom webhooks](/integrations/make-webhook/) * [](/integrations/ifttt-webhook/) [IFTTT Webhook](/integrations/ifttt-webhook/) [Trigger IFTTT applets with Webhooks](/integrations/ifttt-webhook/) * [](/integrations/pipedream-workflow/) [Pipedream Workflow](/integrations/pipedream-workflow/) [Trigger Pipedream workflows over HTTP](/integrations/pipedream-workflow/) [Get started free ](/signup?psource=rest-n8n-webhook-footer)[Browse all Integrations](/integrations/) --- # NocoDB REST API integration for Draftbit > Use NocoDB tables as REST data sources Connect NocoDB to a Draftbit app and bind its endpoints to screens and AI agents. 1. [Home](/) 2. / 3. [Integrations](/integrations/) 4. / 5. NocoDB ## What is NocoDB? NocoDB exposes spreadsheet-style tables through REST APIs. Add your NocoDB host and optional token, then use table IDs to list, create, update, and delete records. ## Use NocoDB with Draftbit * Built-in endpoints: List records, Get records, Create records, Update records, Delete records. * Bind any NocoDB endpoint to a screen, list, form, or AI agent action. * Authentication is configured once per app — secrets stay on the server. * Add custom request and response transforms without forking NocoDB's client library. ## Example `nocodb-example.ts` ``` // Example: fetch from NocoDB const response = await fetch("https://{nocodb_host}/api/v2/tables/{table_id}/records", { headers: { "xc-token": "YOUR_NOCODB_TOKEN", }, }); const data = await response.json(); ``` ## Use cases * Power a mobile app with a hosted database and APIs * Add search, filtering, and pagination to a list-driven feature * Read and write app data without managing your own server ## Authentication Authentication uses the \`xc-token\` header. Paste your key once in Draftbit and every request to NocoDB carries it automatically — secrets stay on the server side. ### Use NocoDB in a Draftbit app today Start free, connect NocoDB in minutes, and ship with AI agents that know how to use it. [Start building free](/signup?psource=rest-nocodb-midpage) ## Frequently asked questions ### What is the NocoDB REST integration? NocoDB exposes spreadsheet-style tables through REST APIs. Add your NocoDB host and optional token, then use table IDs to list, create, update, and delete records. ### How do I connect NocoDB to a Draftbit app? Go to Integrations and then REST APIs in your Draftbit app and pick NocoDB from the catalog. Paste your API key or token and fill in any base URL variables, such as a project ID or host. The endpoints are then available across your screens and to the AI agents while you build. ### Does NocoDB require authentication? Most NocoDB endpoints expect a key or token sent as a header. The preconfigured endpoints include List records, Get records, Create records, Update records. ### What can I build with NocoDB and Draftbit? Most teams use NocoDB as a backend platform for a mobile or web app. You might use NocoDB to power a mobile app with a hosted database and APIs, or to add search, filtering, and pagination to a list-driven feature. ## Related Integrations * [](/integrations/example-data/) [Example Data](/integrations/example-data/) [Draftbit-hosted sample data for testing apps](/integrations/example-data/) * [](/integrations/airtable/) [Airtable](/integrations/airtable/) [Use Airtable bases as app data sources](/integrations/airtable/) * [](/integrations/backendless/) [Backendless](/integrations/backendless/) [Backendless app data, users, and backend services](/integrations/backendless/) * [](/integrations/bubble/) [Bubble](/integrations/bubble/) [Connect to Bubble Data API objects](/integrations/bubble/) [Get started free ](/signup?psource=rest-nocodb-footer)[Browse all Integrations](/integrations/) --- # Pipedream Workflow REST API integration for Draftbit > Trigger Pipedream workflows over HTTP Connect Pipedream Workflow to a Draftbit app and bind its endpoints to screens and AI agents. 1. [Home](/) 2. / 3. [Integrations](/integrations/) 4. / 5. Pipedream Workflow ## What is Pipedream Workflow? Pipedream HTTP triggers expose endpoint URLs for workflows. Use the endpoint host from Pipedream and send JSON payloads from apps or websites. ## Use Pipedream Workflow with Draftbit * Built-in endpoints: Trigger workflow, Trigger workflow with GET. * Bind any Pipedream Workflow endpoint to a screen, list, form, or AI agent action. * Authentication is configured once per app — secrets stay on the server. * Add custom request and response transforms without forking Pipedream Workflow's client library. ## Example `pipedream-workflow-example.ts` ``` // Example: fetch from Pipedream Workflow // Pipedream Workflow doesn't require an auth header for this endpoint — // some providers authenticate via a query param or app-level token. // Check Pipedream Workflow's docs for auth requirements on protected endpoints. const response = await fetch("https://{pipedream_endpoint_host}/{workflow_path}"); const data = await response.json(); ``` ## Use cases * Trigger downstream workflows from app events * Connect form submissions to a Google Sheet or CRM * Stitch together third-party services without writing glue code ## Authentication Add any required auth headers when you connect Pipedream Workflow in Draftbit. Secrets stay on the server side. ### Use Pipedream Workflow in a Draftbit app today Start free, connect Pipedream Workflow in minutes, and ship with AI agents that know how to use it. [Start building free](/signup?psource=rest-pipedream-workflow-midpage) ## Frequently asked questions ### What is the Pipedream Workflow REST integration? Pipedream HTTP triggers expose endpoint URLs for workflows. Use the endpoint host from Pipedream and send JSON payloads from apps or websites. ### How do I connect Pipedream Workflow to a Draftbit app? Go to Integrations and then REST APIs in your Draftbit app and pick Pipedream Workflow from the catalog. Fill in any base URL variables, such as a project ID or host, and the endpoints are available across your screens and to the AI agents while you build. The preconfigured calls need no auth header. ### Does Pipedream Workflow require authentication? The preconfigured Pipedream Workflow endpoints do not need an auth header. Some providers authenticate with a query parameter or an app-level token, and others are public read-only APIs, so check the Pipedream Workflow docs before you call a protected endpoint. The preconfigured endpoints include Trigger workflow, Trigger workflow with GET. ### What can I build with Pipedream Workflow and Draftbit? Most teams use Pipedream Workflow as a workflow automation platform for a mobile or web app. You might use Pipedream Workflow to trigger downstream workflows from app events, or to connect form submissions to a Google Sheet or CRM. ## Related Integrations * [](/integrations/zapier/) [Zapier](/integrations/zapier/) [Manage Zapier workflows through the Workflow API](/integrations/zapier/) * [](/integrations/make-webhook/) [Make Webhook](/integrations/make-webhook/) [Trigger Make scenarios with custom webhooks](/integrations/make-webhook/) * [](/integrations/n8n-webhook/) [n8n Webhook](/integrations/n8n-webhook/) [Trigger n8n workflows with webhook URLs](/integrations/n8n-webhook/) * [](/integrations/ifttt-webhook/) [IFTTT Webhook](/integrations/ifttt-webhook/) [Trigger IFTTT applets with Webhooks](/integrations/ifttt-webhook/) [Get started free ](/signup?psource=rest-pipedream-workflow-footer)[Browse all Integrations](/integrations/) --- # Prismic REST API integration for Draftbit > Query Prismic documents over REST Connect Prismic to a Draftbit app and bind its endpoints to screens and AI agents. 1. [Home](/) 2. / 3. [Integrations](/integrations/) 4. / 5. Prismic ## What is Prismic? Prismic's REST API lets apps fetch repository metadata, refs, and published documents. Use the repository API endpoint first to choose the current ref, then query documents by type or UID. ## Use Prismic with Draftbit * Built-in endpoints: Get repository, Search documents, Get documents by type. * Bind any Prismic endpoint to a screen, list, form, or AI agent action. * Authentication is configured once per app — secrets stay on the server. * Add custom request and response transforms without forking Prismic's client library. ## More ways to connect Prismic Prefer GraphQL? Connect to [the Prismic GraphQL integration](/graphql/prismic-graphql/) instead. ## Example `prismic-example.ts` ``` // Example: fetch from Prismic const response = await fetch("https://{repository_name}.cdn.prismic.io/api/v2/", { headers: { "Authorization": "Bearer YOUR_PRISMIC_TOKEN", }, }); const data = await response.json(); ``` ## Use cases * Drive a blog, news feed, or content section from a headless CMS * Let non-engineers publish app content without a release * Localize copy and assets without code changes ## Authentication Authentication uses the \`Authorization\` header. Paste your key once in Draftbit and every request to Prismic carries it automatically — secrets stay on the server side. ### Use Prismic in a Draftbit app today Start free, connect Prismic in minutes, and ship with AI agents that know how to use it. [Start building free](/signup?psource=rest-prismic-midpage) ## Frequently asked questions ### What is the Prismic REST integration? Prismic's REST API lets apps fetch repository metadata, refs, and published documents. Use the repository API endpoint first to choose the current ref, then query documents by type or UID. ### How do I connect Prismic to a Draftbit app? Go to Integrations and then REST APIs in your Draftbit app and pick Prismic from the catalog. Paste your API key or token and fill in any base URL variables, such as a project ID or host. The endpoints are then available across your screens and to the AI agents while you build. ### Does Prismic require authentication? Most Prismic endpoints expect a key or token sent as a header. The preconfigured endpoints include Get repository, Search documents, Get documents by type. ### What can I build with Prismic and Draftbit? Most teams use Prismic as a headless CMS for a mobile or web app. You might use Prismic to drive a blog, news feed, or content section from a headless CMS, or to let non-engineers publish app content without a release. ## Related Integrations * [](/integrations/contentful/) [Contentful](/integrations/contentful/) [Fetch published content from Contentful](/integrations/contentful/) * [](/integrations/directus/) [Directus](/integrations/directus/) [Read and manage Directus collections](/integrations/directus/) * [](/integrations/webflow/) [Webflow](/integrations/webflow/) [Read and manage Webflow CMS collections](/integrations/webflow/) * [](/integrations/wordpress/) [WordPress](/integrations/wordpress/) [Use WordPress content through the REST API](/integrations/wordpress/) [Get started free ](/signup?psource=rest-prismic-footer)[Browse all Integrations](/integrations/) --- # Resend REST API integration for Draftbit > Send transactional emails built for developers Connect Resend to a Draftbit app and bind its endpoints to screens and AI agents. 1. [Home](/) 2. / 3. [Integrations](/integrations/) 4. / 5. Resend ## What is Resend? Resend is a modern email API for developers. Send transactional emails, notifications, and marketing campaigns with a simple REST API. Ideal for mobile apps needing reliable email delivery. ## Use Resend with Draftbit * Built-in endpoints: Send email, Get email, List API keys. * Bind any Resend endpoint to a screen, list, form, or AI agent action. * Authentication is configured once per app — secrets stay on the server. * Add custom request and response transforms without forking Resend's client library. ## Example `resend-example.ts` ``` // Example: fetch from Resend const response = await fetch("https://api.resend.com/emails", { headers: { "Authorization": "Bearer YOUR_RESEND_TOKEN", }, }); const data = await response.json(); ``` ## Use cases * Send password reset and verification emails * Deliver receipts and order confirmations * Notify users of activity from inside the app ## Authentication Authentication uses the \`Authorization\` header. Paste your key once in Draftbit and every request to Resend carries it automatically — secrets stay on the server side. ### Use Resend in a Draftbit app today Start free, connect Resend in minutes, and ship with AI agents that know how to use it. [Start building free](/signup?psource=rest-resend-midpage) ## Frequently asked questions ### What is the Resend REST integration? Resend is a modern email API for developers. Send transactional emails, notifications, and marketing campaigns with a simple REST API. Ideal for mobile apps needing reliable email delivery. ### How do I connect Resend to a Draftbit app? Go to Integrations and then REST APIs in your Draftbit app and pick Resend from the catalog. Paste your API key or token and fill in any base URL variables, such as a project ID or host. The endpoints are then available across your screens and to the AI agents while you build. ### Does Resend require authentication? Most Resend endpoints expect a key or token sent as a header. The preconfigured endpoints include Send email, Get email, List API keys. ### What can I build with Resend and Draftbit? Most teams use Resend as a email delivery service for a mobile or web app. You might use Resend to send password reset and verification emails, or to deliver receipts and order confirmations. [Get started free ](/signup?psource=rest-resend-footer)[Browse all Integrations](/integrations/) --- # Sanity REST API integration for Draftbit > Query Sanity datasets from apps Connect Sanity to a Draftbit app and bind its endpoints to screens and AI agents. 1. [Home](/) 2. / 3. [Integrations](/integrations/) 4. / 5. Sanity ## What is Sanity? Sanity's CDN-backed HTTP API is useful for public app reads. Add your project ID and dataset, and optionally a bearer token for private datasets. ## Use Sanity with Draftbit * Built-in endpoints: Query documents, Get document, Get document by ID query. * Bind any Sanity endpoint to a screen, list, form, or AI agent action. * Authentication is configured once per app — secrets stay on the server. * Add custom request and response transforms without forking Sanity's client library. ## More ways to connect Sanity Prefer GraphQL? Connect to [the Sanity GraphQL integration](/graphql/sanity-graphql/) instead. ## Example `sanity-example.ts` ``` // Example: fetch from Sanity const response = await fetch("https://{project_id}.apicdn.sanity.io/v2025-02-19/data/query/{dataset}", { headers: { "Authorization": "Bearer YOUR_SANITY_TOKEN", }, }); const data = await response.json(); ``` ## Use cases * Drive a blog, news feed, or content section from a headless CMS * Let non-engineers publish app content without a release * Localize copy and assets without code changes ## Authentication Authentication uses the \`Authorization\` header. Paste your key once in Draftbit and every request to Sanity carries it automatically — secrets stay on the server side. ### Use Sanity in a Draftbit app today Start free, connect Sanity in minutes, and ship with AI agents that know how to use it. [Start building free](/signup?psource=rest-sanity-midpage) ## Frequently asked questions ### What is the Sanity REST integration? Sanity's CDN-backed HTTP API is useful for public app reads. Add your project ID and dataset, and optionally a bearer token for private datasets. ### How do I connect Sanity to a Draftbit app? Go to Integrations and then REST APIs in your Draftbit app and pick Sanity from the catalog. Paste your API key or token and fill in any base URL variables, such as a project ID or host. The endpoints are then available across your screens and to the AI agents while you build. ### Does Sanity require authentication? Most Sanity endpoints expect a key or token sent as a header. The preconfigured endpoints include Query documents, Get document, Get document by ID query. ### What can I build with Sanity and Draftbit? Most teams use Sanity as a headless CMS for a mobile or web app. You might use Sanity to drive a blog, news feed, or content section from a headless CMS, or to let non-engineers publish app content without a release. ## Related Integrations * [](/integrations/contentful/) [Contentful](/integrations/contentful/) [Fetch published content from Contentful](/integrations/contentful/) * [](/integrations/directus/) [Directus](/integrations/directus/) [Read and manage Directus collections](/integrations/directus/) * [](/integrations/webflow/) [Webflow](/integrations/webflow/) [Read and manage Webflow CMS collections](/integrations/webflow/) * [](/integrations/wordpress/) [WordPress](/integrations/wordpress/) [Use WordPress content through the REST API](/integrations/wordpress/) [Get started free ](/signup?psource=rest-sanity-footer)[Browse all Integrations](/integrations/) --- # Sheety REST API integration for Draftbit > Turn Google Sheets into REST API data Connect Sheety to a Draftbit app and bind its endpoints to screens and AI agents. 1. [Home](/) 2. / 3. [Integrations](/integrations/) 4. / 5. Sheety ## What is Sheety? Sheety turns a Google Sheet into a RESTful JSON API. Add your username, project name, and optional bearer token, then use sheet endpoints to retrieve and update rows. ## Use Sheety with Draftbit * Built-in endpoints: List rows, Get rows, Create rows, Update rows, Delete rows. * Bind any Sheety endpoint to a screen, list, form, or AI agent action. * Authentication is configured once per app — secrets stay on the server. * Add custom request and response transforms without forking Sheety's client library. ## Example `sheety-example.ts` ``` // Example: fetch from Sheety const response = await fetch("https://api.sheety.co/{username}/{project_name}/{sheet_name}", { headers: { "Authorization": "Bearer YOUR_SHEETY_TOKEN", }, }); const data = await response.json(); ``` ## Use cases * Power a mobile app with a hosted database and APIs * Add search, filtering, and pagination to a list-driven feature * Read and write app data without managing your own server ## Authentication Authentication uses the \`Authorization\` header. Paste your key once in Draftbit and every request to Sheety carries it automatically — secrets stay on the server side. ### Use Sheety in a Draftbit app today Start free, connect Sheety in minutes, and ship with AI agents that know how to use it. [Start building free](/signup?psource=rest-sheety-midpage) ## Frequently asked questions ### What is the Sheety REST integration? Sheety turns a Google Sheet into a RESTful JSON API. Add your username, project name, and optional bearer token, then use sheet endpoints to retrieve and update rows. ### How do I connect Sheety to a Draftbit app? Go to Integrations and then REST APIs in your Draftbit app and pick Sheety from the catalog. Paste your API key or token and fill in any base URL variables, such as a project ID or host. The endpoints are then available across your screens and to the AI agents while you build. ### Does Sheety require authentication? Most Sheety endpoints expect a key or token sent as a header. The preconfigured endpoints include List rows, Get rows, Create rows, Update rows. ### What can I build with Sheety and Draftbit? Most teams use Sheety as a backend platform for a mobile or web app. You might use Sheety to power a mobile app with a hosted database and APIs, or to add search, filtering, and pagination to a list-driven feature. ## Related Integrations * [](/integrations/example-data/) [Example Data](/integrations/example-data/) [Draftbit-hosted sample data for testing apps](/integrations/example-data/) * [](/integrations/airtable/) [Airtable](/integrations/airtable/) [Use Airtable bases as app data sources](/integrations/airtable/) * [](/integrations/backendless/) [Backendless](/integrations/backendless/) [Backendless app data, users, and backend services](/integrations/backendless/) * [](/integrations/bubble/) [Bubble](/integrations/bubble/) [Connect to Bubble Data API objects](/integrations/bubble/) [Get started free ](/signup?psource=rest-sheety-footer)[Browse all Integrations](/integrations/) --- # Storyblok REST API integration for Draftbit > Fetch Storyblok stories and links Connect Storyblok to a Draftbit app and bind its endpoints to screens and AI agents. 1. [Home](/) 2. / 3. [Integrations](/integrations/) 4. / 5. Storyblok ## What is Storyblok? Storyblok's Content Delivery API lets apps and websites fetch published stories, links, datasource entries, and assets with a public access token. ## Use Storyblok with Draftbit * Built-in endpoints: List stories, Get story, List links, List datasource entries. * Bind any Storyblok endpoint to a screen, list, form, or AI agent action. * Authentication is configured once per app — secrets stay on the server. * Add custom request and response transforms without forking Storyblok's client library. ## More ways to connect Storyblok Prefer GraphQL? Connect to [the Storyblok GraphQL integration](/graphql/storyblok-graphql/) instead. ## Example `storyblok-example.ts` ``` // Example: fetch from Storyblok // Storyblok doesn't require an auth header for this endpoint — // some providers authenticate via a query param or app-level token. // Check Storyblok's docs for auth requirements on protected endpoints. const response = await fetch("https://api.storyblok.com/v2/cdn/stories"); const data = await response.json(); ``` ## Use cases * Drive a blog, news feed, or content section from a headless CMS * Let non-engineers publish app content without a release * Localize copy and assets without code changes ## Authentication Add any required auth headers when you connect Storyblok in Draftbit. Secrets stay on the server side. ### Use Storyblok in a Draftbit app today Start free, connect Storyblok in minutes, and ship with AI agents that know how to use it. [Start building free](/signup?psource=rest-storyblok-midpage) ## Frequently asked questions ### What is the Storyblok REST integration? Storyblok's Content Delivery API lets apps and websites fetch published stories, links, datasource entries, and assets with a public access token. ### How do I connect Storyblok to a Draftbit app? Go to Integrations and then REST APIs in your Draftbit app and pick Storyblok from the catalog. Fill in any base URL variables, such as a project ID or host, and the endpoints are available across your screens and to the AI agents while you build. The preconfigured calls need no auth header. ### Does Storyblok require authentication? The preconfigured Storyblok endpoints do not need an auth header. Some providers authenticate with a query parameter or an app-level token, and others are public read-only APIs, so check the Storyblok docs before you call a protected endpoint. The preconfigured endpoints include List stories, Get story, List links, List datasource entries. ### What can I build with Storyblok and Draftbit? Most teams use Storyblok as a headless CMS for a mobile or web app. You might use Storyblok to drive a blog, news feed, or content section from a headless CMS, or to let non-engineers publish app content without a release. ## Related Integrations * [](/integrations/contentful/) [Contentful](/integrations/contentful/) [Fetch published content from Contentful](/integrations/contentful/) * [](/integrations/directus/) [Directus](/integrations/directus/) [Read and manage Directus collections](/integrations/directus/) * [](/integrations/webflow/) [Webflow](/integrations/webflow/) [Read and manage Webflow CMS collections](/integrations/webflow/) * [](/integrations/wordpress/) [WordPress](/integrations/wordpress/) [Use WordPress content through the REST API](/integrations/wordpress/) [Get started free ](/signup?psource=rest-storyblok-footer)[Browse all Integrations](/integrations/) --- # Strapi REST API integration for Draftbit > Use Strapi collection REST endpoints Connect Strapi to a Draftbit app and bind its endpoints to screens and AI agents. 1. [Home](/) 2. / 3. [Integrations](/integrations/) 4. / 5. Strapi ## What is Strapi? Strapi's REST API exposes collection and single types based on content permissions. Public content can be read without a token, while protected reads and writes need a bearer token. ## Use Strapi with Draftbit * Built-in endpoints: List entries, Get entries, Create entries, Update entries, Delete entries. * Bind any Strapi endpoint to a screen, list, form, or AI agent action. * Authentication is configured once per app — secrets stay on the server. * Add custom request and response transforms without forking Strapi's client library. ## More ways to connect Strapi Prefer GraphQL? Connect to [the Strapi GraphQL integration](/graphql/strapi-graphql/) instead. ## Example `strapi-example.ts` ``` // Example: fetch from Strapi const response = await fetch("https://{strapi_host}/api/{content_type}", { headers: { "Authorization": "Bearer YOUR_STRAPI_TOKEN", }, }); const data = await response.json(); ``` ## Use cases * Drive a blog, news feed, or content section from a headless CMS * Let non-engineers publish app content without a release * Localize copy and assets without code changes ## Authentication Authentication uses the \`Authorization\` header. Paste your key once in Draftbit and every request to Strapi carries it automatically — secrets stay on the server side. ### Use Strapi in a Draftbit app today Start free, connect Strapi in minutes, and ship with AI agents that know how to use it. [Start building free](/signup?psource=rest-strapi-midpage) ## Frequently asked questions ### What is the Strapi REST integration? Strapi's REST API exposes collection and single types based on content permissions. Public content can be read without a token, while protected reads and writes need a bearer token. ### How do I connect Strapi to a Draftbit app? Go to Integrations and then REST APIs in your Draftbit app and pick Strapi from the catalog. Paste your API key or token and fill in any base URL variables, such as a project ID or host. The endpoints are then available across your screens and to the AI agents while you build. ### Does Strapi require authentication? Most Strapi endpoints expect a key or token sent as a header. The preconfigured endpoints include List entries, Get entries, Create entries, Update entries. ### What can I build with Strapi and Draftbit? Most teams use Strapi as a headless CMS for a mobile or web app. You might use Strapi to drive a blog, news feed, or content section from a headless CMS, or to let non-engineers publish app content without a release. ## Related Integrations * [](/integrations/contentful/) [Contentful](/integrations/contentful/) [Fetch published content from Contentful](/integrations/contentful/) * [](/integrations/directus/) [Directus](/integrations/directus/) [Read and manage Directus collections](/integrations/directus/) * [](/integrations/webflow/) [Webflow](/integrations/webflow/) [Read and manage Webflow CMS collections](/integrations/webflow/) * [](/integrations/wordpress/) [WordPress](/integrations/wordpress/) [Use WordPress content through the REST API](/integrations/wordpress/) [Get started free ](/signup?psource=rest-strapi-footer)[Browse all Integrations](/integrations/) --- # Stripe REST API integration for Draftbit > Accept payments and manage subscriptions Connect Stripe to a Draftbit app and bind its endpoints to screens and AI agents. 1. [Home](/) 2. / 3. [Integrations](/integrations/) 4. / 5. Stripe ## What is Stripe? Stripe's REST API for payments, subscriptions, invoices, and customers. Endpoints auto-import from the official OpenAPI spec — you only need to supply your secret key. ## Use Stripe with Draftbit * Endpoints auto-import from the official Stripe OpenAPI spec. * Bind any Stripe endpoint to a screen, list, form, or AI agent action. * Authentication is configured once per app — secrets stay on the server. * Add custom request and response transforms without forking Stripe's client library. ## More ways to connect Stripe Want AI agents to query and act on Stripe while you build? Use [the Stripe MCP server](/mcp/stripe/) . ## Example `stripe-example.ts` ``` // Example: fetch from Stripe const response = await fetch("https://api.stripe.com/v1/", { headers: { "Authorization": "Bearer YOUR_STRIPE_TOKEN", }, }); const data = await response.json(); ``` ## Use cases * Accept one-time card payments inside a mobile app * Bill customers monthly with managed checkout * Store payment methods for repeat purchases ## Authentication Authentication uses the \`Authorization\` header. Paste your key once in Draftbit and every request to Stripe carries it automatically — secrets stay on the server side. ### Use Stripe in a Draftbit app today Start free, connect Stripe in minutes, and ship with AI agents that know how to use it. [Start building free](/signup?psource=rest-stripe-midpage) ## Frequently asked questions ### What is the Stripe REST integration? Stripe's REST API for payments, subscriptions, invoices, and customers. Endpoints auto-import from the official OpenAPI spec — you only need to supply your secret key. ### How do I connect Stripe to a Draftbit app? Go to Integrations and then REST APIs in your Draftbit app and pick Stripe from the catalog. Paste your API key or token and fill in any base URL variables, such as a project ID or host. The endpoints are then available across your screens and to the AI agents while you build. ### Does Stripe require authentication? Most Stripe endpoints expect a key or token sent as a header. Endpoints import from the official API spec when one is available. ### What can I build with Stripe and Draftbit? Most teams use Stripe as a payment service for a mobile or web app. You might use Stripe to accept one-time card payments inside a mobile app, or to bill customers monthly with managed checkout. [Get started free ](/signup?psource=rest-stripe-footer)[Browse all Integrations](/integrations/) --- # Stytch REST API integration for Draftbit > Use Stytch auth APIs from a secure backend Connect Stytch to a Draftbit app and bind its endpoints to screens and AI agents. 1. [Home](/) 2. / 3. [Integrations](/integrations/) 4. / 5. Stytch ## What is Stytch? Stytch's documented REST APIs use project-secret authentication and should be called from a backend or proxy. For frontend apps, prefer Stytch SDKs with a public token. ## Use Stytch with Draftbit * Built-in endpoints: Start email magic link, Authenticate magic link, Authenticate session. * Bind any Stytch endpoint to a screen, list, form, or AI agent action. * Authentication is configured once per app — secrets stay on the server. * Add custom request and response transforms without forking Stytch's client library. ## Example `stytch-example.ts` ``` // Example: fetch from Stytch const response = await fetch("https://{stytch_host}/v1/magic_links/email/login_or_create", { headers: { "Authorization": "Basic YOUR_STYTCH_TOKEN", }, }); const data = await response.json(); ``` ## Use cases * Add sign-up, sign-in, and password reset flows to a mobile app * Gate premium features behind authenticated user sessions * Sync user profiles across web and native clients ## Authentication Authentication uses the \`Authorization\` header. Paste your key once in Draftbit and every request to Stytch carries it automatically — secrets stay on the server side. ### Use Stytch in a Draftbit app today Start free, connect Stytch in minutes, and ship with AI agents that know how to use it. [Start building free](/signup?psource=rest-stytch-midpage) ## Frequently asked questions ### What is the Stytch REST integration? Stytch's documented REST APIs use project-secret authentication and should be called from a backend or proxy. For frontend apps, prefer Stytch SDKs with a public token. ### How do I connect Stytch to a Draftbit app? Go to Integrations and then REST APIs in your Draftbit app and pick Stytch from the catalog. Paste your API key or token and fill in any base URL variables, such as a project ID or host. The endpoints are then available across your screens and to the AI agents while you build. ### Does Stytch require authentication? Most Stytch endpoints expect a key or token sent as a header. The preconfigured endpoints include Start email magic link, Authenticate magic link, Authenticate session. ### What can I build with Stytch and Draftbit? Most teams use Stytch as a authentication service for a mobile or web app. You might use Stytch to add sign-up, sign-in, and password reset flows to a mobile app, or to gate premium features behind authenticated user sessions. ## Related Integrations * [](/integrations/clerk/) [Clerk](/integrations/clerk/) [User authentication and management](/integrations/clerk/) * [](/integrations/firebase-auth/) [Firebase Auth](/integrations/firebase-auth/) [Sign in users with Firebase Auth REST endpoints](/integrations/firebase-auth/) * [](/integrations/supabase-auth/) [Supabase Auth](/integrations/supabase-auth/) [Use Supabase Auth REST endpoints](/integrations/supabase-auth/) * [](/integrations/generic-oidc/) [Generic OIDC](/integrations/generic-oidc/) [Connect to standards-based OpenID Connect providers](/integrations/generic-oidc/) [Get started free ](/signup?psource=rest-stytch-footer)[Browse all Integrations](/integrations/) --- # Supabase Auth REST API integration for Draftbit > Use Supabase Auth REST endpoints Connect Supabase Auth to a Draftbit app and bind its endpoints to screens and AI agents. 1. [Home](/) 2. / 3. [Integrations](/integrations/) 4. / 5. Supabase Auth ## What is Supabase Auth? Supabase Auth exposes REST endpoints for sign-up, password sign-in, token refresh, user profile lookup, logout, and recovery flows. Use the anon key for client requests and Row Level Security for data access. ## Use Supabase Auth with Draftbit * Built-in endpoints: Sign up, Sign in with password, Refresh token, Get user, Send recovery email. * Bind any Supabase Auth endpoint to a screen, list, form, or AI agent action. * Authentication is configured once per app — secrets stay on the server. * Add custom request and response transforms without forking Supabase Auth's client library. ## Example `supabase-auth-example.ts` ``` // Example: fetch from Supabase Auth const response = await fetch("https://{project_ref}.supabase.co/auth/v1/signup", { headers: { "apikey": "YOUR_SUPABASE_AUTH_TOKEN", "Authorization": "Bearer YOUR_SUPABASE_AUTH_VALUE_2", }, }); const data = await response.json(); ``` ## Use cases * Add sign-up, sign-in, and password reset flows to a mobile app * Gate premium features behind authenticated user sessions * Sync user profiles across web and native clients ## Authentication Authentication uses 2 headers (\`apikey\`, \`Authorization\`). Paste each value once in Draftbit and every request to Supabase Auth carries them automatically — secrets stay on the server side. ### Use Supabase Auth in a Draftbit app today Start free, connect Supabase Auth in minutes, and ship with AI agents that know how to use it. [Start building free](/signup?psource=rest-supabase-auth-midpage) ## Frequently asked questions ### What is the Supabase Auth REST integration? Supabase Auth exposes REST endpoints for sign-up, password sign-in, token refresh, user profile lookup, logout, and recovery flows. Use the anon key for client requests and Row Level Security for data access. ### How do I connect Supabase Auth to a Draftbit app? Go to Integrations and then REST APIs in your Draftbit app and pick Supabase Auth from the catalog. Paste your API key or token and fill in any base URL variables, such as a project ID or host. The endpoints are then available across your screens and to the AI agents while you build. ### Does Supabase Auth require authentication? Most Supabase Auth endpoints expect a key or token sent as a header. The preconfigured endpoints include Sign up, Sign in with password, Refresh token, Get user. ### What can I build with Supabase Auth and Draftbit? Most teams use Supabase Auth as a authentication service for a mobile or web app. You might use Supabase Auth to add sign-up, sign-in, and password reset flows to a mobile app, or to gate premium features behind authenticated user sessions. ## Related Integrations * [](/integrations/clerk/) [Clerk](/integrations/clerk/) [User authentication and management](/integrations/clerk/) * [](/integrations/firebase-auth/) [Firebase Auth](/integrations/firebase-auth/) [Sign in users with Firebase Auth REST endpoints](/integrations/firebase-auth/) * [](/integrations/generic-oidc/) [Generic OIDC](/integrations/generic-oidc/) [Connect to standards-based OpenID Connect providers](/integrations/generic-oidc/) * [](/integrations/auth0-oidc/) [Auth0 OIDC](/integrations/auth0-oidc/) [Use Auth0 OIDC token and profile endpoints](/integrations/auth0-oidc/) [Get started free ](/signup?psource=rest-supabase-auth-footer)[Browse all Integrations](/integrations/) --- # Supabase REST API integration for Draftbit > Connect to Supabase PostgREST tables Connect Supabase to a Draftbit app and bind its endpoints to screens and AI agents. 1. [Home](/) 2. / 3. [Integrations](/integrations/) 4. / 5. Supabase ## What is Supabase? Supabase auto-generates a REST API from your Postgres schema using PostgREST. Add your project ref and API key to read and write app data with Row Level Security. ## Use Supabase with Draftbit * Built-in endpoints: List/filter rows, Create row, Update rows by ID, Delete rows by ID. * Bind any Supabase endpoint to a screen, list, form, or AI agent action. * Authentication is configured once per app — secrets stay on the server. * Add custom request and response transforms without forking Supabase's client library. ## More ways to connect Supabase Prefer GraphQL? Connect to [the Supabase GraphQL integration](/graphql/supabase-graphql/) instead. Want AI agents to query and act on Supabase while you build? Use [the Supabase MCP server](/mcp/supabase/) . ## Example `supabase-example.ts` ``` // Example: fetch from Supabase const response = await fetch("https://{project_ref}.supabase.co/rest/v1/{table_name}", { headers: { "apikey": "YOUR_SUPABASE_TOKEN", "Authorization": "Bearer YOUR_SUPABASE_VALUE_2", }, }); const data = await response.json(); ``` ## Use cases * Power a mobile app with a hosted database and APIs * Add search, filtering, and pagination to a list-driven feature * Read and write app data without managing your own server ## Authentication Authentication uses 2 headers (\`apikey\`, \`Authorization\`). Paste each value once in Draftbit and every request to Supabase carries them automatically — secrets stay on the server side. ### Use Supabase in a Draftbit app today Start free, connect Supabase in minutes, and ship with AI agents that know how to use it. [Start building free](/signup?psource=rest-supabase-midpage) ## Frequently asked questions ### What is the Supabase REST integration? Supabase auto-generates a REST API from your Postgres schema using PostgREST. Add your project ref and API key to read and write app data with Row Level Security. ### How do I connect Supabase to a Draftbit app? Go to Integrations and then REST APIs in your Draftbit app and pick Supabase from the catalog. Paste your API key or token and fill in any base URL variables, such as a project ID or host. The endpoints are then available across your screens and to the AI agents while you build. ### Does Supabase require authentication? Most Supabase endpoints expect a key or token sent as a header. The preconfigured endpoints include List/filter rows, Create row, Update rows by ID, Delete rows by ID. ### What can I build with Supabase and Draftbit? Most teams use Supabase as a backend platform for a mobile or web app. You might use Supabase to power a mobile app with a hosted database and APIs, or to add search, filtering, and pagination to a list-driven feature. ## Related Integrations * [](/integrations/example-data/) [Example Data](/integrations/example-data/) [Draftbit-hosted sample data for testing apps](/integrations/example-data/) * [](/integrations/airtable/) [Airtable](/integrations/airtable/) [Use Airtable bases as app data sources](/integrations/airtable/) * [](/integrations/backendless/) [Backendless](/integrations/backendless/) [Backendless app data, users, and backend services](/integrations/backendless/) * [](/integrations/bubble/) [Bubble](/integrations/bubble/) [Connect to Bubble Data API objects](/integrations/bubble/) [Get started free ](/signup?psource=rest-supabase-footer)[Browse all Integrations](/integrations/) --- # Unsplash REST API integration for Draftbit > Search and retrieve Unsplash photos Connect Unsplash to a Draftbit app and bind its endpoints to screens and AI agents. 1. [Home](/) 2. / 3. [Integrations](/integrations/) 4. / 5. Unsplash ## What is Unsplash? Unsplash's JSON API lets apps search photos, retrieve random images, and load photo details. Use your Unsplash access key and follow Unsplash attribution and download tracking guidelines. ## Use Unsplash with Draftbit * Built-in endpoints: List photos, Search photos, Get photo, Random photo. * Bind any Unsplash endpoint to a screen, list, form, or AI agent action. * Authentication is configured once per app — secrets stay on the server. * Add custom request and response transforms without forking Unsplash's client library. ## Example `unsplash-example.ts` ``` // Example: fetch from Unsplash const response = await fetch("https://api.unsplash.com/photos", { headers: { "Authorization": "Client-ID YOUR_UNSPLASH_TOKEN", }, }); const data = await response.json(); ``` ## Use cases * Search and embed stock photography in app content * Generate optimized image variants for each device * Lazy-load high-resolution media without slowing the UI ## Authentication Authentication uses the \`Authorization\` header. Paste your key once in Draftbit and every request to Unsplash carries it automatically — secrets stay on the server side. ### Use Unsplash in a Draftbit app today Start free, connect Unsplash in minutes, and ship with AI agents that know how to use it. [Start building free](/signup?psource=rest-unsplash-midpage) ## Frequently asked questions ### What is the Unsplash REST integration? Unsplash's JSON API lets apps search photos, retrieve random images, and load photo details. Use your Unsplash access key and follow Unsplash attribution and download tracking guidelines. ### How do I connect Unsplash to a Draftbit app? Go to Integrations and then REST APIs in your Draftbit app and pick Unsplash from the catalog. Paste your API key or token and fill in any base URL variables, such as a project ID or host. The endpoints are then available across your screens and to the AI agents while you build. ### Does Unsplash require authentication? Most Unsplash endpoints expect a key or token sent as a header. The preconfigured endpoints include List photos, Search photos, Get photo, Random photo. ### What can I build with Unsplash and Draftbit? Most teams use Unsplash as a media platform for a mobile or web app. You might use Unsplash to search and embed stock photography in app content, or to generate optimized image variants for each device. ## Related Integrations * [](/integrations/cloudinary/) [Cloudinary](/integrations/cloudinary/) [Upload media with unsigned Cloudinary presets](/integrations/cloudinary/) [Get started free ](/signup?psource=rest-unsplash-footer)[Browse all Integrations](/integrations/) --- # Webflow REST API integration for Draftbit > Read and manage Webflow CMS collections Connect Webflow to a Draftbit app and bind its endpoints to screens and AI agents. 1. [Home](/) 2. / 3. [Integrations](/integrations/) 4. / 5. Webflow ## What is Webflow? Webflow's Data API lets apps read, create, update, and delete CMS collection items. Add a Webflow API token with the required site and CMS scopes. ## Use Webflow with Draftbit * Built-in endpoints: List collection items, Get collection items, Create collection items, Update collection items, Delete collection items. * Bind any Webflow endpoint to a screen, list, form, or AI agent action. * Authentication is configured once per app — secrets stay on the server. * Add custom request and response transforms without forking Webflow's client library. ## Example `webflow-example.ts` ``` // Example: fetch from Webflow const response = await fetch("https://api.webflow.com/v2/collections/{collection_id}/items", { headers: { "Authorization": "Bearer YOUR_WEBFLOW_TOKEN", }, }); const data = await response.json(); ``` ## Use cases * Drive a blog, news feed, or content section from a headless CMS * Let non-engineers publish app content without a release * Localize copy and assets without code changes ## Authentication Authentication uses the \`Authorization\` header. Paste your key once in Draftbit and every request to Webflow carries it automatically — secrets stay on the server side. ### Use Webflow in a Draftbit app today Start free, connect Webflow in minutes, and ship with AI agents that know how to use it. [Start building free](/signup?psource=rest-webflow-midpage) ## Frequently asked questions ### What is the Webflow REST integration? Webflow's Data API lets apps read, create, update, and delete CMS collection items. Add a Webflow API token with the required site and CMS scopes. ### How do I connect Webflow to a Draftbit app? Go to Integrations and then REST APIs in your Draftbit app and pick Webflow from the catalog. Paste your API key or token and fill in any base URL variables, such as a project ID or host. The endpoints are then available across your screens and to the AI agents while you build. ### Does Webflow require authentication? Most Webflow endpoints expect a key or token sent as a header. The preconfigured endpoints include List collection items, Get collection items, Create collection items, Update collection items. ### What can I build with Webflow and Draftbit? Most teams use Webflow as a headless CMS for a mobile or web app. You might use Webflow to drive a blog, news feed, or content section from a headless CMS, or to let non-engineers publish app content without a release. ## Related Integrations * [](/integrations/contentful/) [Contentful](/integrations/contentful/) [Fetch published content from Contentful](/integrations/contentful/) * [](/integrations/directus/) [Directus](/integrations/directus/) [Read and manage Directus collections](/integrations/directus/) * [](/integrations/wordpress/) [WordPress](/integrations/wordpress/) [Use WordPress content through the REST API](/integrations/wordpress/) * [](/integrations/ghost/) [Ghost](/integrations/ghost/) [Fetch published Ghost content](/integrations/ghost/) [Get started free ](/signup?psource=rest-webflow-footer)[Browse all Integrations](/integrations/) --- # WordPress REST API integration for Draftbit > Use WordPress content through the REST API Connect WordPress to a Draftbit app and bind its endpoints to screens and AI agents. 1. [Home](/) 2. / 3. [Integrations](/integrations/) 4. / 5. WordPress ## What is WordPress? WordPress exposes posts, pages, media, users, and custom routes through its REST API. Public content can often be read without credentials; write operations usually require HTTPS Basic auth with an application password. ## Use WordPress with Draftbit * Built-in endpoints: List posts, Get posts, Create posts, Update posts, Delete posts, List pages. * Bind any WordPress endpoint to a screen, list, form, or AI agent action. * Authentication is configured once per app — secrets stay on the server. * Add custom request and response transforms without forking WordPress's client library. ## More ways to connect WordPress Prefer GraphQL? Connect to [the WPGraphQL integration](/graphql/wpgraphql/) instead. ## Example `wordpress-example.ts` ``` // Example: fetch from WordPress const response = await fetch("https://{site_domain}/wp-json/wp/v2/posts", { headers: { "Authorization": "Basic YOUR_WORDPRESS_TOKEN", }, }); const data = await response.json(); ``` ## Use cases * Drive a blog, news feed, or content section from a headless CMS * Let non-engineers publish app content without a release * Localize copy and assets without code changes ## Authentication Authentication uses the \`Authorization\` header. Paste your key once in Draftbit and every request to WordPress carries it automatically — secrets stay on the server side. ### Use WordPress in a Draftbit app today Start free, connect WordPress in minutes, and ship with AI agents that know how to use it. [Start building free](/signup?psource=rest-wordpress-midpage) ## Frequently asked questions ### What is the WordPress REST integration? WordPress exposes posts, pages, media, users, and custom routes through its REST API. Public content can often be read without credentials; write operations usually require HTTPS Basic auth with an application password. ### How do I connect WordPress to a Draftbit app? Go to Integrations and then REST APIs in your Draftbit app and pick WordPress from the catalog. Paste your API key or token and fill in any base URL variables, such as a project ID or host. The endpoints are then available across your screens and to the AI agents while you build. ### Does WordPress require authentication? Most WordPress endpoints expect a key or token sent as a header. The preconfigured endpoints include List posts, Get posts, Create posts, Update posts. ### What can I build with WordPress and Draftbit? Most teams use WordPress as a headless CMS for a mobile or web app. You might use WordPress to drive a blog, news feed, or content section from a headless CMS, or to let non-engineers publish app content without a release. ## Related Integrations * [](/integrations/contentful/) [Contentful](/integrations/contentful/) [Fetch published content from Contentful](/integrations/contentful/) * [](/integrations/directus/) [Directus](/integrations/directus/) [Read and manage Directus collections](/integrations/directus/) * [](/integrations/webflow/) [Webflow](/integrations/webflow/) [Read and manage Webflow CMS collections](/integrations/webflow/) * [](/integrations/ghost/) [Ghost](/integrations/ghost/) [Fetch published Ghost content](/integrations/ghost/) [Get started free ](/signup?psource=rest-wordpress-footer)[Browse all Integrations](/integrations/) --- # Xano REST API integration for Draftbit > Connect to Xano API groups Connect Xano to a Draftbit app and bind its endpoints to screens and AI agents. 1. [Home](/) 2. / 3. [Integrations](/integrations/) 4. / 5. Xano ## What is Xano? Xano API groups expose custom, CRUD, auth, and upload endpoints as REST APIs. Add your Xano host and API group, then adapt the seeded endpoints to the resources generated in your workspace. ## Use Xano with Draftbit * Built-in endpoints: List records, Get records, Create records, Update records, Delete records. * Bind any Xano endpoint to a screen, list, form, or AI agent action. * Authentication is configured once per app — secrets stay on the server. * Add custom request and response transforms without forking Xano's client library. ## More ways to connect Xano Want AI agents to query and act on Xano while you build? Use [the Xano MCP server](/mcp/xano/) . ## Example `xano-example.ts` ``` // Example: fetch from Xano const response = await fetch("https://{xano_host}/api:{api_group}/{resource}", { headers: { "Authorization": "Bearer YOUR_XANO_TOKEN", }, }); const data = await response.json(); ``` ## Use cases * Power a mobile app with a hosted database and APIs * Add search, filtering, and pagination to a list-driven feature * Read and write app data without managing your own server ## Authentication Authentication uses the \`Authorization\` header. Paste your key once in Draftbit and every request to Xano carries it automatically — secrets stay on the server side. ### Use Xano in a Draftbit app today Start free, connect Xano in minutes, and ship with AI agents that know how to use it. [Start building free](/signup?psource=rest-xano-midpage) ## Frequently asked questions ### What is the Xano REST integration? Xano API groups expose custom, CRUD, auth, and upload endpoints as REST APIs. Add your Xano host and API group, then adapt the seeded endpoints to the resources generated in your workspace. ### How do I connect Xano to a Draftbit app? Go to Integrations and then REST APIs in your Draftbit app and pick Xano from the catalog. Paste your API key or token and fill in any base URL variables, such as a project ID or host. The endpoints are then available across your screens and to the AI agents while you build. ### Does Xano require authentication? Most Xano endpoints expect a key or token sent as a header. The preconfigured endpoints include List records, Get records, Create records, Update records. ### What can I build with Xano and Draftbit? Most teams use Xano as a backend platform for a mobile or web app. You might use Xano to power a mobile app with a hosted database and APIs, or to add search, filtering, and pagination to a list-driven feature. ## Related Integrations * [](/integrations/example-data/) [Example Data](/integrations/example-data/) [Draftbit-hosted sample data for testing apps](/integrations/example-data/) * [](/integrations/airtable/) [Airtable](/integrations/airtable/) [Use Airtable bases as app data sources](/integrations/airtable/) * [](/integrations/backendless/) [Backendless](/integrations/backendless/) [Backendless app data, users, and backend services](/integrations/backendless/) * [](/integrations/bubble/) [Bubble](/integrations/bubble/) [Connect to Bubble Data API objects](/integrations/bubble/) [Get started free ](/signup?psource=rest-xano-footer)[Browse all Integrations](/integrations/) --- # Zapier REST API integration for Draftbit > Manage Zapier workflows through the Workflow API Connect Zapier to a Draftbit app and bind its endpoints to screens and AI agents. 1. [Home](/) 2. / 3. [Integrations](/integrations/) 4. / 5. Zapier ## What is Zapier? Zapier's Workflow API lets approved integrations list and create Zaps and use automation helpers. Add a Zapier OAuth access token with the scopes required for the endpoints you call. ## Use Zapier with Draftbit * Built-in endpoints: List Zaps, Create Zap, Guess a Zap. * Bind any Zapier endpoint to a screen, list, form, or AI agent action. * Authentication is configured once per app — secrets stay on the server. * Add custom request and response transforms without forking Zapier's client library. ## Example `zapier-example.ts` ``` // Example: fetch from Zapier const response = await fetch("https://api.zapier.com/v2/zaps", { headers: { "Authorization": "Bearer YOUR_ZAPIER_TOKEN", }, }); const data = await response.json(); ``` ## Use cases * Trigger downstream workflows from app events * Connect form submissions to a Google Sheet or CRM * Stitch together third-party services without writing glue code ## Authentication Authentication uses the \`Authorization\` header. Paste your key once in Draftbit and every request to Zapier carries it automatically — secrets stay on the server side. ### Use Zapier in a Draftbit app today Start free, connect Zapier in minutes, and ship with AI agents that know how to use it. [Start building free](/signup?psource=rest-zapier-midpage) ## Frequently asked questions ### What is the Zapier REST integration? Zapier's Workflow API lets approved integrations list and create Zaps and use automation helpers. Add a Zapier OAuth access token with the scopes required for the endpoints you call. ### How do I connect Zapier to a Draftbit app? Go to Integrations and then REST APIs in your Draftbit app and pick Zapier from the catalog. Paste your API key or token and fill in any base URL variables, such as a project ID or host. The endpoints are then available across your screens and to the AI agents while you build. ### Does Zapier require authentication? Most Zapier endpoints expect a key or token sent as a header. The preconfigured endpoints include List Zaps, Create Zap, Guess a Zap. ### What can I build with Zapier and Draftbit? Most teams use Zapier as a workflow automation platform for a mobile or web app. You might use Zapier to trigger downstream workflows from app events, or to connect form submissions to a Google Sheet or CRM. ## Related Integrations * [](/integrations/make-webhook/) [Make Webhook](/integrations/make-webhook/) [Trigger Make scenarios with custom webhooks](/integrations/make-webhook/) * [](/integrations/n8n-webhook/) [n8n Webhook](/integrations/n8n-webhook/) [Trigger n8n workflows with webhook URLs](/integrations/n8n-webhook/) * [](/integrations/ifttt-webhook/) [IFTTT Webhook](/integrations/ifttt-webhook/) [Trigger IFTTT applets with Webhooks](/integrations/ifttt-webhook/) * [](/integrations/pipedream-workflow/) [Pipedream Workflow](/integrations/pipedream-workflow/) [Trigger Pipedream workflows over HTTP](/integrations/pipedream-workflow/) [Get started free ](/signup?psource=rest-zapier-footer)[Browse all Integrations](/integrations/) --- # Untitled > Log in to your Draftbit account. --- # MCP servers for your Draftbit app > Connect any Model Context Protocol server to your Draftbit app. Preconfigured MCPs for Stripe, Supabase, Sentry, Cloudflare, Linear, and more — plus support for custom MCP servers. Model Context Protocol Connect any Model Context Protocol server to your Draftbit app so AI agents in your build can act on real services. 15 MCPs are preconfigured — paste a key or sign in once, and agents gain those tools across every run. Adding a custom MCP is just a URL away. ## What is an MCP in Draftbit? MCP (Model Context Protocol) is an open standard for letting AI agents talk to external services. In Draftbit, an MCP server is a connection your app keeps to a third-party tool — Stripe, Supabase, Sentry, Linear — that AI agents can call during a build. You configure the auth once per app; every agent run after that has the MCP's tools available without manual wiring. Need to call a service's API directly instead? Use a [REST integration](/integrations/), or a [GraphQL integration](/graphql/) for GraphQL endpoints. * [](/mcp/apollo-graphql/) [Apollo GraphQL](/mcp/apollo-graphql/) [Enable graph-based API orchestration with AI](/mcp/apollo-graphql/) [Read more →](/mcp/apollo-graphql/) * [](/mcp/canva/) [Canva](/mcp/canva/) [Let your agent read and use your Canva designs while it builds.](/mcp/canva/) [Read more →](/mcp/canva/) * [](/mcp/cloudflare/) [Cloudflare](/mcp/cloudflare/) [Manage Cloudflare Workers, DNS, R2, KV, D1, and other developer platform resources through AI](/mcp/cloudflare/) [Read more →](/mcp/cloudflare/) * [](/mcp/directus/) [Directus](/mcp/directus/) [Enable AI assistants to manage content directly in Directus](/mcp/directus/) [Read more →](/mcp/directus/) * [](/mcp/figma/) [Figma](/mcp/figma/) [Enable AI-powered design with Figma MCP server](/mcp/figma/) [Read more →](/mcp/figma/) * [](/mcp/highlevel/) [HighLevel](/mcp/highlevel/) [All-in-one white-label CRM and marketing automation platform for agencies and service businesses.](/mcp/highlevel/) [Read more →](/mcp/highlevel/) * [](/mcp/instantdb/) [InstantDB](/mcp/instantdb/) [Create and manage InstantDB apps — realtime database, auth, and permissions — through MCP](/mcp/instantdb/) [Read more →](/mcp/instantdb/) * [](/mcp/linear/) [Linear](/mcp/linear/) [Manage Linear issues, projects, and teams through AI](/mcp/linear/) [Read more →](/mcp/linear/) * [](/mcp/neon/) [Neon](/mcp/neon/) [Allow the agent to manage your databases using natural language](/mcp/neon/) [Read more →](/mcp/neon/) * [](/mcp/revenuecat/) [RevenueCat](/mcp/revenuecat/) [AI-powered subscription management through natural language interactions](/mcp/revenuecat/) [Read more →](/mcp/revenuecat/) * [](/mcp/sentry/) [Sentry](/mcp/sentry/) [Access Sentry issues, errors, and debugging data through MCP](/mcp/sentry/) [Read more →](/mcp/sentry/) * [](/mcp/square/) [Square](/mcp/square/) [Connects the AI agent to Square for access to customers, orders, items, and more](/mcp/square/) [Read more →](/mcp/square/) * [](/mcp/stripe/) [Stripe](/mcp/stripe/) [Build AI-powered products and businesses with Stripe](/mcp/stripe/) [Read more →](/mcp/stripe/) * [](/mcp/supabase/) [Supabase](/mcp/supabase/) [Connect AI tools to your Supabase projects](/mcp/supabase/) [Read more →](/mcp/supabase/) * [](/mcp/xano/) [Xano](/mcp/xano/) [Interact with your Xano instance and workspaces using MCP](/mcp/xano/) [Read more →](/mcp/xano/) * [Bring your own MCP](/signup?psource=mcp-hub) [Got an MCP server URL? Paste it into Integrations → MCPs in your Draftbit app. Header auth, OAuth, and instance-specific URLs are all supported.](/signup?psource=mcp-hub) [Start free →](/signup?psource=mcp-hub) [REST API integrations](/integrations/) [65+ preconfigured REST APIs, plus your own.](/integrations/) [→](/integrations/) [GraphQL integrations](/graphql/) [Introspect any GraphQL endpoint and use it across screens and agents.](/graphql/) [→](/graphql/) [Get started free](/signup?psource=mcp-hub-cta) [See the Draftbit platform](/platform) --- # Apollo GraphQL MCP for Draftbit > Enable graph-based API orchestration with AI Connect Apollo GraphQL as a Model Context Protocol server in your Draftbit app. 1. [Home](/) 2. / 3. [MCP](/mcp/) 4. / 5. Apollo GraphQL ## What is Apollo GraphQL? Apollo MCP Server provides a standard way for AI models to access and orchestrate your GraphQL APIs. Translates GraphQL operations into MCP tools that AI models can discover and use. Supports persisted queries, schema introspection, and maintains full security control. ## Use Apollo GraphQL with Draftbit * Enable graph-based API orchestration with AI. * Available to every AI agent run inside your Draftbit app. * Auth and tokens stay scoped to your app — no manual wiring on each agent run. * Covers graphql, api, orchestration, apollo workflows. ## Example `mcp-config.json` ``` { "mcpServers": { "apollo-graphql": { "url": "https://your-apollo-graphql-instance.example.com/mcp", "headers": { "Authorization": "Bearer YOUR_APOLLO_GRAPHQL_TOKEN" } } } } ``` ## Use cases * Query exactly the fields a screen needs and nothing more * Compose data from multiple sources in a single round trip * Subscribe to live updates over a single GraphQL endpoint ## Authentication Authentication is a single header you paste once in Draftbit. Your token stays scoped to the app. Apollo GraphQL is instance-specific — you'll paste your own Apollo GraphQL URL when you connect it. Draftbit doesn't host the server for you. ### Use Apollo GraphQL in a Draftbit app today Start free, connect Apollo GraphQL in minutes, and ship with AI agents that know how to use it. [Start building free](/signup?psource=mcp-apollo-graphql-midpage) ## Frequently asked questions ### What is the Apollo GraphQL MCP? Apollo MCP Server provides a standard way for AI models to access and orchestrate your GraphQL APIs. Translates GraphQL operations into MCP tools that AI models can discover and use. Supports persisted queries, schema introspection, and maintains full security control. ### How do I connect the Apollo GraphQL MCP to Draftbit? Open your Draftbit app, go to Integrations and then MCPs, find Apollo GraphQL in the preconfigured list, and add it. Apollo GraphQL runs per instance, so you paste your own Apollo GraphQL URL when Draftbit asks for it. Once you have authenticated, the AI agents working in your app can use the Apollo GraphQL tools right away. ### Does Draftbit support Apollo GraphQL's authentication? Yes. Draftbit connects to the Apollo GraphQL MCP using an API key sent as a header. The credentials stay scoped to your app and never appear in generated code. ### What can I build with Apollo GraphQL and Draftbit? Most teams bring Apollo GraphQL in as a GraphQL service behind a mobile or web app. You might use Apollo GraphQL to query exactly the fields a screen needs and nothing more, or to compose data from multiple sources in a single round trip. The MCP tools are for the build itself. While a chat thread is active, the AI agents in Draftbit can call Apollo GraphQL directly. [Get started free ](/signup?psource=mcp-apollo-graphql-footer)[Browse all MCP](/mcp/) --- # Canva MCP for Draftbit > Let your agent read and use your Canva designs while it builds. Connect Canva as a Model Context Protocol server in your Draftbit app. 1. [Home](/) 2. / 3. [MCP](/mcp/) 4. / 5. Canva ## What is Canva? Connect your Canva account, then ask the agent to pull any of your designs — it can read pages, text, colors, and image URLs and turn them into screens using your project's own conventions. ## Use Canva with Draftbit * Let your agent read and use your Canva designs while it builds.. * Available to every AI agent run inside your Draftbit app. * Auth and tokens stay scoped to your app — no manual wiring on each agent run. * Covers design, import workflows. ## Example `mcp-config.json` ``` { "mcpServers": { "canva": { "url": "https://mcp.canva.com/mcp", "headers": { "Authorization": "Bearer YOUR_CANVA_TOKEN" } } } } ``` ## Use cases * Bring Figma components into the app builder * Keep design tokens in sync with production code * Hand off designs without losing fidelity ## Authentication Auth is handled inside the AI agent client when the tool runs. ### Use Canva in a Draftbit app today Start free, connect Canva in minutes, and ship with AI agents that know how to use it. [Start building free](/signup?psource=mcp-canva-midpage) ## Frequently asked questions ### What is the Canva MCP? Connect your Canva account, then ask the agent to pull any of your designs — it can read pages, text, colors, and image URLs and turn them into screens using your project's own conventions. ### How do I connect the Canva MCP to Draftbit? Open your Draftbit app, go to Integrations and then MCPs, find Canva in the preconfigured list, and add it. Once you have authenticated, the AI agents working in your app can use the Canva tools right away. ### Does Draftbit support Canva's authentication? Yes. Draftbit connects to the Canva MCP using auth handled inside the AI agent client. The credentials stay scoped to your app and never appear in generated code. ### What can I build with Canva and Draftbit? Most teams bring Canva in as a design tool behind a mobile or web app. You might use Canva to bring Figma components into the app builder, or to keep design tokens in sync with production code. The MCP tools are for the build itself. While a chat thread is active, the AI agents in Draftbit can call Canva directly. ## Related MCP * [](/mcp/figma/) [Figma](/mcp/figma/) [Enable AI-powered design with Figma MCP server](/mcp/figma/) [Get started free ](/signup?psource=mcp-canva-footer)[Browse all MCP](/mcp/) --- # Cloudflare MCP for Draftbit > Manage Cloudflare Workers, DNS, R2, KV, D1, and other developer platform resources through AI Connect Cloudflare as a Model Context Protocol server in your Draftbit app. 1. [Home](/) 2. / 3. [MCP](/mcp/) 4. / 5. Cloudflare ## What is Cloudflare? The Cloudflare MCP Server connects AI assistants to the Cloudflare Developer Platform. Query and manage Workers, Pages, DNS records, R2 buckets, KV namespaces, D1 databases, Durable Objects, logs, analytics, and more across your Cloudflare account through natural language. ## Use Cloudflare with Draftbit * Manage Cloudflare Workers, DNS, R2, KV, D1, and other developer platform resources through AI. * Available to every AI agent run inside your Draftbit app. * Auth and tokens stay scoped to your app — no manual wiring on each agent run. * Covers cloudflare, cdn, dns, workers workflows. ## Example `mcp-config.json` ``` // OAuth — Draftbit drives the login flow with Cloudflare; no token to paste. { "mcpServers": { "cloudflare": { "url": "https://mcp.cloudflare.com/mcp", "headers": {} } } } ``` ## Use cases * Ship updates without rebuilding the native binary * Add a custom domain and edge caching to your app * Manage Workers, KV, DNS, and other edge resources ## Authentication Draftbit handles an OAuth login flow with Cloudflare. No tokens to paste. ### Use Cloudflare in a Draftbit app today Start free, connect Cloudflare in minutes, and ship with AI agents that know how to use it. [Start building free](/signup?psource=mcp-cloudflare-midpage) ## Frequently asked questions ### What is the Cloudflare MCP? The Cloudflare MCP Server connects AI assistants to the Cloudflare Developer Platform. Query and manage Workers, Pages, DNS records, R2 buckets, KV namespaces, D1 databases, Durable Objects, logs, analytics, and more across your Cloudflare account through natural language. ### How do I connect the Cloudflare MCP to Draftbit? Open your Draftbit app, go to Integrations and then MCPs, find Cloudflare in the preconfigured list, and add it. Once you have authenticated, the AI agents working in your app can use the Cloudflare tools right away. ### Does Draftbit support Cloudflare's authentication? Yes. Draftbit connects to the Cloudflare MCP using an OAuth login flow. The credentials stay scoped to your app and never appear in generated code. ### What can I build with Cloudflare and Draftbit? Most teams bring Cloudflare in as a deployment and edge platform behind a mobile or web app. You might use Cloudflare to ship updates without rebuilding the native binary, or to add a custom domain and edge caching to your app. The MCP tools are for the build itself. While a chat thread is active, the AI agents in Draftbit can call Cloudflare directly. [Get started free ](/signup?psource=mcp-cloudflare-footer)[Browse all MCP](/mcp/) --- # Directus MCP for Draftbit > Enable AI assistants to manage content directly in Directus Connect Directus as a Model Context Protocol server in your Draftbit app. 1. [Home](/) 2. / 3. [MCP](/mcp/) 4. / 5. Directus ## What is Directus? Directus MCP Server connects AI assistants directly to your Directus instance. Manage content, create collections, set up relationships, and build automation workflows. Utilizes existing Directus permissions with complete audit trail. ## Use Directus with Draftbit * Enable AI assistants to manage content directly in Directus. * Available to every AI agent run inside your Draftbit app. * Auth and tokens stay scoped to your app — no manual wiring on each agent run. * Covers cms, content, headless, api workflows. ## More ways to connect Directus Need a REST API connection instead? Use [the Directus REST API integration](/integrations/directus/) . ## Example `mcp-config.json` ``` { "mcpServers": { "directus": { "url": "https://your-directus-instance.example.com/mcp", "headers": { "Authorization": "Bearer YOUR_DIRECTUS_TOKEN" } } } } ``` ## Use cases * Drive a blog, news feed, or content section from a headless CMS * Let non-engineers publish app content without a release * Localize copy and assets without code changes ## Authentication Authentication is a single header you paste once in Draftbit. Your token stays scoped to the app. Directus is instance-specific — you'll paste your own Directus URL when you connect it. Draftbit doesn't host the server for you. ### Use Directus in a Draftbit app today Start free, connect Directus in minutes, and ship with AI agents that know how to use it. [Start building free](/signup?psource=mcp-directus-midpage) ## Frequently asked questions ### What is the Directus MCP? Directus MCP Server connects AI assistants directly to your Directus instance. Manage content, create collections, set up relationships, and build automation workflows. Utilizes existing Directus permissions with complete audit trail. ### How do I connect the Directus MCP to Draftbit? Open your Draftbit app, go to Integrations and then MCPs, find Directus in the preconfigured list, and add it. Directus runs per instance, so you paste your own Directus URL when Draftbit asks for it. Once you have authenticated, the AI agents working in your app can use the Directus tools right away. ### Does Draftbit support Directus's authentication? Yes. Draftbit connects to the Directus MCP using an API key sent as a header. The credentials stay scoped to your app and never appear in generated code. ### What can I build with Directus and Draftbit? Most teams bring Directus in as a headless CMS behind a mobile or web app. You might use Directus to drive a blog, news feed, or content section from a headless CMS, or to let non-engineers publish app content without a release. The MCP tools are for the build itself. While a chat thread is active, the AI agents in Draftbit can call Directus directly. [Get started free ](/signup?psource=mcp-directus-footer)[Browse all MCP](/mcp/) --- # Figma MCP for Draftbit > Enable AI-powered design with Figma MCP server Connect Figma as a Model Context Protocol server in your Draftbit app. 1. [Home](/) 2. / 3. [MCP](/mcp/) 4. / 5. Figma ## What is Figma? Figma MCP Server allows AI models to interact with Figma designs and components. Supports OAuth authentication and provides a range of tools for working with Figma designs. ## Use Figma with Draftbit * Enable AI-powered design with Figma MCP server. * Available to every AI agent run inside your Draftbit app. * Auth and tokens stay scoped to your app — no manual wiring on each agent run. * Covers design, figma, ui, ux workflows. ## Example `mcp-config.json` ``` { "mcpServers": { "figma": { "url": "https://mcp.figma.com/mcp", "headers": { "Authorization": "Bearer YOUR_FIGMA_TOKEN" } } } } ``` ## Use cases * Bring Figma components into the app builder * Keep design tokens in sync with production code * Hand off designs without losing fidelity ## Authentication Auth is handled inside the AI agent client when the tool runs. ### Use Figma in a Draftbit app today Start free, connect Figma in minutes, and ship with AI agents that know how to use it. [Start building free](/signup?psource=mcp-figma-midpage) ## Frequently asked questions ### What is the Figma MCP? Figma MCP Server allows AI models to interact with Figma designs and components. Supports OAuth authentication and provides a range of tools for working with Figma designs. ### How do I connect the Figma MCP to Draftbit? Open your Draftbit app, go to Integrations and then MCPs, find Figma in the preconfigured list, and add it. Once you have authenticated, the AI agents working in your app can use the Figma tools right away. ### Does Draftbit support Figma's authentication? Yes. Draftbit connects to the Figma MCP using auth handled inside the AI agent client. The credentials stay scoped to your app and never appear in generated code. ### What can I build with Figma and Draftbit? Most teams bring Figma in as a design tool behind a mobile or web app. You might use Figma to bring Figma components into the app builder, or to keep design tokens in sync with production code. The MCP tools are for the build itself. While a chat thread is active, the AI agents in Draftbit can call Figma directly. ## Related MCP * [](/mcp/canva/) [Canva](/mcp/canva/) [Let your agent read and use your Canva designs while it builds.](/mcp/canva/) [Get started free ](/signup?psource=mcp-figma-footer)[Browse all MCP](/mcp/) --- # HighLevel MCP for Draftbit > All-in-one white-label CRM and marketing automation platform for agencies and service businesses. Connect HighLevel as a Model Context Protocol server in your Draftbit app. 1. [Home](/) 2. / 3. [MCP](/mcp/) 4. / 5. HighLevel ## What is HighLevel? HighLevel (gohighlevel.com) is a SaaS platform built for marketing agencies, coaches, and local service businesses that consolidates CRM, pipelines, funnels, email/SMS/voice campaigns, scheduling, reputation management, and payments into a single dashboard. ## Use HighLevel with Draftbit * All-in-one white-label CRM and marketing automation platform for agencies and service businesses.. * Available to every AI agent run inside your Draftbit app. * Auth and tokens stay scoped to your app — no manual wiring on each agent run. * Covers crm, marketing, automation, sales workflows. ## Example `mcp-config.json` ``` { "mcpServers": { "highlevel": { "url": "https://services.leadconnectorhq.com/mcp", "headers": { "Authorization": "Bearer YOUR_HIGHLEVEL_TOKEN" } } } } ``` ## Use cases * Capture leads from in-app forms and route them to sales * Trigger drip campaigns from app activity * Score and segment users by behavior ## Authentication Authentication is a single header you paste once in Draftbit. Your token stays scoped to the app. ### Use HighLevel in a Draftbit app today Start free, connect HighLevel in minutes, and ship with AI agents that know how to use it. [Start building free](/signup?psource=mcp-highlevel-midpage) ## Frequently asked questions ### What is the HighLevel MCP? HighLevel (gohighlevel.com) is a SaaS platform built for marketing agencies, coaches, and local service businesses that consolidates CRM, pipelines, funnels, email/SMS/voice campaigns, scheduling, reputation management, and payments into a single dashboard. ### How do I connect the HighLevel MCP to Draftbit? Open your Draftbit app, go to Integrations and then MCPs, find HighLevel in the preconfigured list, and add it. Once you have authenticated, the AI agents working in your app can use the HighLevel tools right away. ### Does Draftbit support HighLevel's authentication? Yes. Draftbit connects to the HighLevel MCP using an API key sent as a header. The credentials stay scoped to your app and never appear in generated code. ### What can I build with HighLevel and Draftbit? Most teams bring HighLevel in as a CRM and marketing automation platform behind a mobile or web app. You might use HighLevel to capture leads from in-app forms and route them to sales, or to trigger drip campaigns from app activity. The MCP tools are for the build itself. While a chat thread is active, the AI agents in Draftbit can call HighLevel directly. [Get started free ](/signup?psource=mcp-highlevel-footer)[Browse all MCP](/mcp/) --- # InstantDB MCP for Draftbit > Create and manage InstantDB apps — realtime database, auth, and permissions — through MCP Connect InstantDB as a Model Context Protocol server in your Draftbit app. 1. [Home](/) 2. / 3. [MCP](/mcp/) 4. / 5. InstantDB ## What is InstantDB? InstantDB is a realtime client-side database with auth, permissions, storage, and presence built in. Instant's hosted MCP server wraps the Instant Platform SDK so the agent can create apps, push schema, and update permissions on your Instant account through natural language. Connect with OAuth — no tokens to manage. ## Use InstantDB with Draftbit * Create and manage InstantDB apps — realtime database, auth, and permissions — through MCP. * Available to every AI agent run inside your Draftbit app. * Auth and tokens stay scoped to your app — no manual wiring on each agent run. * Covers database, backend, realtime, auth workflows. ## Example `mcp-config.json` ``` // OAuth — Draftbit drives the login flow with InstantDB; no token to paste. { "mcpServers": { "instantdb": { "url": "https://mcp.instantdb.com/mcp", "headers": {} } } } ``` ## Use cases * Power a mobile app with a hosted database and APIs * Add search, filtering, and pagination to a list-driven feature * Read and write app data without managing your own server ## Authentication Draftbit handles an OAuth login flow with InstantDB. No tokens to paste. ### Use InstantDB in a Draftbit app today Start free, connect InstantDB in minutes, and ship with AI agents that know how to use it. [Start building free](/signup?psource=mcp-instantdb-midpage) ## Frequently asked questions ### What is the InstantDB MCP? InstantDB is a realtime client-side database with auth, permissions, storage, and presence built in. Instant's hosted MCP server wraps the Instant Platform SDK so the agent can create apps, push schema, and update permissions on your Instant account through natural language. Connect with OAuth — no tokens to manage. ### How do I connect the InstantDB MCP to Draftbit? Open your Draftbit app, go to Integrations and then MCPs, find InstantDB in the preconfigured list, and add it. Once you have authenticated, the AI agents working in your app can use the InstantDB tools right away. ### Does Draftbit support InstantDB's authentication? Yes. Draftbit connects to the InstantDB MCP using an OAuth login flow. The credentials stay scoped to your app and never appear in generated code. ### What can I build with InstantDB and Draftbit? Most teams bring InstantDB in as a backend platform behind a mobile or web app. You might use InstantDB to power a mobile app with a hosted database and APIs, or to add search, filtering, and pagination to a list-driven feature. The MCP tools are for the build itself. While a chat thread is active, the AI agents in Draftbit can call InstantDB directly. ## Related MCP * [](/mcp/supabase/) [Supabase](/mcp/supabase/) [Connect AI tools to your Supabase projects](/mcp/supabase/) * [](/mcp/xano/) [Xano](/mcp/xano/) [Interact with your Xano instance and workspaces using MCP](/mcp/xano/) * [](/mcp/neon/) [Neon](/mcp/neon/) [Allow the agent to manage your databases using natural language](/mcp/neon/) [Get started free ](/signup?psource=mcp-instantdb-footer)[Browse all MCP](/mcp/) --- # Linear MCP for Draftbit > Manage Linear issues, projects, and teams through AI Connect Linear as a Model Context Protocol server in your Draftbit app. 1. [Home](/) 2. / 3. [MCP](/mcp/) 4. / 5. Linear ## What is Linear? Linear MCP Server enables AI assistants to interact with Linear for issue tracking and project management. Create and update issues, manage projects, query teams, and track work items through natural language interactions. ## Use Linear with Draftbit * Manage Linear issues, projects, and teams through AI. * Available to every AI agent run inside your Draftbit app. * Auth and tokens stay scoped to your app — no manual wiring on each agent run. * Covers project-management, issues, tracking, productivity workflows. ## Example `mcp-config.json` ``` // OAuth — Draftbit drives the login flow with Linear; no token to paste. { "mcpServers": { "linear": { "url": "https://mcp.linear.app/mcp", "headers": {} } } } ``` ## Use cases * Surface support tickets and bug reports from inside the app * Let agents file and triage issues during a build * Sync product roadmaps with engineering workflows ## Authentication Draftbit handles an OAuth login flow with Linear. No tokens to paste. ### Use Linear in a Draftbit app today Start free, connect Linear in minutes, and ship with AI agents that know how to use it. [Start building free](/signup?psource=mcp-linear-midpage) ## Frequently asked questions ### What is the Linear MCP? Linear MCP Server enables AI assistants to interact with Linear for issue tracking and project management. Create and update issues, manage projects, query teams, and track work items through natural language interactions. ### How do I connect the Linear MCP to Draftbit? Open your Draftbit app, go to Integrations and then MCPs, find Linear in the preconfigured list, and add it. Once you have authenticated, the AI agents working in your app can use the Linear tools right away. ### Does Draftbit support Linear's authentication? Yes. Draftbit connects to the Linear MCP using an OAuth login flow. The credentials stay scoped to your app and never appear in generated code. ### What can I build with Linear and Draftbit? Most teams bring Linear in as a project tracker behind a mobile or web app. You might use Linear to surface support tickets and bug reports from inside the app, or to let agents file and triage issues during a build. The MCP tools are for the build itself. While a chat thread is active, the AI agents in Draftbit can call Linear directly. [Get started free ](/signup?psource=mcp-linear-footer)[Browse all MCP](/mcp/) --- # Neon MCP for Draftbit > Allow the agent to manage your databases using natural language Connect Neon as a Model Context Protocol server in your Draftbit app. 1. [Home](/) 2. / 3. [MCP](/mcp/) 4. / 5. Neon ## What is Neon? Neon MCP Server acts as the Server in the MCP architecture, specifically designed for Neon. It provides a set of tools that MCP clients (like Claude Desktop, Claude Code, Cursor) can utilize to manage Neon resources. This includes actions for project management, branch management, executing SQL queries, and handling database migrations, all driven by natural language requests. ## Use Neon with Draftbit * Allow the agent to manage your databases using natural language. * Available to every AI agent run inside your Draftbit app. * Auth and tokens stay scoped to your app — no manual wiring on each agent run. * Covers database, postgres, backend workflows. ## Example `mcp-config.json` ``` // OAuth — Draftbit drives the login flow with Neon; no token to paste. { "mcpServers": { "neon": { "url": "https://mcp.neon.tech/mcp", "headers": {} } } } ``` ## Use cases * Power a mobile app with a hosted database and APIs * Add search, filtering, and pagination to a list-driven feature * Read and write app data without managing your own server ## Authentication Draftbit handles an OAuth login flow with Neon. No tokens to paste. ### Use Neon in a Draftbit app today Start free, connect Neon in minutes, and ship with AI agents that know how to use it. [Start building free](/signup?psource=mcp-neon-midpage) ## Frequently asked questions ### What is the Neon MCP? Neon MCP Server acts as the Server in the MCP architecture, specifically designed for Neon. It provides a set of tools that MCP clients (like Claude Desktop, Claude Code, Cursor) can utilize to manage Neon resources. This includes actions for project management, branch management, executing SQL queries, and handling database migrations, all driven by natural language requests. ### How do I connect the Neon MCP to Draftbit? Open your Draftbit app, go to Integrations and then MCPs, find Neon in the preconfigured list, and add it. Once you have authenticated, the AI agents working in your app can use the Neon tools right away. ### Does Draftbit support Neon's authentication? Yes. Draftbit connects to the Neon MCP using an OAuth login flow. The credentials stay scoped to your app and never appear in generated code. ### What can I build with Neon and Draftbit? Most teams bring Neon in as a backend platform behind a mobile or web app. You might use Neon to power a mobile app with a hosted database and APIs, or to add search, filtering, and pagination to a list-driven feature. The MCP tools are for the build itself. While a chat thread is active, the AI agents in Draftbit can call Neon directly. ## Related MCP * [](/mcp/supabase/) [Supabase](/mcp/supabase/) [Connect AI tools to your Supabase projects](/mcp/supabase/) * [](/mcp/xano/) [Xano](/mcp/xano/) [Interact with your Xano instance and workspaces using MCP](/mcp/xano/) * [](/mcp/instantdb/) [InstantDB](/mcp/instantdb/) [Create and manage InstantDB apps — realtime database, auth, and permissions — through MCP](/mcp/instantdb/) [Get started free ](/signup?psource=mcp-neon-footer)[Browse all MCP](/mcp/) --- # RevenueCat MCP for Draftbit > AI-powered subscription management through natural language interactions Connect RevenueCat as a Model Context Protocol server in your Draftbit app. 1. [Home](/) 2. / 3. [MCP](/mcp/) 4. / 5. RevenueCat ## What is RevenueCat? The RevenueCat MCP Server enables AI assistants to manage subscription apps, products, entitlements, offerings, paywalls, and monitor configurations. Provides 26 different capabilities for complete subscription management through natural language interactions. ## Use RevenueCat with Draftbit * AI-powered subscription management through natural language interactions. * Available to every AI agent run inside your Draftbit app. * Auth and tokens stay scoped to your app — no manual wiring on each agent run. * Covers subscriptions, payments, revenue, monetization workflows. ## Example `mcp-config.json` ``` { "mcpServers": { "revenuecat": { "url": "https://mcp.revenuecat.ai/mcp", "headers": { "Authorization": "Bearer YOUR_REVENUECAT_TOKEN" } } } } ``` ## Use cases * Add subscription paywalls to a freemium app * Restore purchases across iOS and Android * Track active subscribers and lifetime value ## Authentication Authentication is a single header you paste once in Draftbit. Your token stays scoped to the app. ### Use RevenueCat in a Draftbit app today Start free, connect RevenueCat in minutes, and ship with AI agents that know how to use it. [Start building free](/signup?psource=mcp-revenuecat-midpage) ## Frequently asked questions ### What is the RevenueCat MCP? The RevenueCat MCP Server enables AI assistants to manage subscription apps, products, entitlements, offerings, paywalls, and monitor configurations. Provides 26 different capabilities for complete subscription management through natural language interactions. ### How do I connect the RevenueCat MCP to Draftbit? Open your Draftbit app, go to Integrations and then MCPs, find RevenueCat in the preconfigured list, and add it. Once you have authenticated, the AI agents working in your app can use the RevenueCat tools right away. ### Does Draftbit support RevenueCat's authentication? Yes. Draftbit connects to the RevenueCat MCP using an API key sent as a header. The credentials stay scoped to your app and never appear in generated code. ### What can I build with RevenueCat and Draftbit? Most teams bring RevenueCat in as a subscription platform behind a mobile or web app. You might use RevenueCat to add subscription paywalls to a freemium app, or to restore purchases across iOS and Android. The MCP tools are for the build itself. While a chat thread is active, the AI agents in Draftbit can call RevenueCat directly. [Get started free ](/signup?psource=mcp-revenuecat-footer)[Browse all MCP](/mcp/) --- # Sentry MCP for Draftbit > Access Sentry issues, errors, and debugging data through MCP Connect Sentry as a Model Context Protocol server in your Draftbit app. 1. [Home](/) 2. / 3. [MCP](/mcp/) 4. / 5. Sentry ## What is Sentry? The Sentry MCP Server provides secure connectivity between Sentry issues and debugging data, and LLM clients. With OAuth support and Streamable HTTP transport, you can access issues, search for errors, query projects and organizations, create DSNs, and invoke Seer for automated issue fixes. ## Use Sentry with Draftbit * Access Sentry issues, errors, and debugging data through MCP. * Available to every AI agent run inside your Draftbit app. * Auth and tokens stay scoped to your app — no manual wiring on each agent run. * Covers monitoring, errors, debugging, observability workflows. ## Example `mcp-config.json` ``` // OAuth — Draftbit drives the login flow with Sentry; no token to paste. { "mcpServers": { "sentry": { "url": "https://mcp.sentry.dev/mcp", "headers": {} } } } ``` ## Use cases * Catch crashes and unhandled errors in production * Trace slow requests across the mobile, API, and backend * Alert on regressions before users report them ## Authentication Draftbit handles an OAuth login flow with Sentry. No tokens to paste. ### Use Sentry in a Draftbit app today Start free, connect Sentry in minutes, and ship with AI agents that know how to use it. [Start building free](/signup?psource=mcp-sentry-midpage) ## Frequently asked questions ### What is the Sentry MCP? The Sentry MCP Server provides secure connectivity between Sentry issues and debugging data, and LLM clients. With OAuth support and Streamable HTTP transport, you can access issues, search for errors, query projects and organizations, create DSNs, and invoke Seer for automated issue fixes. ### How do I connect the Sentry MCP to Draftbit? Open your Draftbit app, go to Integrations and then MCPs, find Sentry in the preconfigured list, and add it. Once you have authenticated, the AI agents working in your app can use the Sentry tools right away. ### Does Draftbit support Sentry's authentication? Yes. Draftbit connects to the Sentry MCP using an OAuth login flow. The credentials stay scoped to your app and never appear in generated code. ### What can I build with Sentry and Draftbit? Most teams bring Sentry in as a monitoring and error tracking platform behind a mobile or web app. You might use Sentry to catch crashes and unhandled errors in production, or to trace slow requests across the mobile, API, and backend. The MCP tools are for the build itself. While a chat thread is active, the AI agents in Draftbit can call Sentry directly. [Get started free ](/signup?psource=mcp-sentry-footer)[Browse all MCP](/mcp/) --- # Square MCP for Draftbit > Connects the AI agent to Square for access to customers, orders, items, and more Connect Square as a Model Context Protocol server in your Draftbit app. 1. [Home](/) 2. / 3. [MCP](/mcp/) 4. / 5. Square ## What is Square? The Square MCP server connects your AI tools directly to the full Square API platform, giving you programmatic access to everything the APIs offer—customers, orders, items, and more. Use it to power natural language queries, generate code, and accelerate development with AI assistance. ## Use Square with Draftbit * Connects the AI agent to Square for access to customers, orders, items, and more. * Available to every AI agent run inside your Draftbit app. * Auth and tokens stay scoped to your app — no manual wiring on each agent run. * Covers payments, commerce, orders workflows. ## Example `mcp-config.json` ``` // OAuth — Draftbit drives the login flow with Square; no token to paste. { "mcpServers": { "square": { "url": "https://mcp.squareup.com/sse", "headers": {} } } } ``` ## Use cases * Accept one-time card payments inside a mobile app * Bill customers monthly with managed checkout * Store payment methods for repeat purchases ## Authentication Draftbit handles an OAuth login flow with Square. No tokens to paste. ### Use Square in a Draftbit app today Start free, connect Square in minutes, and ship with AI agents that know how to use it. [Start building free](/signup?psource=mcp-square-midpage) ## Frequently asked questions ### What is the Square MCP? The Square MCP server connects your AI tools directly to the full Square API platform, giving you programmatic access to everything the APIs offer—customers, orders, items, and more. Use it to power natural language queries, generate code, and accelerate development with AI assistance. ### How do I connect the Square MCP to Draftbit? Open your Draftbit app, go to Integrations and then MCPs, find Square in the preconfigured list, and add it. Once you have authenticated, the AI agents working in your app can use the Square tools right away. ### Does Draftbit support Square's authentication? Yes. Draftbit connects to the Square MCP using an OAuth login flow. The credentials stay scoped to your app and never appear in generated code. ### What can I build with Square and Draftbit? Most teams bring Square in as a payment service behind a mobile or web app. You might use Square to accept one-time card payments inside a mobile app, or to bill customers monthly with managed checkout. The MCP tools are for the build itself. While a chat thread is active, the AI agents in Draftbit can call Square directly. ## Related MCP * [](/mcp/stripe/) [Stripe](/mcp/stripe/) [Build AI-powered products and businesses with Stripe](/mcp/stripe/) [Get started free ](/signup?psource=mcp-square-footer)[Browse all MCP](/mcp/) --- # Stripe MCP for Draftbit > Build AI-powered products and businesses with Stripe Connect Stripe as a Model Context Protocol server in your Draftbit app. 1. [Home](/) 2. / 3. [MCP](/mcp/) 4. / 5. Stripe ## What is Stripe? Stripe's MCP server lets AI agents inside your Draftbit app act on Stripe — list customers, look up subscriptions, refund a charge, or create a checkout session — without leaving the build. You configure your Stripe key once in Integrations → MCPs, and every agent run in the app has access scoped to that key. ## Use Stripe with Draftbit * Query customers, charges, subscriptions, invoices, and products from any AI agent run. * Trigger checkout sessions, refunds, and subscription changes during a build conversation. * Inspect failed payments and disputes without leaving the Draftbit chat. * Use test-mode and live-mode keys — agents call whichever environment you wire up. ## More ways to connect Stripe Need a REST API connection instead? Use [the Stripe REST API integration](/integrations/stripe/) . ## Example `mcp-config.json` ``` { "mcpServers": { "stripe": { "url": "https://mcp.stripe.com", "headers": { "Authorization": "Bearer sk_test_..." } } } } ``` ## Use cases * Add a subscription paywall to a freemium mobile app * Wire up Stripe Checkout for a one-time purchase flow * Investigate a payment failure mid-conversation with an AI agent * Refund a customer and update their app state in one step ## Authentication Authentication is a single header you paste once in Draftbit. Your token stays scoped to the app. ### Use Stripe in a Draftbit app today Start free, connect Stripe in minutes, and ship with AI agents that know how to use it. [Start building free](/signup?psource=mcp-stripe-midpage) ## Frequently asked questions ### What is the Stripe MCP? The Stripe MCP (Model Context Protocol) server lets AI agents work with your Stripe account through natural language. In Draftbit it comes preconfigured. Paste your Stripe secret key and agents can look up customers, subscriptions, refunds, and Checkout sessions while they build. ### How do I connect Stripe MCP to a Draftbit app? Open your Draftbit app, go to Integrations and then MCPs, find Stripe in the preconfigured list, paste your Stripe secret key (test or live), and save. Agents in your app get the Stripe tools right away, with nothing else to wire up. ### Is it safe to give an AI agent my Stripe key? Your key stays inside Draftbit's MCP layer and never ends up in generated code. Use a restricted Stripe API key that has only the permissions your build needs. Stripe lets you scope a key to read-only access or to specific resources. ### Can I use Stripe MCP with the rest of my Draftbit app? Yes. The MCP covers what agents do while you build. For payments at runtime, add Stripe as a REST integration as well, so the app itself can call Stripe. The two work together. Agents reason about your Stripe account, and the app takes payments in production. ### Does Stripe MCP work with subscription apps and one-time payments? Both. Agents can create Checkout sessions for one-time purchases, manage subscription products and prices, and inspect a customer's billing history. If you also sell native in-app purchases on iOS or Android, pair it with the RevenueCat MCP. ## Related MCP * [](/mcp/square/) [Square](/mcp/square/) [Connects the AI agent to Square for access to customers, orders, items, and more](/mcp/square/) [Get started free ](/signup?psource=mcp-stripe-footer)[Browse all MCP](/mcp/) --- # Supabase MCP for Draftbit > Connect AI tools to your Supabase projects Connect Supabase as a Model Context Protocol server in your Draftbit app. 1. [Home](/) 2. / 3. [MCP](/mcp/) 4. / 5. Supabase ## What is Supabase? Supabase's MCP server allows AI tools to interact with your Supabase projects. Supports OAuth authentication or manual authentication with personal access tokens. Review security best practices before connecting. ## Use Supabase with Draftbit * Connect AI tools to your Supabase projects. * Available to every AI agent run inside your Draftbit app. * Auth and tokens stay scoped to your app — no manual wiring on each agent run. * Covers database, backend, postgres, auth workflows. ## More ways to connect Supabase Need a REST API connection instead? Use [the Supabase REST API integration](/integrations/supabase/) . Prefer GraphQL? Connect to [the Supabase GraphQL integration](/graphql/supabase-graphql/) instead. ## Example `mcp-config.json` ``` // OAuth — Draftbit drives the login flow with Supabase; no token to paste. { "mcpServers": { "supabase": { "url": "https://mcp.supabase.com/mcp", "headers": {} } } } ``` ## Use cases * Power a mobile app with a hosted database and APIs * Add search, filtering, and pagination to a list-driven feature * Read and write app data without managing your own server ## Authentication Draftbit handles an OAuth login flow with Supabase. No tokens to paste. ### Use Supabase in a Draftbit app today Start free, connect Supabase in minutes, and ship with AI agents that know how to use it. [Start building free](/signup?psource=mcp-supabase-midpage) ## Frequently asked questions ### What is the Supabase MCP? Supabase's MCP server allows AI tools to interact with your Supabase projects. Supports OAuth authentication or manual authentication with personal access tokens. Review security best practices before connecting. ### How do I connect the Supabase MCP to Draftbit? Open your Draftbit app, go to Integrations and then MCPs, find Supabase in the preconfigured list, and add it. Once you have authenticated, the AI agents working in your app can use the Supabase tools right away. ### Does Draftbit support Supabase's authentication? Yes. Draftbit connects to the Supabase MCP using an OAuth login flow. The credentials stay scoped to your app and never appear in generated code. ### What can I build with Supabase and Draftbit? Most teams bring Supabase in as a backend platform behind a mobile or web app. You might use Supabase to power a mobile app with a hosted database and APIs, or to add search, filtering, and pagination to a list-driven feature. The MCP tools are for the build itself. While a chat thread is active, the AI agents in Draftbit can call Supabase directly. ## Related MCP * [](/mcp/xano/) [Xano](/mcp/xano/) [Interact with your Xano instance and workspaces using MCP](/mcp/xano/) * [](/mcp/neon/) [Neon](/mcp/neon/) [Allow the agent to manage your databases using natural language](/mcp/neon/) * [](/mcp/instantdb/) [InstantDB](/mcp/instantdb/) [Create and manage InstantDB apps — realtime database, auth, and permissions — through MCP](/mcp/instantdb/) [Get started free ](/signup?psource=mcp-supabase-footer)[Browse all MCP](/mcp/) --- # Xano MCP for Draftbit > Interact with your Xano instance and workspaces using MCP Connect Xano as a Model Context Protocol server in your Draftbit app. 1. [Home](/) 2. / 3. [MCP](/mcp/) 4. / 5. Xano ## What is Xano? The Xano MCP Server allows you to interact with your Xano instance and workspaces using MCP. Create database tables, update table schema, generate sample data, parse and search request history, and manage API groups - all from your favorite MCP client. ## Use Xano with Draftbit * Interact with your Xano instance and workspaces using MCP. * Available to every AI agent run inside your Draftbit app. * Auth and tokens stay scoped to your app — no manual wiring on each agent run. * Covers backend, api, database, nocode workflows. ## More ways to connect Xano Need a REST API connection instead? Use [the Xano REST API integration](/integrations/xano/) . ## Example `mcp-config.json` ``` { "mcpServers": { "xano": { "url": "https://your-xano-instance.example.com/mcp", "headers": { "Authorization": "YOUR_XANO_TOKEN" } } } } ``` ## Use cases * Power a mobile app with a hosted database and APIs * Add search, filtering, and pagination to a list-driven feature * Read and write app data without managing your own server ## Authentication Authentication is a single header you paste once in Draftbit. Your token stays scoped to the app. Xano is instance-specific — you'll paste your own Xano URL when you connect it. Draftbit doesn't host the server for you. ### Use Xano in a Draftbit app today Start free, connect Xano in minutes, and ship with AI agents that know how to use it. [Start building free](/signup?psource=mcp-xano-midpage) ## Frequently asked questions ### What is the Xano MCP? The Xano MCP Server allows you to interact with your Xano instance and workspaces using MCP. Create database tables, update table schema, generate sample data, parse and search request history, and manage API groups - all from your favorite MCP client. ### How do I connect the Xano MCP to Draftbit? Open your Draftbit app, go to Integrations and then MCPs, find Xano in the preconfigured list, and add it. Xano runs per instance, so you paste your own Xano URL when Draftbit asks for it. Once you have authenticated, the AI agents working in your app can use the Xano tools right away. ### Does Draftbit support Xano's authentication? Yes. Draftbit connects to the Xano MCP using an API key sent as a header. The credentials stay scoped to your app and never appear in generated code. ### What can I build with Xano and Draftbit? Most teams bring Xano in as a backend platform behind a mobile or web app. You might use Xano to power a mobile app with a hosted database and APIs, or to add search, filtering, and pagination to a list-driven feature. The MCP tools are for the build itself. While a chat thread is active, the AI agents in Draftbit can call Xano directly. ## Related MCP * [](/mcp/supabase/) [Supabase](/mcp/supabase/) [Connect AI tools to your Supabase projects](/mcp/supabase/) * [](/mcp/neon/) [Neon](/mcp/neon/) [Allow the agent to manage your databases using natural language](/mcp/neon/) * [](/mcp/instantdb/) [InstantDB](/mcp/instantdb/) [Create and manage InstantDB apps — realtime database, auth, and permissions — through MCP](/mcp/instantdb/) [Get started free ](/signup?psource=mcp-xano-footer)[Browse all MCP](/mcp/) --- # Mobile app templates > Explore customizable mobile app templates for iOS and Android. Preview complete flows and start building your product in Draftbit. Mobile app starters Start with complete mobile product flows instead of an empty canvas. Each template includes designed screens you can customize visually, connect to your backend, and ship across iOS, Android, and the web. [Start building free ](/signup?psource=mobile-app-templates-hero)[See how Draftbit works](/platform) [Mobile App Templates ](/mobile-app-templates/)[Web App Templates ](/web-app-templates/)[Website Templates](/website-templates/) Search mobile apps Search mobile apps 20 templates Select a template to preview the design * [](/mobile-app-templates/chat/) ## [Chat](/mobile-app-templates/chat/) AI chat app with voice and subscriptions aichatllm [Explore template → ](/mobile-app-templates/chat/)[Start building](/signup?psource=mobile-app-templates-card-chat) * [](/mobile-app-templates/circlo/) ## [Circlo](/mobile-app-templates/circlo/) Social community with reels and messaging socialcommunityfeed [Explore template → ](/mobile-app-templates/circlo/)[Start building](/signup?psource=mobile-app-templates-card-circlo) * [](/mobile-app-templates/courses/) ## [Courses](/mobile-app-templates/courses/) Online learning with progress tracking educationcourseslearning [Explore template → ](/mobile-app-templates/courses/)[Start building](/signup?psource=mobile-app-templates-card-courses) * [](/mobile-app-templates/dating/) ## [Dating](/mobile-app-templates/dating/) Swipe discovery, matches, and chat datingsocialmatching [Explore template → ](/mobile-app-templates/dating/)[Start building](/signup?psource=mobile-app-templates-card-dating) * [](/mobile-app-templates/dermacare/) ## [DermaCare](/mobile-app-templates/dermacare/) Dermatology booking and patient messaging healthcaredermatologyappointments [Explore template → ](/mobile-app-templates/dermacare/)[Start building](/signup?psource=mobile-app-templates-card-dermacare) * [](/mobile-app-templates/ecommerce/) ## [Ecommerce](/mobile-app-templates/ecommerce/) Modern retail app with admin tools ecommerceshoppingretail [Explore template → ](/mobile-app-templates/ecommerce/)[Start building](/signup?psource=mobile-app-templates-card-ecommerce) * [](/mobile-app-templates/events/) ## [Events](/mobile-app-templates/events/) Events discovery and ticketing app eventsticketingdiscovery [Explore template → ](/mobile-app-templates/events/)[Start building](/signup?psource=mobile-app-templates-card-events) * [](/mobile-app-templates/finora/) ## [Finora](/mobile-app-templates/finora/) Mobile banking with cards and spending insights fintechbankingwallet [Explore template → ](/mobile-app-templates/finora/)[Start building](/signup?psource=mobile-app-templates-card-finora) * [](/mobile-app-templates/fitness/) ## [Fitness](/mobile-app-templates/fitness/) Health tracking with workouts and meals fitnesshealthworkouts [Explore template → ](/mobile-app-templates/fitness/)[Start building](/signup?psource=mobile-app-templates-card-fitness) * [](/mobile-app-templates/forkly-food-delivery/) ## [Forkly — Food Delivery](/mobile-app-templates/forkly-food-delivery/) Food delivery from discovery to live tracking food-deliveryexporeact-native [Explore template → ](/mobile-app-templates/forkly-food-delivery/)[Start building](/signup?psource=mobile-app-templates-card-forkly-food-delivery) * [](/mobile-app-templates/grand-stay/) ## [Grand Stay](/mobile-app-templates/grand-stay/) Hotel booking with stays, maps, and messaging hotel bookingtravelexpo router [Explore template → ](/mobile-app-templates/grand-stay/)[Start building](/signup?psource=mobile-app-templates-card-grand-stay) * [](/mobile-app-templates/images/) ## [Images](/mobile-app-templates/images/) AI image creation and media archive aiimage-generationmedia [Explore template → ](/mobile-app-templates/images/)[Start building](/signup?psource=mobile-app-templates-card-images) * [](/mobile-app-templates/marketplace/) ## [Marketplace](/mobile-app-templates/marketplace/) Two-sided services marketplace marketplaceservicesbookings [Explore template → ](/mobile-app-templates/marketplace/)[Start building](/signup?psource=mobile-app-templates-card-marketplace) * [](/mobile-app-templates/nexa-ai/) ## [Nexa AI](/mobile-app-templates/nexa-ai/) AI assistant with chat history and subscriptions aichatassistant [Explore template → ](/mobile-app-templates/nexa-ai/)[Start building](/signup?psource=mobile-app-templates-card-nexa-ai) * [](/mobile-app-templates/plume/) ## [Plume](/mobile-app-templates/plume/) Microblogging with feeds, trends, and direct messages socialmicrobloggingfeed [Explore template → ](/mobile-app-templates/plume/)[Start building](/signup?psource=mobile-app-templates-card-plume) * [](/mobile-app-templates/pulsefit/) ## [PulseFit](/mobile-app-templates/pulsefit/) Fitness coaching with workouts, nutrition, and progress fitnessworkouthealth [Explore template → ](/mobile-app-templates/pulsefit/)[Start building](/signup?psource=mobile-app-templates-card-pulsefit) * [](/mobile-app-templates/recipes/) ## [Recipes](/mobile-app-templates/recipes/) AI recipe generation and meal planning recipesfoodai [Explore template → ](/mobile-app-templates/recipes/)[Start building](/signup?psource=mobile-app-templates-card-recipes) * [](/mobile-app-templates/rentals/) ## [Rentals](/mobile-app-templates/rentals/) Property booking with host tools propertyrentalsbooking [Explore template → ](/mobile-app-templates/rentals/)[Start building](/signup?psource=mobile-app-templates-card-rentals) * [](/mobile-app-templates/social/) ## [Social](/mobile-app-templates/social/) Social feed, posts, and creator tools socialfeedposts [Explore template → ](/mobile-app-templates/social/)[Start building](/signup?psource=mobile-app-templates-card-social) * [](/mobile-app-templates/wallet/) ## [Wallet](/mobile-app-templates/wallet/) Mobile wallet with transfers and cards walletpaymentsfinance [Explore template → ](/mobile-app-templates/wallet/)[Start building](/signup?psource=mobile-app-templates-card-wallet) ## No templates found Try a broader search to see more starting points. Clear search ## Choose a mobile template by product flow Pick the starting point closest to the experience you need, whether that is commerce, community, content, a marketplace, or AI. You can change every screen, data source, interaction, and style after opening it in Draftbit. ## Mobile App Templates FAQ * What is included in a Draftbit mobile app template? Each template is a set of mobile screens built around one product flow, with the navigation between them and the reusable interface patterns already in place. Once it is open in Draftbit you can change any of it. * Can I customize the mobile templates? Yes. A template is a starting point. You can change the layout, the styling, the text, the navigation, the data connections, and the code itself until it fits your product and your brand. * Can these templates ship to iOS and Android? Yes. A mobile template is a React Native and Expo project, so the same project runs on iOS and Android. You can also publish a web version when your product needs one. --- # Chat > AI chat app with a conversational assistant, prompt suggestions, model discovery, provider detail pages, voice selection, profile settings, subscriptions,… [← Mobile App Templates](/mobile-app-templates/) Template preview Mobile App 1.  2.  3.  4.  5.  6.  7.  8.  9.  Screenshot 1 of 9 Template type Mobile App Designed for iOS, Android, and web Preview gallery 9 visual previews ## Who the Chat template is for AI app founders shipping conversational products with paid tiers and voice. ## What’s included * ✓ Multi-model chat UI with conversation history * ✓ Voice input and audio responses * ✓ Subscription tiers and credit-style monetization * ✓ Model discovery, comparison, and settings ## What you can build with Chat * → Ship a branded AI chat app on top of your model of choice * → Add voice and subscriptions to a chat product * → Build a multi-model AI assistant with paid tiers ## More Mobile App Templates [Browse all mobile apps](/mobile-app-templates/) * [](/mobile-app-templates/dating/) ### [Dating](/mobile-app-templates/dating/) [Swipe discovery, matches, and chat](/mobile-app-templates/dating/) * [](/mobile-app-templates/images/) ### [Images](/mobile-app-templates/images/) [AI image creation and media archive](/mobile-app-templates/images/) * [](/mobile-app-templates/nexa-ai/) ### [Nexa AI](/mobile-app-templates/nexa-ai/) [AI assistant with chat history and subscriptions](/mobile-app-templates/nexa-ai/) ## Make it yours Start with this mobile app template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-chat) --- # Circlo > Circlo is a mobile social community app where people share photo posts, carousels, stories, and short-form reels. It includes an explore feed with topic… [← Mobile App Templates](/mobile-app-templates/) Template preview Mobile App 1.  2.  3.  4.  5.  6.  7.  8.  Screenshot 1 of 8 Template type Mobile App Designed for iOS, Android, and web Preview gallery 8 visual previews ## Who the Circlo template is for Community founders, creator networks, and social-product teams combining feeds, stories, reels, and private conversations. ## What’s included * ✓ Social feed with photo posts, carousels, stories, and reels * ✓ Explore experience with topics and creator discovery * ✓ Direct messages, activity notifications, and saved collections * ✓ Creator profiles and community engagement flows ## What you can build with Circlo * → Launch a private or interest-based social community * → Build a creator network around posts, stories, and reels * → Add discovery and direct messaging to a membership product ## More Mobile App Templates [Browse all mobile apps](/mobile-app-templates/) * [](/mobile-app-templates/plume/) ### [Plume](/mobile-app-templates/plume/) [Microblogging with feeds, trends, and direct messages](/mobile-app-templates/plume/) * [](/mobile-app-templates/dermacare/) ### [DermaCare](/mobile-app-templates/dermacare/) [Dermatology booking and patient messaging](/mobile-app-templates/dermacare/) * [](/mobile-app-templates/finora/) ### [Finora](/mobile-app-templates/finora/) [Mobile banking with cards and spending insights](/mobile-app-templates/finora/) ## Make it yours Start with this mobile app template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-circlo) --- # Courses > Online learning app with course discovery, saved lists, enrolled courses, lesson progress, exercises, billing, subscriptions, and learner analytics. [← Mobile App Templates](/mobile-app-templates/) Template preview Mobile App 1.  2.  3.  4.  5.  6.  7.  8.  9.  10.  11.  Screenshot 1 of 11 Template type Mobile App Designed for iOS, Android, and web Preview gallery 11 visual previews ## Who the Courses template is for Course creators, edtech founders, and teams turning a curriculum into a native mobile experience. ## What’s included * ✓ Course catalog with categories and progress * ✓ Lessons with video, text, and quizzes * ✓ Billing and access control per course or subscription * ✓ Learner profile with streaks and certificates ## What you can build with Courses * → Ship a mobile companion app for your course platform * → Build a focused learning app for a specific topic * → Add subscription-based courses to an existing community app ## More Mobile App Templates [Browse all mobile apps](/mobile-app-templates/) * [](/mobile-app-templates/chat/) ### [Chat](/mobile-app-templates/chat/) [AI chat app with voice and subscriptions](/mobile-app-templates/chat/) * [](/mobile-app-templates/dating/) ### [Dating](/mobile-app-templates/dating/) [Swipe discovery, matches, and chat](/mobile-app-templates/dating/) * [](/mobile-app-templates/images/) ### [Images](/mobile-app-templates/images/) [AI image creation and media archive](/mobile-app-templates/images/) ## Make it yours Start with this mobile app template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-courses) --- # Dating > Dating app with swipe discovery, standout profiles, match moments, filters, in-app chat, video advice, subscriptions, and profile analytics. [← Mobile App Templates](/mobile-app-templates/) Template preview Mobile App 1.  2.  3.  4.  5.  6.  7.  8.  9.  10.  11.  Screenshot 1 of 11 Template type Mobile App Designed for iOS, Android, and web Preview gallery 11 visual previews ## Who the Dating template is for Dating and matching apps — niche communities, professional networks, anything that needs swipes and chat. ## What’s included * ✓ Swipe discovery with rich profile cards * ✓ Matches, conversations, and unmatch flows * ✓ Profile editor, preferences, and verification * ✓ Creator analytics and admin moderation tools ## What you can build with Dating * → Launch a niche-community dating app * → Build a professional matching or networking product * → Add swipes and matches to an existing community app ## More Mobile App Templates [Browse all mobile apps](/mobile-app-templates/) * [](/mobile-app-templates/chat/) ### [Chat](/mobile-app-templates/chat/) [AI chat app with voice and subscriptions](/mobile-app-templates/chat/) * [](/mobile-app-templates/social/) ### [Social](/mobile-app-templates/social/) [Social feed, posts, and creator tools](/mobile-app-templates/social/) * [](/mobile-app-templates/circlo/) ### [Circlo](/mobile-app-templates/circlo/) [Social community with reels and messaging](/mobile-app-templates/circlo/) ## Make it yours Start with this mobile app template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-dating) --- # DermaCare > A dermatology appointment booking app where patients browse specialist doctors, view profiles and ratings, schedule visits, and message their care team.… [← Mobile App Templates](/mobile-app-templates/) Template preview Mobile App 1.  2.  3.  4.  5.  6.  7.  8.  9.  10.  Screenshot 1 of 10 Template type Mobile App Designed for iOS, Android, and web Preview gallery 10 visual previews ## Who the DermaCare template is for Digital-health teams, dermatology practices, and appointment marketplaces connecting patients with specialist care. ## What’s included * ✓ Specialist directory with doctor profiles, ratings, and favorites * ✓ Appointment booking and visit-tracking flows * ✓ Patient messaging and care-team conversations * ✓ Profile, settings, and coordinated light and dark themes ## What you can build with DermaCare * → Launch a specialist healthcare appointment marketplace * → Build a patient app for a dermatology practice * → Add booking and secure care messaging to a health platform ## More Mobile App Templates [Browse all mobile apps](/mobile-app-templates/) * [](/mobile-app-templates/plume/) ### [Plume](/mobile-app-templates/plume/) [Microblogging with feeds, trends, and direct messages](/mobile-app-templates/plume/) * [](/mobile-app-templates/circlo/) ### [Circlo](/mobile-app-templates/circlo/) [Social community with reels and messaging](/mobile-app-templates/circlo/) * [](/mobile-app-templates/finora/) ### [Finora](/mobile-app-templates/finora/) [Mobile banking with cards and spending insights](/mobile-app-templates/finora/) ## Make it yours Start with this mobile app template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-dermacare) --- # Ecommerce > Modern retail app with product discovery, favorites, cart and checkout flows, plus merchant tools for analytics, inventory, orders, and customers. [← Mobile App Templates](/mobile-app-templates/) Template preview Mobile App 1.  2.  3.  4.  5.  6.  7.  8.  9.  Screenshot 1 of 9 Template type Mobile App Designed for iOS, Android, and web Preview gallery 9 visual previews ## Who the Ecommerce template is for DTC brands, indie operators, and teams shipping native shopping experiences alongside the web store. ## What’s included * ✓ Product discovery with search and favorites * ✓ Cart, checkout, and order confirmation flows * ✓ Merchant admin: inventory, orders, customers, analytics * ✓ Designed to plug into Shopify, Stripe, or a custom backend ## What you can build with Ecommerce * → Launch a native companion app for a Shopify store * → Build a DTC product app with built-in admin tools * → Ship a multi-vendor retail app ## More Mobile App Templates [Browse all mobile apps](/mobile-app-templates/) * [](/mobile-app-templates/forkly-food-delivery/) ### [Forkly — Food Delivery](/mobile-app-templates/forkly-food-delivery/) [Food delivery from discovery to live tracking](/mobile-app-templates/forkly-food-delivery/) * [](/mobile-app-templates/chat/) ### [Chat](/mobile-app-templates/chat/) [AI chat app with voice and subscriptions](/mobile-app-templates/chat/) * [](/mobile-app-templates/circlo/) ### [Circlo](/mobile-app-templates/circlo/) [Social community with reels and messaging](/mobile-app-templates/circlo/) ## Make it yours Start with this mobile app template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-ecommerce) --- # Events > Event discovery and ticketing app with attendee browsing, map search, ticket management, and creator tools for hosting events and tracking performance. [← Mobile App Templates](/mobile-app-templates/) Template preview Mobile App 1.  2.  3.  4.  5.  6.  7.  8.  Screenshot 1 of 8 Template type Mobile App Designed for iOS, Android, and web Preview gallery 8 visual previews ## Who the Events template is for Founders launching an events platform, creators selling tickets, or teams building a community discovery app. ## What’s included * ✓ Attendee browsing with feed and map views * ✓ Ticket purchase, ownership, and entry management * ✓ Creator dashboard for event setup, analytics, and revenue * ✓ Profile and saved-events flows out of the box ## What you can build with Events * → Launch a niche-events ticketing app * → Build a community discovery and meetup product * → Ship a creator-led event hosting app ## More Mobile App Templates [Browse all mobile apps](/mobile-app-templates/) * [](/mobile-app-templates/social/) ### [Social](/mobile-app-templates/social/) [Social feed, posts, and creator tools](/mobile-app-templates/social/) * [](/mobile-app-templates/chat/) ### [Chat](/mobile-app-templates/chat/) [AI chat app with voice and subscriptions](/mobile-app-templates/chat/) * [](/mobile-app-templates/circlo/) ### [Circlo](/mobile-app-templates/circlo/) [Social community with reels and messaging](/mobile-app-templates/circlo/) ## Make it yours Start with this mobile app template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-events) --- # Finora > A mobile banking and personal finance app template with onboarding, authentication, a card wallet, spending statistics, and transaction history. Built with… [← Mobile App Templates](/mobile-app-templates/) Template preview Mobile App 1.  2.  3.  4.  5.  6.  7.  8.  9.  Screenshot 1 of 9 Template type Mobile App Designed for iOS, Android, and web Preview gallery 9 visual previews ## Who the Finora template is for Fintech founders, credit unions, and banking teams creating a mobile account, card, and spending experience. ## What’s included * ✓ Guided onboarding and secure sign-in screens * ✓ Account overview with cards and recent transactions * ✓ Spending statistics and personal-finance insights * ✓ Profile and settings flows with light and dark themes ## What you can build with Finora * → Prototype a mobile banking or neobank experience * → Build a card and transaction companion for a fintech service * → Launch a personal-spending and financial insights app ## More Mobile App Templates [Browse all mobile apps](/mobile-app-templates/) * [](/mobile-app-templates/forkly-food-delivery/) ### [Forkly — Food Delivery](/mobile-app-templates/forkly-food-delivery/) [Food delivery from discovery to live tracking](/mobile-app-templates/forkly-food-delivery/) * [](/mobile-app-templates/nexa-ai/) ### [Nexa AI](/mobile-app-templates/nexa-ai/) [AI assistant with chat history and subscriptions](/mobile-app-templates/nexa-ai/) * [](/mobile-app-templates/circlo/) ### [Circlo](/mobile-app-templates/circlo/) [Social community with reels and messaging](/mobile-app-templates/circlo/) ## Make it yours Start with this mobile app template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-finora) --- # Fitness > Fitness and calorie tracking app with daily health summaries, workout plans, meal logging, water and weight entries, progress charts, workout tracking,… [← Mobile App Templates](/mobile-app-templates/) Template preview Mobile App 1.  2.  3.  4.  5.  6.  7.  8.  9.  10.  11.  12.  Screenshot 1 of 12 Template type Mobile App Designed for iOS, Android, and web Preview gallery 12 visual previews ## Who the Fitness template is for Fitness coaches, health startups, and apps wrapping workouts, meals, and progress in one place. ## What’s included * ✓ Workout library with progress tracking * ✓ Meal logging and macro targets * ✓ Activity dashboard with streaks and history * ✓ Profile, goals, and settings flows ## What you can build with Fitness * → Ship a branded coaching app with workouts and meals * → Build a health-tracking app for a specific community * → Add fitness tracking to a wellness or rewards product ## More Mobile App Templates [Browse all mobile apps](/mobile-app-templates/) * [](/mobile-app-templates/pulsefit/) ### [PulseFit](/mobile-app-templates/pulsefit/) [Fitness coaching with workouts, nutrition, and progress](/mobile-app-templates/pulsefit/) * [](/mobile-app-templates/chat/) ### [Chat](/mobile-app-templates/chat/) [AI chat app with voice and subscriptions](/mobile-app-templates/chat/) * [](/mobile-app-templates/circlo/) ### [Circlo](/mobile-app-templates/circlo/) [Social community with reels and messaging](/mobile-app-templates/circlo/) ## Make it yours Start with this mobile app template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-fitness) --- # Forkly — Food Delivery > A complete food delivery mobile app template with dish browsing, category exploration, cart, checkout, live order tracking, and account management. Built… [← Mobile App Templates](/mobile-app-templates/) Template preview Mobile App 1.  2.  3.  4.  5.  6.  7.  8.  Screenshot 1 of 8 Template type Mobile App Designed for iOS, Android, and web Preview gallery 8 visual previews ## Who the Forkly — Food Delivery template is for Restaurants, delivery operators, and marketplace founders building mobile ordering from discovery through delivery. ## What’s included * ✓ Dish and category discovery for local menus * ✓ Cart, checkout, and account-management flows * ✓ Live order tracking from confirmation through delivery * ✓ Coordinated light and dark mobile experiences ## What you can build with Forkly — Food Delivery * → Launch a restaurant delivery marketplace * → Build a branded ordering app for a restaurant group * → Add checkout and live tracking to a local commerce service ## More Mobile App Templates [Browse all mobile apps](/mobile-app-templates/) * [](/mobile-app-templates/finora/) ### [Finora](/mobile-app-templates/finora/) [Mobile banking with cards and spending insights](/mobile-app-templates/finora/) * [](/mobile-app-templates/pulsefit/) ### [PulseFit](/mobile-app-templates/pulsefit/) [Fitness coaching with workouts, nutrition, and progress](/mobile-app-templates/pulsefit/) * [](/mobile-app-templates/nexa-ai/) ### [Nexa AI](/mobile-app-templates/nexa-ai/) [AI assistant with chat history and subscriptions](/mobile-app-templates/nexa-ai/) ## Make it yours Start with this mobile app template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-forkly-food-delivery) --- # Grand Stay > A hotel and villa booking app template built with Expo Router and NativeWind, covering discovery, stay details, room selection, dates, promos, payment and… [← Mobile App Templates](/mobile-app-templates/) Template preview Mobile App 1.  2.  3.  4.  5.  6.  7.  8.  9.  10.  Screenshot 1 of 10 Template type Mobile App Designed for iOS, Android, and web Preview gallery 10 visual previews ## Who the Grand Stay template is for Hospitality brands, rental marketplaces, and travel teams offering searchable stays, bookings, and guest messaging. ## What’s included * ✓ Stay discovery with search, saved favorites, and nearby maps * ✓ Property details, room selection, dates, promos, and payment * ✓ Booking management and guest-to-host messaging * ✓ Authentication, profile, and travel settings flows ## What you can build with Grand Stay * → Launch a hotel or vacation-rental booking app * → Build a branded guest experience for a hospitality operator * → Add searchable stays and messaging to a travel marketplace ## More Mobile App Templates [Browse all mobile apps](/mobile-app-templates/) * [](/mobile-app-templates/finora/) ### [Finora](/mobile-app-templates/finora/) [Mobile banking with cards and spending insights](/mobile-app-templates/finora/) * [](/mobile-app-templates/forkly-food-delivery/) ### [Forkly — Food Delivery](/mobile-app-templates/forkly-food-delivery/) [Food delivery from discovery to live tracking](/mobile-app-templates/forkly-food-delivery/) * [](/mobile-app-templates/marketplace/) ### [Marketplace](/mobile-app-templates/marketplace/) [Two-sided services marketplace](/mobile-app-templates/marketplace/) ## Make it yours Start with this mobile app template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-grand-stay) --- # Images > AI image creation app with a discovery feed, media archive, prompt-based post creation, generated image and video detail views, creator profiles, activity,… [← Mobile App Templates](/mobile-app-templates/) Template preview Mobile App 1.  2.  3.  4.  5.  6.  7.  8.  9.  10.  11.  Screenshot 1 of 11 Template type Mobile App Designed for iOS, Android, and web Preview gallery 11 visual previews ## Who the Images template is for AI image teams shipping a polished consumer product with credit/subscription billing. ## What’s included * ✓ AI image generation with prompt history * ✓ Style and aspect-ratio presets * ✓ Media archive with collections and downloads * ✓ Subscription and credit-based billing built in ## What you can build with Images * → Ship an AI image-generation product with paid tiers * → Build a branded creative tool with credit billing * → Add an image archive to an existing AI product ## More Mobile App Templates [Browse all mobile apps](/mobile-app-templates/) * [](/mobile-app-templates/chat/) ### [Chat](/mobile-app-templates/chat/) [AI chat app with voice and subscriptions](/mobile-app-templates/chat/) * [](/mobile-app-templates/courses/) ### [Courses](/mobile-app-templates/courses/) [Online learning with progress tracking](/mobile-app-templates/courses/) * [](/mobile-app-templates/dating/) ### [Dating](/mobile-app-templates/dating/) [Swipe discovery, matches, and chat](/mobile-app-templates/dating/) ## Make it yours Start with this mobile app template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-images) --- # Marketplace > Two-sided services marketplace with browsing, bookings, saved listings, buyer orders, in-app chat, and provider tools for revenue, orders, analytics, and… [← Mobile App Templates](/mobile-app-templates/) Template preview Mobile App 1.  2.  3.  4.  5.  6.  7.  8.  9.  10.  11.  Screenshot 1 of 11 Template type Mobile App Designed for iOS, Android, and web Preview gallery 11 visual previews ## Who the Marketplace template is for Founders building two-sided service businesses — booking, scheduling, and provider management out of the box. ## What’s included * ✓ Two-sided home and search for browsing services * ✓ Buyer flow: bookings, orders, saved listings, chat * ✓ Provider tools: revenue, orders, customers, analytics * ✓ Built-in messaging between buyer and provider ## What you can build with Marketplace * → Stand up a services marketplace MVP * → Build a niche-vertical booking and provider app * → Add in-app chat and bookings to an existing directory ## More Mobile App Templates [Browse all mobile apps](/mobile-app-templates/) * [](/mobile-app-templates/chat/) ### [Chat](/mobile-app-templates/chat/) [AI chat app with voice and subscriptions](/mobile-app-templates/chat/) * [](/mobile-app-templates/dating/) ### [Dating](/mobile-app-templates/dating/) [Swipe discovery, matches, and chat](/mobile-app-templates/dating/) * [](/mobile-app-templates/grand-stay/) ### [Grand Stay](/mobile-app-templates/grand-stay/) [Hotel booking with stays, maps, and messaging](/mobile-app-templates/grand-stay/) ## Make it yours Start with this mobile app template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-marketplace) --- # Nexa AI > An AI assistant mobile app template with a tool dashboard, searchable chat history, threaded conversations, and subscription plan comparison. Includes a… [← Mobile App Templates](/mobile-app-templates/) Template preview Mobile App 1.  2.  3.  4.  5.  6.  7.  8.  9.  10.  Screenshot 1 of 10 Template type Mobile App Designed for iOS, Android, and web Preview gallery 10 visual previews ## Who the Nexa AI template is for AI product teams packaging conversational tools, account services, and paid plans in a polished mobile assistant. ## What’s included * ✓ AI tool dashboard with searchable conversation history * ✓ Threaded assistant conversations and chat organization * ✓ Subscription comparison and account billing surfaces * ✓ Drawer navigation for services, offers, documents, and support ## What you can build with Nexa AI * → Launch a subscription-based mobile AI assistant * → Package multiple digital services behind one conversational app * → Prototype an account-aware support and productivity assistant ## More Mobile App Templates [Browse all mobile apps](/mobile-app-templates/) * [](/mobile-app-templates/finora/) ### [Finora](/mobile-app-templates/finora/) [Mobile banking with cards and spending insights](/mobile-app-templates/finora/) * [](/mobile-app-templates/forkly-food-delivery/) ### [Forkly — Food Delivery](/mobile-app-templates/forkly-food-delivery/) [Food delivery from discovery to live tracking](/mobile-app-templates/forkly-food-delivery/) * [](/mobile-app-templates/chat/) ### [Chat](/mobile-app-templates/chat/) [AI chat app with voice and subscriptions](/mobile-app-templates/chat/) ## Make it yours Start with this mobile app template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-nexa-ai) --- # Plume > A microblogging social app template with a tabbed feed, search and trending topics, notifications, and direct messaging. Includes post detail threads, user… [← Mobile App Templates](/mobile-app-templates/) Template preview Mobile App 1.  2.  3.  4.  5.  6.  7.  8.  9.  10.  Screenshot 1 of 10 Template type Mobile App Designed for iOS, Android, and web Preview gallery 10 visual previews ## Who the Plume template is for Community teams and creator-economy founders building a focused microblogging network with discovery and messaging. ## What’s included * ✓ Tabbed microblog feed with search and trending topics * ✓ Post threads, profiles, bookmarks, and custom lists * ✓ Notifications and direct-message conversations * ✓ Complete settings plus light and dark themes ## What you can build with Plume * → Launch a focused microblogging community * → Build a creator-led discussion network * → Add social discovery and direct messages to a content product ## More Mobile App Templates [Browse all mobile apps](/mobile-app-templates/) * [](/mobile-app-templates/circlo/) ### [Circlo](/mobile-app-templates/circlo/) [Social community with reels and messaging](/mobile-app-templates/circlo/) * [](/mobile-app-templates/dermacare/) ### [DermaCare](/mobile-app-templates/dermacare/) [Dermatology booking and patient messaging](/mobile-app-templates/dermacare/) * [](/mobile-app-templates/finora/) ### [Finora](/mobile-app-templates/finora/) [Mobile banking with cards and spending insights](/mobile-app-templates/finora/) ## Make it yours Start with this mobile app template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-plume) --- # PulseFit > A fitness and wellness mobile app with guided workouts, exercise detail views, meal recipes, progress tracking, and a member community. Includes a routine… [← Mobile App Templates](/mobile-app-templates/) Template preview Mobile App 1.  2.  3.  4.  5.  6.  7.  8.  9.  10.  Screenshot 1 of 10 Template type Mobile App Designed for iOS, Android, and web Preview gallery 10 visual previews ## Who the PulseFit template is for Fitness coaches, wellness brands, and health startups combining training, nutrition, progress, and community. ## What’s included * ✓ Guided workouts with exercise and routine detail views * ✓ Meal recipes and nutrition planning * ✓ Progress tracking, favorites, and educational articles * ✓ Member community plus profile and settings flows ## What you can build with PulseFit * → Ship a branded fitness coaching and nutrition app * → Build a community workout program with progress tracking * → Add guided routines and wellness content to a health product ## More Mobile App Templates [Browse all mobile apps](/mobile-app-templates/) * [](/mobile-app-templates/forkly-food-delivery/) ### [Forkly — Food Delivery](/mobile-app-templates/forkly-food-delivery/) [Food delivery from discovery to live tracking](/mobile-app-templates/forkly-food-delivery/) * [](/mobile-app-templates/fitness/) ### [Fitness](/mobile-app-templates/fitness/) [Health tracking with workouts and meals](/mobile-app-templates/fitness/) * [](/mobile-app-templates/finora/) ### [Finora](/mobile-app-templates/finora/) [Mobile banking with cards and spending insights](/mobile-app-templates/finora/) ## Make it yours Start with this mobile app template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-pulsefit) --- # Recipes > AI-powered recipe app with personalized recipe generation, saved collections, meal planning, curated recipe lists, shopping lists, and premium subscriptions. [← Mobile App Templates](/mobile-app-templates/) Template preview Mobile App 1.  2.  3.  4.  5.  6.  7.  8.  9.  10.  11.  Screenshot 1 of 11 Template type Mobile App Designed for iOS, Android, and web Preview gallery 11 visual previews ## Who the Recipes template is for AI-powered food and lifestyle teams adding generation, planning, and shopping in one flow. ## What’s included * ✓ AI recipe generation from prompts or ingredients * ✓ Meal planner with day/week views * ✓ Auto-generated shopping list with combine-and-dedupe * ✓ Save and organize favorite recipes ## What you can build with Recipes * → Launch an AI-powered recipe and meal-planning app * → Add shopping-list generation to an existing food app * → Build a niche-diet community with AI generation ## More Mobile App Templates [Browse all mobile apps](/mobile-app-templates/) * [](/mobile-app-templates/chat/) ### [Chat](/mobile-app-templates/chat/) [AI chat app with voice and subscriptions](/mobile-app-templates/chat/) * [](/mobile-app-templates/images/) ### [Images](/mobile-app-templates/images/) [AI image creation and media archive](/mobile-app-templates/images/) * [](/mobile-app-templates/nexa-ai/) ### [Nexa AI](/mobile-app-templates/nexa-ai/) [AI assistant with chat history and subscriptions](/mobile-app-templates/nexa-ai/) ## Make it yours Start with this mobile app template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-recipes) --- # Rentals > Rental marketplace app with property discovery, favorites, booking checkout, trip management, guest messaging, and host tools for reservations, listings,… [← Mobile App Templates](/mobile-app-templates/) Template preview Mobile App 1.  2.  3.  4.  5.  6.  7.  8.  9.  10.  11.  12.  13.  14.  Screenshot 1 of 14 Template type Mobile App Designed for iOS, Android, and web Preview gallery 14 visual previews ## Who the Rentals template is for Vacation rental operators, property managers, and marketplaces with hosts and guests. ## What’s included * ✓ Property search, filters, and detail pages * ✓ Guest flow: bookings, reservations, messages * ✓ Host tools: listings, calendar, revenue, reviews * ✓ Map and gallery-first browsing ## What you can build with Rentals * → Ship a niche vacation-rental marketplace * → Build a property management app for hosts * → Add booking and host tools to a directory site ## More Mobile App Templates [Browse all mobile apps](/mobile-app-templates/) * [](/mobile-app-templates/dermacare/) ### [DermaCare](/mobile-app-templates/dermacare/) [Dermatology booking and patient messaging](/mobile-app-templates/dermacare/) * [](/mobile-app-templates/grand-stay/) ### [Grand Stay](/mobile-app-templates/grand-stay/) [Hotel booking with stays, maps, and messaging](/mobile-app-templates/grand-stay/) * [](/mobile-app-templates/chat/) ### [Chat](/mobile-app-templates/chat/) [AI chat app with voice and subscriptions](/mobile-app-templates/chat/) ## Make it yours Start with this mobile app template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-rentals) --- # Social > Social media app with a personalized feed, rich post composer, discovery grid, notifications, user profiles, direct messages, subscriptions, settings, and… [← Mobile App Templates](/mobile-app-templates/) Template preview Mobile App 1.  2.  3.  4.  5.  6.  7.  8.  9.  10.  11.  Screenshot 1 of 11 Template type Mobile App Designed for iOS, Android, and web Preview gallery 11 visual previews ## Who the Social template is for Community founders, niche social network teams, creator-economy startups. ## What’s included * ✓ Feed with posts, reactions, and comments * ✓ Discovery, profiles, and follow graph * ✓ DMs and notifications * ✓ Creator analytics and content tools ## What you can build with Social * → Launch a niche-community social network * → Build a creator-first content app * → Ship a hobby or interest-based community app ## More Mobile App Templates [Browse all mobile apps](/mobile-app-templates/) * [](/mobile-app-templates/circlo/) ### [Circlo](/mobile-app-templates/circlo/) [Social community with reels and messaging](/mobile-app-templates/circlo/) * [](/mobile-app-templates/dating/) ### [Dating](/mobile-app-templates/dating/) [Swipe discovery, matches, and chat](/mobile-app-templates/dating/) * [](/mobile-app-templates/plume/) ### [Plume](/mobile-app-templates/plume/) [Microblogging with feeds, trends, and direct messages](/mobile-app-templates/plume/) ## Make it yours Start with this mobile app template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-social) --- # Wallet > Mobile wallet app with balance tracking, digital cards, recipients, money transfers, transaction history, scheduled payments, recurring payments, payment… [← Mobile App Templates](/mobile-app-templates/) Template preview Mobile App 1.  2.  3.  4.  5.  6.  7.  8.  9.  10.  11.  12.  Screenshot 1 of 12 Template type Mobile App Designed for iOS, Android, and web Preview gallery 12 visual previews ## Who the Wallet template is for Fintech founders, neobanks, and teams building branded payments inside another product. ## What’s included * ✓ Home, balance, and recent activity surfaces * ✓ Add and manage cards, recipients, and limits * ✓ Send money, request payments, and schedule recurring transfers * ✓ Card controls, transaction history, and statements ## What you can build with Wallet * → Build a branded payments wallet for your existing app * → Ship a fintech MVP without rebuilding card and transfer screens * → Add P2P transfers to a marketplace or rewards product ## More Mobile App Templates [Browse all mobile apps](/mobile-app-templates/) * [](/mobile-app-templates/finora/) ### [Finora](/mobile-app-templates/finora/) [Mobile banking with cards and spending insights](/mobile-app-templates/finora/) * [](/mobile-app-templates/chat/) ### [Chat](/mobile-app-templates/chat/) [AI chat app with voice and subscriptions](/mobile-app-templates/chat/) * [](/mobile-app-templates/circlo/) ### [Circlo](/mobile-app-templates/circlo/) [Social community with reels and messaging](/mobile-app-templates/circlo/) ## Make it yours Start with this mobile app template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-wallet) --- # Go from idea to app store in days instead of months. > See how teams use Draftbit's visual builder and AI to ship real apps. Book a 30-minute platform walkthrough. Request Platform Demo See how teams use Draftbit's visual builder and AI to ship real apps — fast. We'll walk you through the platform and answer your questions. 30 min walkthrough Live Q\&A No commitment --- # Experts standing by to help you build > Work with Draftbit experts on app design, development, backend setup, custom code, launch support, and strategic implementation help. We combine a full-time, handpicked team of designers & developers with the latest development tools and AI to deliver amazing apps for 25% the time & cost of an agency. On-Demand Development Expert Talent Pause or Cancel Anytime 48-Hour Iteration Cycles [Get an Estimate ](/experts-requests)[Explore Packages](#packages)      Lightning-fast Development,\ Zero Guesswork -------------- 1 ### Tell us about your vision Share your ideas — your app starts with your unique goals. Happy to sign an NDA. 2 ### Choose your plan Whether it's a one-off v1 project or a monthly retainer, we've got you covered. 3 ### We deliver With updates every 48 hours via Slack & email, we iterate until your app is ready. Services ## What can experts do for you? Whether it's a one-off project, MVP, or ongoing development — we've got you covered. ### Design & UI/UX Create stunning interfaces that delight users with professional design guidance. ### Screen Building Rapidly develop responsive screens that work flawlessly across all devices. ### Backend Development Build robust APIs and database solutions to power your application's core. ### Custom Code & Functions Implement complex business logic and advanced features with custom solutions. ### Integrations & SDKs Connect your app to third-party services, APIs, and platforms. ### Custom Components Get tailor-made UI components that fit your specific requirements. ### 1-on-1 Training Learn directly from our experts with personalized training sessions. ### App Store Management Navigate app store submissions and updates with expert guidance. ### Planning & Strategy Get advice on refining scope, developing a roadmap, future-proofing, and more. Packages ## Launch your app in record time Transparent, predictable pricing to help you build and scale your app without hidden costs. ### Starter Backend Create a minimal backend to accompany your Draftbit app. Ideal for connecting data to your app quickly. Starting at $2,500 /one time [Book a meeting ](/experts-requests) * Secure authentication & user roles * GraphQL & REST CRUD API endpoints * Scalable database schema * Cloud deployment ready * Comprehensive API documentation ### MVP Popular Launch your app quickly with a focused, functional MVP. Ideal for validating ideas and gaining early user feedback. Starting at $6,499 /one time [Book a meeting ](/experts-requests) * Complete MVP app in 4–8 weeks * Clear scope, timeline, and pricing — no surprises * One-time investment to validate your idea * Mobile-first & desktop friendly app * Modern, scalable tech stack * Personalized, iterative development * Team of experts in Design, Dev, and Launch * 30 days of free maintenance ### v1 MVP + Backend + QA + App Store Submission & Approval. Everything you need for a successful launch. Starting at $12,999 /one time [Book a meeting ](/experts-requests) * Launch-ready app in 8–12 weeks * Production backend with auth & roles * Secure authentication and user management * Scalable cloud deployment * Comprehensive QA testing * App Store & Google Play approval * Analytics & push notifications integrated * 60 days of maintenance & support * Transparent process with daily updates Use Cases ## Already have an app? Not every project starts from scratch. Whether your app needs a refresh, a new home, or a rescue — we've done it before. ### Upgrade an old app Your app works but it's showing its age — slow, hard to maintain, or missing features users expect. We modernize the stack, clean up the codebase, improve performance, and add what's missing. You keep what works and get a better foundation for what comes next. * Performance audit and optimization * Dependency and framework upgrades * UI/UX refresh with modern design patterns * Code cleanup and technical debt reduction * New feature development on the upgraded base [Get an upgrade estimate](/experts-requests) ### Migrate from another platform Locked into a platform that's limiting you? We move your app to Draftbit — or to a fully independent codebase — so you own the code and can keep building without restrictions. We handle the messy parts so you don't lose momentum. * Full audit of your existing app and data * Screen-by-screen rebuild in Draftbit * Backend and API migration or reconnection * Data migration with integrity checks * Testing and QA before you switch over [Plan your migration](/experts-requests) ### Fix a stuck vibe-coded app Built something with AI that mostly works but now you're stuck? We see this a lot. Vibe-coded apps often hit a wall — broken logic, messy state, things that almost work but don't quite. We untangle it, fix what's broken, and get your app to a place where you can keep building confidently. * Deep code review and issue diagnosis * Fix broken logic, navigation, and state management * Restructure AI-generated code for maintainability * Connect or fix backend integrations * Hand back a clean, working app you understand [Get your app unstuck](/experts-requests) Advisory ## You build, we guide Keep building on your own terms with an expert in your corner. Get code review, architectural advice, and troubleshooting help — without handing off the work. ### Code Review Get expert eyes on your code before you ship. Catch issues early, learn better patterns. ### Architecture Guidance Make the right structural decisions now so you don't have to rebuild later. ### Troubleshooting Stuck on a bug or a weird edge case? Get help working through it, fast. ### Private Slack Channel Direct access to your advisor. Ask questions, share code, get answers — no tickets. ### Best Practices Learn how experienced teams structure apps, manage state, handle auth, and ship reliably. ### Pause or Cancel Anytime No lock-in. Use it when you need it, pause when you don't. $150 /week or $500 /month [Get started ](/experts-requests) Monthly Plans ## Dedicated experts, month to month Iterate and build whatever you need with a dedicated team on a predictable monthly budget. ### On all monthly plans * Dedicated, cross-functional product team * Transparent daily progress updates * Private Slack channel for direct comms * Predictable, fixed monthly investment * Monthly flexibility: pause or cancel anytime * Launch new apps or level-up existing products * Work inside Draftbit or any other platform * Weekly sprint prioritization with your team * Full-time, salaried experts — never freelancers * Effortless resource scaling as your needs evolve * Proactive maintenance & performance tuning * Same-day emergency support ### Bronze A part-time expert dedicated to your project. One task at a time — ideal for steady feature work, bug fixes, and ongoing improvements. $2,000 /month [Book a meeting ](/experts-requests) ### Silver Popular A part-time team of experts working across design, development, and QA. Multiple workstreams moving in parallel at a steady pace. $4,000 /month [Book a meeting ](/experts-requests) ### Gold A full product team dedicated to your roadmap. Parallel workstreams across design, development, backend, and QA for aggressive timelines. $7,500 /month [Book a meeting ](/experts-requests) ### Platinum A custom team tailored to your needs. We assemble the right mix of designers, developers, backend engineers, and QA across the disciplines your project demands. $12,000+ /month [Book a meeting ](/experts-requests) Testimonials ## Loved by startups and business owners ## Ready to bring your idea to life? Get in touch and tell us about your project. We'll put together a plan and timeline that works for you. [Talk to us ](/experts-requests) --- # Untitled > Create your free Draftbit account and start building apps with AI, visual editing, and full code access. --- # Web app templates > Explore customizable web app templates for dashboards, AI chat, ecommerce, project management, CRM, and finance products. Web app starters Start with a browser-based product interface that already has the essential screens and interaction patterns. Customize it in Draftbit, connect real data, and shape it around your workflow. [Start building free ](/signup?psource=web-app-templates-hero)[See how Draftbit works](/platform) [Mobile App Templates ](/mobile-app-templates/)[Web App Templates ](/web-app-templates/)[Website Templates](/website-templates/) Search web apps Search web apps 58 templates Select a template to preview the design * [](/web-app-templates/ai-chat/) ## [AI Chat](/web-app-templates/ai-chat/) AI chat web app with conversation history, simulated streaming responses, markdown and code rendering, prompt… aichatllm [Explore template → ](/web-app-templates/ai-chat/)[Start building](/signup?psource=web-app-templates-card-ai-chat-web) * [](/web-app-templates/akademi-school-admission-dashboard/) ## [Akademi — School Admission Dashboard](/web-app-templates/akademi-school-admission-dashboard/) An admin dashboard for a school that tracks student and teacher rosters with detail and enrollment pages, school… educationschool managementadmin dashboard [Explore template → ](/web-app-templates/akademi-school-admission-dashboard/)[Start building](/signup?psource=web-app-templates-card-akademi-school-admission-dashboard-web) * [](/web-app-templates/bankdash/) ## [BankDash](/web-app-templates/bankdash/) A personal banking dashboard where a customer reviews card balances, weekly deposit/withdraw activity, expense… fintechbankingdashboard [Explore template → ](/web-app-templates/bankdash/)[Start building](/signup?psource=web-app-templates-card-bankdash-web) * [](/web-app-templates/base-admin/) ## [Base — Admin](/web-app-templates/base-admin/) A commerce-focused admin dashboard with store performance stats, hourly sales and transaction-split charts, recent… admindashboardanalytics [Explore template → ](/web-app-templates/base-admin/)[Start building](/signup?psource=web-app-templates-card-base-admin-web) * [](/web-app-templates/camioca-internal-management/) ## [CAMIOCA Internal Management](/web-app-templates/camioca-internal-management/) An internal company management dashboard for a consulting-style firm, tracking active people, projects in progress,… internal-toolsdashboardhr [Explore template → ](/web-app-templates/camioca-internal-management/)[Start building](/signup?psource=web-app-templates-card-camioca-internal-management-web) * [](/web-app-templates/chatly-messaging-app/) ## [Chatly — Messaging App](/web-app-templates/chatly-messaging-app/) A WhatsApp-style messaging web app with a conversation list, voice/video call history, status updates, and an… messagingchatcommunication [Explore template → ](/web-app-templates/chatly-messaging-app/)[Start building](/signup?psource=web-app-templates-card-chatly-messaging-app-web) * [](/web-app-templates/corevo-erp/) ## [Corevo ERP](/web-app-templates/corevo-erp/) An internal ERP web console for an organization's HR and operations teams, with a dashboard of… erphradmin dashboard [Explore template → ](/web-app-templates/corevo-erp/)[Start building](/signup?psource=web-app-templates-card-corevo-erp-web) * [](/web-app-templates/crm/) ## [CRM](/web-app-templates/crm/) Customer relationship management app with contact and company directories, detail pages with notes and tasks, a… crmsalescontacts [Explore template → ](/web-app-templates/crm/)[Start building](/signup?psource=web-app-templates-card-crm-web) * [](/web-app-templates/dashboard/) ## [Dashboard](/web-app-templates/dashboard/) SaaS admin dashboard with analytics overview, task management with filterable tables, user administration, app… dashboardsaasadmin [Explore template → ](/web-app-templates/dashboard/)[Start building](/signup?psource=web-app-templates-card-dashboard-web) * [](/web-app-templates/dealflow/) ## [DealFlow](/web-app-templates/dealflow/) A sales CRM for a field-services / property business, centred on a dashboard of the next on-site appointment, recent… crmsalesdashboard [Explore template → ](/web-app-templates/dealflow/)[Start building](/signup?psource=web-app-templates-card-dealflow-web) * [](/web-app-templates/digitx-sales-forecast/) ## [DigitX Sales Forecast](/web-app-templates/digitx-sales-forecast/) DigitX Sales Forecast is a B2B sales forecasting workspace for an automotive parts and fleet-services business, with… sales forecastinganalyticsdashboard [Explore template → ](/web-app-templates/digitx-sales-forecast/)[Start building](/signup?psource=web-app-templates-card-digitx-sales-forecast-web) * [](/web-app-templates/dwello/) ## [Dwello](/web-app-templates/dwello/) A real-estate marketing site for browsing luxury homes for sale, with a property catalogue, image-gallery listing… real estateproperty listingsmarketing site [Explore template → ](/web-app-templates/dwello/)[Start building](/signup?psource=web-app-templates-card-dwello-web) * [](/web-app-templates/e-tutor/) ## [E-tutor](/web-app-templates/e-tutor/) E-tutor is a full learning-management marketplace where students browse a course catalog, view course and instructor… educatione-learninglms [Explore template → ](/web-app-templates/e-tutor/)[Start building](/signup?psource=web-app-templates-card-e-tutor-web) * [](/web-app-templates/ecobazar/) ## [Ecobazar](/web-app-templates/ecobazar/) An organic grocery storefront for browsing seasonal produce by category, viewing product detail pages with reviews,… ecommercegroceryorganic food [Explore template → ](/web-app-templates/ecobazar/)[Start building](/signup?psource=web-app-templates-card-ecobazar-web) * [](/web-app-templates/ecommerce/) ## [Ecommerce](/web-app-templates/ecommerce/) E-commerce storefront with product discovery, category browsing with filters and sorting, product detail pages with… ecommercestorefrontshopping [Explore template → ](/web-app-templates/ecommerce/)[Start building](/signup?psource=web-app-templates-card-ecommerce-web) * [](/web-app-templates/edudash-teacher-dashboard/) ## [EduDash — Teacher Dashboard](/web-app-templates/edudash-teacher-dashboard/) A teacher-facing school dashboard for managing classes and student rosters, with a records library of results,… educationschool managementteacher dashboard [Explore template → ](/web-app-templates/edudash-teacher-dashboard/)[Start building](/signup?psource=web-app-templates-card-edudash-teacher-dashboard-web) * [](/web-app-templates/estatein/) ## [Estatein](/web-app-templates/estatein/) A real estate agency website for browsing luxury property listings — villas, city apartments and country cottages —… real estateproperty listingsmarketing website [Explore template → ](/web-app-templates/estatein/)[Start building](/signup?psource=web-app-templates-card-estatein-web) * [](/web-app-templates/eventify/) ## [Eventify](/web-app-templates/eventify/) An event discovery and ticketing site where visitors browse local and global events by category and city, filter… eventsticketingmarketplace [Explore template → ](/web-app-templates/eventify/)[Start building](/signup?psource=web-app-templates-card-eventify-web) * [](/web-app-templates/exclusive/) ## [Exclusive](/web-app-templates/exclusive/) An electronics and lifestyle e-commerce storefront with category browsing, flash-sale and best-seller sections,… ecommerceonline storeelectronics [Explore template → ](/web-app-templates/exclusive/)[Start building](/signup?psource=web-app-templates-card-exclusive-web) * [](/web-app-templates/finance/) ## [Finance](/web-app-templates/finance/) Personal finance app with account overviews, filterable transaction history, transfers, card management with… financebankingbudgets [Explore template → ](/web-app-templates/finance/)[Start building](/signup?psource=web-app-templates-card-finance-web) * [](/web-app-templates/finance-expert-personal-banking-dashboard/) ## [Finance Expert — Personal Banking Dashboard](/web-app-templates/finance-expert-personal-banking-dashboard/) A personal finance and banking dashboard showing total balance across currencies, payment cards, investment… fintechpersonal financebanking [Explore template → ](/web-app-templates/finance-expert-personal-banking-dashboard/)[Start building](/signup?psource=web-app-templates-card-finance-expert-personal-banking-dashboard-web) * [](/web-app-templates/furniro/) ## [Furniro](/web-app-templates/furniro/) Furniro is a furniture e-commerce storefront with a shop catalog, individual product pages offering size, color and… e-commercefurnitureretail [Explore template → ](/web-app-templates/furniro/)[Start building](/signup?psource=web-app-templates-card-furniro-web) * [](/web-app-templates/hecto/) ## [Hecto](/web-app-templates/hecto/) Hecto is a furniture and home-decor e-commerce storefront with a hero carousel, featured-product grids, product… e-commercefurniturehome-decor [Explore template → ](/web-app-templates/hecto/)[Start building](/signup?psource=web-app-templates-card-hecto-web) * [](/web-app-templates/hiro-team-project-workspace/) ## [Hiro — Team Project Workspace](/web-app-templates/hiro-team-project-workspace/) A team project management workspace with multiple project spaces, offering list, kanban board, and calendar views of… productivityproject managementkanban [Explore template → ](/web-app-templates/hiro-team-project-workspace/)[Start building](/signup?psource=web-app-templates-card-hiro-team-project-workspace-web) * [](/web-app-templates/hrdashboard/) ## [HRDashboard](/web-app-templates/hrdashboard/) An internal HR admin dashboard for the fictional company Unipixel, covering an employee directory with detail… hradmin dashboardemployee management [Explore template → ](/web-app-templates/hrdashboard/)[Start building](/signup?psource=web-app-templates-card-hrdashboard-web) * [](/web-app-templates/kanban-inventory/) ## [Kanban Inventory](/web-app-templates/kanban-inventory/) An inventory management dashboard for retail/grocery stores that tracks products, stock levels, expiry dates and… inventoryretaildashboard [Explore template → ](/web-app-templates/kanban-inventory/)[Start building](/signup?psource=web-app-templates-card-kanban-inventory-web) * [](/web-app-templates/larkwood-furniture/) ## [Larkwood Furniture](/web-app-templates/larkwood-furniture/) An e-commerce storefront for Larkwood, a furniture brand selling sofas, chairs, dining tables and storage organized… e-commercefurniturehome decor [Explore template → ](/web-app-templates/larkwood-furniture/)[Start building](/signup?psource=web-app-templates-card-larkwood-furniture-web) * [](/web-app-templates/meddical/) ## [Meddical](/web-app-templates/meddical/) A marketing and patient-facing website for a multi-specialty hospital, covering nine departments with individual… healthcarehospitalmarketing site [Explore template → ](/web-app-templates/meddical/)[Start building](/signup?psource=web-app-templates-card-meddical-web) * [](/web-app-templates/medico-store/) ## [Medico Store](/web-app-templates/medico-store/) An online pharmacy and medical-supply storefront where shoppers browse categories like Pain Relief, First Aid and… healthcarepharmacyecommerce [Explore template → ](/web-app-templates/medico-store/)[Start building](/signup?psource=web-app-templates-card-medico-store-web) * [](/web-app-templates/modimal-women-clothing/) ## [Modimal — Women Clothing](/web-app-templates/modimal-women-clothing/) A sustainable women's fashion storefront for the Modimal brand, with a shoppable collection catalog, product detail… ecommercefashionretail [Explore template → ](/web-app-templates/modimal-women-clothing/)[Start building](/signup?psource=web-app-templates-card-modimal-women-clothing-web) * [](/web-app-templates/morent/) ## [Morent](/web-app-templates/morent/) Morent is a car rental marketplace where users browse a catalog of vehicles by type, capacity and price, view… car-rentalmarketplaceautomotive [Explore template → ](/web-app-templates/morent/)[Start building](/signup?psource=web-app-templates-card-morent-web) * [](/web-app-templates/motiv-fleet-dashboard/) ## [Motiv Fleet Dashboard](/web-app-templates/motiv-fleet-dashboard/) Motiv is a fleet management dashboard for a vehicle rental and resale operation, tracking energy, range, brake fluid… fleet managementautomotivedashboard [Explore template → ](/web-app-templates/motiv-fleet-dashboard/)[Start building](/signup?psource=web-app-templates-card-motiv-fleet-dashboard-web) * [](/web-app-templates/nestmart/) ## [Nestmart](/web-app-templates/nestmart/) Nestmart is an e-commerce storefront for everyday home, kitchen, electronics, furniture, and office goods, with a… ecommerceretailstorefront [Explore template → ](/web-app-templates/nestmart/)[Start building](/signup?psource=web-app-templates-card-nestmart-web) * [](/web-app-templates/nft-marketplace/) ## [NFT Marketplace](/web-app-templates/nft-marketplace/) A crypto-collectibles marketplace dashboard where users discover trending NFT auctions, view artwork detail pages… nftweb3marketplace [Explore template → ](/web-app-templates/nft-marketplace/)[Start building](/signup?psource=web-app-templates-card-nft-marketplace-web) * [](/web-app-templates/norrfield/) ## [Norrfield](/web-app-templates/norrfield/) A storefront for Norrfield, a minimal apparel brand, with category listing and filtering, product detail pages… fashione-commercestorefront [Explore template → ](/web-app-templates/norrfield/)[Start building](/signup?psource=web-app-templates-card-norrfield-web) * [](/web-app-templates/nuegas/) ## [Nuegas](/web-app-templates/nuegas/) A learning and task-management dashboard where a student tracks running tasks, weekly activity charts and a calendar… productivityedtechdashboard [Explore template → ](/web-app-templates/nuegas/)[Start building](/signup?psource=web-app-templates-card-nuegas-web) * [](/web-app-templates/orla/) ## [Orla](/web-app-templates/orla/) A fashion e-commerce storefront for Orla, selling dresses, knitwear, outerwear, bags and accessories e-commercefashionapparel [Explore template → ](/web-app-templates/orla/)[Start building](/signup?psource=web-app-templates-card-orla-web) * [](/web-app-templates/payd/) ## [Payd](/web-app-templates/payd/) Payd is an African payments operations dashboard for tracking charges across card, bank transfer, USSD and mobile… fintechpaymentsdashboard [Explore template → ](/web-app-templates/payd/)[Start building](/signup?psource=web-app-templates-card-payd-web) * [](/web-app-templates/plum-and-petal-fragrance-store/) ## [Plum & Petal Fragrance Store](/web-app-templates/plum-and-petal-fragrance-store/) A discount designer-fragrance and beauty storefront called Plum & Petal, with a filterable catalog of perfumes,… ecommercefragrancebeauty [Explore template → ](/web-app-templates/plum-and-petal-fragrance-store/)[Start building](/signup?psource=web-app-templates-card-plum-and-petal-fragrance-store-web) * [](/web-app-templates/projects/) ## [Projects](/web-app-templates/projects/) Project management app with a drag-and-drop kanban board, filterable task tables, project overviews with activity,… projectskanbantasks [Explore template → ](/web-app-templates/projects/)[Start building](/signup?psource=web-app-templates-card-projects-web) * [](/web-app-templates/propora-property-management/) ## [Propora Property Management](/web-app-templates/propora-property-management/) A property-management dashboard for landlords and portfolio managers, tracking properties, tenants, leases,… real estateproperty managementdashboard [Explore template → ](/web-app-templates/propora-property-management/)[Start building](/signup?psource=web-app-templates-card-propora-property-management-web) * [](/web-app-templates/raple-analytics-suite/) ## [Raple Analytics Suite](/web-app-templates/raple-analytics-suite/) A SaaS admin suite built around a web-analytics overview, with visitor and conversion metrics, a kanban board,… analyticssaasadmin dashboard [Explore template → ](/web-app-templates/raple-analytics-suite/)[Start building](/signup?psource=web-app-templates-card-raple-analytics-suite-web) * [](/web-app-templates/reservebite/) ## [ReserveBite](/web-app-templates/reservebite/) A restaurant discovery and table-reservation app where diners search local restaurants by cuisine, tags and cost for… restaurantsdiningreservations [Explore template → ](/web-app-templates/reservebite/)[Start building](/signup?psource=web-app-templates-card-reservebite-web) * [](/web-app-templates/sales/) ## [Sales](/web-app-templates/sales/) Sales is a pet-shop sales admin dashboard that tracks weekly balance, orders in line, and new clients alongside… dashboardsalesanalytics [Explore template → ](/web-app-templates/sales/)[Start building](/signup?psource=web-app-templates-card-sales-web) * [](/web-app-templates/servicehub-admin/) ## [ServiceHub Admin](/web-app-templates/servicehub-admin/) An admin console for an appliance repair service center, tracking clients, service jobs, technician staff and live… service managementadmin dashboardfield service [Explore template → ](/web-app-templates/servicehub-admin/)[Start building](/signup?psource=web-app-templates-card-servicehub-admin-web) * [](/web-app-templates/shop-co/) ## [SHOP.CO](/web-app-templates/shop-co/) SHOP.CO is a fashion e-commerce storefront selling t-shirts, shirts, jeans, shorts and hoodies with discount pricing… ecommercefashionretail [Explore template → ](/web-app-templates/shop-co/)[Start building](/signup?psource=web-app-templates-card-shop-co-web) * [](/web-app-templates/sociofy/) ## [Sociofy](/web-app-templates/sociofy/) A social-media management dashboard that tracks profile visits, followers, reach and account growth across connected… social-mediaanalyticsdashboard [Explore template → ](/web-app-templates/sociofy/)[Start building](/signup?psource=web-app-templates-card-sociofy-web) * [](/web-app-templates/stayhub/) ## [StayHub](/web-app-templates/stayhub/) StayHub is a short- and long-term property rental marketplace where guests browse and search listings, view detailed… real estaterentalsmarketplace [Explore template → ](/web-app-templates/stayhub/)[Start building](/signup?psource=web-app-templates-card-stayhub-web) * [](/web-app-templates/staylo/) ## [Staylo](/web-app-templates/staylo/) A vacation-rental booking site for tropical villas and retreats, with browsable stays, destination guides,… travelvacation rentalbooking [Explore template → ](/web-app-templates/staylo/)[Start building](/signup?psource=web-app-templates-card-staylo-web) * [](/web-app-templates/streamvibe/) ## [StreamVibe](/web-app-templates/streamvibe/) StreamVibe is a video streaming service front end for browsing movies and TV shows by genre, opening title detail… streamingentertainmentvideo on demand [Explore template → ](/web-app-templates/streamvibe/)[Start building](/signup?psource=web-app-templates-card-streamvibe-web) * [](/web-app-templates/taskly/) ## [Taskly](/web-app-templates/taskly/) A personal to-do and task-management app where tasks carry a priority, status, category and detailed notes, split… productivitytask managementto-do app [Explore template → ](/web-app-templates/taskly/)[Start building](/signup?psource=web-app-templates-card-taskly-web) * [](/web-app-templates/teach-instructor-availability/) ## [Teach. Instructor Availability](/web-app-templates/teach-instructor-availability/) A course-platform admin app where instructors manage their weekly availability slots, teaching schedule and bookings educationedtechadmin dashboard [Explore template → ](/web-app-templates/teach-instructor-availability/)[Start building](/signup?psource=web-app-templates-card-teach-instructor-availability-web) * [](/web-app-templates/teamify-team-dashboard/) ## [Teamify Team Dashboard](/web-app-templates/teamify-team-dashboard/) An HR and team-operations dashboard for a company workspace, with charts for team strength, employee headcount and… hrteam managementanalytics dashboard [Explore template → ](/web-app-templates/teamify-team-dashboard/)[Start building](/signup?psource=web-app-templates-card-teamify-team-dashboard-web) * [](/web-app-templates/totc-virtual-classrooms/) ## [TOTC — Virtual Classrooms](/web-app-templates/totc-virtual-classrooms/) TOTC is an online learning marketplace and virtual classroom platform where learners browse a catalogue of tech… educationedtechonline courses [Explore template → ](/web-app-templates/totc-virtual-classrooms/)[Start building](/signup?psource=web-app-templates-card-totc-virtual-classrooms-web) * [](/web-app-templates/vuexy-admin-panel/) ## [Vuexy Admin Panel](/web-app-templates/vuexy-admin-panel/) A Vuexy-styled admin dashboard for an e-commerce store, with KPI cards and Recharts visualizations for active users,… admin dashboarde-commerceanalytics [Explore template → ](/web-app-templates/vuexy-admin-panel/)[Start building](/signup?psource=web-app-templates-card-vuexy-admin-panel-web) * [](/web-app-templates/wehr-people-operations/) ## [WeHR — People Operations](/web-app-templates/wehr-people-operations/) WeHR is an internal HR management dashboard for people operations teams, covering an employee directory, department… hrhuman resourcesadmin dashboard [Explore template → ](/web-app-templates/wehr-people-operations/)[Start building](/signup?psource=web-app-templates-card-wehr-people-operations-web) * [](/web-app-templates/woorkroom/) ## [Woorkroom](/web-app-templates/woorkroom/) A team workspace and project-management tool with project lists, a kanban task board, timeline view and per-project… project managementteam collaborationcrm [Explore template → ](/web-app-templates/woorkroom/)[Start building](/signup?psource=web-app-templates-card-woorkroom-web) * [](/web-app-templates/xiv/) ## [XIV](/web-app-templates/xiv/) XIV is a minimal menswear e-commerce storefront selling shirts, tees, jeans, suits and coats, with a filterable… fashionmensweare-commerce [Explore template → ](/web-app-templates/xiv/)[Start building](/signup?psource=web-app-templates-card-xiv-web) ## No templates found Try a broader search to see more starting points. Clear search ## Start with the workflow your users already understand Choose the web app template whose information architecture is closest to your product. The layouts are starting points, so you can replace the sample content, add integrations, and reshape each workflow. ## Web App Templates FAQ * What is a web app template? A web app template is a starting point for an app that runs in the browser. The common layouts and flows are already built, such as dashboards, data tables, settings, search, and account pages, so you start from a working interface instead of a blank page. * Can I customize the web app templates? Yes. You can change the interface, the workflows, the content, the data connections, and the code, so the template ends up fitting the product you are building rather than the other way around. * Can I connect a template to my own backend? Yes. Swap the sample content for your own APIs and services, then adjust the screens, states, and actions to match your data model. --- # AI Chat > AI chat web app with conversation history, simulated streaming responses, markdown and code rendering, prompt suggestions, a model gallery, and settings. [← Web App Templates](/web-app-templates/) Template preview Web App  Template type Web App Designed for Modern web browsers Preview gallery 4 visual previews ## Who the AI Chat template is for AI product teams and founders building a browser-based assistant, support tool, or multi-model chat experience. ## What’s included * ✓ Conversation history with simulated streaming responses * ✓ Markdown and code rendering for detailed assistant output * ✓ Prompt suggestions, model discovery, and configurable settings ## Explore the AI Chat design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  ## What you can build with AI Chat * → Launch a branded AI assistant for customers or employees * → Prototype a multi-model chat and comparison product * → Build a support or knowledge assistant with rich responses ## More Web App Templates [Browse all web apps](/web-app-templates/) * [](/web-app-templates/akademi-school-admission-dashboard/) ### [Akademi — School Admission Dashboard](/web-app-templates/akademi-school-admission-dashboard/) [An admin dashboard for a school that tracks student and teacher rosters with detail and enrollment pages, school…](/web-app-templates/akademi-school-admission-dashboard/) * [](/web-app-templates/chatly-messaging-app/) ### [Chatly — Messaging App](/web-app-templates/chatly-messaging-app/) [A WhatsApp-style messaging web app with a conversation list, voice/video call history, status updates, and an…](/web-app-templates/chatly-messaging-app/) * [](/web-app-templates/hiro-team-project-workspace/) ### [Hiro — Team Project Workspace](/web-app-templates/hiro-team-project-workspace/) [A team project management workspace with multiple project spaces, offering list, kanban board, and calendar views of…](/web-app-templates/hiro-team-project-workspace/) ## Make it yours Start with this web app template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-ai-chat-web) --- # Akademi — School Admission Dashboard > An admin dashboard for a school that tracks student and teacher rosters with detail and enrollment pages, school events, cafeteria food orders, and finance… [← Web App Templates](/web-app-templates/) Template preview Web App  Template type Web App Designed for Modern web browsers Preview gallery 7 visual previews ## Who the Akademi — School Admission Dashboard template is for School administrators and education teams coordinating admissions, people, events, communication, and finances. ## What’s included * ✓ Student and teacher rosters with detailed enrollment records * ✓ School events, cafeteria orders, and message inboxes * ✓ Income, expense, performance, and calendar reporting ## Explore the Akademi — School Admission Dashboard design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  ## What you can build with Akademi — School Admission Dashboard * → Launch a school administration portal * → Prototype an admissions and enrollment workspace * → Unify education operations, messaging, and finance reporting ## More Web App Templates [Browse all web apps](/web-app-templates/) * [](/web-app-templates/edudash-teacher-dashboard/) ### [EduDash — Teacher Dashboard](/web-app-templates/edudash-teacher-dashboard/) [A teacher-facing school dashboard for managing classes and student rosters, with a records library of results,…](/web-app-templates/edudash-teacher-dashboard/) * [](/web-app-templates/vuexy-admin-panel/) ### [Vuexy Admin Panel](/web-app-templates/vuexy-admin-panel/) [A Vuexy-styled admin dashboard for an e-commerce store, with KPI cards and Recharts visualizations for active users,…](/web-app-templates/vuexy-admin-panel/) * [](/web-app-templates/chatly-messaging-app/) ### [Chatly — Messaging App](/web-app-templates/chatly-messaging-app/) [A WhatsApp-style messaging web app with a conversation list, voice/video call history, status updates, and an…](/web-app-templates/chatly-messaging-app/) ## Make it yours Start with this web app template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-akademi-school-admission-dashboard-web) --- # BankDash > A personal banking dashboard where a customer reviews card balances, weekly deposit/withdraw activity, expense breakdowns and recent transactions, then… [← Web App Templates](/web-app-templates/) Template preview Web App  Template type Web App Designed for Modern web browsers Preview gallery 7 visual previews ## Who the BankDash template is for Banks, credit unions, and fintech teams creating a customer-facing financial dashboard. ## What’s included * ✓ Card balances, cash-flow charts, and expense breakdowns * ✓ Account, investment, loan, and credit-card workspaces * ✓ Transaction history plus profile, preference, and security settings ## Explore the BankDash design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  ## What you can build with BankDash * → Build a digital banking customer portal * → Prototype a personal-finance dashboard * → Add account and investment visibility to a fintech product ## More Web App Templates [Browse all web apps](/web-app-templates/) * [](/web-app-templates/payd/) ### [Payd](/web-app-templates/payd/) [Payd is an African payments operations dashboard for tracking charges across card, bank transfer, USSD and mobile…](/web-app-templates/payd/) * [](/web-app-templates/propora-property-management/) ### [Propora Property Management](/web-app-templates/propora-property-management/) [A property-management dashboard for landlords and portfolio managers, tracking properties, tenants, leases,…](/web-app-templates/propora-property-management/) * [](/web-app-templates/finance-expert-personal-banking-dashboard/) ### [Finance Expert — Personal Banking Dashboard](/web-app-templates/finance-expert-personal-banking-dashboard/) [A personal finance and banking dashboard showing total balance across currencies, payment cards, investment…](/web-app-templates/finance-expert-personal-banking-dashboard/) ## Make it yours Start with this web app template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-bankdash-web) --- # Base — Admin > A commerce-focused admin dashboard with store performance stats, hourly sales and transaction-split charts, recent orders and top-selling product tables,… [← Web App Templates](/web-app-templates/) Template preview Web App  Template type Web App Designed for Modern web browsers Preview gallery 7 visual previews ## Who the Base — Admin template is for Commerce operators and SaaS teams that need a broad administration workspace with analytics and daily operations. ## What’s included * ✓ Store-performance metrics, sales charts, and order tables * ✓ Products, customers, invoices, kanban, and scheduling tools * ✓ Messaging, notifications, settings, authentication, and dark mode ## Explore the Base — Admin design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  ## What you can build with Base — Admin * → Launch an ecommerce operations dashboard * → Build a multi-module SaaS administration portal * → Prototype an internal workspace for sales and fulfillment teams ## More Web App Templates [Browse all web apps](/web-app-templates/) * [](/web-app-templates/sales/) ### [Sales](/web-app-templates/sales/) [Sales is a pet-shop sales admin dashboard that tracks weekly balance, orders in line, and new clients alongside…](/web-app-templates/sales/) * [](/web-app-templates/dashboard/) ### [Dashboard](/web-app-templates/dashboard/) [SaaS admin dashboard with analytics overview, task management with filterable tables, user administration, app…](/web-app-templates/dashboard/) * [](/web-app-templates/raple-analytics-suite/) ### [Raple Analytics Suite](/web-app-templates/raple-analytics-suite/) [A SaaS admin suite built around a web-analytics overview, with visitor and conversion metrics, a kanban board,…](/web-app-templates/raple-analytics-suite/) ## Make it yours Start with this web app template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-base-admin-web) --- # CAMIOCA Internal Management > An internal company management dashboard for a consulting-style firm, tracking active people, projects in progress, utilisation and open action items across… [← Web App Templates](/web-app-templates/) Template preview Web App  Template type Web App Designed for Modern web browsers Preview gallery 7 visual previews ## Who the CAMIOCA Internal Management template is for Consultancies and distributed service teams managing people, projects, utilization, and time across offices. ## What’s included * ✓ Company overview with staffing, projects, utilization, and action items * ✓ People directory and project portfolio across multiple branches * ✓ Timesheets, vacations, training, and employee profiles ## Explore the CAMIOCA Internal Management design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  ## What you can build with CAMIOCA Internal Management * → Build an internal consulting operations portal * → Track staffing and project utilization across offices * → Centralize employee time, leave, and development workflows ## More Web App Templates [Browse all web apps](/web-app-templates/) * [](/web-app-templates/sales/) ### [Sales](/web-app-templates/sales/) [Sales is a pet-shop sales admin dashboard that tracks weekly balance, orders in line, and new clients alongside…](/web-app-templates/sales/) * [](/web-app-templates/bankdash/) ### [BankDash](/web-app-templates/bankdash/) [A personal banking dashboard where a customer reviews card balances, weekly deposit/withdraw activity, expense…](/web-app-templates/bankdash/) * [](/web-app-templates/base-admin/) ### [Base — Admin](/web-app-templates/base-admin/) [A commerce-focused admin dashboard with store performance stats, hourly sales and transaction-split charts, recent…](/web-app-templates/base-admin/) ## Make it yours Start with this web app template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-camioca-internal-management-web) --- # Chatly — Messaging App > A WhatsApp-style messaging web app with a conversation list, voice/video call history, status updates, and an archived-chats view. Contact profiles show… [← Web App Templates](/web-app-templates/) Template preview Web App  Template type Web App Designed for Modern web browsers Preview gallery 7 visual previews ## Who the Chatly — Messaging App template is for Communication-product teams and communities building a familiar real-time messaging experience for the web. ## What’s included * ✓ Conversation list with direct and archived chats * ✓ Voice and video call history plus status updates * ✓ Contact profiles, shared media, privacy, and notification settings ## Explore the Chatly — Messaging App design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  ## What you can build with Chatly — Messaging App * → Launch a browser-based team or community messenger * → Prototype a private customer communication product * → Add calls, statuses, and contact profiles to a chat service ## More Web App Templates [Browse all web apps](/web-app-templates/) * [](/web-app-templates/akademi-school-admission-dashboard/) ### [Akademi — School Admission Dashboard](/web-app-templates/akademi-school-admission-dashboard/) [An admin dashboard for a school that tracks student and teacher rosters with detail and enrollment pages, school…](/web-app-templates/akademi-school-admission-dashboard/) * [](/web-app-templates/edudash-teacher-dashboard/) ### [EduDash — Teacher Dashboard](/web-app-templates/edudash-teacher-dashboard/) [A teacher-facing school dashboard for managing classes and student rosters, with a records library of results,…](/web-app-templates/edudash-teacher-dashboard/) * [](/web-app-templates/finance-expert-personal-banking-dashboard/) ### [Finance Expert — Personal Banking Dashboard](/web-app-templates/finance-expert-personal-banking-dashboard/) [A personal finance and banking dashboard showing total balance across currencies, payment cards, investment…](/web-app-templates/finance-expert-personal-banking-dashboard/) ## Make it yours Start with this web app template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-chatly-messaging-app-web) --- # Corevo ERP > An internal ERP web console for an organization's HR and operations teams, with a dashboard of staff/application/project metrics plus modules for the staff… [← Web App Templates](/web-app-templates/) Template preview Web App  Template type Web App Designed for Modern web browsers Preview gallery 7 visual previews ## Who the Corevo ERP template is for Operations and HR teams consolidating workforce, finance, procurement, and facilities processes in one ERP. ## What’s included * ✓ Staff, application, and project metrics on an operational dashboard * ✓ Payroll, vouchers, procurement, memos, and circulars * ✓ Notifications and facility-maintenance management ## Explore the Corevo ERP design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  ## What you can build with Corevo ERP * → Build an internal ERP for a growing organization * → Centralize HR, payroll, and procurement workflows * → Prototype a public-sector or enterprise operations console ## More Web App Templates [Browse all web apps](/web-app-templates/) * [](/web-app-templates/hrdashboard/) ### [HRDashboard](/web-app-templates/hrdashboard/) [An internal HR admin dashboard for the fictional company Unipixel, covering an employee directory with detail…](/web-app-templates/hrdashboard/) * [](/web-app-templates/akademi-school-admission-dashboard/) ### [Akademi — School Admission Dashboard](/web-app-templates/akademi-school-admission-dashboard/) [An admin dashboard for a school that tracks student and teacher rosters with detail and enrollment pages, school…](/web-app-templates/akademi-school-admission-dashboard/) * [](/web-app-templates/digitx-sales-forecast/) ### [DigitX Sales Forecast](/web-app-templates/digitx-sales-forecast/) [DigitX Sales Forecast is a B2B sales forecasting workspace for an automotive parts and fleet-services business, with…](/web-app-templates/digitx-sales-forecast/) ## Make it yours Start with this web app template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-corevo-erp-web) --- # CRM > Customer relationship management app with contact and company directories, detail pages with notes and tasks, a drag-and-drop deals pipeline, and a sales… [← Web App Templates](/web-app-templates/) Template preview Web App  Template type Web App Designed for Modern web browsers Preview gallery 5 visual previews ## Who the CRM template is for Sales teams, service businesses, and founders creating a customer relationship and deal-management product. ## What’s included * ✓ Contact and company directories with detailed records * ✓ Notes, tasks, and relationship history on customer profiles * ✓ Drag-and-drop deal pipeline with a sales analytics dashboard ## Explore the CRM design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  ## What you can build with CRM * → Build a CRM for a specialized sales workflow * → Launch an account and opportunity management portal * → Prototype an internal customer-success workspace ## More Web App Templates [Browse all web apps](/web-app-templates/) * [](/web-app-templates/dealflow/) ### [DealFlow](/web-app-templates/dealflow/) [A sales CRM for a field-services / property business, centred on a dashboard of the next on-site appointment, recent…](/web-app-templates/dealflow/) * [](/web-app-templates/chatly-messaging-app/) ### [Chatly — Messaging App](/web-app-templates/chatly-messaging-app/) [A WhatsApp-style messaging web app with a conversation list, voice/video call history, status updates, and an…](/web-app-templates/chatly-messaging-app/) * [](/web-app-templates/sales/) ### [Sales](/web-app-templates/sales/) [Sales is a pet-shop sales admin dashboard that tracks weekly balance, orders in line, and new clients alongside…](/web-app-templates/sales/) ## Make it yours Start with this web app template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-crm-web) --- # Dashboard > SaaS admin dashboard with analytics overview, task management with filterable tables, user administration, app integrations, and a complete settings area. [← Web App Templates](/web-app-templates/) Template preview Web App  Template type Web App Designed for Modern web browsers Preview gallery 6 visual previews ## Who the Dashboard template is for SaaS founders, operations teams, and product teams building an administration or analytics workspace. ## What’s included * ✓ Analytics overview for monitoring key product and business metrics * ✓ Task management and user administration with filterable tables * ✓ Integration management and a complete settings area ## Explore the Dashboard design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  ## What you can build with Dashboard * → Launch an administration dashboard for a SaaS product * → Build an internal operations and reporting workspace * → Prototype a customer portal with analytics and account controls ## More Web App Templates [Browse all web apps](/web-app-templates/) * [](/web-app-templates/base-admin/) ### [Base — Admin](/web-app-templates/base-admin/) [A commerce-focused admin dashboard with store performance stats, hourly sales and transaction-split charts, recent…](/web-app-templates/base-admin/) * [](/web-app-templates/sociofy/) ### [Sociofy](/web-app-templates/sociofy/) [A social-media management dashboard that tracks profile visits, followers, reach and account growth across connected…](/web-app-templates/sociofy/) * [](/web-app-templates/digitx-sales-forecast/) ### [DigitX Sales Forecast](/web-app-templates/digitx-sales-forecast/) [DigitX Sales Forecast is a B2B sales forecasting workspace for an automotive parts and fleet-services business, with…](/web-app-templates/digitx-sales-forecast/) ## Make it yours Start with this web app template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-dashboard-web) --- # DealFlow > A sales CRM for a field-services / property business, centred on a dashboard of the next on-site appointment, recent deals with prices and addresses,… [← Web App Templates](/web-app-templates/) Template preview Web App  Template type Web App Designed for Modern web browsers Preview gallery 8 visual previews ## Who the DealFlow template is for Field-service and property sales teams managing appointments, deals, customers, and follow-up work. ## What’s included * ✓ Sales dashboard with next appointments, recent deals, and tasks * ✓ Deal and customer records with editable activity timelines * ✓ Calendar, notifications, to-dos, and appearance settings ## Explore the DealFlow design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  *  ## What you can build with DealFlow * → Launch a CRM for field-service sales * → Track property deals and customer activity * → Build a focused appointment-to-close workflow ## More Web App Templates [Browse all web apps](/web-app-templates/) * [](/web-app-templates/sales/) ### [Sales](/web-app-templates/sales/) [Sales is a pet-shop sales admin dashboard that tracks weekly balance, orders in line, and new clients alongside…](/web-app-templates/sales/) * [](/web-app-templates/base-admin/) ### [Base — Admin](/web-app-templates/base-admin/) [A commerce-focused admin dashboard with store performance stats, hourly sales and transaction-split charts, recent…](/web-app-templates/base-admin/) * [](/web-app-templates/camioca-internal-management/) ### [CAMIOCA Internal Management](/web-app-templates/camioca-internal-management/) [An internal company management dashboard for a consulting-style firm, tracking active people, projects in progress,…](/web-app-templates/camioca-internal-management/) ## Make it yours Start with this web app template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-dealflow-web) --- # DigitX Sales Forecast > DigitX Sales Forecast is a B2B sales forecasting workspace for an automotive parts and fleet-services business, with revenue projection charts, vendor and… [← Web App Templates](/web-app-templates/) Template preview Web App  Template type Web App Designed for Modern web browsers Preview gallery 8 visual previews ## Who the DigitX Sales Forecast template is for B2B revenue and operations teams forecasting sales while coordinating vendors, spending, and shared documents. ## What’s included * ✓ Revenue projections and performance charts * ✓ Vendor, partner, and spend-category management * ✓ Document folders, team messaging, backups, and settings ## Explore the DigitX Sales Forecast design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  *  ## What you can build with DigitX Sales Forecast * → Build a B2B sales forecasting workspace * → Coordinate vendor performance and category spending * → Combine business intelligence with team operations ## More Web App Templates [Browse all web apps](/web-app-templates/) * [](/web-app-templates/finance-expert-personal-banking-dashboard/) ### [Finance Expert — Personal Banking Dashboard](/web-app-templates/finance-expert-personal-banking-dashboard/) [A personal finance and banking dashboard showing total balance across currencies, payment cards, investment…](/web-app-templates/finance-expert-personal-banking-dashboard/) * [](/web-app-templates/motiv-fleet-dashboard/) ### [Motiv Fleet Dashboard](/web-app-templates/motiv-fleet-dashboard/) [Motiv is a fleet management dashboard for a vehicle rental and resale operation, tracking energy, range, brake fluid…](/web-app-templates/motiv-fleet-dashboard/) * [](/web-app-templates/payd/) ### [Payd](/web-app-templates/payd/) [Payd is an African payments operations dashboard for tracking charges across card, bank transfer, USSD and mobile…](/web-app-templates/payd/) ## Make it yours Start with this web app template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-digitx-sales-forecast-web) --- # Dwello > A real-estate marketing site for browsing luxury homes for sale, with a property catalogue, image-gallery listing detail pages showing price and location,… [← Web App Templates](/web-app-templates/) Template preview Web App  Template type Web App Designed for Modern web browsers Preview gallery 7 visual previews ## Who the Dwello template is for Real-estate agencies and brokers marketing premium listings, agents, and advisory services. ## What’s included * ✓ Property catalog with image-rich listing detail pages * ✓ Agent profiles and service explanations * ✓ Location, pricing, gallery, and office contact content ## Explore the Dwello design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  ## What you can build with Dwello * → Launch a residential real-estate website * → Showcase a curated portfolio of luxury homes * → Connect property shoppers with agents and office locations ## More Web App Templates [Browse all web apps](/web-app-templates/) * [](/web-app-templates/estatein/) ### [Estatein](/web-app-templates/estatein/) [A real estate agency website for browsing luxury property listings — villas, city apartments and country cottages —…](/web-app-templates/estatein/) * [](/web-app-templates/eventify/) ### [Eventify](/web-app-templates/eventify/) [An event discovery and ticketing site where visitors browse local and global events by category and city, filter…](/web-app-templates/eventify/) * [](/web-app-templates/meddical/) ### [Meddical](/web-app-templates/meddical/) [A marketing and patient-facing website for a multi-specialty hospital, covering nine departments with individual…](/web-app-templates/meddical/) ## Make it yours Start with this web app template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-dwello-web) --- # E-tutor > E-tutor is a full learning-management marketplace where students browse a course catalog, view course and instructor profiles, add courses to a cart, and… [← Web App Templates](/web-app-templates/) Template preview Web App  Template type Web App Designed for Modern web browsers Preview gallery 8 visual previews ## Who the E-tutor template is for Education businesses and course marketplaces serving both learners and instructors through one platform. ## What’s included * ✓ Course catalog, detail pages, instructor profiles, and cart * ✓ Student dashboard for enrolled and completed courses * ✓ Instructor course management, messaging, and earnings ## Explore the E-tutor design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  *  ## What you can build with E-tutor * → Launch an online course marketplace * → Build a learner and instructor management platform * → Prototype a paid learning product with ecommerce flows ## More Web App Templates [Browse all web apps](/web-app-templates/) * [](/web-app-templates/hecto/) ### [Hecto](/web-app-templates/hecto/) [Hecto is a furniture and home-decor e-commerce storefront with a hero carousel, featured-product grids, product…](/web-app-templates/hecto/) * [](/web-app-templates/morent/) ### [Morent](/web-app-templates/morent/) [Morent is a car rental marketplace where users browse a catalog of vehicles by type, capacity and price, view…](/web-app-templates/morent/) * [](/web-app-templates/motiv-fleet-dashboard/) ### [Motiv Fleet Dashboard](/web-app-templates/motiv-fleet-dashboard/) [Motiv is a fleet management dashboard for a vehicle rental and resale operation, tracking energy, range, brake fluid…](/web-app-templates/motiv-fleet-dashboard/) ## Make it yours Start with this web app template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-e-tutor-web) --- # Ecobazar > An organic grocery storefront for browsing seasonal produce by category, viewing product detail pages with reviews, and moving through wishlist, cart and… [← Web App Templates](/web-app-templates/) Template preview Web App  Template type Web App Designed for Modern web browsers Preview gallery 8 visual previews ## Who the Ecobazar template is for Organic grocers, food retailers, and sustainable commerce brands selling products alongside educational content. ## What’s included * ✓ Seasonal grocery browsing by category * ✓ Product details, reviews, wishlist, cart, and checkout * ✓ Blog, account, about, contact, and FAQ sections ## Explore the Ecobazar design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  *  ## What you can build with Ecobazar * → Launch an organic grocery storefront * → Build a farm-to-customer ecommerce experience * → Combine food retail with recipes and educational articles ## More Web App Templates [Browse all web apps](/web-app-templates/) * [](/web-app-templates/larkwood-furniture/) ### [Larkwood Furniture](/web-app-templates/larkwood-furniture/) [An e-commerce storefront for Larkwood, a furniture brand selling sofas, chairs, dining tables and storage organized…](/web-app-templates/larkwood-furniture/) * [](/web-app-templates/shop-co/) ### [SHOP.CO](/web-app-templates/shop-co/) [SHOP.CO is a fashion e-commerce storefront selling t-shirts, shirts, jeans, shorts and hoodies with discount pricing…](/web-app-templates/shop-co/) * [](/web-app-templates/norrfield/) ### [Norrfield](/web-app-templates/norrfield/) [A storefront for Norrfield, a minimal apparel brand, with category listing and filtering, product detail pages…](/web-app-templates/norrfield/) ## Make it yours Start with this web app template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-ecobazar-web) --- # Ecommerce > E-commerce storefront with product discovery, category browsing with filters and sorting, product detail pages with reviews, and a persistent cart with… [← Web App Templates](/web-app-templates/) Template preview Web App  Template type Web App Designed for Modern web browsers Preview gallery 4 visual previews ## Who the Ecommerce template is for Retail teams, direct-to-consumer brands, and founders building a responsive online storefront. ## What’s included * ✓ Product discovery with category browsing, filters, and sorting * ✓ Detailed product pages with ratings and reviews * ✓ Persistent cart and checkout flow from browsing through purchase ## Explore the Ecommerce design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  ## What you can build with Ecommerce * → Launch a direct-to-consumer web storefront * → Prototype a catalog and checkout experience for a retail brand * → Build the customer-facing web app for a commerce platform ## More Web App Templates [Browse all web apps](/web-app-templates/) * [](/web-app-templates/ecobazar/) ### [Ecobazar](/web-app-templates/ecobazar/) [An organic grocery storefront for browsing seasonal produce by category, viewing product detail pages with reviews,…](/web-app-templates/ecobazar/) * [](/web-app-templates/nestmart/) ### [Nestmart](/web-app-templates/nestmart/) [Nestmart is an e-commerce storefront for everyday home, kitchen, electronics, furniture, and office goods, with a…](/web-app-templates/nestmart/) * [](/web-app-templates/exclusive/) ### [Exclusive](/web-app-templates/exclusive/) [An electronics and lifestyle e-commerce storefront with category browsing, flash-sale and best-seller sections,…](/web-app-templates/exclusive/) ## Make it yours Start with this web app template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-ecommerce-web) --- # EduDash — Teacher Dashboard > A teacher-facing school dashboard for managing classes and student rosters, with a records library of results, applications, attendance sheets and lesson… [← Web App Templates](/web-app-templates/) Template preview Web App  Template type Web App Designed for Modern web browsers Preview gallery 8 visual previews ## Who the EduDash — Teacher Dashboard template is for Teachers and school staff managing classes, records, performance, and communication from a shared workspace. ## What’s included * ✓ Class management and student rosters * ✓ Shareable results, attendance, applications, and lesson-plan records * ✓ Performance charts, staff-room messages, and account settings ## Explore the EduDash — Teacher Dashboard design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  *  ## What you can build with EduDash — Teacher Dashboard * → Build a teacher-facing school dashboard * → Centralize classroom records and staff resources * → Track student performance and school communication ## More Web App Templates [Browse all web apps](/web-app-templates/) * [](/web-app-templates/akademi-school-admission-dashboard/) ### [Akademi — School Admission Dashboard](/web-app-templates/akademi-school-admission-dashboard/) [An admin dashboard for a school that tracks student and teacher rosters with detail and enrollment pages, school…](/web-app-templates/akademi-school-admission-dashboard/) * [](/web-app-templates/digitx-sales-forecast/) ### [DigitX Sales Forecast](/web-app-templates/digitx-sales-forecast/) [DigitX Sales Forecast is a B2B sales forecasting workspace for an automotive parts and fleet-services business, with…](/web-app-templates/digitx-sales-forecast/) * [](/web-app-templates/finance-expert-personal-banking-dashboard/) ### [Finance Expert — Personal Banking Dashboard](/web-app-templates/finance-expert-personal-banking-dashboard/) [A personal finance and banking dashboard showing total balance across currencies, payment cards, investment…](/web-app-templates/finance-expert-personal-banking-dashboard/) ## Make it yours Start with this web app template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-edudash-teacher-dashboard-web) --- # Estatein > A real estate agency website for browsing luxury property listings — villas, city apartments and country cottages — with detailed property pages showing… [← Web App Templates](/web-app-templates/) Template preview Web App  Template type Web App Designed for Modern web browsers Preview gallery 7 visual previews ## Who the Estatein template is for Property agencies and real-estate brands presenting listings, services, agents, and social proof. ## What’s included * ✓ Luxury property catalog with detailed listing pages * ✓ Shortlist functionality for saved properties * ✓ Services, team profiles, testimonials, and office contacts ## Explore the Estatein design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  ## What you can build with Estatein * → Launch a real-estate agency website * → Build a searchable property showcase * → Market listings while generating inquiries for agents ## More Web App Templates [Browse all web apps](/web-app-templates/) * [](/web-app-templates/dwello/) ### [Dwello](/web-app-templates/dwello/) [A real-estate marketing site for browsing luxury homes for sale, with a property catalogue, image-gallery listing…](/web-app-templates/dwello/) * [](/web-app-templates/exclusive/) ### [Exclusive](/web-app-templates/exclusive/) [An electronics and lifestyle e-commerce storefront with category browsing, flash-sale and best-seller sections,…](/web-app-templates/exclusive/) * [](/web-app-templates/propora-property-management/) ### [Propora Property Management](/web-app-templates/propora-property-management/) [A property-management dashboard for landlords and portfolio managers, tracking properties, tenants, leases,…](/web-app-templates/propora-property-management/) ## Make it yours Start with this web app template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-estatein-web) --- # Eventify > An event discovery and ticketing site where visitors browse local and global events by category and city, filter results on a search page, open event detail… [← Web App Templates](/web-app-templates/) Template preview Web App  Template type Web App Designed for Modern web browsers Preview gallery 8 visual previews ## Who the Eventify template is for Event organizers and ticketing marketplaces helping people discover, evaluate, and book local experiences. ## What’s included * ✓ Event discovery organized by category and city * ✓ Search, filters, event details, and ticket booking * ✓ Organizer authentication and event-listing entry points ## Explore the Eventify design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  *  ## What you can build with Eventify * → Launch a local event discovery marketplace * → Build a ticketing site for a city or community * → Connect event organizers with prospective attendees ## More Web App Templates [Browse all web apps](/web-app-templates/) * [](/web-app-templates/dwello/) ### [Dwello](/web-app-templates/dwello/) [A real-estate marketing site for browsing luxury homes for sale, with a property catalogue, image-gallery listing…](/web-app-templates/dwello/) * [](/web-app-templates/morent/) ### [Morent](/web-app-templates/morent/) [Morent is a car rental marketplace where users browse a catalog of vehicles by type, capacity and price, view…](/web-app-templates/morent/) * [](/web-app-templates/motiv-fleet-dashboard/) ### [Motiv Fleet Dashboard](/web-app-templates/motiv-fleet-dashboard/) [Motiv is a fleet management dashboard for a vehicle rental and resale operation, tracking energy, range, brake fluid…](/web-app-templates/motiv-fleet-dashboard/) ## Make it yours Start with this web app template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-eventify-web) --- # Exclusive > An electronics and lifestyle e-commerce storefront with category browsing, flash-sale and best-seller sections, product detail pages featuring image… [← Web App Templates](/web-app-templates/) Template preview Web App  Template type Web App Designed for Modern web browsers Preview gallery 8 visual previews ## Who the Exclusive template is for Electronics and lifestyle retailers building a promotion-led online storefront with complete shopping flows. ## What’s included * ✓ Category browsing, flash sales, and best-seller merchandising * ✓ Product galleries, options, reviews, and wishlist * ✓ Cart, checkout, customer account, and theme support ## Explore the Exclusive design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  *  ## What you can build with Exclusive * → Launch an electronics or lifestyle storefront * → Prototype a promotion-heavy retail experience * → Build a catalog-to-checkout flow for a consumer brand ## More Web App Templates [Browse all web apps](/web-app-templates/) * [](/web-app-templates/ecobazar/) ### [Ecobazar](/web-app-templates/ecobazar/) [An organic grocery storefront for browsing seasonal produce by category, viewing product detail pages with reviews,…](/web-app-templates/ecobazar/) * [](/web-app-templates/modimal-women-clothing/) ### [Modimal — Women Clothing](/web-app-templates/modimal-women-clothing/) [A sustainable women's fashion storefront for the Modimal brand, with a shoppable collection catalog, product detail…](/web-app-templates/modimal-women-clothing/) * [](/web-app-templates/shop-co/) ### [SHOP.CO](/web-app-templates/shop-co/) [SHOP.CO is a fashion e-commerce storefront selling t-shirts, shirts, jeans, shorts and hoodies with discount pricing…](/web-app-templates/shop-co/) ## Make it yours Start with this web app template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-exclusive-web) --- # Finance Expert — Personal Banking Dashboard > A personal finance and banking dashboard showing total balance across currencies, payment cards, investment performance, cashback partners and nearby ATMs.… [← Web App Templates](/web-app-templates/) Template preview Web App  Template type Web App Designed for Modern web browsers Preview gallery 8 visual previews ## Who the Finance Expert — Personal Banking Dashboard template is for Banks, investment products, and fintech teams giving customers a unified view of money, cards, and services. ## What’s included * ✓ Multi-currency balance and payment-card overview * ✓ Investment performance, cashback partners, and nearby ATMs * ✓ Payments, transactions, expenditure analytics, and add-on services ## Explore the Finance Expert — Personal Banking Dashboard design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  *  ## What you can build with Finance Expert — Personal Banking Dashboard * → Build a personal banking customer portal * → Prototype a wealth and spending dashboard * → Present financial services and account activity in one workspace ## More Web App Templates [Browse all web apps](/web-app-templates/) * [](/web-app-templates/bankdash/) ### [BankDash](/web-app-templates/bankdash/) [A personal banking dashboard where a customer reviews card balances, weekly deposit/withdraw activity, expense…](/web-app-templates/bankdash/) * [](/web-app-templates/digitx-sales-forecast/) ### [DigitX Sales Forecast](/web-app-templates/digitx-sales-forecast/) [DigitX Sales Forecast is a B2B sales forecasting workspace for an automotive parts and fleet-services business, with…](/web-app-templates/digitx-sales-forecast/) * [](/web-app-templates/motiv-fleet-dashboard/) ### [Motiv Fleet Dashboard](/web-app-templates/motiv-fleet-dashboard/) [Motiv is a fleet management dashboard for a vehicle rental and resale operation, tracking energy, range, brake fluid…](/web-app-templates/motiv-fleet-dashboard/) ## Make it yours Start with this web app template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-finance-expert-personal-banking-dashboard-web) --- # Finance > Personal finance app with account overviews, filterable transaction history, transfers, card management with controls, budgets, and spending analytics. [← Web App Templates](/web-app-templates/) Template preview Web App  Template type Web App Designed for Modern web browsers Preview gallery 6 visual previews ## Who the Finance template is for Fintech founders, financial wellness teams, and product designers building a browser-based money-management experience. ## What’s included * ✓ Account overview and filterable transaction history * ✓ Transfers and card management with user-facing controls * ✓ Budgets and spending analytics for financial planning ## Explore the Finance design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  ## What you can build with Finance * → Prototype a personal finance and budgeting product * → Build a web portal for a fintech or banking service * → Launch a financial wellness dashboard for customers ## More Web App Templates [Browse all web apps](/web-app-templates/) * [](/web-app-templates/bankdash/) ### [BankDash](/web-app-templates/bankdash/) [A personal banking dashboard where a customer reviews card balances, weekly deposit/withdraw activity, expense…](/web-app-templates/bankdash/) * [](/web-app-templates/finance-expert-personal-banking-dashboard/) ### [Finance Expert — Personal Banking Dashboard](/web-app-templates/finance-expert-personal-banking-dashboard/) [A personal finance and banking dashboard showing total balance across currencies, payment cards, investment…](/web-app-templates/finance-expert-personal-banking-dashboard/) * [](/web-app-templates/base-admin/) ### [Base — Admin](/web-app-templates/base-admin/) [A commerce-focused admin dashboard with store performance stats, hourly sales and transaction-split charts, recent…](/web-app-templates/base-admin/) ## Make it yours Start with this web app template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-finance-web) --- # Furniro > Furniro is a furniture e-commerce storefront with a shop catalog, individual product pages offering size, color and quantity selection, a product comparison… [← Web App Templates](/web-app-templates/) Template preview Web App  Template type Web App Designed for Modern web browsers Preview gallery 8 visual previews ## Who the Furniro template is for Furniture retailers and interior brands selling configurable products through an editorial storefront. ## What’s included * ✓ Furniture catalog with product comparison * ✓ Size, color, quantity, cart, and multi-step checkout controls * ✓ Design blog, contact page, and localized pricing ## Explore the Furniro design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  *  ## What you can build with Furniro * → Launch a furniture ecommerce store * → Build a home-goods catalog with product comparison * → Combine interior inspiration with direct online sales ## More Web App Templates [Browse all web apps](/web-app-templates/) * [](/web-app-templates/hecto/) ### [Hecto](/web-app-templates/hecto/) [Hecto is a furniture and home-decor e-commerce storefront with a hero carousel, featured-product grids, product…](/web-app-templates/hecto/) * [](/web-app-templates/nestmart/) ### [Nestmart](/web-app-templates/nestmart/) [Nestmart is an e-commerce storefront for everyday home, kitchen, electronics, furniture, and office goods, with a…](/web-app-templates/nestmart/) * [](/web-app-templates/larkwood-furniture/) ### [Larkwood Furniture](/web-app-templates/larkwood-furniture/) [An e-commerce storefront for Larkwood, a furniture brand selling sofas, chairs, dining tables and storage organized…](/web-app-templates/larkwood-furniture/) ## Make it yours Start with this web app template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-furniro-web) --- # Hecto > Hecto is a furniture and home-decor e-commerce storefront with a hero carousel, featured-product grids, product detail pages, cart and checkout flow, and an… [← Web App Templates](/web-app-templates/) Template preview Web App  Template type Web App Designed for Modern web browsers Preview gallery 8 visual previews ## Who the Hecto template is for Furniture and home-decor brands combining a complete storefront with practical editorial content. ## What’s included * ✓ Hero merchandising and featured-product collections * ✓ Product details, cart, checkout, and customer account * ✓ Interiors blog plus about, contact, and FAQ pages ## Explore the Hecto design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  *  ## What you can build with Hecto * → Launch a home-decor storefront * → Build a furniture catalog with checkout * → Use editorial content to support a retail brand ## More Web App Templates [Browse all web apps](/web-app-templates/) * [](/web-app-templates/furniro/) ### [Furniro](/web-app-templates/furniro/) [Furniro is a furniture e-commerce storefront with a shop catalog, individual product pages offering size, color and…](/web-app-templates/furniro/) * [](/web-app-templates/orla/) ### [Orla](/web-app-templates/orla/) [A fashion e-commerce storefront for Orla, selling dresses, knitwear, outerwear, bags and accessories](/web-app-templates/orla/) * [](/web-app-templates/larkwood-furniture/) ### [Larkwood Furniture](/web-app-templates/larkwood-furniture/) [An e-commerce storefront for Larkwood, a furniture brand selling sofas, chairs, dining tables and storage organized…](/web-app-templates/larkwood-furniture/) ## Make it yours Start with this web app template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-hecto-web) --- # Hiro — Team Project Workspace > A team project management workspace with multiple project spaces, offering list, kanban board, and calendar views of tasks with assignees, labels, due… [← Web App Templates](/web-app-templates/) Template preview Web App  Template type Web App Designed for Modern web browsers Preview gallery 8 visual previews ## Who the Hiro — Team Project Workspace template is for Product and delivery teams coordinating projects, tasks, goals, people, and activity across one workspace. ## What’s included * ✓ Project spaces with list, kanban, and calendar views * ✓ Task assignees, labels, due dates, and discussion counts * ✓ Team goals, member profiles, and workspace activity ## Explore the Hiro — Team Project Workspace design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  *  ## What you can build with Hiro — Team Project Workspace * → Launch a collaborative project-management product * → Build a cross-functional task and goal tracker * → Prototype a client or internal delivery workspace ## More Web App Templates [Browse all web apps](/web-app-templates/) * [](/web-app-templates/woorkroom/) ### [Woorkroom](/web-app-templates/woorkroom/) [A team workspace and project-management tool with project lists, a kanban task board, timeline view and per-project…](/web-app-templates/woorkroom/) * [](/web-app-templates/akademi-school-admission-dashboard/) ### [Akademi — School Admission Dashboard](/web-app-templates/akademi-school-admission-dashboard/) [An admin dashboard for a school that tracks student and teacher rosters with detail and enrollment pages, school…](/web-app-templates/akademi-school-admission-dashboard/) * [](/web-app-templates/base-admin/) ### [Base — Admin](/web-app-templates/base-admin/) [A commerce-focused admin dashboard with store performance stats, hourly sales and transaction-split charts, recent…](/web-app-templates/base-admin/) ## Make it yours Start with this web app template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-hiro-team-project-workspace-web) --- # HRDashboard > An internal HR admin dashboard for the fictional company Unipixel, covering an employee directory with detail profiles, time-off requests, attendance,… [← Web App Templates](/web-app-templates/) Template preview Web App  Template type Web App Designed for Modern web browsers Preview gallery 8 visual previews ## Who the HRDashboard template is for People-operations teams managing employees, time off, payroll, recruiting, reports, and company structure. ## What’s included * ✓ Employee directory with detailed staff profiles * ✓ Time-off, attendance, payroll, and recruitment pipelines * ✓ Reports, documents, authentication, and organization settings ## Explore the HRDashboard design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  *  ## What you can build with HRDashboard * → Build an internal HR management portal * → Coordinate recruiting and employee administration * → Centralize payroll, attendance, and workforce reporting ## More Web App Templates [Browse all web apps](/web-app-templates/) * [](/web-app-templates/corevo-erp/) ### [Corevo ERP](/web-app-templates/corevo-erp/) [An internal ERP web console for an organization's HR and operations teams, with a dashboard of…](/web-app-templates/corevo-erp/) * [](/web-app-templates/vuexy-admin-panel/) ### [Vuexy Admin Panel](/web-app-templates/vuexy-admin-panel/) [A Vuexy-styled admin dashboard for an e-commerce store, with KPI cards and Recharts visualizations for active users,…](/web-app-templates/vuexy-admin-panel/) * [](/web-app-templates/wehr-people-operations/) ### [WeHR — People Operations](/web-app-templates/wehr-people-operations/) [WeHR is an internal HR management dashboard for people operations teams, covering an employee directory, department…](/web-app-templates/wehr-people-operations/) ## Make it yours Start with this web app template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-hrdashboard-web) --- # Kanban Inventory > An inventory management dashboard for retail/grocery stores that tracks products, stock levels, expiry dates and low-stock alerts alongside purchase orders,… [← Web App Templates](/web-app-templates/) Template preview Web App  Template type Web App Designed for Modern web browsers Preview gallery 8 visual previews ## Who the Kanban Inventory template is for Retailers and warehouse teams monitoring stock, suppliers, purchase orders, and store performance. ## What’s included * ✓ Inventory levels, expiry dates, and low-stock alerts * ✓ Purchase-order, supplier, and multi-store management * ✓ Revenue and cost reports with product-level detail ## Explore the Kanban Inventory design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  *  ## What you can build with Kanban Inventory * → Launch a retail inventory management tool * → Track perishable stock across multiple stores * → Coordinate suppliers, purchasing, and inventory analytics ## More Web App Templates [Browse all web apps](/web-app-templates/) * [](/web-app-templates/bankdash/) ### [BankDash](/web-app-templates/bankdash/) [A personal banking dashboard where a customer reviews card balances, weekly deposit/withdraw activity, expense…](/web-app-templates/bankdash/) * [](/web-app-templates/payd/) ### [Payd](/web-app-templates/payd/) [Payd is an African payments operations dashboard for tracking charges across card, bank transfer, USSD and mobile…](/web-app-templates/payd/) * [](/web-app-templates/propora-property-management/) ### [Propora Property Management](/web-app-templates/propora-property-management/) [A property-management dashboard for landlords and portfolio managers, tracking properties, tenants, leases,…](/web-app-templates/propora-property-management/) ## Make it yours Start with this web app template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-kanban-inventory-web) --- # Larkwood Furniture > An e-commerce storefront for Larkwood, a furniture brand selling sofas, chairs, dining tables and storage organized by room. Shoppers browse the shop grid,… [← Web App Templates](/web-app-templates/) Template preview Web App  Template type Web App Designed for Modern web browsers Preview gallery 7 visual previews ## Who the Larkwood Furniture template is for Furniture brands and home retailers organizing room-based collections with a straightforward purchase journey. ## What’s included * ✓ Furniture catalog organized by room and product type * ✓ Product details with reviews and specifications * ✓ Cart, checkout, account, and order-history flows ## Explore the Larkwood Furniture design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  ## What you can build with Larkwood Furniture * → Launch a direct-to-consumer furniture store * → Build a room-oriented home-goods catalog * → Add customer accounts and order history to a retail site ## More Web App Templates [Browse all web apps](/web-app-templates/) * [](/web-app-templates/norrfield/) ### [Norrfield](/web-app-templates/norrfield/) [A storefront for Norrfield, a minimal apparel brand, with category listing and filtering, product detail pages…](/web-app-templates/norrfield/) * [](/web-app-templates/ecobazar/) ### [Ecobazar](/web-app-templates/ecobazar/) [An organic grocery storefront for browsing seasonal produce by category, viewing product detail pages with reviews,…](/web-app-templates/ecobazar/) * [](/web-app-templates/xiv/) ### [XIV](/web-app-templates/xiv/) [XIV is a minimal menswear e-commerce storefront selling shirts, tees, jeans, suits and coats, with a filterable…](/web-app-templates/xiv/) ## Make it yours Start with this web app template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-larkwood-furniture-web) --- # Meddical > A marketing and patient-facing website for a multi-specialty hospital, covering nine departments with individual service pages (cardiogram, DNA testing,… [← Web App Templates](/web-app-templates/) Template preview Web App  Template type Web App Designed for Modern web browsers Preview gallery 8 visual previews ## Who the Meddical template is for Hospitals and multi-specialty clinics explaining services, introducing doctors, and accepting appointment requests. ## What’s included * ✓ Nine medical departments with individual service pages * ✓ Doctor profiles and healthcare news content * ✓ Appointment form with department and practitioner selection ## Explore the Meddical design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  *  ## What you can build with Meddical * → Launch a multi-specialty hospital website * → Build a patient-facing clinic directory * → Connect service education to appointment booking ## More Web App Templates [Browse all web apps](/web-app-templates/) * [](/web-app-templates/dwello/) ### [Dwello](/web-app-templates/dwello/) [A real-estate marketing site for browsing luxury homes for sale, with a property catalogue, image-gallery listing…](/web-app-templates/dwello/) * [](/web-app-templates/ecobazar/) ### [Ecobazar](/web-app-templates/ecobazar/) [An organic grocery storefront for browsing seasonal produce by category, viewing product detail pages with reviews,…](/web-app-templates/ecobazar/) * [](/web-app-templates/kanban-inventory/) ### [Kanban Inventory](/web-app-templates/kanban-inventory/) [An inventory management dashboard for retail/grocery stores that tracks products, stock levels, expiry dates and…](/web-app-templates/kanban-inventory/) ## Make it yours Start with this web app template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-meddical-web) --- # Medico Store > An online pharmacy and medical-supply storefront where shoppers browse categories like Pain Relief, First Aid and Diabetes Care, read product detail pages,… [← Web App Templates](/web-app-templates/) Template preview Web App  Template type Web App Designed for Modern web browsers Preview gallery 8 visual previews ## Who the Medico Store template is for Pharmacies and healthcare retailers selling products while promoting consultations and preventive services. ## What’s included * ✓ Medical-product categories and detailed catalog pages * ✓ Cart, wishlist, customer account, and order management * ✓ Consultations, health checks, vaccinations, and educational blog ## Explore the Medico Store design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  *  ## What you can build with Medico Store * → Launch an online pharmacy storefront * → Build a medical-supply ecommerce site * → Combine healthcare services with product sales ## More Web App Templates [Browse all web apps](/web-app-templates/) * [](/web-app-templates/modimal-women-clothing/) ### [Modimal — Women Clothing](/web-app-templates/modimal-women-clothing/) [A sustainable women's fashion storefront for the Modimal brand, with a shoppable collection catalog, product detail…](/web-app-templates/modimal-women-clothing/) * [](/web-app-templates/plum-and-petal-fragrance-store/) ### [Plum & Petal Fragrance Store](/web-app-templates/plum-and-petal-fragrance-store/) [A discount designer-fragrance and beauty storefront called Plum & Petal, with a filterable catalog of perfumes,…](/web-app-templates/plum-and-petal-fragrance-store/) * [](/web-app-templates/furniro/) ### [Furniro](/web-app-templates/furniro/) [Furniro is a furniture e-commerce storefront with a shop catalog, individual product pages offering size, color and…](/web-app-templates/furniro/) ## Make it yours Start with this web app template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-medico-store-web) --- # Modimal — Women Clothing > A sustainable women's fashion storefront for the Modimal brand, with a shoppable collection catalog, product detail pages with color/size selection,… [← Web App Templates](/web-app-templates/) Template preview Web App  Template type Web App Designed for Modern web browsers Preview gallery 8 visual previews ## Who the Modimal — Women Clothing template is for Sustainable fashion brands selling apparel while explaining sourcing, care, and company practices. ## What’s included * ✓ Shoppable collection and product-detail experience * ✓ Color, size, wishlist, cart, and checkout flows * ✓ Sustainability, FAQ, contact, and customer-account pages ## Explore the Modimal — Women Clothing design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  *  ## What you can build with Modimal — Women Clothing * → Launch a sustainable fashion storefront * → Build a direct-to-consumer apparel shop * → Pair product commerce with responsible-brand storytelling ## More Web App Templates [Browse all web apps](/web-app-templates/) * [](/web-app-templates/nestmart/) ### [Nestmart](/web-app-templates/nestmart/) [Nestmart is an e-commerce storefront for everyday home, kitchen, electronics, furniture, and office goods, with a…](/web-app-templates/nestmart/) * [](/web-app-templates/plum-and-petal-fragrance-store/) ### [Plum & Petal Fragrance Store](/web-app-templates/plum-and-petal-fragrance-store/) [A discount designer-fragrance and beauty storefront called Plum & Petal, with a filterable catalog of perfumes,…](/web-app-templates/plum-and-petal-fragrance-store/) * [](/web-app-templates/furniro/) ### [Furniro](/web-app-templates/furniro/) [Furniro is a furniture e-commerce storefront with a shop catalog, individual product pages offering size, color and…](/web-app-templates/furniro/) ## Make it yours Start with this web app template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-modimal-women-clothing-web) --- # Morent > Morent is a car rental marketplace where users browse a catalog of vehicles by type, capacity and price, view individual car detail pages with specs and… [← Web App Templates](/web-app-templates/) Template preview Web App  Template type Web App Designed for Modern web browsers Preview gallery 7 visual previews ## Who the Morent template is for Car-rental operators and mobility marketplaces serving both customers and internal operations teams. ## What’s included * ✓ Vehicle browsing by type, capacity, and price * ✓ Car details, reviews, and multi-step rental checkout * ✓ Admin analytics, rental breakdowns, and transaction history ## Explore the Morent design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  ## What you can build with Morent * → Launch a car-rental marketplace * → Build a vehicle booking and checkout experience * → Connect customer rentals with an operator dashboard ## More Web App Templates [Browse all web apps](/web-app-templates/) * [](/web-app-templates/motiv-fleet-dashboard/) ### [Motiv Fleet Dashboard](/web-app-templates/motiv-fleet-dashboard/) [Motiv is a fleet management dashboard for a vehicle rental and resale operation, tracking energy, range, brake fluid…](/web-app-templates/motiv-fleet-dashboard/) * [](/web-app-templates/nft-marketplace/) ### [NFT Marketplace](/web-app-templates/nft-marketplace/) [A crypto-collectibles marketplace dashboard where users discover trending NFT auctions, view artwork detail pages…](/web-app-templates/nft-marketplace/) * [](/web-app-templates/reservebite/) ### [ReserveBite](/web-app-templates/reservebite/) [A restaurant discovery and table-reservation app where diners search local restaurants by cuisine, tags and cost for…](/web-app-templates/reservebite/) ## Make it yours Start with this web app template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-morent-web) --- # Motiv Fleet Dashboard > Motiv is a fleet management dashboard for a vehicle rental and resale operation, tracking energy, range, brake fluid and tire wear per car alongside miles… [← Web App Templates](/web-app-templates/) Template preview Web App  Template type Web App Designed for Modern web browsers Preview gallery 8 visual previews ## Who the Motiv Fleet Dashboard template is for Fleet operators and vehicle businesses managing assets, bookings, maintenance, sales, and team communication. ## What’s included * ✓ Vehicle health metrics for energy, range, fluids, tires, and mileage * ✓ Fleet assets, bookings, marketplace, and service jobs * ✓ Calendar, messaging, and multi-tab account settings ## Explore the Motiv Fleet Dashboard design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  *  ## What you can build with Motiv Fleet Dashboard * → Build a fleet operations dashboard * → Track vehicle health and maintenance work * → Combine rental bookings with a vehicle marketplace ## More Web App Templates [Browse all web apps](/web-app-templates/) * [](/web-app-templates/digitx-sales-forecast/) ### [DigitX Sales Forecast](/web-app-templates/digitx-sales-forecast/) [DigitX Sales Forecast is a B2B sales forecasting workspace for an automotive parts and fleet-services business, with…](/web-app-templates/digitx-sales-forecast/) * [](/web-app-templates/finance-expert-personal-banking-dashboard/) ### [Finance Expert — Personal Banking Dashboard](/web-app-templates/finance-expert-personal-banking-dashboard/) [A personal finance and banking dashboard showing total balance across currencies, payment cards, investment…](/web-app-templates/finance-expert-personal-banking-dashboard/) * [](/web-app-templates/morent/) ### [Morent](/web-app-templates/morent/) [Morent is a car rental marketplace where users browse a catalog of vehicles by type, capacity and price, view…](/web-app-templates/morent/) ## Make it yours Start with this web app template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-motiv-fleet-dashboard-web) --- # Nestmart > Nestmart is an e-commerce storefront for everyday home, kitchen, electronics, furniture, and office goods, with a category-browsable shop grid, product… [← Web App Templates](/web-app-templates/) Template preview Web App  Template type Web App Designed for Modern web browsers Preview gallery 7 visual previews ## Who the Nestmart template is for General retailers and home-goods stores offering a broad catalog with a simple, trust-focused checkout journey. ## What’s included * ✓ Category browsing across home, kitchen, electronics, and office goods * ✓ Product details, reviews, cart, and checkout * ✓ Shipping, returns, and warranty merchandising ## Explore the Nestmart design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  ## What you can build with Nestmart * → Launch a broad consumer-goods storefront * → Build a home and office retail catalog * → Prototype a trusted ecommerce purchase flow ## More Web App Templates [Browse all web apps](/web-app-templates/) * [](/web-app-templates/furniro/) ### [Furniro](/web-app-templates/furniro/) [Furniro is a furniture e-commerce storefront with a shop catalog, individual product pages offering size, color and…](/web-app-templates/furniro/) * [](/web-app-templates/modimal-women-clothing/) ### [Modimal — Women Clothing](/web-app-templates/modimal-women-clothing/) [A sustainable women's fashion storefront for the Modimal brand, with a shoppable collection catalog, product detail…](/web-app-templates/modimal-women-clothing/) * [](/web-app-templates/ecobazar/) ### [Ecobazar](/web-app-templates/ecobazar/) [An organic grocery storefront for browsing seasonal produce by category, viewing product detail pages with reviews,…](/web-app-templates/ecobazar/) ## Make it yours Start with this web app template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-nestmart-web) --- # NFT Marketplace > A crypto-collectibles marketplace dashboard where users discover trending NFT auctions, view artwork detail pages with current bids and edition counts, and… [← Web App Templates](/web-app-templates/) Template preview Web App  Template type Web App Designed for Modern web browsers Preview gallery 8 visual previews ## Who the NFT Marketplace template is for Web3 teams and digital-art communities creating an auction marketplace for crypto collectibles. ## What’s included * ✓ Trending NFT discovery and active-auction dashboard * ✓ Artwork details with bids, editions, and ETH pricing * ✓ Saved items, creator profiles, payment, and security settings ## Explore the NFT Marketplace design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  *  ## What you can build with NFT Marketplace * → Launch an NFT auction marketplace * → Build a digital-art discovery product * → Prototype collectible bidding and creator-profile flows ## More Web App Templates [Browse all web apps](/web-app-templates/) * [](/web-app-templates/morent/) ### [Morent](/web-app-templates/morent/) [Morent is a car rental marketplace where users browse a catalog of vehicles by type, capacity and price, view…](/web-app-templates/morent/) * [](/web-app-templates/motiv-fleet-dashboard/) ### [Motiv Fleet Dashboard](/web-app-templates/motiv-fleet-dashboard/) [Motiv is a fleet management dashboard for a vehicle rental and resale operation, tracking energy, range, brake fluid…](/web-app-templates/motiv-fleet-dashboard/) * [](/web-app-templates/nuegas/) ### [Nuegas](/web-app-templates/nuegas/) [A learning and task-management dashboard where a student tracks running tasks, weekly activity charts and a calendar…](/web-app-templates/nuegas/) ## Make it yours Start with this web app template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-nft-marketplace-web) --- # Norrfield > A storefront for Norrfield, a minimal apparel brand, with category listing and filtering, product detail pages (color/size selection, reviews, materials and… [← Web App Templates](/web-app-templates/) Template preview Web App  Template type Web App Designed for Modern web browsers Preview gallery 9 visual previews ## Who the Norrfield template is for Apparel brands pairing a minimal shopping experience with editorial stories and transparent sourcing information. ## What’s included * ✓ Category listing, filters, search, and product details * ✓ Color, size, reviews, materials, care, and cart controls * ✓ Editorial journal, store locator, and sourcing story ## Explore the Norrfield design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  *  *  ## What you can build with Norrfield * → Launch a minimalist fashion storefront * → Build an apparel catalog with editorial depth * → Explain sourcing standards alongside product sales ## More Web App Templates [Browse all web apps](/web-app-templates/) * [](/web-app-templates/larkwood-furniture/) ### [Larkwood Furniture](/web-app-templates/larkwood-furniture/) [An e-commerce storefront for Larkwood, a furniture brand selling sofas, chairs, dining tables and storage organized…](/web-app-templates/larkwood-furniture/) * [](/web-app-templates/orla/) ### [Orla](/web-app-templates/orla/) [A fashion e-commerce storefront for Orla, selling dresses, knitwear, outerwear, bags and accessories](/web-app-templates/orla/) * [](/web-app-templates/shop-co/) ### [SHOP.CO](/web-app-templates/shop-co/) [SHOP.CO is a fashion e-commerce storefront selling t-shirts, shirts, jeans, shorts and hoodies with discount pricing…](/web-app-templates/shop-co/) ## Make it yours Start with this web app template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-norrfield-web) --- # Nuegas > A learning and task-management dashboard where a student tracks running tasks, weekly activity charts and a calendar of upcoming work. It also lists mentors… [← Web App Templates](/web-app-templates/) Template preview Web App  Template type Web App Designed for Modern web browsers Preview gallery 7 visual previews ## Who the Nuegas template is for Students and learning communities organizing tasks, mentors, messages, and weekly progress. ## What’s included * ✓ Running tasks, weekly activity charts, and upcoming calendar * ✓ Mentor directory with follows and ratings * ✓ Messaging, task checklists, and account settings ## Explore the Nuegas design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  ## What you can build with Nuegas * → Build a student productivity dashboard * → Launch a mentor-supported learning workspace * → Combine task planning with educational community features ## More Web App Templates [Browse all web apps](/web-app-templates/) * [](/web-app-templates/finance-expert-personal-banking-dashboard/) ### [Finance Expert — Personal Banking Dashboard](/web-app-templates/finance-expert-personal-banking-dashboard/) [A personal finance and banking dashboard showing total balance across currencies, payment cards, investment…](/web-app-templates/finance-expert-personal-banking-dashboard/) * [](/web-app-templates/sales/) ### [Sales](/web-app-templates/sales/) [Sales is a pet-shop sales admin dashboard that tracks weekly balance, orders in line, and new clients alongside…](/web-app-templates/sales/) * [](/web-app-templates/akademi-school-admission-dashboard/) ### [Akademi — School Admission Dashboard](/web-app-templates/akademi-school-admission-dashboard/) [An admin dashboard for a school that tracks student and teacher rosters with detail and enrollment pages, school…](/web-app-templates/akademi-school-admission-dashboard/) ## Make it yours Start with this web app template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-nuegas-web) --- # Orla > A fashion e-commerce storefront for Orla, selling dresses, knitwear, outerwear, bags and accessories. Alongside the shop grid, product pages and cart, it… [← Web App Templates](/web-app-templates/) Template preview Web App  Template type Web App Designed for Modern web browsers Preview gallery 8 visual previews ## Who the Orla template is for Fashion and accessories brands combining commerce with sustainability content and physical-store discovery. ## What’s included * ✓ Apparel and accessories shop with product pages and cart * ✓ Journal focused on sustainability and brand stories * ✓ Search, store locator, and customer FAQ ## Explore the Orla design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  *  ## What you can build with Orla * → Launch a fashion and accessories storefront * → Build a commerce-led sustainable brand site * → Connect online product discovery to physical stores ## More Web App Templates [Browse all web apps](/web-app-templates/) * [](/web-app-templates/norrfield/) ### [Norrfield](/web-app-templates/norrfield/) [A storefront for Norrfield, a minimal apparel brand, with category listing and filtering, product detail pages…](/web-app-templates/norrfield/) * [](/web-app-templates/ecobazar/) ### [Ecobazar](/web-app-templates/ecobazar/) [An organic grocery storefront for browsing seasonal produce by category, viewing product detail pages with reviews,…](/web-app-templates/ecobazar/) * [](/web-app-templates/hecto/) ### [Hecto](/web-app-templates/hecto/) [Hecto is a furniture and home-decor e-commerce storefront with a hero carousel, featured-product grids, product…](/web-app-templates/hecto/) ## Make it yours Start with this web app template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-orla-web) --- # Payd > Payd is an African payments operations dashboard for tracking charges across card, bank transfer, USSD and mobile money channels in NGN, GHS and KES. It… [← Web App Templates](/web-app-templates/) Template preview Web App  Template type Web App Designed for Modern web browsers Preview gallery 7 visual previews ## Who the Payd template is for African fintech and payment-operations teams monitoring money movement across channels, currencies, and customers. ## What’s included * ✓ Card, transfer, USSD, and mobile-money transaction tracking * ✓ Customers, payouts, balances, subscriptions, and payment plans * ✓ Referrals, audit logs, team management, and API-key settings ## Explore the Payd design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  ## What you can build with Payd * → Build a multi-channel payments operations console * → Track transactions across African currencies * → Manage payout, subscription, and compliance workflows ## More Web App Templates [Browse all web apps](/web-app-templates/) * [](/web-app-templates/bankdash/) ### [BankDash](/web-app-templates/bankdash/) [A personal banking dashboard where a customer reviews card balances, weekly deposit/withdraw activity, expense…](/web-app-templates/bankdash/) * [](/web-app-templates/propora-property-management/) ### [Propora Property Management](/web-app-templates/propora-property-management/) [A property-management dashboard for landlords and portfolio managers, tracking properties, tenants, leases,…](/web-app-templates/propora-property-management/) * [](/web-app-templates/digitx-sales-forecast/) ### [DigitX Sales Forecast](/web-app-templates/digitx-sales-forecast/) [DigitX Sales Forecast is a B2B sales forecasting workspace for an automotive parts and fleet-services business, with…](/web-app-templates/digitx-sales-forecast/) ## Make it yours Start with this web app template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-payd-web) --- # Plum & Petal Fragrance Store > A discount designer-fragrance and beauty storefront called Plum & Petal, with a filterable catalog of perfumes, skincare and gift sets by brand and price,… [← Web App Templates](/web-app-templates/) Template preview Web App  Template type Web App Designed for Modern web browsers Preview gallery 8 visual previews ## Who the Plum & Petal Fragrance Store template is for Beauty and fragrance retailers selling designer products, subscriptions, and promotional offers online. ## What’s included * ✓ Filterable perfume, skincare, and gift-set catalog * ✓ Product details, coupon offers, cart, and checkout * ✓ Fragrance subscription, customer dashboard, and help pages ## Explore the Plum & Petal Fragrance Store design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  *  ## What you can build with Plum & Petal Fragrance Store * → Launch a fragrance and beauty storefront * → Build a discount designer-product marketplace * → Add subscriptions and coupons to a retail experience ## More Web App Templates [Browse all web apps](/web-app-templates/) * [](/web-app-templates/modimal-women-clothing/) ### [Modimal — Women Clothing](/web-app-templates/modimal-women-clothing/) [A sustainable women's fashion storefront for the Modimal brand, with a shoppable collection catalog, product detail…](/web-app-templates/modimal-women-clothing/) * [](/web-app-templates/medico-store/) ### [Medico Store](/web-app-templates/medico-store/) [An online pharmacy and medical-supply storefront where shoppers browse categories like Pain Relief, First Aid and…](/web-app-templates/medico-store/) * [](/web-app-templates/furniro/) ### [Furniro](/web-app-templates/furniro/) [Furniro is a furniture e-commerce storefront with a shop catalog, individual product pages offering size, color and…](/web-app-templates/furniro/) ## Make it yours Start with this web app template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-plum-and-petal-fragrance-store-web) --- # Projects > Project management app with a drag-and-drop kanban board, filterable task tables, project overviews with activity, team directory, and settings. [← Web App Templates](/web-app-templates/) Template preview Web App  Template type Web App Designed for Modern web browsers Preview gallery 5 visual previews ## Who the Projects template is for Product teams, agencies, and operations groups building a collaborative project and task-management workspace. ## What’s included * ✓ Drag-and-drop Kanban board for visual task planning * ✓ Filterable task tables and project activity overviews * ✓ Team directory, project details, and workspace settings ## Explore the Projects design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  ## What you can build with Projects * → Launch a project-management product for a focused audience * → Build an internal delivery and operations workspace * → Prototype a collaborative task tracker for clients and teams ## More Web App Templates [Browse all web apps](/web-app-templates/) * [](/web-app-templates/hiro-team-project-workspace/) ### [Hiro — Team Project Workspace](/web-app-templates/hiro-team-project-workspace/) [A team project management workspace with multiple project spaces, offering list, kanban board, and calendar views of…](/web-app-templates/hiro-team-project-workspace/) * [](/web-app-templates/ai-chat/) ### [AI Chat](/web-app-templates/ai-chat/) [AI chat web app with conversation history, simulated streaming responses, markdown and code rendering, prompt…](/web-app-templates/ai-chat/) * [](/web-app-templates/base-admin/) ### [Base — Admin](/web-app-templates/base-admin/) [A commerce-focused admin dashboard with store performance stats, hourly sales and transaction-split charts, recent…](/web-app-templates/base-admin/) ## Make it yours Start with this web app template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-projects-web) --- # Propora Property Management > A property-management dashboard for landlords and portfolio managers, tracking properties, tenants, leases, maintenance requests and rent transactions.… [← Web App Templates](/web-app-templates/) Template preview Web App  Template type Web App Designed for Modern web browsers Preview gallery 8 visual previews ## Who the Propora Property Management template is for Landlords and portfolio managers overseeing properties, residents, leases, maintenance, and rent activity. ## What’s included * ✓ Property, tenant, lease, and rent-transaction management * ✓ Maintenance requests and operational tracking * ✓ Property-level financials, occupancy, residents, and history ## Explore the Propora Property Management design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  *  ## What you can build with Propora Property Management * → Build a landlord property-management portal * → Track leases, residents, and maintenance requests * → Monitor occupancy and financial performance by property ## More Web App Templates [Browse all web apps](/web-app-templates/) * [](/web-app-templates/bankdash/) ### [BankDash](/web-app-templates/bankdash/) [A personal banking dashboard where a customer reviews card balances, weekly deposit/withdraw activity, expense…](/web-app-templates/bankdash/) * [](/web-app-templates/payd/) ### [Payd](/web-app-templates/payd/) [Payd is an African payments operations dashboard for tracking charges across card, bank transfer, USSD and mobile…](/web-app-templates/payd/) * [](/web-app-templates/kanban-inventory/) ### [Kanban Inventory](/web-app-templates/kanban-inventory/) [An inventory management dashboard for retail/grocery stores that tracks products, stock levels, expiry dates and…](/web-app-templates/kanban-inventory/) ## Make it yours Start with this web app template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-propora-property-management-web) --- # Raple Analytics Suite > A SaaS admin suite built around a web-analytics overview, with visitor and conversion metrics, a kanban board, calendar, file manager, invoices and billing.… [← Web App Templates](/web-app-templates/) Template preview Web App  Template type Web App Designed for Modern web browsers Preview gallery 8 visual previews ## Who the Raple Analytics Suite template is for SaaS and operations teams that need analytics alongside project, file, billing, and account-management tools. ## What’s included * ✓ Visitor and conversion analytics overview * ✓ Kanban, calendar, file manager, invoices, and billing * ✓ Pricing, FAQ, documentation, and authentication pages ## Explore the Raple Analytics Suite design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  *  ## What you can build with Raple Analytics Suite * → Launch a multi-purpose SaaS admin suite * → Build an analytics-led operations workspace * → Prototype both product and marketing surfaces for a SaaS platform ## More Web App Templates [Browse all web apps](/web-app-templates/) * [](/web-app-templates/base-admin/) ### [Base — Admin](/web-app-templates/base-admin/) [A commerce-focused admin dashboard with store performance stats, hourly sales and transaction-split charts, recent…](/web-app-templates/base-admin/) * [](/web-app-templates/vuexy-admin-panel/) ### [Vuexy Admin Panel](/web-app-templates/vuexy-admin-panel/) [A Vuexy-styled admin dashboard for an e-commerce store, with KPI cards and Recharts visualizations for active users,…](/web-app-templates/vuexy-admin-panel/) * [](/web-app-templates/hrdashboard/) ### [HRDashboard](/web-app-templates/hrdashboard/) [An internal HR admin dashboard for the fictional company Unipixel, covering an employee directory with detail…](/web-app-templates/hrdashboard/) ## Make it yours Start with this web app template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-raple-analytics-suite-web) --- # ReserveBite > A restaurant discovery and table-reservation app where diners search local restaurants by cuisine, tags and cost for two, read detail pages with ratings,… [← Web App Templates](/web-app-templates/) Template preview Web App  Template type Web App Designed for Modern web browsers Preview gallery 7 visual previews ## Who the ReserveBite template is for Restaurant marketplaces and hospitality teams connecting diners with discovery, offers, and table reservations. ## What’s included * ✓ Restaurant search by cuisine, tags, and price * ✓ Ratings, menus, booking slots, and promotional offers * ✓ Profiles with bookings, reviews, addresses, and payment methods ## Explore the ReserveBite design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  ## What you can build with ReserveBite * → Launch a restaurant reservation marketplace * → Build a local dining discovery product * → Add bookings and customer profiles to a hospitality platform ## More Web App Templates [Browse all web apps](/web-app-templates/) * [](/web-app-templates/morent/) ### [Morent](/web-app-templates/morent/) [Morent is a car rental marketplace where users browse a catalog of vehicles by type, capacity and price, view…](/web-app-templates/morent/) * [](/web-app-templates/eventify/) ### [Eventify](/web-app-templates/eventify/) [An event discovery and ticketing site where visitors browse local and global events by category and city, filter…](/web-app-templates/eventify/) * [](/web-app-templates/nft-marketplace/) ### [NFT Marketplace](/web-app-templates/nft-marketplace/) [A crypto-collectibles marketplace dashboard where users discover trending NFT auctions, view artwork detail pages…](/web-app-templates/nft-marketplace/) ## Make it yours Start with this web app template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-reservebite-web) --- # Sales > Sales is a pet-shop sales admin dashboard that tracks weekly balance, orders in line, and new clients alongside sales trend charts, a calendar, and a… [← Web App Templates](/web-app-templates/) Template preview Web App  Template type Web App Designed for Modern web browsers Preview gallery 7 visual previews ## Who the Sales template is for Retail operators and pet businesses tracking sales, orders, customers, products, and team communication. ## What’s included * ✓ Balance, order, and new-client performance cards * ✓ Sales trends, calendar, and channel revenue charts * ✓ Orders, products, customers, messages, analytics, and settings ## Explore the Sales design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  ## What you can build with Sales * → Build a retail sales administration dashboard * → Track performance across ecommerce channels * → Centralize orders, customers, and sales communication ## More Web App Templates [Browse all web apps](/web-app-templates/) * [](/web-app-templates/base-admin/) ### [Base — Admin](/web-app-templates/base-admin/) [A commerce-focused admin dashboard with store performance stats, hourly sales and transaction-split charts, recent…](/web-app-templates/base-admin/) * [](/web-app-templates/finance-expert-personal-banking-dashboard/) ### [Finance Expert — Personal Banking Dashboard](/web-app-templates/finance-expert-personal-banking-dashboard/) [A personal finance and banking dashboard showing total balance across currencies, payment cards, investment…](/web-app-templates/finance-expert-personal-banking-dashboard/) * [](/web-app-templates/camioca-internal-management/) ### [CAMIOCA Internal Management](/web-app-templates/camioca-internal-management/) [An internal company management dashboard for a consulting-style firm, tracking active people, projects in progress,…](/web-app-templates/camioca-internal-management/) ## Make it yours Start with this web app template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-sales-web) --- # ServiceHub Admin > An admin console for an appliance repair service center, tracking clients, service jobs, technician staff and live field-visit monitoring with ETAs and job… [← Web App Templates](/web-app-templates/) Template preview Web App  Template type Web App Designed for Modern web browsers Preview gallery 7 visual previews ## Who the ServiceHub Admin template is for Repair businesses and field-service operators coordinating customers, technicians, jobs, documents, and reminders. ## What’s included * ✓ Client, service-job, and technician management * ✓ Live field-visit status with ETAs * ✓ Task lists, SMS reminder templates, documents, and settings ## Explore the ServiceHub Admin design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  ## What you can build with ServiceHub Admin * → Build an appliance-repair operations console * → Coordinate technicians and live service visits * → Automate field-service reminders and documentation ## More Web App Templates [Browse all web apps](/web-app-templates/) * [](/web-app-templates/hrdashboard/) ### [HRDashboard](/web-app-templates/hrdashboard/) [An internal HR admin dashboard for the fictional company Unipixel, covering an employee directory with detail…](/web-app-templates/hrdashboard/) * [](/web-app-templates/teach-instructor-availability/) ### [Teach. Instructor Availability](/web-app-templates/teach-instructor-availability/) [A course-platform admin app where instructors manage their weekly availability slots, teaching schedule and bookings](/web-app-templates/teach-instructor-availability/) * [](/web-app-templates/vuexy-admin-panel/) ### [Vuexy Admin Panel](/web-app-templates/vuexy-admin-panel/) [A Vuexy-styled admin dashboard for an e-commerce store, with KPI cards and Recharts visualizations for active users,…](/web-app-templates/vuexy-admin-panel/) ## Make it yours Start with this web app template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-servicehub-admin-web) --- # SHOP.CO > SHOP.CO is a fashion e-commerce storefront selling t-shirts, shirts, jeans, shorts and hoodies with discount pricing and star ratings. It includes a… [← Web App Templates](/web-app-templates/) Template preview Web App  Template type Web App Designed for Modern web browsers Preview gallery 7 visual previews ## Who the SHOP.CO template is for Fashion retailers and streetwear brands selling apparel through visual merchandising and detailed filtering. ## What’s included * ✓ Promotion-led homepage with dress-style discovery * ✓ Product grid filtered by category, price, color, and size * ✓ Product reviews, variants, cart, and order summary ## Explore the SHOP.CO design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  ## What you can build with SHOP.CO * → Launch a fashion ecommerce storefront * → Build a filter-rich apparel catalog * → Prototype a streetwear shopping and cart experience ## More Web App Templates [Browse all web apps](/web-app-templates/) * [](/web-app-templates/ecobazar/) ### [Ecobazar](/web-app-templates/ecobazar/) [An organic grocery storefront for browsing seasonal produce by category, viewing product detail pages with reviews,…](/web-app-templates/ecobazar/) * [](/web-app-templates/norrfield/) ### [Norrfield](/web-app-templates/norrfield/) [A storefront for Norrfield, a minimal apparel brand, with category listing and filtering, product detail pages…](/web-app-templates/norrfield/) * [](/web-app-templates/xiv/) ### [XIV](/web-app-templates/xiv/) [XIV is a minimal menswear e-commerce storefront selling shirts, tees, jeans, suits and coats, with a filterable…](/web-app-templates/xiv/) ## Make it yours Start with this web app template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-shop-co-web) --- # Sociofy > A social-media management dashboard that tracks profile visits, followers, reach and account growth across connected networks like Chirp, Glimpse, Loopz and… [← Web App Templates](/web-app-templates/) Template preview Web App  Template type Web App Designed for Modern web browsers Preview gallery 8 visual previews ## Who the Sociofy template is for Social-media teams and agencies planning content, measuring audience growth, and collaborating across networks. ## What’s included * ✓ Cross-network followers, reach, visits, and growth analytics * ✓ Content library, composer, and publishing calendar * ✓ Media assets, team collaboration, and affiliate management ## Explore the Sociofy design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  *  ## What you can build with Sociofy * → Launch a social-media management SaaS * → Build a multi-network content planning workspace * → Coordinate analytics, publishing, and team approvals ## More Web App Templates [Browse all web apps](/web-app-templates/) * [](/web-app-templates/base-admin/) ### [Base — Admin](/web-app-templates/base-admin/) [A commerce-focused admin dashboard with store performance stats, hourly sales and transaction-split charts, recent…](/web-app-templates/base-admin/) * [](/web-app-templates/dashboard/) ### [Dashboard](/web-app-templates/dashboard/) [SaaS admin dashboard with analytics overview, task management with filterable tables, user administration, app…](/web-app-templates/dashboard/) * [](/web-app-templates/morent/) ### [Morent](/web-app-templates/morent/) [Morent is a car rental marketplace where users browse a catalog of vehicles by type, capacity and price, view…](/web-app-templates/morent/) ## Make it yours Start with this web app template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-sociofy-web) --- # StayHub > StayHub is a short- and long-term property rental marketplace where guests browse and search listings, view detailed property pages with pricing tiers and… [← Web App Templates](/web-app-templates/) Template preview Web App  Template type Web App Designed for Modern web browsers Preview gallery 8 visual previews ## Who the StayHub template is for Rental marketplaces serving guests, hosts, and property operators through one booking platform. ## What’s included * ✓ Property search, details, pricing, wishlists, and reservations * ✓ Guest messages and account management * ✓ Host dashboards for listings, reservations, and transactions ## Explore the StayHub design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  *  ## What you can build with StayHub * → Launch a short- and long-term rental marketplace * → Build a guest booking and host operations portal * → Combine property discovery with community travel content ## More Web App Templates [Browse all web apps](/web-app-templates/) * [](/web-app-templates/staylo/) ### [Staylo](/web-app-templates/staylo/) [A vacation-rental booking site for tropical villas and retreats, with browsable stays, destination guides,…](/web-app-templates/staylo/) * [](/web-app-templates/estatein/) ### [Estatein](/web-app-templates/estatein/) [A real estate agency website for browsing luxury property listings — villas, city apartments and country cottages —…](/web-app-templates/estatein/) * [](/web-app-templates/eventify/) ### [Eventify](/web-app-templates/eventify/) [An event discovery and ticketing site where visitors browse local and global events by category and city, filter…](/web-app-templates/eventify/) ## Make it yours Start with this web app template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-stayhub-web) --- # Staylo > A vacation-rental booking site for tropical villas and retreats, with browsable stays, destination guides, photo-rich listing detail pages and a trips view… [← Web App Templates](/web-app-templates/) Template preview Web App  Template type Web App Designed for Modern web browsers Preview gallery 7 visual previews ## Who the Staylo template is for Vacation-rental brands and retreat operators marketing destination-led stays and supporting future hosts. ## What’s included * ✓ Tropical stay discovery and destination guides * ✓ Photo-rich listing details and upcoming trip management * ✓ Host onboarding plus support and FAQ content ## Explore the Staylo design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  ## What you can build with Staylo * → Launch a boutique vacation-rental site * → Market villas and destination retreats * → Recruit hosts while serving travelers and booked guests ## More Web App Templates [Browse all web apps](/web-app-templates/) * [](/web-app-templates/stayhub/) ### [StayHub](/web-app-templates/stayhub/) [StayHub is a short- and long-term property rental marketplace where guests browse and search listings, view detailed…](/web-app-templates/stayhub/) * [](/web-app-templates/eventify/) ### [Eventify](/web-app-templates/eventify/) [An event discovery and ticketing site where visitors browse local and global events by category and city, filter…](/web-app-templates/eventify/) * [](/web-app-templates/morent/) ### [Morent](/web-app-templates/morent/) [Morent is a car rental marketplace where users browse a catalog of vehicles by type, capacity and price, view…](/web-app-templates/morent/) ## Make it yours Start with this web app template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-staylo-web) --- # StreamVibe > StreamVibe is a video streaming service front end for browsing movies and TV shows by genre, opening title detail pages with cast, trailers and similar… [← Web App Templates](/web-app-templates/) Template preview Web App  Template type Web App Designed for Modern web browsers Preview gallery 7 visual previews ## Who the StreamVibe template is for Streaming and media teams presenting a video catalog, title details, subscription plans, and customer support. ## What’s included * ✓ Movie and television discovery organized by genre * ✓ Title pages with cast, trailers, and related picks * ✓ Subscription comparison, device support, and FAQ ## Explore the StreamVibe design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  ## What you can build with StreamVibe * → Launch a streaming-service front end * → Prototype a subscription video catalog * → Present media discovery, pricing, and support in one site ## More Web App Templates [Browse all web apps](/web-app-templates/) * [](/web-app-templates/kanban-inventory/) ### [Kanban Inventory](/web-app-templates/kanban-inventory/) [An inventory management dashboard for retail/grocery stores that tracks products, stock levels, expiry dates and…](/web-app-templates/kanban-inventory/) * [](/web-app-templates/larkwood-furniture/) ### [Larkwood Furniture](/web-app-templates/larkwood-furniture/) [An e-commerce storefront for Larkwood, a furniture brand selling sofas, chairs, dining tables and storage organized…](/web-app-templates/larkwood-furniture/) * [](/web-app-templates/meddical/) ### [Meddical](/web-app-templates/meddical/) [A marketing and patient-facing website for a multi-specialty hospital, covering nine departments with individual…](/web-app-templates/meddical/) ## Make it yours Start with this web app template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-streamvibe-web) --- # Taskly > A personal to-do and task-management app where tasks carry a priority, status, category and detailed notes, split across a dashboard, a filterable My Tasks… [← Web App Templates](/web-app-templates/) Template preview Web App  Template type Web App Designed for Modern web browsers Preview gallery 8 visual previews ## Who the Taskly template is for Individuals and productivity-product teams organizing personal work by priority, status, category, and detail. ## What’s included * ✓ Task dashboard with filterable lists and priority views * ✓ Detailed notes, status, category, and vital-task workflows * ✓ Account, notification, help, and authentication screens ## Explore the Taskly design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  *  ## What you can build with Taskly * → Launch a personal task-management app * → Build a focused productivity dashboard * → Prototype prioritized to-do workflows with user accounts ## More Web App Templates [Browse all web apps](/web-app-templates/) * [](/web-app-templates/bankdash/) ### [BankDash](/web-app-templates/bankdash/) [A personal banking dashboard where a customer reviews card balances, weekly deposit/withdraw activity, expense…](/web-app-templates/bankdash/) * [](/web-app-templates/dashboard/) ### [Dashboard](/web-app-templates/dashboard/) [SaaS admin dashboard with analytics overview, task management with filterable tables, user administration, app…](/web-app-templates/dashboard/) * [](/web-app-templates/kanban-inventory/) ### [Kanban Inventory](/web-app-templates/kanban-inventory/) [An inventory management dashboard for retail/grocery stores that tracks products, stock levels, expiry dates and…](/web-app-templates/kanban-inventory/) ## Make it yours Start with this web app template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-taskly-web) --- # Teach. Instructor Availability > A course-platform admin app where instructors manage their weekly availability slots, teaching schedule and bookings. It includes a teacher roster with… [← Web App Templates](/web-app-templates/) Template preview Web App  Template type Web App Designed for Modern web browsers Preview gallery 6 visual previews ## Who the Teach. Instructor Availability template is for Course-platform administrators and instructors coordinating teaching availability, schedules, bookings, and feedback. ## What’s included * ✓ Weekly instructor availability slots and teaching schedule * ✓ Teacher roster with subjects, status, and ratings * ✓ Booking, student review, and account-settings workflows ## Explore the Teach. Instructor Availability design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  ## What you can build with Teach. Instructor Availability * → Build an instructor scheduling portal * → Manage teacher availability for an education marketplace * → Connect course bookings with instructor profiles and reviews ## More Web App Templates [Browse all web apps](/web-app-templates/) * [](/web-app-templates/servicehub-admin/) ### [ServiceHub Admin](/web-app-templates/servicehub-admin/) [An admin console for an appliance repair service center, tracking clients, service jobs, technician staff and live…](/web-app-templates/servicehub-admin/) * [](/web-app-templates/wehr-people-operations/) ### [WeHR — People Operations](/web-app-templates/wehr-people-operations/) [WeHR is an internal HR management dashboard for people operations teams, covering an employee directory, department…](/web-app-templates/wehr-people-operations/) * [](/web-app-templates/akademi-school-admission-dashboard/) ### [Akademi — School Admission Dashboard](/web-app-templates/akademi-school-admission-dashboard/) [An admin dashboard for a school that tracks student and teacher rosters with detail and enrollment pages, school…](/web-app-templates/akademi-school-admission-dashboard/) ## Make it yours Start with this web app template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-teach-instructor-availability-web) --- # Teamify Team Dashboard > An HR and team-operations dashboard for a company workspace, with charts for team strength, employee headcount and project delivery vs target. It also… [← Web App Templates](/web-app-templates/) Template preview Web App  Template type Web App Designed for Modern web browsers Preview gallery 7 visual previews ## Who the Teamify Team Dashboard template is for HR and team-operations leaders tracking workforce health, projects, meetings, and delivery performance. ## What’s included * ✓ Team strength, headcount, and delivery-versus-target charts * ✓ Employee, team, project, and task-board management * ✓ Meetings plus appearance and notification settings ## Explore the Teamify Team Dashboard design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  ## What you can build with Teamify Team Dashboard * → Build a team operations dashboard * → Track workforce and project-delivery metrics * → Coordinate employees, projects, tasks, and meetings ## More Web App Templates [Browse all web apps](/web-app-templates/) * [](/web-app-templates/bankdash/) ### [BankDash](/web-app-templates/bankdash/) [A personal banking dashboard where a customer reviews card balances, weekly deposit/withdraw activity, expense…](/web-app-templates/bankdash/) * [](/web-app-templates/camioca-internal-management/) ### [CAMIOCA Internal Management](/web-app-templates/camioca-internal-management/) [An internal company management dashboard for a consulting-style firm, tracking active people, projects in progress,…](/web-app-templates/camioca-internal-management/) * [](/web-app-templates/hrdashboard/) ### [HRDashboard](/web-app-templates/hrdashboard/) [An internal HR admin dashboard for the fictional company Unipixel, covering an employee directory with detail…](/web-app-templates/hrdashboard/) ## Make it yours Start with this web app template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-teamify-team-dashboard-web) --- # TOTC — Virtual Classrooms > TOTC is an online learning marketplace and virtual classroom platform where learners browse a catalogue of tech courses (AWS architecture, UX foundations,… [← Web App Templates](/web-app-templates/) Template preview Web App  Template type Web App Designed for Modern web browsers Preview gallery 8 visual previews ## Who the TOTC — Virtual Classrooms template is for Course businesses and training organizations combining a learning marketplace with live cohort classrooms. ## What’s included * ✓ Technology course catalog with enrollment and checkout * ✓ Live virtual-classroom experience for cohort sessions * ✓ Subscription pricing, education blog, and authentication ## Explore the TOTC — Virtual Classrooms design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  *  ## What you can build with TOTC — Virtual Classrooms * → Launch an online learning marketplace * → Build a live cohort education platform * → Sell courses and training plans to individuals or companies ## More Web App Templates [Browse all web apps](/web-app-templates/) * [](/web-app-templates/akademi-school-admission-dashboard/) ### [Akademi — School Admission Dashboard](/web-app-templates/akademi-school-admission-dashboard/) [An admin dashboard for a school that tracks student and teacher rosters with detail and enrollment pages, school…](/web-app-templates/akademi-school-admission-dashboard/) * [](/web-app-templates/edudash-teacher-dashboard/) ### [EduDash — Teacher Dashboard](/web-app-templates/edudash-teacher-dashboard/) [A teacher-facing school dashboard for managing classes and student rosters, with a records library of results,…](/web-app-templates/edudash-teacher-dashboard/) * [](/web-app-templates/teach-instructor-availability/) ### [Teach. Instructor Availability](/web-app-templates/teach-instructor-availability/) [A course-platform admin app where instructors manage their weekly availability slots, teaching schedule and bookings](/web-app-templates/teach-instructor-availability/) ## Make it yours Start with this web app template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-totc-virtual-classrooms-web) --- # Vuexy Admin Panel > A Vuexy-styled admin dashboard for an e-commerce store, with KPI cards and Recharts visualizations for active users, earnings, sales by age and impressions,… [← Web App Templates](/web-app-templates/) Template preview Web App  Template type Web App Designed for Modern web browsers Preview gallery 8 visual previews ## Who the Vuexy Admin Panel template is for SaaS and ecommerce teams needing a polished, data-rich admin foundation with operational modules. ## What’s included * ✓ KPI analytics for users, earnings, sales, and impressions * ✓ Users, orders, products, pricing, calendar, and kanban * ✓ Account, security, billing, notification, and authentication flows ## Explore the Vuexy Admin Panel design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  *  ## What you can build with Vuexy Admin Panel * → Launch an ecommerce administration panel * → Build a data-rich SaaS operations workspace * → Prototype a multi-module internal dashboard ## More Web App Templates [Browse all web apps](/web-app-templates/) * [](/web-app-templates/akademi-school-admission-dashboard/) ### [Akademi — School Admission Dashboard](/web-app-templates/akademi-school-admission-dashboard/) [An admin dashboard for a school that tracks student and teacher rosters with detail and enrollment pages, school…](/web-app-templates/akademi-school-admission-dashboard/) * [](/web-app-templates/hrdashboard/) ### [HRDashboard](/web-app-templates/hrdashboard/) [An internal HR admin dashboard for the fictional company Unipixel, covering an employee directory with detail…](/web-app-templates/hrdashboard/) * [](/web-app-templates/payd/) ### [Payd](/web-app-templates/payd/) [Payd is an African payments operations dashboard for tracking charges across card, bank transfer, USSD and mobile…](/web-app-templates/payd/) ## Make it yours Start with this web app template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-vuexy-admin-panel-web) --- # WeHR — People Operations > WeHR is an internal HR management dashboard for people operations teams, covering an employee directory, department structure, shift and leave scheduling,… [← Web App Templates](/web-app-templates/) Template preview Web App  Template type Web App Designed for Modern web browsers Preview gallery 8 visual previews ## Who the WeHR — People Operations template is for People-operations teams managing organization structure, staffing schedules, leave, recruitment, and permissions. ## What’s included * ✓ Employee directory and department structure * ✓ Shift, leave, and workforce scheduling * ✓ Recruitment pipeline, role permissions, support, and FAQ ## Explore the WeHR — People Operations design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  *  ## What you can build with WeHR — People Operations * → Build a people-operations administration portal * → Coordinate employee scheduling and leave * → Manage recruiting from requisition through hire ## More Web App Templates [Browse all web apps](/web-app-templates/) * [](/web-app-templates/hrdashboard/) ### [HRDashboard](/web-app-templates/hrdashboard/) [An internal HR admin dashboard for the fictional company Unipixel, covering an employee directory with detail…](/web-app-templates/hrdashboard/) * [](/web-app-templates/raple-analytics-suite/) ### [Raple Analytics Suite](/web-app-templates/raple-analytics-suite/) [A SaaS admin suite built around a web-analytics overview, with visitor and conversion metrics, a kanban board,…](/web-app-templates/raple-analytics-suite/) * [](/web-app-templates/servicehub-admin/) ### [ServiceHub Admin](/web-app-templates/servicehub-admin/) [An admin console for an appliance repair service center, tracking clients, service jobs, technician staff and live…](/web-app-templates/servicehub-admin/) ## Make it yours Start with this web app template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-wehr-people-operations-web) --- # Woorkroom > A team workspace and project-management tool with project lists, a kanban task board, timeline view and per-project detail pages tracking assignees,… [← Web App Templates](/web-app-templates/) Template preview Web App  Template type Web App Designed for Modern web browsers Preview gallery 8 visual previews ## Who the Woorkroom template is for Project-driven organizations coordinating delivery, people operations, calendars, and internal communication. ## What’s included * ✓ Project lists, kanban boards, timelines, and detailed tasks * ✓ Employee directory and vacation-request management * ✓ Calendar, team messenger, and internal information portal ## Explore the Woorkroom design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  *  ## What you can build with Woorkroom * → Launch an integrated project and team workspace * → Coordinate delivery timelines and employee availability * → Combine project management with internal communication ## More Web App Templates [Browse all web apps](/web-app-templates/) * [](/web-app-templates/hiro-team-project-workspace/) ### [Hiro — Team Project Workspace](/web-app-templates/hiro-team-project-workspace/) [A team project management workspace with multiple project spaces, offering list, kanban board, and calendar views of…](/web-app-templates/hiro-team-project-workspace/) * [](/web-app-templates/hrdashboard/) ### [HRDashboard](/web-app-templates/hrdashboard/) [An internal HR admin dashboard for the fictional company Unipixel, covering an employee directory with detail…](/web-app-templates/hrdashboard/) * [](/web-app-templates/raple-analytics-suite/) ### [Raple Analytics Suite](/web-app-templates/raple-analytics-suite/) [A SaaS admin suite built around a web-analytics overview, with visitor and conversion metrics, a kanban board,…](/web-app-templates/raple-analytics-suite/) ## Make it yours Start with this web app template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-woorkroom-web) --- # XIV > XIV is a minimal menswear e-commerce storefront selling shirts, tees, jeans, suits and coats, with a filterable 21-piece product grid (size, availability,… [← Web App Templates](/web-app-templates/) Template preview Web App  Template type Web App Designed for Modern web browsers Preview gallery 7 visual previews ## Who the XIV template is for Menswear brands building an editorial storefront with detailed product discovery and a complete purchase journey. ## What’s included * ✓ Lookbook-inspired homepage and 21-item product catalog * ✓ Filters for size, availability, category, color, and price * ✓ Product variants, wishlist, shopping bag, and checkout ## Explore the XIV design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  ## What you can build with XIV * → Launch a premium menswear storefront * → Build an editorial apparel catalog * → Prototype a filter-rich fashion purchase experience ## More Web App Templates [Browse all web apps](/web-app-templates/) * [](/web-app-templates/larkwood-furniture/) ### [Larkwood Furniture](/web-app-templates/larkwood-furniture/) [An e-commerce storefront for Larkwood, a furniture brand selling sofas, chairs, dining tables and storage organized…](/web-app-templates/larkwood-furniture/) * [](/web-app-templates/norrfield/) ### [Norrfield](/web-app-templates/norrfield/) [A storefront for Norrfield, a minimal apparel brand, with category listing and filtering, product detail pages…](/web-app-templates/norrfield/) * [](/web-app-templates/shop-co/) ### [SHOP.CO](/web-app-templates/shop-co/) [SHOP.CO is a fashion e-commerce storefront selling t-shirts, shirts, jeans, shorts and hoodies with discount pricing…](/web-app-templates/shop-co/) ## Make it yours Start with this web app template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-xiv-web) --- # Website templates > Explore customizable website templates for portfolios, blogs, SaaS sites, documentation, publications, local businesses, and more. Website starters Choose a complete website with its visual direction and content structure already in place. Preview every design, then customize the pages, copy, styles, and components for your own brand in Draftbit. [Start building free ](/signup?psource=website-templates-hero)[See how Draftbit works](/platform) [Mobile App Templates ](/mobile-app-templates/)[Web App Templates ](/web-app-templates/)[Website Templates](/website-templates/) Search websites Search websites 70 templates Select a template to preview the design * [](/website-templates/8-bit-quest/) ## [8-Bit Quest](/website-templates/8-bit-quest/) A retro, pixel-art styled personal developer portfolio and blog with a gamified "Player One" theme covering… portfolioblogdeveloper [Explore template → ](/website-templates/8-bit-quest/)[Start building](/signup?psource=website-templates-card-8-bit-quest-website) * [](/website-templates/academic-portfolio/) ## [Academic Portfolio](/website-templates/academic-portfolio/) A scholarly personal site template with sections for publications, talks, teaching, a CV, and a blog, aimed at… academicportfolioblog [Explore template → ](/website-templates/academic-portfolio/)[Start building](/signup?psource=website-templates-card-academic-portfolio-website) * [](/website-templates/aeon-space-agency/) ## [Aeon Space Agency](/website-templates/aeon-space-agency/) A marketing/informational site template for a space agency, featuring missions, departures, technology, science,… spacecorporatemarketing [Explore template → ](/website-templates/aeon-space-agency/)[Start building](/signup?psource=website-templates-card-aeon-space-agency-website) * [](/website-templates/alba/) ## [Alba](/website-templates/alba/) A designer portfolio template with project case studies, resume, and about pages for showcasing creative work portfoliopersonal-sitedesigner [Explore template → ](/website-templates/alba/)[Start building](/signup?psource=website-templates-card-alba-website) * [](/website-templates/apex-services/) ## [Apex Services](/website-templates/apex-services/) A professional services marketing site with a sidebar layout, dedicated service pages, blog, and projects showcase marketingbusinessservices [Explore template → ](/website-templates/apex-services/)[Start building](/signup?psource=website-templates-card-apex-services-website) * [](/website-templates/astro-sienna/) ## [Astro Sienna](/website-templates/astro-sienna/) A clean personal blog template ("Astro Sienna") with posts, tags, an about page, and a project showcase section blogpersonalportfolio [Explore template → ](/website-templates/astro-sienna/)[Start building](/signup?psource=website-templates-card-astro-sienna-website) * [](/website-templates/astro-stardrive/) ## [Astro Stardrive](/website-templates/astro-stardrive/) A polished, documentation-and-marketing SaaS/product template with docs, integrations, pricing, FAQ, blog, and… saasdocumentationmarketing-site [Explore template → ](/website-templates/astro-stardrive/)[Start building](/signup?psource=website-templates-card-astro-stardrive-website) * [](/website-templates/atelier-ko/) ## [Atelier Ko](/website-templates/atelier-ko/) A furniture e-commerce catalog and storefront template with product pages, catalog browsing, and a cart e-commercestorefrontfurniture [Explore template → ](/website-templates/atelier-ko/)[Start building](/signup?psource=website-templates-card-atelier-ko-website) * [](/website-templates/bento-blog/) ## [Bento Blog](/website-templates/bento-blog/) A minimalist blog template using a bento-grid layout for posts, tags, and pagination, with a built-in post editor page blogminimalbento-grid [Explore template → ](/website-templates/bento-blog/)[Start building](/signup?psource=website-templates-card-bento-blog-website) * [](/website-templates/blog/) ## [Blog](/website-templates/blog/) Feature-rich publishing site with Markdown and MDX posts, galleries, full-text search, archives, tags, RSS,… blogpublishingmdx [Explore template → ](/website-templates/blog/)[Start building](/signup?psource=website-templates-card-blog-website) * [](/website-templates/c00d-directory/) ## [C00d Directory](/website-templates/c00d-directory/) A categorized web directory/listing site that organizes and ranks link/tool submissions by category with search directory-listinglistingssearch [Explore template → ](/website-templates/c00d-directory/)[Start building](/signup?psource=website-templates-card-c00d-directory-website) * [](/website-templates/capsulex/) ## [CapsuleX](/website-templates/capsulex/) A minimal personal blog theme with capsule-shaped floating navigation, automatic dark/light mode, fast page… blogminimalpersonal [Explore template → ](/website-templates/capsulex/)[Start building](/signup?psource=website-templates-card-capsulex-website) * [](/website-templates/casper/) ## [Casper](/website-templates/casper/) A classic multi-author blog and publication template with author and tag archive pages, modeled on the popular Ghost… blogpublicationmulti-author [Explore template → ](/website-templates/casper/)[Start building](/signup?psource=website-templates-card-casper-website) * [](/website-templates/chirping/) ## [Chirping](/website-templates/chirping/) A feature-rich personal blog template with pagination, tags, categories, archives, and a privacy page blogpersonalcategories [Explore template → ](/website-templates/chirping/)[Start building](/signup?psource=website-templates-card-chirping-website) * [](/website-templates/cloudflare-style-saas-site/) ## [Cloudflare-Style SaaS Site](/website-templates/cloudflare-style-saas-site/) A multi-page marketing template for a tech/SaaS product (performance, content, growth features), with pricing,… saasmarketing-sitebusiness [Explore template → ](/website-templates/cloudflare-style-saas-site/)[Start building](/signup?psource=website-templates-card-cloudflare-style-saas-site-website) * [](/website-templates/compass/) ## [Compass](/website-templates/compass/) A documentation and knowledge base template with nested category/parent routing and full-text search via Pagefind documentationknowledge-basedocs [Explore template → ](/website-templates/compass/)[Start building](/signup?psource=website-templates-card-compass-website) * [](/website-templates/decap-cms-portfolio/) ## [Decap CMS Portfolio](/website-templates/decap-cms-portfolio/) A personal portfolio and blog template with project showcases, integrated with Decap CMS for content editing portfolioblogcms [Explore template → ](/website-templates/decap-cms-portfolio/)[Start building](/signup?psource=website-templates-card-decap-cms-portfolio-website) * [](/website-templates/elementary/) ## [Elementary](/website-templates/elementary/) A school website template for an elementary school, with pages for teachers, blog/news, and contact information educationschoolk-12 [Explore template → ](/website-templates/elementary/)[Start building](/signup?psource=website-templates-card-elementary-website) * [](/website-templates/entropic/) ## [Entropic](/website-templates/entropic/) A retro text-mode technical zine covering security topics, organized into volumes and a CVE database listing zinetechsecurity [Explore template → ](/website-templates/entropic/)[Start building](/signup?psource=website-templates-card-entropic-website) * [](/website-templates/form-and-function-architects/) ## [Form & Function Architects](/website-templates/form-and-function-architects/) A business site template for an architecture/interior-design studio, featuring a portfolio of projects, an about… architectureinterior-designportfolio [Explore template → ](/website-templates/form-and-function-architects/)[Start building](/signup?psource=website-templates-card-form-and-function-architects-website) * [](/website-templates/fyrre/) ## [Fyrre](/website-templates/fyrre/) An online magazine template with categorized blog articles, author profiles, and a podcast section magazineblogeditorial [Explore template → ](/website-templates/fyrre/)[Start building](/signup?psource=website-templates-card-fyrre-website) * [](/website-templates/haze/) ## [Haze](/website-templates/haze/) A designer/developer portfolio template featuring project case studies, a blog with tags, and full-text search portfolioblogcase-studies [Explore template → ](/website-templates/haze/)[Start building](/signup?psource=website-templates-card-haze-website) * [](/website-templates/john-doe-portfolio/) ## [John Doe Portfolio](/website-templates/john-doe-portfolio/) A personal portfolio template for a product designer/frontend engineer, showcasing work case studies, an about page,… portfoliopersonal-siteminimal [Explore template → ](/website-templates/john-doe-portfolio/)[Start building](/signup?psource=website-templates-card-john-doe-portfolio-website) * [](/website-templates/keel/) ## [Keel](/website-templates/keel/) A structural, minimalist portfolio/blog theme ("Structural minimalism for careful digital work") combining a works… portfolioblogminimal [Explore template → ](/website-templates/keel/)[Start building](/signup?psource=website-templates-card-keel-website) * [](/website-templates/kepler/) ## [Kepler](/website-templates/kepler/) "The versatile Astro theme" — a general-purpose starter combining blog, portfolio/work, and landing-page… blogportfoliostarter-theme [Explore template → ](/website-templates/kepler/)[Start building](/signup?psource=website-templates-card-kepler-website) * [](/website-templates/landing-page/) ## [Landing Page](/website-templates/landing-page/) Product landing site with a hero, feature and how-it-works sections, pricing, testimonials, FAQ, sign-up and login… landing-pagemarketingsaas [Explore template → ](/website-templates/landing-page/)[Start building](/signup?psource=website-templates-card-landing-page-website) * [](/website-templates/lipi/) ## [Lipi](/website-templates/lipi/) A minimalist personal blog and writing platform template with archive, tags, and paginated posts blogwritingminimal [Explore template → ](/website-templates/lipi/)[Start building](/signup?psource=website-templates-card-lipi-website) * [](/website-templates/logflow/) ## [LogFlow](/website-templates/logflow/) A compact Astro theme for writing and publishing, with a blog organized by collections, years, tags, and a… blogwritingpersonal [Explore template → ](/website-templates/logflow/)[Start building](/signup?psource=website-templates-card-logflow-website) * [](/website-templates/lonetrail/) ## [Lonetrail](/website-templates/lonetrail/) A personal blog template with post series, tags, categories, and an archive for long-form writing blogpersonal-siteseries [Explore template → ](/website-templates/lonetrail/)[Start building](/signup?psource=website-templates-card-lonetrail-website) * [](/website-templates/lotus-docs/) ## [Lotus Docs](/website-templates/lotus-docs/) A documentation site starter built on the Astro Theme Lotus package, with sidebar navigation, guides, and local search documentationdocs-themestarter [Explore template → ](/website-templates/lotus-docs/)[Start building](/signup?psource=website-templates-card-lotus-docs-website) * [](/website-templates/manduca/) ## [Manduca](/website-templates/manduca/) A link-in-bio style single-page profile with simple markdown content pages (fish, cakes, meat) for a personal hub link-in-bioprofileminimal [Explore template → ](/website-templates/manduca/)[Start building](/signup?psource=website-templates-card-manduca-website) * [](/website-templates/medicsare/) ## [Medicsare](/website-templates/medicsare/) A healthcare/medical practice marketing site featuring doctor profiles, services, and pricing pages healthcaremarketingmedical [Explore template → ](/website-templates/medicsare/)[Start building](/signup?psource=website-templates-card-medicsare-website) * [](/website-templates/misthaven/) ## [Misthaven](/website-templates/misthaven/) A calm, minimalist Astro blog theme with light/dark themes, post search, tags, comments (Artalk), and i18n support blogpersonal-siteminimal [Explore template → ](/website-templates/misthaven/)[Start building](/signup?psource=website-templates-card-misthaven-website) * [](/website-templates/monograph/) ## [Monograph](/website-templates/monograph/) A full-featured blog/publication theme with categories, authors, search, and sitemap/RSS support blogpublicationcategories [Explore template → ](/website-templates/monograph/)[Start building](/signup?psource=website-templates-card-monograph-website) * [](/website-templates/music/) ## [Music](/website-templates/music/) Music discovery interface with playlists, track tables, play and like controls, playlist detail pages, responsive… musicplaylistsmedia [Explore template → ](/website-templates/music/)[Start building](/signup?psource=website-templates-card-music-website) * [](/website-templates/myscholar/) ## [MyScholar](/website-templates/myscholar/) An academic personal site for researchers featuring publications, people/collaborators, projects, and a blog academicportfoliopublications [Explore template → ](/website-templates/myscholar/)[Start building](/signup?psource=website-templates-card-myscholar-website) * [](/website-templates/navfolio/) ## [Navfolio](/website-templates/navfolio/) A developer portfolio combined with a notebook-style blog featuring series, archives, tags, and categories portfoliodeveloperblog [Explore template → ](/website-templates/navfolio/)[Start building](/signup?psource=website-templates-card-navfolio-website) * [](/website-templates/ombra/) ## [Ombra](/website-templates/ombra/) A fine-dining restaurant template showcasing a chef's tasting menu on a single elegant landing page restaurantfoodfine-dining [Explore template → ](/website-templates/ombra/)[Start building](/signup?psource=website-templates-card-ombra-website) * [](/website-templates/palette/) ## [Palette](/website-templates/palette/) A minimal Astro theme for personal sites and blogs, with content collections, tag pages, RSS, and Pagefind search blogpersonal-siteminimal [Explore template → ](/website-templates/palette/)[Start building](/signup?psource=website-templates-card-palette-website) * [](/website-templates/patrika/) ## [Patrika](/website-templates/patrika/) "A field notebook, kept in the open" — a slow, personal-writing theme organizing content into essays, notes, and a… blogpersonaljournal [Explore template → ](/website-templates/patrika/)[Start building](/signup?psource=website-templates-card-patrika-website) * [](/website-templates/personal-portfolio/) ## [Personal Portfolio](/website-templates/personal-portfolio/) Responsive personal portfolio with hero, about, education, experience, projects, contact links, and light and dark… portfoliopersonalresume [Explore template → ](/website-templates/personal-portfolio/)[Start building](/signup?psource=website-templates-card-personal-portfolio-website) * [](/website-templates/photo-folio/) ## [Photo Folio](/website-templates/photo-folio/) A photographer's portfolio template with image galleries, calendar, and a blog split into photography/tech categories portfoliophotographygallery [Explore template → ](/website-templates/photo-folio/)[Start building](/signup?psource=website-templates-card-photo-folio-website) * [](/website-templates/portfolio-theme/) ## [Portfolio Theme](/website-templates/portfolio-theme/) A minimal single-page developer portfolio template with just a homepage plus terms and privacy pages portfoliodeveloperminimal [Explore template → ](/website-templates/portfolio-theme/)[Start building](/signup?psource=website-templates-card-portfolio-theme-website) * [](/website-templates/powerai/) ## [PowerAI](/website-templates/powerai/) An AI SaaS marketing site template with pricing, features, integrations, case studies, careers, changelog, blog,… saasaimarketing [Explore template → ](/website-templates/powerai/)[Start building](/signup?psource=website-templates-card-powerai-website) * [](/website-templates/procleaning/) ## [ProCleaning](/website-templates/procleaning/) A business website template for a professional home and office cleaning service, with team, service, and blog pages businessservicelocal-business [Explore template → ](/website-templates/procleaning/)[Start building](/signup?psource=website-templates-card-procleaning-website) * [](/website-templates/projects-portfolio/) ## [Projects Portfolio](/website-templates/projects-portfolio/) A minimal developer portfolio template (sample persona "Alex Morgan") with a homepage and dedicated projects page portfoliodeveloperprojects [Explore template → ](/website-templates/projects-portfolio/)[Start building](/signup?psource=website-templates-card-projects-portfolio-website) * [](/website-templates/public-portfolio/) ## [Public Portfolio](/website-templates/public-portfolio/) A personal portfolio template with a project showcase, detail pages for individual projects, and a blog portfolioblogprojects [Explore template → ](/website-templates/public-portfolio/)[Start building](/signup?psource=website-templates-card-public-portfolio-website) * [](/website-templates/pulsar-lite/) ## [Pulsar Lite](/website-templates/pulsar-lite/) A lightweight technical blog template designed for an engineering team to publish articles blogtechnicalengineering [Explore template → ](/website-templates/pulsar-lite/)[Start building](/signup?psource=website-templates-card-pulsar-lite-website) * [](/website-templates/quietpages/) ## [Quietpages](/website-templates/quietpages/) A minimalist multi-author writing and essay blog template with authors, categories, and tag pages blogmulti-authoressay [Explore template → ](/website-templates/quietpages/)[Start building](/signup?psource=website-templates-card-quietpages-website) * [](/website-templates/recruit/) ## [Recruit](/website-templates/recruit/) A recruitment-agency marketing site ("talent meets opportunity") with a job board (categorized/tagged listings) and… recruitingjobshr [Explore template → ](/website-templates/recruit/)[Start building](/signup?psource=website-templates-card-recruit-website) * [](/website-templates/refined-x/) ## [Refined X](/website-templates/refined-x/) A sophisticated personal writing/blog platform organizing content into date-scoped articles, topical series, Q\&A… blogwritingpersonal [Explore template → ](/website-templates/refined-x/)[Start building](/signup?psource=website-templates-card-refined-x-website) * [](/website-templates/resume-minimal/) ## [Resume Minimal](/website-templates/resume-minimal/) A single-page minimalist online resume/CV template resumecvminimal [Explore template → ](/website-templates/resume-minimal/)[Start building](/signup?psource=website-templates-card-resume-minimal-website) * [](/website-templates/ricoui-starter/) ## [RicoUI Starter](/website-templates/ricoui-starter/) A design-system-led Astro starter with a documented visual system, blog, changelog, pricing, and auth screens for… saasdesign-systemstarter [Explore template → ](/website-templates/ricoui-starter/)[Start building](/signup?psource=website-templates-card-ricoui-starter-website) * [](/website-templates/scholars/) ## [Scholars](/website-templates/scholars/) Customizable Astro theme for academic and research portfolios, with pages for research, teaching, projects, and posts academicportfolioresearch [Explore template → ](/website-templates/scholars/)[Start building](/signup?psource=website-templates-card-scholars-website) * [](/website-templates/self-esteem/) ## [Self Esteem](/website-templates/self-esteem/) An editorial magazine and blog template with a studio/work portfolio section and tag-based article browsing magazineblogeditorial [Explore template → ](/website-templates/self-esteem/)[Start building](/signup?psource=website-templates-card-self-esteem-website) * [](/website-templates/sidey/) ## [Sidey](/website-templates/sidey/) A minimalist personal writing and blog template focused on long-form "writings" content blogwritingminimal [Explore template → ](/website-templates/sidey/)[Start building](/signup?psource=website-templates-card-sidey-website) * [](/website-templates/sify/) ## [Sify](/website-templates/sify/) A feature-rich personal blog with series, archive, projects, tags, search, and a links page blogpersonal-siteportfolio [Explore template → ](/website-templates/sify/)[Start building](/signup?psource=website-templates-card-sify-website) * [](/website-templates/simple-blog/) ## [Simple Blog](/website-templates/simple-blog/) Minimal content-first blog with Markdown and MDX posts, search, tags, archives, RSS, generated social images, and… blogminimalmdx [Explore template → ](/website-templates/simple-blog/)[Start building](/signup?psource=website-templates-card-simple-blog-website) * [](/website-templates/sr-studio/) ## [SR Studio](/website-templates/sr-studio/) A movie directory site listing films by category with individual movie detail pages and contact/about pages movie-directoryentertainmentcatalog [Explore template → ](/website-templates/sr-studio/)[Start building](/signup?psource=website-templates-card-sr-studio-website) * [](/website-templates/starfolio/) ## [Starfolio](/website-templates/starfolio/) A developer portfolio template with an integrated blog, resume/skills data, and MDX support for showcasing work and… portfoliodeveloperblog [Explore template → ](/website-templates/starfolio/)[Start building](/signup?psource=website-templates-card-starfolio-website) * [](/website-templates/starlight-black/) ## [Starlight Black](/website-templates/starlight-black/) A dark-themed documentation site built on Astro Starlight, using Markdown/MDX content collections for structured docs documentationstarlightdocs-theme [Explore template → ](/website-templates/starlight-black/)[Start building](/signup?psource=website-templates-card-starlight-black-website) * [](/website-templates/terminal-blog/) ## [Terminal Blog](/website-templates/terminal-blog/) Retro terminal-themed blog with articles, tags, RSS, about and error pages, sound effects, theme controls, and an… blogterminalretro [Explore template → ](/website-templates/terminal-blog/)[Start building](/signup?psource=website-templates-card-terminal-blog-website) * [](/website-templates/the-alpine-loaf/) ## [The Alpine Loaf](/website-templates/the-alpine-loaf/) A local-business template for an artisan bakery, driven by a single config file covering identity, business hours,… local-businessbakeryrestaurant [Explore template → ](/website-templates/the-alpine-loaf/)[Start building](/signup?psource=website-templates-card-the-alpine-loaf-website) * [](/website-templates/tone/) ## [Tone](/website-templates/tone/) A minimal personal blog with a searchable posts listing, RSS feed, and about page blogpersonal-siteminimal [Explore template → ](/website-templates/tone/)[Start building](/signup?psource=website-templates-card-tone-website) * [](/website-templates/travellian/) ## [Travellian](/website-templates/travellian/) A single-page travel agency landing page template showcasing destinations and travel offers landing-pagetravelagency [Explore template → ](/website-templates/travellian/)[Start building](/signup?psource=website-templates-card-travellian-website) * [](/website-templates/tui-portfolio/) ## [TUI Portfolio](/website-templates/tui-portfolio/) Terminal UI developer portfolio portfolioterminal-uiretro [Explore template → ](/website-templates/tui-portfolio/)[Start building](/signup?psource=website-templates-card-tui-portfolio-website) * [](/website-templates/viva-medical/) ## [Viva Medical](/website-templates/viva-medical/) A healthcare-at-home service site with pages for services, careers, professional care, specialized support, and 24/7… healthcaremedicalbusiness-site [Explore template → ](/website-templates/viva-medical/)[Start building](/signup?psource=website-templates-card-viva-medical-website) * [](/website-templates/zahit/) ## [Zahit](/website-templates/zahit/) A personal blog template with an archive, tag browsing, and RSS feed for long-form posts blogpersonal-sitearchive [Explore template → ](/website-templates/zahit/)[Start building](/signup?psource=website-templates-card-zahit-website) * [](/website-templates/zeepay/) ## [Zeepay](/website-templates/zeepay/) A fintech payments marketing site with pricing, sign-up, login, blog, and a video library for product education fintechsaasmarketing [Explore template → ](/website-templates/zeepay/)[Start building](/signup?psource=website-templates-card-zeepay-website) * [](/website-templates/zenix/) ## [Zenix](/website-templates/zenix/) A SaaS marketing site with pricing, changelog, authentication pages, blog, and built-in site search saasmarketingpricing [Explore template → ](/website-templates/zenix/)[Start building](/signup?psource=website-templates-card-zenix-website) ## No templates found Try a broader search to see more starting points. Clear search ## Choose a website template by purpose, not just style Start with the content structure closest to your goal, whether that is a portfolio, a publication, a product site, a documentation hub, a directory, or a local business website. A close structural match makes the first version faster to personalize. ## Website Templates FAQ * What can I build with these website templates? The catalog has starting points for blogs, portfolios, SaaS marketing sites, documentation, directories, publications, professional services, restaurants, healthcare, education, and other kinds of websites. * Can I customize the website templates? Yes. You can change the pages, the content structure, the visual style, the components, and the code until the site fits your brand and the way you publish. * Can I change the pages and visual design? Yes. Replace the sample content, restyle the interface, add or remove pages, and edit any component. Nothing in a template is locked. --- # 8-Bit Quest > A retro, pixel-art styled personal developer portfolio and blog with a gamified "Player One" theme covering projects, blog posts, and a profile/stats page. [← Website Templates](/website-templates/) Template preview Website  Template type Website Designed for Modern web browsers Preview gallery 8 visual previews ## Who the 8-Bit Quest template is for Developers, technical creators, and indie makers who want a memorable portfolio with a retro game-inspired identity. ## What’s included * ✓ Pixel-art visual system with a dark Player One theme * ✓ Project showcase and personal profile with game-like stats * ✓ Integrated blog for technical writing and build updates ## Explore the 8-Bit Quest design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  *  ## What you can build with 8-Bit Quest * → Publish a developer portfolio with a distinctive retro style * → Combine project case studies and technical articles in one site * → Create a personal homepage for an indie game or software creator ## More Website Templates [Browse all websites](/website-templates/) * [](/website-templates/haze/) ### [Haze](/website-templates/haze/) [A designer/developer portfolio template featuring project case studies, a blog with tags, and full-text search](/website-templates/haze/) * [](/website-templates/keel/) ### [Keel](/website-templates/keel/) [A structural, minimalist portfolio/blog theme ("Structural minimalism for careful digital work") combining a works…](/website-templates/keel/) * [](/website-templates/navfolio/) ### [Navfolio](/website-templates/navfolio/) [A developer portfolio combined with a notebook-style blog featuring series, archives, tags, and categories](/website-templates/navfolio/) ## Make it yours Start with this website template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-8-bit-quest-website) --- # Academic Portfolio > A scholarly personal site template with sections for publications, talks, teaching, a CV, and a blog, aimed at academics and researchers showcasing their work. [← Website Templates](/website-templates/) Template preview Website  Template type Website Designed for Modern web browsers Preview gallery 9 visual previews ## Who the Academic Portfolio template is for Researchers, professors, graduate students, and academic professionals presenting their scholarship and teaching. ## What’s included * ✓ Dedicated sections for publications, talks, and teaching * ✓ Curriculum vitae and professional background pages * ✓ Scholarly blog for research notes and announcements ## Explore the Academic Portfolio design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  *  *  ## What you can build with Academic Portfolio * → Publish a faculty or researcher profile * → Create an academic job-market portfolio * → Share publications, talks, teaching materials, and research updates ## More Website Templates [Browse all websites](/website-templates/) * [](/website-templates/myscholar/) ### [MyScholar](/website-templates/myscholar/) [An academic personal site for researchers featuring publications, people/collaborators, projects, and a blog](/website-templates/myscholar/) * [](/website-templates/scholars/) ### [Scholars](/website-templates/scholars/) [Customizable Astro theme for academic and research portfolios, with pages for research, teaching, projects, and posts](/website-templates/scholars/) * [](/website-templates/astro-sienna/) ### [Astro Sienna](/website-templates/astro-sienna/) [A clean personal blog template ("Astro Sienna") with posts, tags, an about page, and a project showcase section](/website-templates/astro-sienna/) ## Make it yours Start with this website template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-academic-portfolio-website) --- # Aeon Space Agency > A marketing/informational site template for a space agency, featuring missions, departures, technology, science, news, and reports sections. [← Website Templates](/website-templates/) Template preview Website  Template type Website Designed for Modern web browsers Preview gallery 10 visual previews ## Who the Aeon Space Agency template is for Aerospace organizations, science programs, and ambitious technology brands creating an editorial marketing site. ## What’s included * ✓ Mission and departure pages for current and upcoming programs * ✓ Technology and science sections for explaining complex work * ✓ News and reports library in a cinematic dark visual system ## Explore the Aeon Space Agency design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  *  *  *  ## What you can build with Aeon Space Agency * → Launch a marketing site for an aerospace or research company * → Publish mission updates and technical reports * → Prototype a science-fiction or space-industry editorial experience ## More Website Templates [Browse all websites](/website-templates/) * [](/website-templates/apex-services/) ### [Apex Services](/website-templates/apex-services/) [A professional services marketing site with a sidebar layout, dedicated service pages, blog, and projects showcase](/website-templates/apex-services/) * [](/website-templates/landing-page/) ### [Landing Page](/website-templates/landing-page/) [Product landing site with a hero, feature and how-it-works sections, pricing, testimonials, FAQ, sign-up and login…](/website-templates/landing-page/) * [](/website-templates/powerai/) ### [PowerAI](/website-templates/powerai/) [An AI SaaS marketing site template with pricing, features, integrations, case studies, careers, changelog, blog,…](/website-templates/powerai/) ## Make it yours Start with this website template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-aeon-space-agency-website) --- # Alba > A designer portfolio template with project case studies, resume, and about pages for showcasing creative work. [← Website Templates](/website-templates/) Template preview Website  Template type Website Designed for Modern web browsers Preview gallery 9 visual previews ## Who the Alba template is for Product designers, creative directors, and independent studios presenting selected work and professional experience. ## What’s included * ✓ Project-led portfolio with dedicated case-study pages * ✓ About and resume sections for professional context * ✓ Minimal presentation designed to keep creative work central ## Explore the Alba design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  *  *  ## What you can build with Alba * → Publish a product or visual design portfolio * → Present client work through structured case studies * → Create a polished personal site for freelance opportunities ## More Website Templates [Browse all websites](/website-templates/) * [](/website-templates/john-doe-portfolio/) ### [John Doe Portfolio](/website-templates/john-doe-portfolio/) [A personal portfolio template for a product designer/frontend engineer, showcasing work case studies, an about page,…](/website-templates/john-doe-portfolio/) * [](/website-templates/decap-cms-portfolio/) ### [Decap CMS Portfolio](/website-templates/decap-cms-portfolio/) [A personal portfolio and blog template with project showcases, integrated with Decap CMS for content editing](/website-templates/decap-cms-portfolio/) * [](/website-templates/keel/) ### [Keel](/website-templates/keel/) [A structural, minimalist portfolio/blog theme ("Structural minimalism for careful digital work") combining a works…](/website-templates/keel/) ## Make it yours Start with this website template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-alba-website) --- # Apex Services > A professional services marketing site with a sidebar layout, dedicated service pages, blog, and projects showcase. [← Website Templates](/website-templates/) Template preview Website  Template type Website Designed for Modern web browsers Preview gallery 10 visual previews ## Who the Apex Services template is for Consultancies, agencies, and professional-service firms that need to explain expertise and demonstrate past work. ## What’s included * ✓ Distinctive sidebar navigation across the marketing site * ✓ Dedicated pages for individual services and capabilities * ✓ Project showcase and blog for proof, insight, and updates ## Explore the Apex Services design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  *  *  *  ## What you can build with Apex Services * → Launch a consulting or agency website * → Create service landing pages for organic acquisition * → Publish project examples and subject-matter articles ## More Website Templates [Browse all websites](/website-templates/) * [](/website-templates/medicsare/) ### [Medicsare](/website-templates/medicsare/) [A healthcare/medical practice marketing site featuring doctor profiles, services, and pricing pages](/website-templates/medicsare/) * [](/website-templates/procleaning/) ### [ProCleaning](/website-templates/procleaning/) [A business website template for a professional home and office cleaning service, with team, service, and blog pages](/website-templates/procleaning/) * [](/website-templates/aeon-space-agency/) ### [Aeon Space Agency](/website-templates/aeon-space-agency/) [A marketing/informational site template for a space agency, featuring missions, departures, technology, science,…](/website-templates/aeon-space-agency/) ## Make it yours Start with this website template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-apex-services-website) --- # Astro Sienna > A clean personal blog template ("Astro Sienna") with posts, tags, an about page, and a project showcase section. [← Website Templates](/website-templates/) Template preview Website  Template type Website Designed for Modern web browsers Preview gallery 9 visual previews ## Who the Astro Sienna template is for Writers, developers, and independent creators who want a clean personal blog with room for selected projects. ## What’s included * ✓ Content-focused article pages with tag-based browsing * ✓ Personal about page for author context * ✓ Project showcase alongside the main writing archive ## Explore the Astro Sienna design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  *  *  ## What you can build with Astro Sienna * → Start a personal or technical blog * → Combine long-form writing with a small project portfolio * → Publish tagged essays, notes, and development updates ## More Website Templates [Browse all websites](/website-templates/) * [](/website-templates/chirping/) ### [Chirping](/website-templates/chirping/) [A feature-rich personal blog template with pagination, tags, categories, archives, and a privacy page](/website-templates/chirping/) * [](/website-templates/logflow/) ### [LogFlow](/website-templates/logflow/) [A compact Astro theme for writing and publishing, with a blog organized by collections, years, tags, and a…](/website-templates/logflow/) * [](/website-templates/capsulex/) ### [CapsuleX](/website-templates/capsulex/) [A minimal personal blog theme with capsule-shaped floating navigation, automatic dark/light mode, fast page…](/website-templates/capsulex/) ## Make it yours Start with this website template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-astro-sienna-website) --- # Astro Stardrive > A polished, documentation-and-marketing SaaS/product template with docs, integrations, pricing, FAQ, blog, and multi-language support (English, German,… [← Website Templates](/website-templates/) Template preview Website  Template type Website Designed for Modern web browsers Preview gallery 10 visual previews ## Who the Astro Stardrive template is for SaaS teams and developer-tool companies building a product site that combines marketing, documentation, and support content. ## What’s included * ✓ Product marketing pages with integrations, pricing, and FAQ content * ✓ Documentation and blog sections in the same site structure * ✓ Multilingual content support for English, German, French, and Spanish ## Explore the Astro Stardrive design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  *  *  *  ## What you can build with Astro Stardrive * → Launch a documentation-led SaaS website * → Combine product marketing and technical guides under one domain * → Create a multilingual product site for an international audience ## More Website Templates [Browse all websites](/website-templates/) * [](/website-templates/cloudflare-style-saas-site/) ### [Cloudflare-Style SaaS Site](/website-templates/cloudflare-style-saas-site/) [A multi-page marketing template for a tech/SaaS product (performance, content, growth features), with pricing,…](/website-templates/cloudflare-style-saas-site/) * [](/website-templates/powerai/) ### [PowerAI](/website-templates/powerai/) [An AI SaaS marketing site template with pricing, features, integrations, case studies, careers, changelog, blog,…](/website-templates/powerai/) * [](/website-templates/zeepay/) ### [Zeepay](/website-templates/zeepay/) [A fintech payments marketing site with pricing, sign-up, login, blog, and a video library for product education](/website-templates/zeepay/) ## Make it yours Start with this website template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-astro-stardrive-website) --- # Atelier Ko > A furniture e-commerce catalog and storefront template with product pages, catalog browsing, and a cart. [← Website Templates](/website-templates/) Template preview Website  Template type Website Designed for Modern web browsers Preview gallery 9 visual previews ## Who the Atelier Ko template is for Furniture makers, design retailers, and boutique commerce brands presenting a curated product catalog online. ## What’s included * ✓ Furniture-focused catalog and product browsing experience * ✓ Individual product pages for imagery and item details * ✓ Shopping cart flow for a complete storefront foundation ## Explore the Atelier Ko design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  *  *  ## What you can build with Atelier Ko * → Launch an online catalog for a furniture or design studio * → Prototype a boutique retail storefront * → Showcase a collection of physical products with commerce flows ## More Website Templates [Browse all websites](/website-templates/) * [](/website-templates/sr-studio/) ### [SR Studio](/website-templates/sr-studio/) [A movie directory site listing films by category with individual movie detail pages and contact/about pages](/website-templates/sr-studio/) * [](/website-templates/8-bit-quest/) ### [8-Bit Quest](/website-templates/8-bit-quest/) [A retro, pixel-art styled personal developer portfolio and blog with a gamified "Player One" theme covering…](/website-templates/8-bit-quest/) * [](/website-templates/academic-portfolio/) ### [Academic Portfolio](/website-templates/academic-portfolio/) [A scholarly personal site template with sections for publications, talks, teaching, a CV, and a blog, aimed at…](/website-templates/academic-portfolio/) ## Make it yours Start with this website template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-atelier-ko-website) --- # Bento Blog > A minimalist blog template using a bento-grid layout for posts, tags, and pagination, with a built-in post editor page. [← Website Templates](/website-templates/) Template preview Website  Template type Website Designed for Modern web browsers Preview gallery 2 visual previews ## Who the Bento Blog template is for Independent writers and creators who want a compact, modern blog organized around a visual bento-grid layout. ## What’s included * ✓ Bento-grid homepage for visually varied article discovery * ✓ Tag browsing and pagination for a growing archive * ✓ Built-in editor page as a starting point for content workflows ## Explore the Bento Blog design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  ## What you can build with Bento Blog * → Start a minimalist personal blog * → Publish a compact editorial homepage with varied story cards * → Prototype a writing site with an integrated editing surface ## More Website Templates [Browse all websites](/website-templates/) * [](/website-templates/decap-cms-portfolio/) ### [Decap CMS Portfolio](/website-templates/decap-cms-portfolio/) [A personal portfolio and blog template with project showcases, integrated with Decap CMS for content editing](/website-templates/decap-cms-portfolio/) * [](/website-templates/keel/) ### [Keel](/website-templates/keel/) [A structural, minimalist portfolio/blog theme ("Structural minimalism for careful digital work") combining a works…](/website-templates/keel/) * [](/website-templates/lipi/) ### [Lipi](/website-templates/lipi/) [A minimalist personal blog and writing platform template with archive, tags, and paginated posts](/website-templates/lipi/) ## Make it yours Start with this website template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-bento-blog-website) --- # Blog > Feature-rich publishing site with Markdown and MDX posts, galleries, full-text search, archives, tags, RSS, generated social images, sharing, and light and… [← Website Templates](/website-templates/) Template preview Website  Template type Website Designed for Modern web browsers Preview gallery 3 visual previews ## Who the Blog template is for Publishers, content teams, and serious independent writers who need rich discovery and distribution features. ## What’s included * ✓ Markdown and MDX publishing with galleries and full-text search * ✓ Archives, tags, RSS, and sharing for content discovery * ✓ Generated social images plus light and dark themes ## Explore the Blog design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  ## What you can build with Blog * → Launch a feature-rich company or personal publication * → Migrate a growing Markdown content archive * → Build an editorial site with search, feeds, and social distribution ## More Website Templates [Browse all websites](/website-templates/) * [](/website-templates/simple-blog/) ### [Simple Blog](/website-templates/simple-blog/) [Minimal content-first blog with Markdown and MDX posts, search, tags, archives, RSS, generated social images, and…](/website-templates/simple-blog/) * [](/website-templates/fyrre/) ### [Fyrre](/website-templates/fyrre/) [An online magazine template with categorized blog articles, author profiles, and a podcast section](/website-templates/fyrre/) * [](/website-templates/haze/) ### [Haze](/website-templates/haze/) [A designer/developer portfolio template featuring project case studies, a blog with tags, and full-text search](/website-templates/haze/) ## Make it yours Start with this website template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-blog-website) --- # C00d Directory > A categorized web directory/listing site that organizes and ranks link/tool submissions by category with search. [← Website Templates](/website-templates/) Template preview Website  Template type Website Designed for Modern web browsers Preview gallery 4 visual previews ## Who the C00d Directory template is for Community operators, curators, and product teams building a searchable directory of tools, links, or listings. ## What’s included * ✓ Categorized directory structure for organized browsing * ✓ Search for quickly finding relevant listings * ✓ Ranking-oriented listing presentation for curated recommendations ## Explore the C00d Directory design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  ## What you can build with C00d Directory * → Launch a curated tools or resources directory * → Build a niche marketplace discovery site * → Organize community submissions into searchable categories ## More Website Templates [Browse all websites](/website-templates/) * [](/website-templates/chirping/) ### [Chirping](/website-templates/chirping/) [A feature-rich personal blog template with pagination, tags, categories, archives, and a privacy page](/website-templates/chirping/) * [](/website-templates/keel/) ### [Keel](/website-templates/keel/) [A structural, minimalist portfolio/blog theme ("Structural minimalism for careful digital work") combining a works…](/website-templates/keel/) * [](/website-templates/kepler/) ### [Kepler](/website-templates/kepler/) ["The versatile Astro theme" — a general-purpose starter combining blog, portfolio/work, and landing-page…](/website-templates/kepler/) ## Make it yours Start with this website template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-c00d-directory-website) --- # CapsuleX > A minimal personal blog theme with capsule-shaped floating navigation, automatic dark/light mode, fast page transitions, and tag-based post browsing. [← Website Templates](/website-templates/) Template preview Website  Template type Website Designed for Modern web browsers Preview gallery 5 visual previews ## Who the CapsuleX template is for Writers and creators seeking a minimal personal blog with playful navigation and polished reading transitions. ## What’s included * ✓ Capsule-shaped floating navigation with a distinctive visual identity * ✓ Automatic light and dark mode support * ✓ Fast page transitions and tag-based article browsing ## Explore the CapsuleX design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  ## What you can build with CapsuleX * → Publish a personal writing archive * → Create a lightweight blog with automatic theme support * → Build a tagged content site with an expressive minimal design ## More Website Templates [Browse all websites](/website-templates/) * [](/website-templates/logflow/) ### [LogFlow](/website-templates/logflow/) [A compact Astro theme for writing and publishing, with a blog organized by collections, years, tags, and a…](/website-templates/logflow/) * [](/website-templates/astro-sienna/) ### [Astro Sienna](/website-templates/astro-sienna/) [A clean personal blog template ("Astro Sienna") with posts, tags, an about page, and a project showcase section](/website-templates/astro-sienna/) * [](/website-templates/chirping/) ### [Chirping](/website-templates/chirping/) [A feature-rich personal blog template with pagination, tags, categories, archives, and a privacy page](/website-templates/chirping/) ## Make it yours Start with this website template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-capsulex-website) --- # Casper > A classic multi-author blog and publication template with author and tag archive pages, modeled on the popular Ghost "Casper" theme. [← Website Templates](/website-templates/) Template preview Website  Template type Website Designed for Modern web browsers Preview gallery 9 visual previews ## Who the Casper template is for Editorial teams and multi-author publications that want a familiar, content-first magazine and blog structure. ## What’s included * ✓ Classic publication layout inspired by the Ghost Casper theme * ✓ Dedicated author archives for multi-writer teams * ✓ Tag archives and RSS support for topic discovery and subscriptions ## Explore the Casper design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  *  *  ## What you can build with Casper * → Launch a multi-author company publication * → Create an online magazine with author and topic archives * → Build a Ghost-inspired editorial site on Astro ## More Website Templates [Browse all websites](/website-templates/) * [](/website-templates/capsulex/) ### [CapsuleX](/website-templates/capsulex/) [A minimal personal blog theme with capsule-shaped floating navigation, automatic dark/light mode, fast page…](/website-templates/capsulex/) * [](/website-templates/fyrre/) ### [Fyrre](/website-templates/fyrre/) [An online magazine template with categorized blog articles, author profiles, and a podcast section](/website-templates/fyrre/) * [](/website-templates/logflow/) ### [LogFlow](/website-templates/logflow/) [A compact Astro theme for writing and publishing, with a blog organized by collections, years, tags, and a…](/website-templates/logflow/) ## Make it yours Start with this website template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-casper-website) --- # Chirping > A feature-rich personal blog template with pagination, tags, categories, archives, and a privacy page. [← Website Templates](/website-templates/) Template preview Website  Template type Website Designed for Modern web browsers Preview gallery 8 visual previews ## Who the Chirping template is for Independent writers and small editorial teams building a structured personal publication with a deep archive. ## What’s included * ✓ Paginated article archive for a growing body of work * ✓ Tags and categories for multiple paths through the content * ✓ Archive and privacy pages for a complete personal publication ## Explore the Chirping design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  *  ## What you can build with Chirping * → Start a personal blog designed to grow over time * → Organize essays by both category and tag * → Publish a writing archive with clear pagination and navigation ## More Website Templates [Browse all websites](/website-templates/) * [](/website-templates/astro-sienna/) ### [Astro Sienna](/website-templates/astro-sienna/) [A clean personal blog template ("Astro Sienna") with posts, tags, an about page, and a project showcase section](/website-templates/astro-sienna/) * [](/website-templates/logflow/) ### [LogFlow](/website-templates/logflow/) [A compact Astro theme for writing and publishing, with a blog organized by collections, years, tags, and a…](/website-templates/logflow/) * [](/website-templates/quietpages/) ### [Quietpages](/website-templates/quietpages/) [A minimalist multi-author writing and essay blog template with authors, categories, and tag pages](/website-templates/quietpages/) ## Make it yours Start with this website template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-chirping-website) --- # Cloudflare-Style SaaS Site > A multi-page marketing template for a tech/SaaS product (performance, content, growth features), with pricing, services, blog, and i18n-ready copy via a… [← Website Templates](/website-templates/) Template preview Website  Template type Website Designed for Modern web browsers Preview gallery 9 visual previews ## Who the Cloudflare-Style SaaS Site template is for Technology and SaaS teams that need a substantial product-marketing site with content and internationalization foundations. ## What’s included * ✓ Product pages organized around performance, content, and growth features * ✓ Pricing, services, and blog sections for acquisition and education * ✓ Internationalization-ready copy through a translation helper ## Explore the Cloudflare-Style SaaS Site design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  *  *  ## What you can build with Cloudflare-Style SaaS Site * → Launch a multi-page website for a SaaS product * → Create feature and service pages for organic acquisition * → Prepare a technology marketing site for multilingual content ## More Website Templates [Browse all websites](/website-templates/) * [](/website-templates/astro-stardrive/) ### [Astro Stardrive](/website-templates/astro-stardrive/) [A polished, documentation-and-marketing SaaS/product template with docs, integrations, pricing, FAQ, blog, and…](/website-templates/astro-stardrive/) * [](/website-templates/powerai/) ### [PowerAI](/website-templates/powerai/) [An AI SaaS marketing site template with pricing, features, integrations, case studies, careers, changelog, blog,…](/website-templates/powerai/) * [](/website-templates/landing-page/) ### [Landing Page](/website-templates/landing-page/) [Product landing site with a hero, feature and how-it-works sections, pricing, testimonials, FAQ, sign-up and login…](/website-templates/landing-page/) ## Make it yours Start with this website template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-cloudflare-style-saas-site-website) --- # Compass > A documentation and knowledge base template with nested category/parent routing and full-text search via Pagefind. [← Website Templates](/website-templates/) Template preview Website  Template type Website Designed for Modern web browsers Preview gallery 8 visual previews ## Who the Compass template is for Developer-tool teams, support organizations, and knowledge managers publishing structured reference content. ## What’s included * ✓ Nested category and parent routing for deep documentation sets * ✓ Full-text search powered by Pagefind * ✓ Knowledge-base structure for guides and reference content ## Explore the Compass design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  *  ## What you can build with Compass * → Launch product or API documentation * → Build a searchable customer help center * → Organize an internal knowledge base with nested sections ## More Website Templates [Browse all websites](/website-templates/) * [](/website-templates/astro-stardrive/) ### [Astro Stardrive](/website-templates/astro-stardrive/) [A polished, documentation-and-marketing SaaS/product template with docs, integrations, pricing, FAQ, blog, and…](/website-templates/astro-stardrive/) * [](/website-templates/blog/) ### [Blog](/website-templates/blog/) [Feature-rich publishing site with Markdown and MDX posts, galleries, full-text search, archives, tags, RSS,…](/website-templates/blog/) * [](/website-templates/c00d-directory/) ### [C00d Directory](/website-templates/c00d-directory/) [A categorized web directory/listing site that organizes and ranks link/tool submissions by category with search](/website-templates/c00d-directory/) ## Make it yours Start with this website template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-compass-website) --- # Decap CMS Portfolio > A personal portfolio and blog template with project showcases, integrated with Decap CMS for content editing. [← Website Templates](/website-templates/) Template preview Website  Template type Website Designed for Modern web browsers Preview gallery 9 visual previews ## Who the Decap CMS Portfolio template is for Freelancers and creative professionals who want a portfolio and blog that non-developers can update through a CMS. ## What’s included * ✓ Project showcases for presenting selected work * ✓ Integrated blog for articles and professional updates * ✓ Decap CMS integration for browser-based content editing ## Explore the Decap CMS Portfolio design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  *  *  ## What you can build with Decap CMS Portfolio * → Launch a client-editable creative portfolio * → Build a personal site with CMS-managed projects and posts * → Hand off portfolio content updates without a code workflow ## More Website Templates [Browse all websites](/website-templates/) * [](/website-templates/public-portfolio/) ### [Public Portfolio](/website-templates/public-portfolio/) [A personal portfolio template with a project showcase, detail pages for individual projects, and a blog](/website-templates/public-portfolio/) * [](/website-templates/keel/) ### [Keel](/website-templates/keel/) [A structural, minimalist portfolio/blog theme ("Structural minimalism for careful digital work") combining a works…](/website-templates/keel/) * [](/website-templates/sify/) ### [Sify](/website-templates/sify/) [A feature-rich personal blog with series, archive, projects, tags, search, and a links page](/website-templates/sify/) ## Make it yours Start with this website template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-decap-cms-portfolio-website) --- # Elementary > A school website template for an elementary school, with pages for teachers, blog/news, and contact information. [← Website Templates](/website-templates/) Template preview Website  Template type Website Designed for Modern web browsers Preview gallery 5 visual previews ## Who the Elementary template is for Elementary schools and education communities that need an approachable public site for families and staff. ## What’s included * ✓ Teacher directory for introducing school staff * ✓ Blog and news pages for community announcements * ✓ Contact information and institutional pages for families ## Explore the Elementary design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  ## What you can build with Elementary * → Launch a public website for an elementary school * → Publish school news and classroom updates * → Create a family-facing directory of teachers and contact details ## More Website Templates [Browse all websites](/website-templates/) * [](/website-templates/8-bit-quest/) ### [8-Bit Quest](/website-templates/8-bit-quest/) [A retro, pixel-art styled personal developer portfolio and blog with a gamified "Player One" theme covering…](/website-templates/8-bit-quest/) * [](/website-templates/academic-portfolio/) ### [Academic Portfolio](/website-templates/academic-portfolio/) [A scholarly personal site template with sections for publications, talks, teaching, a CV, and a blog, aimed at…](/website-templates/academic-portfolio/) * [](/website-templates/apex-services/) ### [Apex Services](/website-templates/apex-services/) [A professional services marketing site with a sidebar layout, dedicated service pages, blog, and projects showcase](/website-templates/apex-services/) ## Make it yours Start with this website template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-elementary-website) --- # Entropic > A retro text-mode technical zine covering security topics, organized into volumes and a CVE database listing. [← Website Templates](/website-templates/) Template preview Website  Template type Website Designed for Modern web browsers Preview gallery 5 visual previews ## Who the Entropic template is for Security researchers, technical writers, and experimental publishers creating a specialized technical zine. ## What’s included * ✓ Retro text-mode presentation for a distinctive technical identity * ✓ Volume-based organization for serialized editorial content * ✓ CVE database listing for security reference material ## Explore the Entropic design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  ## What you can build with Entropic * → Publish a security research zine * → Create a retro technical publication * → Combine long-form security writing with a CVE reference index ## More Website Templates [Browse all websites](/website-templates/) * [](/website-templates/8-bit-quest/) ### [8-Bit Quest](/website-templates/8-bit-quest/) [A retro, pixel-art styled personal developer portfolio and blog with a gamified "Player One" theme covering…](/website-templates/8-bit-quest/) * [](/website-templates/tui-portfolio/) ### [TUI Portfolio](/website-templates/tui-portfolio/) [Terminal UI developer portfolio](/website-templates/tui-portfolio/) * [](/website-templates/aeon-space-agency/) ### [Aeon Space Agency](/website-templates/aeon-space-agency/) [A marketing/informational site template for a space agency, featuring missions, departures, technology, science,…](/website-templates/aeon-space-agency/) ## Make it yours Start with this website template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-entropic-website) --- # Form & Function Architects > A business site template for an architecture/interior-design studio, featuring a portfolio of projects, an about page, and a blog for showcasing work and… [← Website Templates](/website-templates/) Template preview Website  Template type Website Designed for Modern web browsers Preview gallery 7 visual previews ## Who the Form & Function Architects template is for Architecture firms, interior-design studios, and spatial designers showcasing projects and expertise. ## What’s included * ✓ Portfolio presentation for architecture and interior projects * ✓ About page for studio positioning and background * ✓ Blog for design thinking, process, and thought leadership ## Explore the Form & Function Architects design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  ## What you can build with Form & Function Architects * → Launch an architecture or interior-design studio website * → Present completed work through visual project pages * → Publish design perspectives alongside a professional portfolio ## More Website Templates [Browse all websites](/website-templates/) * [](/website-templates/academic-portfolio/) ### [Academic Portfolio](/website-templates/academic-portfolio/) [A scholarly personal site template with sections for publications, talks, teaching, a CV, and a blog, aimed at…](/website-templates/academic-portfolio/) * [](/website-templates/astro-sienna/) ### [Astro Sienna](/website-templates/astro-sienna/) [A clean personal blog template ("Astro Sienna") with posts, tags, an about page, and a project showcase section](/website-templates/astro-sienna/) * [](/website-templates/decap-cms-portfolio/) ### [Decap CMS Portfolio](/website-templates/decap-cms-portfolio/) [A personal portfolio and blog template with project showcases, integrated with Decap CMS for content editing](/website-templates/decap-cms-portfolio/) ## Make it yours Start with this website template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-form-and-function-architects-website) --- # Fyrre > An online magazine template with categorized blog articles, author profiles, and a podcast section. [← Website Templates](/website-templates/) Template preview Website  Template type Website Designed for Modern web browsers Preview gallery 10 visual previews ## Who the Fyrre template is for Editorial teams, culture publications, and independent media brands producing articles and audio programming. ## What’s included * ✓ Magazine-style layouts for categorized articles * ✓ Author profiles for a multi-contributor publication * ✓ Dedicated podcast section alongside written editorial content ## Explore the Fyrre design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  *  *  *  ## What you can build with Fyrre * → Launch an online culture or news magazine * → Build a multi-author editorial publication * → Publish articles and podcast episodes under one brand ## More Website Templates [Browse all websites](/website-templates/) * [](/website-templates/casper/) ### [Casper](/website-templates/casper/) [A classic multi-author blog and publication template with author and tag archive pages, modeled on the popular Ghost…](/website-templates/casper/) * [](/website-templates/self-esteem/) ### [Self Esteem](/website-templates/self-esteem/) [An editorial magazine and blog template with a studio/work portfolio section and tag-based article browsing](/website-templates/self-esteem/) * [](/website-templates/blog/) ### [Blog](/website-templates/blog/) [Feature-rich publishing site with Markdown and MDX posts, galleries, full-text search, archives, tags, RSS,…](/website-templates/blog/) ## Make it yours Start with this website template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-fyrre-website) --- # Haze > A designer/developer portfolio template featuring project case studies, a blog with tags, and full-text search. [← Website Templates](/website-templates/) Template preview Website  Template type Website Designed for Modern web browsers Preview gallery 6 visual previews ## Who the Haze template is for Designer-developers and creative technologists presenting project case studies alongside professional writing. ## What’s included * ✓ Project case studies for explaining design and development work * ✓ Tagged blog for process notes and technical articles * ✓ Full-text search in a polished dark visual system ## Explore the Haze design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  ## What you can build with Haze * → Publish a hybrid design and development portfolio * → Share detailed case studies and project retrospectives * → Combine a searchable blog with a professional work archive ## More Website Templates [Browse all websites](/website-templates/) * [](/website-templates/8-bit-quest/) ### [8-Bit Quest](/website-templates/8-bit-quest/) [A retro, pixel-art styled personal developer portfolio and blog with a gamified "Player One" theme covering…](/website-templates/8-bit-quest/) * [](/website-templates/keel/) ### [Keel](/website-templates/keel/) [A structural, minimalist portfolio/blog theme ("Structural minimalism for careful digital work") combining a works…](/website-templates/keel/) * [](/website-templates/starfolio/) ### [Starfolio](/website-templates/starfolio/) [A developer portfolio template with an integrated blog, resume/skills data, and MDX support for showcasing work and…](/website-templates/starfolio/) ## Make it yours Start with this website template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-haze-website) --- # John Doe Portfolio > A personal portfolio template for a product designer/frontend engineer, showcasing work case studies, an about page, and availability status. [← Website Templates](/website-templates/) Template preview Website  Template type Website Designed for Modern web browsers Preview gallery 7 visual previews ## Who the John Doe Portfolio template is for Product designers and frontend engineers seeking a focused personal site for work, background, and availability. ## What’s included * ✓ Work showcase organized around individual case studies * ✓ About page for experience and professional positioning * ✓ Availability status for freelance or full-time opportunities ## Explore the John Doe Portfolio design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  ## What you can build with John Doe Portfolio * → Launch a product design portfolio * → Present frontend projects through concise case studies * → Create a personal hiring page with current availability ## More Website Templates [Browse all websites](/website-templates/) * [](/website-templates/alba/) ### [Alba](/website-templates/alba/) [A designer portfolio template with project case studies, resume, and about pages for showcasing creative work](/website-templates/alba/) * [](/website-templates/decap-cms-portfolio/) ### [Decap CMS Portfolio](/website-templates/decap-cms-portfolio/) [A personal portfolio and blog template with project showcases, integrated with Decap CMS for content editing](/website-templates/decap-cms-portfolio/) * [](/website-templates/keel/) ### [Keel](/website-templates/keel/) [A structural, minimalist portfolio/blog theme ("Structural minimalism for careful digital work") combining a works…](/website-templates/keel/) ## Make it yours Start with this website template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-john-doe-portfolio-website) --- # Keel > A structural, minimalist portfolio/blog theme ("Structural minimalism for careful digital work") combining a works showcase, blog with tags, and search. [← Website Templates](/website-templates/) Template preview Website  Template type Website Designed for Modern web browsers Preview gallery 10 visual previews ## Who the Keel template is for Designers, developers, and careful digital craftspeople who want a restrained portfolio and writing site. ## What’s included * ✓ Structural minimalist design that keeps projects and writing central * ✓ Works showcase for selected professional or personal projects * ✓ Tagged blog with search and dark-theme support ## Explore the Keel design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  *  *  *  ## What you can build with Keel * → Publish a minimal digital-product portfolio * → Combine selected work with essays and process notes * → Create a searchable personal site with a disciplined visual system ## More Website Templates [Browse all websites](/website-templates/) * [](/website-templates/sify/) ### [Sify](/website-templates/sify/) [A feature-rich personal blog with series, archive, projects, tags, search, and a links page](/website-templates/sify/) * [](/website-templates/8-bit-quest/) ### [8-Bit Quest](/website-templates/8-bit-quest/) [A retro, pixel-art styled personal developer portfolio and blog with a gamified "Player One" theme covering…](/website-templates/8-bit-quest/) * [](/website-templates/decap-cms-portfolio/) ### [Decap CMS Portfolio](/website-templates/decap-cms-portfolio/) [A personal portfolio and blog template with project showcases, integrated with Decap CMS for content editing](/website-templates/decap-cms-portfolio/) ## Make it yours Start with this website template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-keel-website) --- # Kepler > "The versatile Astro theme" — a general-purpose starter combining blog, portfolio/work, and landing-page capabilities with tag browsing and search. [← Website Templates](/website-templates/) Template preview Website  Template type Website Designed for Modern web browsers Preview gallery 4 visual previews ## Who the Kepler template is for Creators and small teams looking for a flexible Astro starting point that can serve as a blog, portfolio, or landing site. ## What’s included * ✓ General-purpose structure spanning blog, work, and landing content * ✓ Tag browsing for organizing articles and project updates * ✓ Built-in search across a versatile minimal theme ## Explore the Kepler design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  ## What you can build with Kepler * → Start a personal site before the final content model is settled * → Combine a portfolio and blog in one flexible theme * → Adapt an Astro starter into a focused product landing site ## More Website Templates [Browse all websites](/website-templates/) * [](/website-templates/sify/) ### [Sify](/website-templates/sify/) [A feature-rich personal blog with series, archive, projects, tags, search, and a links page](/website-templates/sify/) * [](/website-templates/astro-sienna/) ### [Astro Sienna](/website-templates/astro-sienna/) [A clean personal blog template ("Astro Sienna") with posts, tags, an about page, and a project showcase section](/website-templates/astro-sienna/) * [](/website-templates/keel/) ### [Keel](/website-templates/keel/) [A structural, minimalist portfolio/blog theme ("Structural minimalism for careful digital work") combining a works…](/website-templates/keel/) ## Make it yours Start with this website template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-kepler-website) --- # Landing Page > Product landing site with a hero, feature and how-it-works sections, pricing, testimonials, FAQ, sign-up and login forms, and legal pages. [← Website Templates](/website-templates/) Template preview Website  Template type Website Designed for Modern web browsers Preview gallery 3 visual previews ## Who the Landing Page template is for Startup founders and product teams building a complete marketing funnel for a software or digital service. ## What’s included * ✓ Hero, feature, and how-it-works sections for product explanation * ✓ Pricing, testimonials, and FAQ content for evaluation * ✓ Sign-up, login, and legal pages for a complete launch foundation ## Explore the Landing Page design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  ## What you can build with Landing Page * → Launch a SaaS or digital-product marketing site * → Test positioning and pricing for a new product * → Create an acquisition funnel with authentication entry points ## More Website Templates [Browse all websites](/website-templates/) * [](/website-templates/powerai/) ### [PowerAI](/website-templates/powerai/) [An AI SaaS marketing site template with pricing, features, integrations, case studies, careers, changelog, blog,…](/website-templates/powerai/) * [](/website-templates/zenix/) ### [Zenix](/website-templates/zenix/) [A SaaS marketing site with pricing, changelog, authentication pages, blog, and built-in site search](/website-templates/zenix/) * [](/website-templates/cloudflare-style-saas-site/) ### [Cloudflare-Style SaaS Site](/website-templates/cloudflare-style-saas-site/) [A multi-page marketing template for a tech/SaaS product (performance, content, growth features), with pricing,…](/website-templates/cloudflare-style-saas-site/) ## Make it yours Start with this website template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-landing-page-website) --- # Lipi > A minimalist personal blog and writing platform template with archive, tags, and paginated posts. [← Website Templates](/website-templates/) Template preview Website  Template type Website Designed for Modern web browsers Preview gallery 10 visual previews ## Who the Lipi template is for Essayists, bloggers, and independent writers who want a quiet, minimal home for long-form work. ## What’s included * ✓ Content-first article design for comfortable reading * ✓ Chronological archive for navigating older posts * ✓ Tags and pagination for organizing a growing publication ## Explore the Lipi design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  *  *  *  ## What you can build with Lipi * → Start a personal essay or writing blog * → Publish a long-running archive of posts * → Organize writing by topic without a complex magazine layout ## More Website Templates [Browse all websites](/website-templates/) * [](/website-templates/lonetrail/) ### [Lonetrail](/website-templates/lonetrail/) [A personal blog template with post series, tags, categories, and an archive for long-form writing](/website-templates/lonetrail/) * [](/website-templates/zahit/) ### [Zahit](/website-templates/zahit/) [A personal blog template with an archive, tag browsing, and RSS feed for long-form posts](/website-templates/zahit/) * [](/website-templates/astro-sienna/) ### [Astro Sienna](/website-templates/astro-sienna/) [A clean personal blog template ("Astro Sienna") with posts, tags, an about page, and a project showcase section](/website-templates/astro-sienna/) ## Make it yours Start with this website template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-lipi-website) --- # LogFlow > A compact Astro theme for writing and publishing, with a blog organized by collections, years, tags, and a friends/links page. [← Website Templates](/website-templates/) Template preview Website  Template type Website Designed for Modern web browsers Preview gallery 6 visual previews ## Who the LogFlow template is for Developers and independent writers publishing notes, changelogs, or compact technical articles. ## What’s included * ✓ Blog organized by collections, years, and tags * ✓ Friends and links page for community references * ✓ Compact publishing theme with RSS support ## Explore the LogFlow design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  ## What you can build with LogFlow * → Publish a technical blog or developer notebook * → Maintain a public changelog and project journal * → Create a personal writing site with curated links ## More Website Templates [Browse all websites](/website-templates/) * [](/website-templates/astro-sienna/) ### [Astro Sienna](/website-templates/astro-sienna/) [A clean personal blog template ("Astro Sienna") with posts, tags, an about page, and a project showcase section](/website-templates/astro-sienna/) * [](/website-templates/capsulex/) ### [CapsuleX](/website-templates/capsulex/) [A minimal personal blog theme with capsule-shaped floating navigation, automatic dark/light mode, fast page…](/website-templates/capsulex/) * [](/website-templates/chirping/) ### [Chirping](/website-templates/chirping/) [A feature-rich personal blog template with pagination, tags, categories, archives, and a privacy page](/website-templates/chirping/) ## Make it yours Start with this website template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-logflow-website) --- # Lonetrail > A personal blog template with post series, tags, categories, and an archive for long-form writing. [← Website Templates](/website-templates/) Template preview Website  Template type Website Designed for Modern web browsers Preview gallery 10 visual previews ## Who the Lonetrail template is for Long-form writers and independent bloggers who organize related posts into ongoing series. ## What’s included * ✓ Post series for connecting multi-part long-form writing * ✓ Tags and categories for topical discovery * ✓ Chronological archive for navigating the complete publication ## Explore the Lonetrail design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  *  *  *  ## What you can build with Lonetrail * → Publish serialized essays or tutorials * → Build a personal blog with several content taxonomies * → Create a durable archive for long-form writing ## More Website Templates [Browse all websites](/website-templates/) * [](/website-templates/lipi/) ### [Lipi](/website-templates/lipi/) [A minimalist personal blog and writing platform template with archive, tags, and paginated posts](/website-templates/lipi/) * [](/website-templates/zahit/) ### [Zahit](/website-templates/zahit/) [A personal blog template with an archive, tag browsing, and RSS feed for long-form posts](/website-templates/zahit/) * [](/website-templates/refined-x/) ### [Refined X](/website-templates/refined-x/) [A sophisticated personal writing/blog platform organizing content into date-scoped articles, topical series, Q\&A…](/website-templates/refined-x/) ## Make it yours Start with this website template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-lonetrail-website) --- # Lotus Docs > A documentation site starter built on the Astro Theme Lotus package, with sidebar navigation, guides, and local search. [← Website Templates](/website-templates/) Template preview Website  Template type Website Designed for Modern web browsers Preview gallery 4 visual previews ## Who the Lotus Docs template is for Product teams and open-source maintainers who need a straightforward documentation starter with familiar navigation. ## What’s included * ✓ Sidebar navigation for guides and reference sections * ✓ Local search for quickly finding documentation content * ✓ Astro Theme Lotus foundation with MDX-ready structure ## Explore the Lotus Docs design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  ## What you can build with Lotus Docs * → Launch documentation for a product or library * → Create a searchable implementation guide * → Build a lightweight knowledge base from MDX content ## More Website Templates [Browse all websites](/website-templates/) * [](/website-templates/starlight-black/) ### [Starlight Black](/website-templates/starlight-black/) [A dark-themed documentation site built on Astro Starlight, using Markdown/MDX content collections for structured docs](/website-templates/starlight-black/) * [](/website-templates/astro-stardrive/) ### [Astro Stardrive](/website-templates/astro-stardrive/) [A polished, documentation-and-marketing SaaS/product template with docs, integrations, pricing, FAQ, blog, and…](/website-templates/astro-stardrive/) * [](/website-templates/blog/) ### [Blog](/website-templates/blog/) [Feature-rich publishing site with Markdown and MDX posts, galleries, full-text search, archives, tags, RSS,…](/website-templates/blog/) ## Make it yours Start with this website template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-lotus-docs-website) --- # Manduca > A link-in-bio style single-page profile with simple markdown content pages (fish, cakes, meat) for a personal hub. [← Website Templates](/website-templates/) Template preview Website  Template type Website Designed for Modern web browsers Preview gallery 5 visual previews ## Who the Manduca template is for Creators and individuals who want a playful link-in-bio hub with a few lightweight content pages. ## What’s included * ✓ Single-page profile and link hub for a concise personal presence * ✓ Simple Markdown content pages for interests or collections * ✓ Minimal structure that is easy to adapt to a personal identity ## Explore the Manduca design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  ## What you can build with Manduca * → Create a custom link-in-bio homepage * → Publish a small profile site with interest pages * → Replace a hosted profile service with an owned personal hub ## More Website Templates [Browse all websites](/website-templates/) * [](/website-templates/resume-minimal/) ### [Resume Minimal](/website-templates/resume-minimal/) [A single-page minimalist online resume/CV template](/website-templates/resume-minimal/) * [](/website-templates/alba/) ### [Alba](/website-templates/alba/) [A designer portfolio template with project case studies, resume, and about pages for showcasing creative work](/website-templates/alba/) * [](/website-templates/bento-blog/) ### [Bento Blog](/website-templates/bento-blog/) [A minimalist blog template using a bento-grid layout for posts, tags, and pagination, with a built-in post editor page](/website-templates/bento-blog/) ## Make it yours Start with this website template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-manduca-website) --- # Medicsare > A healthcare/medical practice marketing site featuring doctor profiles, services, and pricing pages. [← Website Templates](/website-templates/) Template preview Website  Template type Website Designed for Modern web browsers Preview gallery 10 visual previews ## Who the Medicsare template is for Clinics, medical practices, and healthcare service teams presenting providers, services, and pricing online. ## What’s included * ✓ Doctor profiles for introducing care providers * ✓ Service pages for explaining available treatments and care * ✓ Pricing content within a professional healthcare marketing site ## Explore the Medicsare design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  *  *  *  ## What you can build with Medicsare * → Launch a website for a medical practice * → Create service landing pages for a healthcare provider * → Publish doctor information and transparent pricing ## More Website Templates [Browse all websites](/website-templates/) * [](/website-templates/apex-services/) ### [Apex Services](/website-templates/apex-services/) [A professional services marketing site with a sidebar layout, dedicated service pages, blog, and projects showcase](/website-templates/apex-services/) * [](/website-templates/viva-medical/) ### [Viva Medical](/website-templates/viva-medical/) [A healthcare-at-home service site with pages for services, careers, professional care, specialized support, and 24/7…](/website-templates/viva-medical/) * [](/website-templates/cloudflare-style-saas-site/) ### [Cloudflare-Style SaaS Site](/website-templates/cloudflare-style-saas-site/) [A multi-page marketing template for a tech/SaaS product (performance, content, growth features), with pricing,…](/website-templates/cloudflare-style-saas-site/) ## Make it yours Start with this website template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-medicsare-website) --- # Misthaven > A calm, minimalist Astro blog theme with light/dark themes, post search, tags, comments (Artalk), and i18n support. [← Website Templates](/website-templates/) Template preview Website  Template type Website Designed for Modern web browsers Preview gallery 5 visual previews ## Who the Misthaven template is for Writers and international creators who want a calm personal blog with discussion and multilingual support. ## What’s included * ✓ Light and dark themes for a comfortable reading experience * ✓ Post search and tags for content discovery * ✓ Artalk comments and internationalization support ## Explore the Misthaven design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  ## What you can build with Misthaven * → Launch a multilingual personal blog * → Publish articles with an integrated comment community * → Create a searchable writing site with automatic theme options ## More Website Templates [Browse all websites](/website-templates/) * [](/website-templates/keel/) ### [Keel](/website-templates/keel/) [A structural, minimalist portfolio/blog theme ("Structural minimalism for careful digital work") combining a works…](/website-templates/keel/) * [](/website-templates/8-bit-quest/) ### [8-Bit Quest](/website-templates/8-bit-quest/) [A retro, pixel-art styled personal developer portfolio and blog with a gamified "Player One" theme covering…](/website-templates/8-bit-quest/) * [](/website-templates/bento-blog/) ### [Bento Blog](/website-templates/bento-blog/) [A minimalist blog template using a bento-grid layout for posts, tags, and pagination, with a built-in post editor page](/website-templates/bento-blog/) ## Make it yours Start with this website template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-misthaven-website) --- # Monograph > A full-featured blog/publication theme with categories, authors, search, and sitemap/RSS support. [← Website Templates](/website-templates/) Template preview Website  Template type Website Designed for Modern web browsers Preview gallery 10 visual previews ## Who the Monograph template is for Editorial teams and independent publishers building a structured publication with multiple contributors and topics. ## What’s included * ✓ Category archives for organizing publication topics * ✓ Author pages for a multi-contributor editorial team * ✓ Search, sitemap, and RSS support for discovery and distribution ## Explore the Monograph design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  *  *  *  ## What you can build with Monograph * → Launch a company or community publication * → Build a multi-author blog with topic archives * → Migrate an editorial site that needs search and feed support ## More Website Templates [Browse all websites](/website-templates/) * [](/website-templates/casper/) ### [Casper](/website-templates/casper/) [A classic multi-author blog and publication template with author and tag archive pages, modeled on the popular Ghost…](/website-templates/casper/) * [](/website-templates/palette/) ### [Palette](/website-templates/palette/) [A minimal Astro theme for personal sites and blogs, with content collections, tag pages, RSS, and Pagefind search](/website-templates/palette/) * [](/website-templates/simple-blog/) ### [Simple Blog](/website-templates/simple-blog/) [Minimal content-first blog with Markdown and MDX posts, search, tags, archives, RSS, generated social images, and…](/website-templates/simple-blog/) ## Make it yours Start with this website template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-monograph-website) --- # Music > Music discovery interface with playlists, track tables, play and like controls, playlist detail pages, responsive navigation, and theme switching. [← Website Templates](/website-templates/) Template preview Website  Template type Website Designed for Modern web browsers Preview gallery 3 visual previews ## Who the Music template is for Music product teams and entertainment creators prototyping a browser-based discovery or streaming interface. ## What’s included * ✓ Playlist discovery with responsive navigation * ✓ Track tables with play and like controls * ✓ Playlist detail pages and theme switching ## Explore the Music design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  ## What you can build with Music * → Prototype a music streaming web experience * → Build a playlist discovery and curation product * → Create an interactive interface for a music catalog ## More Website Templates [Browse all websites](/website-templates/) * [](/website-templates/sr-studio/) ### [SR Studio](/website-templates/sr-studio/) [A movie directory site listing films by category with individual movie detail pages and contact/about pages](/website-templates/sr-studio/) * [](/website-templates/8-bit-quest/) ### [8-Bit Quest](/website-templates/8-bit-quest/) [A retro, pixel-art styled personal developer portfolio and blog with a gamified "Player One" theme covering…](/website-templates/8-bit-quest/) * [](/website-templates/academic-portfolio/) ### [Academic Portfolio](/website-templates/academic-portfolio/) [A scholarly personal site template with sections for publications, talks, teaching, a CV, and a blog, aimed at…](/website-templates/academic-portfolio/) ## Make it yours Start with this website template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-music-website) --- # MyScholar > An academic personal site for researchers featuring publications, people/collaborators, projects, and a blog. [← Website Templates](/website-templates/) Template preview Website  Template type Website Designed for Modern web browsers Preview gallery 3 visual previews ## Who the MyScholar template is for Researchers, research groups, and academic professionals presenting publications, collaborators, and active work. ## What’s included * ✓ Publication library for scholarly output * ✓ People and collaborator pages for research networks * ✓ Projects and blog sections for ongoing work and updates ## Explore the MyScholar design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  ## What you can build with MyScholar * → Launch a researcher or lab website * → Publish a portfolio of academic projects and papers * → Present collaborators and research updates in one site ## More Website Templates [Browse all websites](/website-templates/) * [](/website-templates/academic-portfolio/) ### [Academic Portfolio](/website-templates/academic-portfolio/) [A scholarly personal site template with sections for publications, talks, teaching, a CV, and a blog, aimed at…](/website-templates/academic-portfolio/) * [](/website-templates/scholars/) ### [Scholars](/website-templates/scholars/) [Customizable Astro theme for academic and research portfolios, with pages for research, teaching, projects, and posts](/website-templates/scholars/) * [](/website-templates/8-bit-quest/) ### [8-Bit Quest](/website-templates/8-bit-quest/) [A retro, pixel-art styled personal developer portfolio and blog with a gamified "Player One" theme covering…](/website-templates/8-bit-quest/) ## Make it yours Start with this website template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-myscholar-website) --- # Navfolio > A developer portfolio combined with a notebook-style blog featuring series, archives, tags, and categories. [← Website Templates](/website-templates/) Template preview Website  Template type Website Designed for Modern web browsers Preview gallery 7 visual previews ## Who the Navfolio template is for Developers and technical creators who want a portfolio paired with a notebook-style publishing system. ## What’s included * ✓ Developer portfolio for selected projects and work * ✓ Notebook-style blog with post series * ✓ Archives, tags, and categories for deep content organization ## Explore the Navfolio design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  ## What you can build with Navfolio * → Publish a developer portfolio and technical notebook * → Create multi-part tutorial or project series * → Organize a large personal writing archive by topic and date ## More Website Templates [Browse all websites](/website-templates/) * [](/website-templates/sify/) ### [Sify](/website-templates/sify/) [A feature-rich personal blog with series, archive, projects, tags, search, and a links page](/website-templates/sify/) * [](/website-templates/8-bit-quest/) ### [8-Bit Quest](/website-templates/8-bit-quest/) [A retro, pixel-art styled personal developer portfolio and blog with a gamified "Player One" theme covering…](/website-templates/8-bit-quest/) * [](/website-templates/lonetrail/) ### [Lonetrail](/website-templates/lonetrail/) [A personal blog template with post series, tags, categories, and an archive for long-form writing](/website-templates/lonetrail/) ## Make it yours Start with this website template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-navfolio-website) --- # Ombra > A fine-dining restaurant template showcasing a chef's tasting menu on a single elegant landing page. [← Website Templates](/website-templates/) Template preview Website  Template type Website Designed for Modern web browsers Preview gallery 3 visual previews ## Who the Ombra template is for Chefs, fine-dining restaurants, and hospitality teams presenting a focused tasting-menu experience. ## What’s included * ✓ Elegant single-page layout for a premium restaurant identity * ✓ Chef and tasting-menu presentation for the core dining experience * ✓ Food-focused visual treatment designed for a concise landing page ## Explore the Ombra design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  ## What you can build with Ombra * → Launch a website for a fine-dining restaurant * → Promote a seasonal chef's tasting menu * → Create a focused landing page for a hospitality concept ## More Website Templates [Browse all websites](/website-templates/) * [](/website-templates/the-alpine-loaf/) ### [The Alpine Loaf](/website-templates/the-alpine-loaf/) [A local-business template for an artisan bakery, driven by a single config file covering identity, business hours,…](/website-templates/the-alpine-loaf/) * [](/website-templates/aeon-space-agency/) ### [Aeon Space Agency](/website-templates/aeon-space-agency/) [A marketing/informational site template for a space agency, featuring missions, departures, technology, science,…](/website-templates/aeon-space-agency/) * [](/website-templates/cloudflare-style-saas-site/) ### [Cloudflare-Style SaaS Site](/website-templates/cloudflare-style-saas-site/) [A multi-page marketing template for a tech/SaaS product (performance, content, growth features), with pricing,…](/website-templates/cloudflare-style-saas-site/) ## Make it yours Start with this website template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-ombra-website) --- # Palette > A minimal Astro theme for personal sites and blogs, with content collections, tag pages, RSS, and Pagefind search. [← Website Templates](/website-templates/) Template preview Website  Template type Website Designed for Modern web browsers Preview gallery 2 visual previews ## Who the Palette template is for Writers and makers looking for a lightweight personal site with reliable publishing and discovery essentials. ## What’s included * ✓ Astro content collections for structured posts * ✓ Tag pages and RSS for topic browsing and subscriptions * ✓ Pagefind search in a minimal personal-site theme ## Explore the Palette design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  ## What you can build with Palette * → Start a searchable personal blog * → Publish tagged notes with an RSS feed * → Build a minimal Astro site around content collections ## More Website Templates [Browse all websites](/website-templates/) * [](/website-templates/sify/) ### [Sify](/website-templates/sify/) [A feature-rich personal blog with series, archive, projects, tags, search, and a links page](/website-templates/sify/) * [](/website-templates/tone/) ### [Tone](/website-templates/tone/) [A minimal personal blog with a searchable posts listing, RSS feed, and about page](/website-templates/tone/) * [](/website-templates/zahit/) ### [Zahit](/website-templates/zahit/) [A personal blog template with an archive, tag browsing, and RSS feed for long-form posts](/website-templates/zahit/) ## Make it yours Start with this website template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-palette-website) --- # Patrika > "A field notebook, kept in the open" — a slow, personal-writing theme organizing content into essays, notes, and a chronological archive. [← Website Templates](/website-templates/) Template preview Website  Template type Website Designed for Modern web browsers Preview gallery 10 visual previews ## Who the Patrika template is for Essayists and reflective writers who want a public field notebook for slow, personal publishing. ## What’s included * ✓ Separate formats for essays and shorter notes * ✓ Chronological archive for browsing the complete notebook * ✓ Restrained editorial design centered on personal writing ## Explore the Patrika design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  *  *  *  ## What you can build with Patrika * → Publish a personal field notebook * → Separate polished essays from shorter working notes * → Create a chronological public journal ## More Website Templates [Browse all websites](/website-templates/) * [](/website-templates/refined-x/) ### [Refined X](/website-templates/refined-x/) [A sophisticated personal writing/blog platform organizing content into date-scoped articles, topical series, Q\&A…](/website-templates/refined-x/) * [](/website-templates/astro-sienna/) ### [Astro Sienna](/website-templates/astro-sienna/) [A clean personal blog template ("Astro Sienna") with posts, tags, an about page, and a project showcase section](/website-templates/astro-sienna/) * [](/website-templates/chirping/) ### [Chirping](/website-templates/chirping/) [A feature-rich personal blog template with pagination, tags, categories, archives, and a privacy page](/website-templates/chirping/) ## Make it yours Start with this website template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-patrika-website) --- # Personal Portfolio > Responsive personal portfolio with hero, about, education, experience, projects, contact links, and light and dark themes. [← Website Templates](/website-templates/) Template preview Website  Template type Website Designed for Modern web browsers Preview gallery 3 visual previews ## Who the Personal Portfolio template is for Professionals, developers, and job seekers creating a complete personal portfolio and online resume. ## What’s included * ✓ Hero and about sections for a clear personal introduction * ✓ Education, experience, and project sections for career history * ✓ Contact links with light and dark theme support ## Explore the Personal Portfolio design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  ## What you can build with Personal Portfolio * → Launch an online resume and professional profile * → Showcase projects while applying for roles * → Create a personal homepage with career history and contact links ## More Website Templates [Browse all websites](/website-templates/) * [](/website-templates/projects-portfolio/) ### [Projects Portfolio](/website-templates/projects-portfolio/) [A minimal developer portfolio template (sample persona "Alex Morgan") with a homepage and dedicated projects page](/website-templates/projects-portfolio/) * [](/website-templates/portfolio-theme/) ### [Portfolio Theme](/website-templates/portfolio-theme/) [A minimal single-page developer portfolio template with just a homepage plus terms and privacy pages](/website-templates/portfolio-theme/) * [](/website-templates/starfolio/) ### [Starfolio](/website-templates/starfolio/) [A developer portfolio template with an integrated blog, resume/skills data, and MDX support for showcasing work and…](/website-templates/starfolio/) ## Make it yours Start with this website template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-personal-portfolio-website) --- # Photo Folio > A photographer's portfolio template with image galleries, calendar, and a blog split into photography/tech categories. [← Website Templates](/website-templates/) Template preview Website  Template type Website Designed for Modern web browsers Preview gallery 10 visual previews ## Who the Photo Folio template is for Photographers and visual artists presenting galleries, availability, and writing in one polished portfolio. ## What’s included * ✓ Image galleries for photography collections and selected work * ✓ Calendar for availability, events, or scheduled sessions * ✓ Blog divided into photography and technology categories ## Explore the Photo Folio design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  *  *  *  ## What you can build with Photo Folio * → Launch a professional photography portfolio * → Publish image stories and behind-the-scenes articles * → Share availability alongside galleries and editorial content ## More Website Templates [Browse all websites](/website-templates/) * [](/website-templates/academic-portfolio/) ### [Academic Portfolio](/website-templates/academic-portfolio/) [A scholarly personal site template with sections for publications, talks, teaching, a CV, and a blog, aimed at…](/website-templates/academic-portfolio/) * [](/website-templates/alba/) ### [Alba](/website-templates/alba/) [A designer portfolio template with project case studies, resume, and about pages for showcasing creative work](/website-templates/alba/) * [](/website-templates/astro-sienna/) ### [Astro Sienna](/website-templates/astro-sienna/) [A clean personal blog template ("Astro Sienna") with posts, tags, an about page, and a project showcase section](/website-templates/astro-sienna/) ## Make it yours Start with this website template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-photo-folio-website) --- # Portfolio Theme > A minimal single-page developer portfolio template with just a homepage plus terms and privacy pages. [← Website Templates](/website-templates/) Template preview Website  Template type Website Designed for Modern web browsers Preview gallery 2 visual previews ## Who the Portfolio Theme template is for Developers and early-career professionals who need a compact portfolio without a large content structure. ## What’s included * ✓ Focused single-page developer portfolio * ✓ Minimal personal presentation for projects and background * ✓ Terms and privacy pages for a complete public site foundation ## Explore the Portfolio Theme design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  ## What you can build with Portfolio Theme * → Launch a concise developer homepage * → Create a minimal portfolio for job applications * → Publish a simple professional profile with required legal pages ## More Website Templates [Browse all websites](/website-templates/) * [](/website-templates/projects-portfolio/) ### [Projects Portfolio](/website-templates/projects-portfolio/) [A minimal developer portfolio template (sample persona "Alex Morgan") with a homepage and dedicated projects page](/website-templates/projects-portfolio/) * [](/website-templates/starfolio/) ### [Starfolio](/website-templates/starfolio/) [A developer portfolio template with an integrated blog, resume/skills data, and MDX support for showcasing work and…](/website-templates/starfolio/) * [](/website-templates/alba/) ### [Alba](/website-templates/alba/) [A designer portfolio template with project case studies, resume, and about pages for showcasing creative work](/website-templates/alba/) ## Make it yours Start with this website template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-portfolio-theme-website) --- # PowerAI > An AI SaaS marketing site template with pricing, features, integrations, case studies, careers, changelog, blog, login and sign-up pages. [← Website Templates](/website-templates/) Template preview Website  Template type Website Designed for Modern web browsers Preview gallery 10 visual previews ## Who the PowerAI template is for AI startups and SaaS teams that need a broad marketing site for acquisition, trust, and product education. ## What’s included * ✓ Feature, integration, pricing, and case-study pages * ✓ Careers, changelog, and blog sections for company growth * ✓ Login and sign-up pages that connect marketing to product entry ## Explore the PowerAI design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  *  *  *  ## What you can build with PowerAI * → Launch an AI SaaS marketing website * → Create a complete acquisition site for a software startup * → Publish product updates, case studies, and integration content ## More Website Templates [Browse all websites](/website-templates/) * [](/website-templates/cloudflare-style-saas-site/) ### [Cloudflare-Style SaaS Site](/website-templates/cloudflare-style-saas-site/) [A multi-page marketing template for a tech/SaaS product (performance, content, growth features), with pricing,…](/website-templates/cloudflare-style-saas-site/) * [](/website-templates/landing-page/) ### [Landing Page](/website-templates/landing-page/) [Product landing site with a hero, feature and how-it-works sections, pricing, testimonials, FAQ, sign-up and login…](/website-templates/landing-page/) * [](/website-templates/zeepay/) ### [Zeepay](/website-templates/zeepay/) [A fintech payments marketing site with pricing, sign-up, login, blog, and a video library for product education](/website-templates/zeepay/) ## Make it yours Start with this website template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-powerai-website) --- # ProCleaning > A business website template for a professional home and office cleaning service, with team, service, and blog pages. [← Website Templates](/website-templates/) Template preview Website  Template type Website Designed for Modern web browsers Preview gallery 6 visual previews ## Who the ProCleaning template is for Residential and commercial cleaning companies building a credible local-service marketing presence. ## What’s included * ✓ Service pages for home and office cleaning offerings * ✓ Team content for introducing the people behind the business * ✓ Blog section for advice, updates, and local acquisition content ## Explore the ProCleaning design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  ## What you can build with ProCleaning * → Launch a website for a cleaning company * → Create landing pages for individual local services * → Publish practical cleaning content to support customer acquisition ## More Website Templates [Browse all websites](/website-templates/) * [](/website-templates/apex-services/) ### [Apex Services](/website-templates/apex-services/) [A professional services marketing site with a sidebar layout, dedicated service pages, blog, and projects showcase](/website-templates/apex-services/) * [](/website-templates/cloudflare-style-saas-site/) ### [Cloudflare-Style SaaS Site](/website-templates/cloudflare-style-saas-site/) [A multi-page marketing template for a tech/SaaS product (performance, content, growth features), with pricing,…](/website-templates/cloudflare-style-saas-site/) * [](/website-templates/8-bit-quest/) ### [8-Bit Quest](/website-templates/8-bit-quest/) [A retro, pixel-art styled personal developer portfolio and blog with a gamified "Player One" theme covering…](/website-templates/8-bit-quest/) ## Make it yours Start with this website template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-procleaning-website) --- # Projects Portfolio > A minimal developer portfolio template (sample persona "Alex Morgan") with a homepage and dedicated projects page. [← Website Templates](/website-templates/) Template preview Website  Template type Website Designed for Modern web browsers Preview gallery 3 visual previews ## Who the Projects Portfolio template is for Developers and students who want a compact portfolio centered on a selected set of projects. ## What’s included * ✓ Minimal homepage for a concise personal introduction * ✓ Dedicated projects page for selected development work * ✓ Resume-oriented structure that is easy to personalize ## Explore the Projects Portfolio design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  ## What you can build with Projects Portfolio * → Launch a first developer portfolio * → Present coding projects for internship or job applications * → Create a simple personal site without maintaining a blog ## More Website Templates [Browse all websites](/website-templates/) * [](/website-templates/portfolio-theme/) ### [Portfolio Theme](/website-templates/portfolio-theme/) [A minimal single-page developer portfolio template with just a homepage plus terms and privacy pages](/website-templates/portfolio-theme/) * [](/website-templates/personal-portfolio/) ### [Personal Portfolio](/website-templates/personal-portfolio/) [Responsive personal portfolio with hero, about, education, experience, projects, contact links, and light and dark…](/website-templates/personal-portfolio/) * [](/website-templates/starfolio/) ### [Starfolio](/website-templates/starfolio/) [A developer portfolio template with an integrated blog, resume/skills data, and MDX support for showcasing work and…](/website-templates/starfolio/) ## Make it yours Start with this website template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-projects-portfolio-website) --- # Public Portfolio > A personal portfolio template with a project showcase, detail pages for individual projects, and a blog. [← Website Templates](/website-templates/) Template preview Website  Template type Website Designed for Modern web browsers Preview gallery 7 visual previews ## Who the Public Portfolio template is for Creative professionals and developers who want to explain individual projects and publish related writing. ## What’s included * ✓ Project showcase with dedicated detail pages * ✓ Personal portfolio structure for selected work * ✓ Integrated blog for articles and project updates ## Explore the Public Portfolio design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  ## What you can build with Public Portfolio * → Publish a portfolio with in-depth project pages * → Explain process and outcomes through case studies * → Combine professional work with a personal blog ## More Website Templates [Browse all websites](/website-templates/) * [](/website-templates/decap-cms-portfolio/) ### [Decap CMS Portfolio](/website-templates/decap-cms-portfolio/) [A personal portfolio and blog template with project showcases, integrated with Decap CMS for content editing](/website-templates/decap-cms-portfolio/) * [](/website-templates/astro-sienna/) ### [Astro Sienna](/website-templates/astro-sienna/) [A clean personal blog template ("Astro Sienna") with posts, tags, an about page, and a project showcase section](/website-templates/astro-sienna/) * [](/website-templates/keel/) ### [Keel](/website-templates/keel/) [A structural, minimalist portfolio/blog theme ("Structural minimalism for careful digital work") combining a works…](/website-templates/keel/) ## Make it yours Start with this website template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-public-portfolio-website) --- # Pulsar Lite > A lightweight technical blog template designed for an engineering team to publish articles. [← Website Templates](/website-templates/) Template preview Website  Template type Website Designed for Modern web browsers Preview gallery 4 visual previews ## Who the Pulsar Lite template is for Engineering teams and developer-focused companies publishing technical articles under a shared brand. ## What’s included * ✓ Lightweight technical publication layout * ✓ Team-oriented structure for engineering articles * ✓ Minimal presentation that keeps code and technical writing readable ## Explore the Pulsar Lite design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  ## What you can build with Pulsar Lite * → Launch an engineering team blog * → Publish technical deep dives and architecture notes * → Create a lightweight developer-relations publication ## More Website Templates [Browse all websites](/website-templates/) * [](/website-templates/8-bit-quest/) ### [8-Bit Quest](/website-templates/8-bit-quest/) [A retro, pixel-art styled personal developer portfolio and blog with a gamified "Player One" theme covering…](/website-templates/8-bit-quest/) * [](/website-templates/academic-portfolio/) ### [Academic Portfolio](/website-templates/academic-portfolio/) [A scholarly personal site template with sections for publications, talks, teaching, a CV, and a blog, aimed at…](/website-templates/academic-portfolio/) * [](/website-templates/astro-sienna/) ### [Astro Sienna](/website-templates/astro-sienna/) [A clean personal blog template ("Astro Sienna") with posts, tags, an about page, and a project showcase section](/website-templates/astro-sienna/) ## Make it yours Start with this website template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-pulsar-lite-website) --- # Quietpages > A minimalist multi-author writing and essay blog template with authors, categories, and tag pages. [← Website Templates](/website-templates/) Template preview Website  Template type Website Designed for Modern web browsers Preview gallery 10 visual previews ## Who the Quietpages template is for Writing collectives and editorial teams publishing thoughtful essays from multiple contributors. ## What’s included * ✓ Multi-author structure for a collaborative publication * ✓ Category and tag pages for editorial organization * ✓ Minimal essay-focused reading experience ## Explore the Quietpages design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  *  *  *  ## What you can build with Quietpages * → Launch a multi-author essay publication * → Create a writing collective's online home * → Organize long-form articles by author, category, and tag ## More Website Templates [Browse all websites](/website-templates/) * [](/website-templates/chirping/) ### [Chirping](/website-templates/chirping/) [A feature-rich personal blog template with pagination, tags, categories, archives, and a privacy page](/website-templates/chirping/) * [](/website-templates/astro-sienna/) ### [Astro Sienna](/website-templates/astro-sienna/) [A clean personal blog template ("Astro Sienna") with posts, tags, an about page, and a project showcase section](/website-templates/astro-sienna/) * [](/website-templates/lipi/) ### [Lipi](/website-templates/lipi/) [A minimalist personal blog and writing platform template with archive, tags, and paginated posts](/website-templates/lipi/) ## Make it yours Start with this website template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-quietpages-website) --- # Recruit > A recruitment-agency marketing site ("talent meets opportunity") with a job board (categorized/tagged listings) and a blog. [← Website Templates](/website-templates/) Template preview Website  Template type Website Designed for Modern web browsers Preview gallery 6 visual previews ## Who the Recruit template is for Recruitment agencies, staffing firms, and talent platforms connecting candidates with open roles. ## What’s included * ✓ Recruitment-focused marketing pages for employers and candidates * ✓ Job board with categorized and tagged listings * ✓ Blog for hiring advice, market insight, and company updates ## Explore the Recruit design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  ## What you can build with Recruit * → Launch a recruitment agency website * → Publish and organize open job listings * → Build a talent-focused content and acquisition site ## More Website Templates [Browse all websites](/website-templates/) * [](/website-templates/cloudflare-style-saas-site/) ### [Cloudflare-Style SaaS Site](/website-templates/cloudflare-style-saas-site/) [A multi-page marketing template for a tech/SaaS product (performance, content, growth features), with pricing,…](/website-templates/cloudflare-style-saas-site/) * [](/website-templates/form-and-function-architects/) ### [Form & Function Architects](/website-templates/form-and-function-architects/) [A business site template for an architecture/interior-design studio, featuring a portfolio of projects, an about…](/website-templates/form-and-function-architects/) * [](/website-templates/powerai/) ### [PowerAI](/website-templates/powerai/) [An AI SaaS marketing site template with pricing, features, integrations, case studies, careers, changelog, blog,…](/website-templates/powerai/) ## Make it yours Start with this website template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-recruit-website) --- # Refined X > A sophisticated personal writing/blog platform organizing content into date-scoped articles, topical series, Q&A "answers," and year/month archives. [← Website Templates](/website-templates/) Template preview Website  Template type Website Designed for Modern web browsers Preview gallery 9 visual previews ## Who the Refined X template is for Prolific writers and knowledge workers who need several formats and date-based archives for a deep personal publication. ## What’s included * ✓ Date-scoped article archive with year and month navigation * ✓ Topical series for connected long-form work * ✓ Dedicated answers format for question-and-answer publishing ## Explore the Refined X design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  *  *  ## What you can build with Refined X * → Build a substantial personal knowledge publication * → Publish recurring article series and standalone answers * → Organize years of writing into date-based archives ## More Website Templates [Browse all websites](/website-templates/) * [](/website-templates/logflow/) ### [LogFlow](/website-templates/logflow/) [A compact Astro theme for writing and publishing, with a blog organized by collections, years, tags, and a…](/website-templates/logflow/) * [](/website-templates/lonetrail/) ### [Lonetrail](/website-templates/lonetrail/) [A personal blog template with post series, tags, categories, and an archive for long-form writing](/website-templates/lonetrail/) * [](/website-templates/patrika/) ### [Patrika](/website-templates/patrika/) ["A field notebook, kept in the open" — a slow, personal-writing theme organizing content into essays, notes, and a…](/website-templates/patrika/) ## Make it yours Start with this website template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-refined-x-website) --- # Resume Minimal > A single-page minimalist online resume/CV template. [← Website Templates](/website-templates/) Template preview Website  Template type Website Designed for Modern web browsers Preview gallery 2 visual previews ## Who the Resume Minimal template is for Job seekers, consultants, and professionals who need a clean online resume without extra site sections. ## What’s included * ✓ Single-page curriculum vitae and resume layout * ✓ Minimal presentation focused on experience and skills * ✓ Straightforward structure for fast personalization ## Explore the Resume Minimal design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  ## What you can build with Resume Minimal * → Publish an online resume * → Create a concise profile for consulting opportunities * → Share a web-based CV alongside job applications ## More Website Templates [Browse all websites](/website-templates/) * [](/website-templates/alba/) ### [Alba](/website-templates/alba/) [A designer portfolio template with project case studies, resume, and about pages for showcasing creative work](/website-templates/alba/) * [](/website-templates/john-doe-portfolio/) ### [John Doe Portfolio](/website-templates/john-doe-portfolio/) [A personal portfolio template for a product designer/frontend engineer, showcasing work case studies, an about page,…](/website-templates/john-doe-portfolio/) * [](/website-templates/manduca/) ### [Manduca](/website-templates/manduca/) [A link-in-bio style single-page profile with simple markdown content pages (fish, cakes, meat) for a personal hub](/website-templates/manduca/) ## Make it yours Start with this website template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-resume-minimal-website) --- # RicoUI Starter > A design-system-led Astro starter with a documented visual system, blog, changelog, pricing, and auth screens for SaaS-style sites. [← Website Templates](/website-templates/) Template preview Website  Template type Website Designed for Modern web browsers Preview gallery 8 visual previews ## Who the RicoUI Starter template is for SaaS teams and design-system owners who want a consistent UI foundation across marketing and product-entry pages. ## What’s included * ✓ Documented visual system for consistent components and styling * ✓ Blog, changelog, and pricing pages for SaaS marketing * ✓ Authentication screens that extend the design into product entry ## Explore the RicoUI Starter design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  *  ## What you can build with RicoUI Starter * → Launch a SaaS site from an established visual system * → Prototype a reusable Astro UI kit * → Keep marketing, pricing, updates, and authentication visually aligned ## More Website Templates [Browse all websites](/website-templates/) * [](/website-templates/powerai/) ### [PowerAI](/website-templates/powerai/) [An AI SaaS marketing site template with pricing, features, integrations, case studies, careers, changelog, blog,…](/website-templates/powerai/) * [](/website-templates/zeepay/) ### [Zeepay](/website-templates/zeepay/) [A fintech payments marketing site with pricing, sign-up, login, blog, and a video library for product education](/website-templates/zeepay/) * [](/website-templates/zenix/) ### [Zenix](/website-templates/zenix/) [A SaaS marketing site with pricing, changelog, authentication pages, blog, and built-in site search](/website-templates/zenix/) ## Make it yours Start with this website template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-ricoui-starter-website) --- # Scholars > Customizable Astro theme for academic and research portfolios, with pages for research, teaching, projects, and posts. [← Website Templates](/website-templates/) Template preview Website  Template type Website Designed for Modern web browsers Preview gallery 10 visual previews ## Who the Scholars template is for Researchers, instructors, and graduate students presenting academic work, teaching, and public scholarship. ## What’s included * ✓ Research and publication-oriented portfolio structure * ✓ Teaching pages for courses and instructional work * ✓ Projects and posts for ongoing scholarship and updates ## Explore the Scholars design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  *  *  *  ## What you can build with Scholars * → Launch an academic or researcher portfolio * → Present teaching, research, and publications together * → Create a customizable site for an academic job search ## More Website Templates [Browse all websites](/website-templates/) * [](/website-templates/myscholar/) ### [MyScholar](/website-templates/myscholar/) [An academic personal site for researchers featuring publications, people/collaborators, projects, and a blog](/website-templates/myscholar/) * [](/website-templates/academic-portfolio/) ### [Academic Portfolio](/website-templates/academic-portfolio/) [A scholarly personal site template with sections for publications, talks, teaching, a CV, and a blog, aimed at…](/website-templates/academic-portfolio/) * [](/website-templates/8-bit-quest/) ### [8-Bit Quest](/website-templates/8-bit-quest/) [A retro, pixel-art styled personal developer portfolio and blog with a gamified "Player One" theme covering…](/website-templates/8-bit-quest/) ## Make it yours Start with this website template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-scholars-website) --- # Self Esteem > An editorial magazine and blog template with a studio/work portfolio section and tag-based article browsing. [← Website Templates](/website-templates/) Template preview Website  Template type Website Designed for Modern web browsers Preview gallery 9 visual previews ## Who the Self Esteem template is for Independent magazines, creative studios, and editorial brands publishing articles alongside selected work. ## What’s included * ✓ Editorial magazine layouts for feature articles * ✓ Studio and work portfolio for creative projects * ✓ Tag-based browsing across the article archive ## Explore the Self Esteem design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  *  *  ## What you can build with Self Esteem * → Launch an independent culture or design magazine * → Combine editorial publishing with a studio portfolio * → Organize creative articles around topical tags ## More Website Templates [Browse all websites](/website-templates/) * [](/website-templates/astro-sienna/) ### [Astro Sienna](/website-templates/astro-sienna/) [A clean personal blog template ("Astro Sienna") with posts, tags, an about page, and a project showcase section](/website-templates/astro-sienna/) * [](/website-templates/casper/) ### [Casper](/website-templates/casper/) [A classic multi-author blog and publication template with author and tag archive pages, modeled on the popular Ghost…](/website-templates/casper/) * [](/website-templates/form-and-function-architects/) ### [Form & Function Architects](/website-templates/form-and-function-architects/) [A business site template for an architecture/interior-design studio, featuring a portfolio of projects, an about…](/website-templates/form-and-function-architects/) ## Make it yours Start with this website template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-self-esteem-website) --- # Sidey > A minimalist personal writing and blog template focused on long-form "writings" content. [← Website Templates](/website-templates/) Template preview Website  Template type Website Designed for Modern web browsers Preview gallery 6 visual previews ## Who the Sidey template is for Essayists and personal bloggers who want typography and long-form reading to define the entire experience. ## What’s included * ✓ Long-form writings archive with a focused content model * ✓ Minimal navigation that keeps attention on the text * ✓ Typography-led personal publishing design ## Explore the Sidey design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  ## What you can build with Sidey * → Publish personal essays and long-form writing * → Create a distraction-free author website * → Build a small publication around a single writings format ## More Website Templates [Browse all websites](/website-templates/) * [](/website-templates/lipi/) ### [Lipi](/website-templates/lipi/) [A minimalist personal blog and writing platform template with archive, tags, and paginated posts](/website-templates/lipi/) * [](/website-templates/lonetrail/) ### [Lonetrail](/website-templates/lonetrail/) [A personal blog template with post series, tags, categories, and an archive for long-form writing](/website-templates/lonetrail/) * [](/website-templates/quietpages/) ### [Quietpages](/website-templates/quietpages/) [A minimalist multi-author writing and essay blog template with authors, categories, and tag pages](/website-templates/quietpages/) ## Make it yours Start with this website template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-sidey-website) --- # Sify > A feature-rich personal blog with series, archive, projects, tags, search, and a links page. [← Website Templates](/website-templates/) Template preview Website  Template type Website Designed for Modern web browsers Preview gallery 10 visual previews ## Who the Sify template is for Developers and independent writers maintaining a broad personal site with projects, articles, and curated resources. ## What’s included * ✓ Post series, tags, and archive for structured writing * ✓ Projects section for selected professional or personal work * ✓ Search and links page for discovery across content and resources ## Explore the Sify design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  *  *  *  ## What you can build with Sify * → Launch a developer blog and portfolio * → Publish multi-part technical article series * → Combine projects, writing, and curated links in one personal site ## More Website Templates [Browse all websites](/website-templates/) * [](/website-templates/keel/) ### [Keel](/website-templates/keel/) [A structural, minimalist portfolio/blog theme ("Structural minimalism for careful digital work") combining a works…](/website-templates/keel/) * [](/website-templates/kepler/) ### [Kepler](/website-templates/kepler/) ["The versatile Astro theme" — a general-purpose starter combining blog, portfolio/work, and landing-page…](/website-templates/kepler/) * [](/website-templates/lonetrail/) ### [Lonetrail](/website-templates/lonetrail/) [A personal blog template with post series, tags, categories, and an archive for long-form writing](/website-templates/lonetrail/) ## Make it yours Start with this website template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-sify-website) --- # Simple Blog > Minimal content-first blog with Markdown and MDX posts, search, tags, archives, RSS, generated social images, and light and dark themes. [← Website Templates](/website-templates/) Template preview Website  Template type Website Designed for Modern web browsers Preview gallery 3 visual previews ## Who the Simple Blog template is for Writers and content teams that want a minimal publication without giving up search, feeds, or social-sharing support. ## What’s included * ✓ Markdown and MDX publishing in a content-first layout * ✓ Search, tags, archives, and RSS for content discovery * ✓ Generated social images with light and dark themes ## Explore the Simple Blog design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  ## What you can build with Simple Blog * → Launch a modern personal or company blog * → Publish a searchable Markdown content archive * → Create a lightweight editorial site with feed and social support ## More Website Templates [Browse all websites](/website-templates/) * [](/website-templates/palette/) ### [Palette](/website-templates/palette/) [A minimal Astro theme for personal sites and blogs, with content collections, tag pages, RSS, and Pagefind search](/website-templates/palette/) * [](/website-templates/tone/) ### [Tone](/website-templates/tone/) [A minimal personal blog with a searchable posts listing, RSS feed, and about page](/website-templates/tone/) * [](/website-templates/blog/) ### [Blog](/website-templates/blog/) [Feature-rich publishing site with Markdown and MDX posts, galleries, full-text search, archives, tags, RSS,…](/website-templates/blog/) ## Make it yours Start with this website template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-simple-blog-website) --- # SR Studio > A movie directory site listing films by category with individual movie detail pages and contact/about pages. [← Website Templates](/website-templates/) Template preview Website  Template type Website Designed for Modern web browsers Preview gallery 10 visual previews ## Who the SR Studio template is for Film communities, studios, and entertainment curators building a browsable directory of movies. ## What’s included * ✓ Category-based film listings for catalog discovery * ✓ Individual movie detail pages * ✓ About and contact pages in a dark entertainment-focused design ## Explore the SR Studio design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  *  *  *  ## What you can build with SR Studio * → Launch a curated movie directory * → Build a film catalog for a community or studio * → Prototype an entertainment discovery website ## More Website Templates [Browse all websites](/website-templates/) * [](/website-templates/music/) ### [Music](/website-templates/music/) [Music discovery interface with playlists, track tables, play and like controls, playlist detail pages, responsive…](/website-templates/music/) * [](/website-templates/8-bit-quest/) ### [8-Bit Quest](/website-templates/8-bit-quest/) [A retro, pixel-art styled personal developer portfolio and blog with a gamified "Player One" theme covering…](/website-templates/8-bit-quest/) * [](/website-templates/aeon-space-agency/) ### [Aeon Space Agency](/website-templates/aeon-space-agency/) [A marketing/informational site template for a space agency, featuring missions, departures, technology, science,…](/website-templates/aeon-space-agency/) ## Make it yours Start with this website template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-sr-studio-website) --- # Starfolio > A developer portfolio template with an integrated blog, resume/skills data, and MDX support for showcasing work and writing. [← Website Templates](/website-templates/) Template preview Website  Template type Website Designed for Modern web browsers Preview gallery 3 visual previews ## Who the Starfolio template is for Developers and technical professionals presenting work, skills, and writing through a cohesive personal brand. ## What’s included * ✓ Developer portfolio for projects and selected work * ✓ Integrated blog with MDX support * ✓ Structured resume and skills data for professional context ## Explore the Starfolio design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  ## What you can build with Starfolio * → Launch a developer portfolio with a technical blog * → Present projects, skills, and experience to hiring teams * → Publish rich MDX case studies and articles ## More Website Templates [Browse all websites](/website-templates/) * [](/website-templates/8-bit-quest/) ### [8-Bit Quest](/website-templates/8-bit-quest/) [A retro, pixel-art styled personal developer portfolio and blog with a gamified "Player One" theme covering…](/website-templates/8-bit-quest/) * [](/website-templates/haze/) ### [Haze](/website-templates/haze/) [A designer/developer portfolio template featuring project case studies, a blog with tags, and full-text search](/website-templates/haze/) * [](/website-templates/portfolio-theme/) ### [Portfolio Theme](/website-templates/portfolio-theme/) [A minimal single-page developer portfolio template with just a homepage plus terms and privacy pages](/website-templates/portfolio-theme/) ## Make it yours Start with this website template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-starfolio-website) --- # Starlight Black > A dark-themed documentation site built on Astro Starlight, using Markdown/MDX content collections for structured docs. [← Website Templates](/website-templates/) Template preview Website  Template type Website Designed for Modern web browsers Preview gallery 9 visual previews ## Who the Starlight Black template is for Developer-tool teams and open-source projects that want documentation built on Astro Starlight with a dark visual identity. ## What’s included * ✓ Astro Starlight foundation for structured documentation * ✓ Sidebar navigation across Markdown and MDX content collections * ✓ Dark theme designed for technical guides and reference content ## Explore the Starlight Black design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  *  *  ## What you can build with Starlight Black * → Launch documentation for a developer tool * → Build a dark-themed open-source project site * → Publish structured Markdown and MDX technical content ## More Website Templates [Browse all websites](/website-templates/) * [](/website-templates/lotus-docs/) ### [Lotus Docs](/website-templates/lotus-docs/) [A documentation site starter built on the Astro Theme Lotus package, with sidebar navigation, guides, and local search](/website-templates/lotus-docs/) * [](/website-templates/8-bit-quest/) ### [8-Bit Quest](/website-templates/8-bit-quest/) [A retro, pixel-art styled personal developer portfolio and blog with a gamified "Player One" theme covering…](/website-templates/8-bit-quest/) * [](/website-templates/aeon-space-agency/) ### [Aeon Space Agency](/website-templates/aeon-space-agency/) [A marketing/informational site template for a space agency, featuring missions, departures, technology, science,…](/website-templates/aeon-space-agency/) ## Make it yours Start with this website template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-starlight-black-website) --- # Terminal Blog > Retro terminal-themed blog with articles, tags, RSS, about and error pages, sound effects, theme controls, and an interactive hack game. [← Website Templates](/website-templates/) Template preview Website  Template type Website Designed for Modern web browsers Preview gallery 3 visual previews ## Who the Terminal Blog template is for Developers, hackers, and technical creators who want an interactive terminal-inspired publication. ## What’s included * ✓ Retro terminal presentation with theme controls and sound effects * ✓ Articles, tags, RSS, and author information pages * ✓ Interactive hack game for a playful reader experience ## Explore the Terminal Blog design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  ## What you can build with Terminal Blog * → Launch a distinctive developer blog * → Publish security or programming articles with a retro identity * → Create an interactive personal site with hidden playful details ## More Website Templates [Browse all websites](/website-templates/) * [](/website-templates/8-bit-quest/) ### [8-Bit Quest](/website-templates/8-bit-quest/) [A retro, pixel-art styled personal developer portfolio and blog with a gamified "Player One" theme covering…](/website-templates/8-bit-quest/) * [](/website-templates/capsulex/) ### [CapsuleX](/website-templates/capsulex/) [A minimal personal blog theme with capsule-shaped floating navigation, automatic dark/light mode, fast page…](/website-templates/capsulex/) * [](/website-templates/casper/) ### [Casper](/website-templates/casper/) [A classic multi-author blog and publication template with author and tag archive pages, modeled on the popular Ghost…](/website-templates/casper/) ## Make it yours Start with this website template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-terminal-blog-website) --- # The Alpine Loaf > A local-business template for an artisan bakery, driven by a single config file covering identity, business hours, services, and JSON-LD SEO for… [← Website Templates](/website-templates/) Template preview Website  Template type Website Designed for Modern web browsers Preview gallery 2 visual previews ## Who the The Alpine Loaf template is for Bakeries, cafes, and local food businesses that need a focused, easily configured local-business website. ## What’s included * ✓ Single configuration file for identity, hours, and services * ✓ Focused single-page presentation for an artisan bakery * ✓ LocalBusiness JSON-LD foundation for accurate business details ## Explore the The Alpine Loaf design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  ## What you can build with The Alpine Loaf * → Launch a website for a neighborhood bakery * → Publish hours and services for a local food business * → Create a config-driven landing page with local-business semantics ## More Website Templates [Browse all websites](/website-templates/) * [](/website-templates/manduca/) ### [Manduca](/website-templates/manduca/) [A link-in-bio style single-page profile with simple markdown content pages (fish, cakes, meat) for a personal hub](/website-templates/manduca/) * [](/website-templates/ombra/) ### [Ombra](/website-templates/ombra/) [A fine-dining restaurant template showcasing a chef's tasting menu on a single elegant landing page](/website-templates/ombra/) * [](/website-templates/travellian/) ### [Travellian](/website-templates/travellian/) [A single-page travel agency landing page template showcasing destinations and travel offers](/website-templates/travellian/) ## Make it yours Start with this website template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-the-alpine-loaf-website) --- # Tone > A minimal personal blog with a searchable posts listing, RSS feed, and about page. [← Website Templates](/website-templates/) Template preview Website  Template type Website Designed for Modern web browsers Preview gallery 9 visual previews ## Who the Tone template is for Independent writers seeking a small personal blog with straightforward search and subscription support. ## What’s included * ✓ Minimal personal blog and article layout * ✓ Searchable posts listing for content discovery * ✓ RSS feed and about page for readers and author context ## Explore the Tone design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  *  *  ## What you can build with Tone * → Start a minimal personal blog * → Publish searchable essays and notes * → Create a lightweight writing site with an RSS feed ## More Website Templates [Browse all websites](/website-templates/) * [](/website-templates/palette/) ### [Palette](/website-templates/palette/) [A minimal Astro theme for personal sites and blogs, with content collections, tag pages, RSS, and Pagefind search](/website-templates/palette/) * [](/website-templates/zahit/) ### [Zahit](/website-templates/zahit/) [A personal blog template with an archive, tag browsing, and RSS feed for long-form posts](/website-templates/zahit/) * [](/website-templates/keel/) ### [Keel](/website-templates/keel/) [A structural, minimalist portfolio/blog theme ("Structural minimalism for careful digital work") combining a works…](/website-templates/keel/) ## Make it yours Start with this website template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-tone-website) --- # Travellian > A single-page travel agency landing page template showcasing destinations and travel offers. [← Website Templates](/website-templates/) Template preview Website  Template type Website Designed for Modern web browsers Preview gallery 4 visual previews ## Who the Travellian template is for Travel agencies, tour operators, and destination marketers promoting offers through a focused campaign page. ## What’s included * ✓ Single-page travel agency marketing layout * ✓ Destination showcases for visual trip discovery * ✓ Travel-offer presentation designed for campaign messaging ## Explore the Travellian design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  ## What you can build with Travellian * → Launch a travel agency landing page * → Promote a curated set of destinations * → Create a campaign site for seasonal travel offers ## More Website Templates [Browse all websites](/website-templates/) * [](/website-templates/aeon-space-agency/) ### [Aeon Space Agency](/website-templates/aeon-space-agency/) [A marketing/informational site template for a space agency, featuring missions, departures, technology, science,…](/website-templates/aeon-space-agency/) * [](/website-templates/landing-page/) ### [Landing Page](/website-templates/landing-page/) [Product landing site with a hero, feature and how-it-works sections, pricing, testimonials, FAQ, sign-up and login…](/website-templates/landing-page/) * [](/website-templates/manduca/) ### [Manduca](/website-templates/manduca/) [A link-in-bio style single-page profile with simple markdown content pages (fish, cakes, meat) for a personal hub](/website-templates/manduca/) ## Make it yours Start with this website template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-travellian-website) --- # TUI Portfolio > Terminal UI developer portfolio. [← Website Templates](/website-templates/) Template preview Website  Template type Website Designed for Modern web browsers Preview gallery 3 visual previews ## Who the TUI Portfolio template is for Developers and command-line enthusiasts who want a compact portfolio with a retro terminal interface. ## What’s included * ✓ Terminal UI presentation for a memorable developer identity * ✓ Single-page structure for concise project and profile content * ✓ Retro dark-theme visual language ## Explore the TUI Portfolio design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  ## What you can build with TUI Portfolio * → Launch a terminal-inspired developer portfolio * → Create a concise personal homepage for technical work * → Present projects with a retro command-line aesthetic ## More Website Templates [Browse all websites](/website-templates/) * [](/website-templates/8-bit-quest/) ### [8-Bit Quest](/website-templates/8-bit-quest/) [A retro, pixel-art styled personal developer portfolio and blog with a gamified "Player One" theme covering…](/website-templates/8-bit-quest/) * [](/website-templates/haze/) ### [Haze](/website-templates/haze/) [A designer/developer portfolio template featuring project case studies, a blog with tags, and full-text search](/website-templates/haze/) * [](/website-templates/portfolio-theme/) ### [Portfolio Theme](/website-templates/portfolio-theme/) [A minimal single-page developer portfolio template with just a homepage plus terms and privacy pages](/website-templates/portfolio-theme/) ## Make it yours Start with this website template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-tui-portfolio-website) --- # Viva Medical > A healthcare-at-home service site with pages for services, careers, professional care, specialized support, and 24/7 support messaging. [← Website Templates](/website-templates/) Template preview Website  Template type Website Designed for Modern web browsers Preview gallery 7 visual previews ## Who the Viva Medical template is for Home-care providers and healthcare service organizations explaining support options to patients, families, and applicants. ## What’s included * ✓ Service pages for professional care and specialized support * ✓ Careers section for healthcare recruitment * ✓ Prominent 24/7 support messaging across the site ## Explore the Viva Medical design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  ## What you can build with Viva Medical * → Launch a website for an in-home care provider * → Explain specialized medical and support services * → Recruit care professionals while serving patient families ## More Website Templates [Browse all websites](/website-templates/) * [](/website-templates/medicsare/) ### [Medicsare](/website-templates/medicsare/) [A healthcare/medical practice marketing site featuring doctor profiles, services, and pricing pages](/website-templates/medicsare/) * [](/website-templates/form-and-function-architects/) ### [Form & Function Architects](/website-templates/form-and-function-architects/) [A business site template for an architecture/interior-design studio, featuring a portfolio of projects, an about…](/website-templates/form-and-function-architects/) * [](/website-templates/manduca/) ### [Manduca](/website-templates/manduca/) [A link-in-bio style single-page profile with simple markdown content pages (fish, cakes, meat) for a personal hub](/website-templates/manduca/) ## Make it yours Start with this website template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-viva-medical-website) --- # Zahit > A personal blog template with an archive, tag browsing, and RSS feed for long-form posts. [← Website Templates](/website-templates/) Template preview Website  Template type Website Designed for Modern web browsers Preview gallery 9 visual previews ## Who the Zahit template is for Long-form writers and personal bloggers who want a simple publication with durable archives and subscriptions. ## What’s included * ✓ Chronological archive for a growing body of posts * ✓ Tag browsing for organizing long-form topics * ✓ RSS feed in a restrained minimal design ## Explore the Zahit design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  *  *  ## What you can build with Zahit * → Publish a personal long-form blog * → Create a tagged archive of essays and notes * → Offer readers an RSS subscription to new writing ## More Website Templates [Browse all websites](/website-templates/) * [](/website-templates/lipi/) ### [Lipi](/website-templates/lipi/) [A minimalist personal blog and writing platform template with archive, tags, and paginated posts](/website-templates/lipi/) * [](/website-templates/lonetrail/) ### [Lonetrail](/website-templates/lonetrail/) [A personal blog template with post series, tags, categories, and an archive for long-form writing](/website-templates/lonetrail/) * [](/website-templates/logflow/) ### [LogFlow](/website-templates/logflow/) [A compact Astro theme for writing and publishing, with a blog organized by collections, years, tags, and a…](/website-templates/logflow/) ## Make it yours Start with this website template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-zahit-website) --- # Zeepay > A fintech payments marketing site with pricing, sign-up, login, blog, and a video library for product education. [← Website Templates](/website-templates/) Template preview Website  Template type Website Designed for Modern web browsers Preview gallery 7 visual previews ## Who the Zeepay template is for Fintech and payments teams building a marketing and education site around a digital financial product. ## What’s included * ✓ Payments-focused product and pricing pages * ✓ Sign-up and login entry points for product conversion * ✓ Blog and video library for education and acquisition ## Explore the Zeepay design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  ## What you can build with Zeepay * → Launch a fintech or payments marketing website * → Explain pricing and convert visitors into product users * → Publish financial education through articles and video ## More Website Templates [Browse all websites](/website-templates/) * [](/website-templates/powerai/) ### [PowerAI](/website-templates/powerai/) [An AI SaaS marketing site template with pricing, features, integrations, case studies, careers, changelog, blog,…](/website-templates/powerai/) * [](/website-templates/zenix/) ### [Zenix](/website-templates/zenix/) [A SaaS marketing site with pricing, changelog, authentication pages, blog, and built-in site search](/website-templates/zenix/) * [](/website-templates/astro-stardrive/) ### [Astro Stardrive](/website-templates/astro-stardrive/) [A polished, documentation-and-marketing SaaS/product template with docs, integrations, pricing, FAQ, blog, and…](/website-templates/astro-stardrive/) ## Make it yours Start with this website template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-zeepay-website) --- # Zenix > A SaaS marketing site with pricing, changelog, authentication pages, blog, and built-in site search. [← Website Templates](/website-templates/) Template preview Website  Template type Website Designed for Modern web browsers Preview gallery 9 visual previews ## Who the Zenix template is for SaaS founders and product teams that need marketing, product updates, authentication entry points, and searchable content. ## What’s included * ✓ SaaS marketing pages with clear pricing content * ✓ Changelog and blog for product updates and education * ✓ Authentication pages and built-in site search ## Explore the Zenix design Preview the interface, then customize the structure, styling, content, and data in Draftbit. *  *  *  *  *  *  *  *  ## What you can build with Zenix * → Launch a complete SaaS marketing website * → Publish product updates and educational content * → Connect acquisition pages to login and sign-up flows ## More Website Templates [Browse all websites](/website-templates/) * [](/website-templates/landing-page/) ### [Landing Page](/website-templates/landing-page/) [Product landing site with a hero, feature and how-it-works sections, pricing, testimonials, FAQ, sign-up and login…](/website-templates/landing-page/) * [](/website-templates/powerai/) ### [PowerAI](/website-templates/powerai/) [An AI SaaS marketing site template with pricing, features, integrations, case studies, careers, changelog, blog,…](/website-templates/powerai/) * [](/website-templates/zeepay/) ### [Zeepay](/website-templates/zeepay/) [A fintech payments marketing site with pricing, sign-up, login, blog, and a video library for product education](/website-templates/zeepay/) ## Make it yours Start with this website template, then adapt every detail to your product and brand. [Use this template](/signup?psource=template-zenix-website) --- # What's New > Announcements, releases, and product updates from the Draftbit team. The latest product updates, releases, and announcements from the Draftbit team. [](/whats-new/gpt-5-6-grok-4-5-native-file-uploads-openrouter-claude-code/) ## [GPT-5.6, Grok 4.5, Organization-wide AI Providers, Free Plan Model Choice, Native File Uploads + more!](/whats-new/gpt-5-6-grok-4-5-native-file-uploads-openrouter-claude-code/) [GPT-5.6 Sol, Terra, and Luna join Draftbit alongside Grok 4.5, and Claude Code can now be used with active OpenRouter-native models. Organizations can connect Claude and ChatGPT subscriptions plus OpenAI, Anthropic, and OpenRouter API keys once and share them across every app. Free-plan users on Draftbit Credits can choose any supported OpenAI Codex model instead of being locked to GPT-5.4. Plus the Add Component panel, native file uploads, code-editor downloads, and more reliable planning, projects, sandboxes, and docs.](/whats-new/gpt-5-6-grok-4-5-native-file-uploads-openrouter-claude-code/) [](/whats-new/projects-websites-billing-plan-changes/) ## [Projects, Websites, Billing Plan Changes, Revamped Dashboard, Version History, Docs Updates + more!](/whats-new/projects-websites-billing-plan-changes/) [Projects now have dashboards, settings, activity, project-level assets, tasks, MCPs, and Supabase connections. Website apps are open to all users. Billing plans now use clearer Base naming, BYOK availability is easier to understand, and free plans get a simpler 5,000-credit starting grant. The dashboard has a new collapsible left sidebar. Version History has been redesigned with paginated commit history. Docs now live at docs.draftbit.com. Plus AI chat search, SSH gateway improvements, safer uploads, sandbox reliability fixes, model updates, and more.](/whats-new/projects-websites-billing-plan-changes/) [](/whats-new/byo-claude-chatgpt-supabase-backend-theme-typography-editing/) ## [BYO Claude & ChatGPT, Supabase Backend, Theme and Typography Editing + more!](/whats-new/byo-claude-chatgpt-supabase-backend-theme-typography-editing/) [Bring your own Claude (Pro/Max) or ChatGPT subscription so the AI agent runs on your plan instead of Draftbit credits. Connect a Supabase backend — database, auth, and storage — in open beta. Themes, palettes, and typography are now fully editable for v1 and v2 apps with a searchable Google Fonts picker. Plus a smarter agent chat with queued prompts, a visual Starter UI picker for mobile, QR-code phone previews, and new models including Claude Opus 4.8, Qwen 3.7 Max, and Gemini 3.5 Flash.](/whats-new/byo-claude-chatgpt-supabase-backend-theme-typography-editing/) [](/whats-new/rest-apis-byo-keys-for-everyone-expo-54/) ## [REST APIs, BYO Keys for Everyone, Expo 54 + more!](/whats-new/rest-apis-byo-keys-for-everyone-expo-54/) [REST APIs are now available to every user, with one-click setup for popular services like Webflow, Shopify, Xano, Supabase, and more. Bring-your-own API keys for OpenAI, Anthropic, and OpenRouter are live and free on every plan — no Pro required. Expo 54 is now the default SDK for new apps. Plus a new Summarize + Start New flow on threads, richer credit usage breakdowns, an Integrations Agent, and the ability to unpublish web deployments.](/whats-new/rest-apis-byo-keys-for-everyone-expo-54/) [](/whats-new/new-tasks-board-earn-free-credits-more/) ## [New Tasks Board, Earn Free Credits + more!](/whats-new/new-tasks-board-earn-free-credits-more/) [Tasks are now available to everyone — track, organize, delegate, and start work from a shared task board inside the Builder. Earn Credits is fully rolled out so you can submit challenges and claim rewards from a new Earn tab. Plus GPT-5.5 is the new Codex default, Cloudflare and HighLevel join MCP integrations, billing upgrades reset cleanly with itemized credit breakdowns, and saves are more reliable under concurrent edits.](/whats-new/new-tasks-board-earn-free-credits-more/) [](/whats-new/opus-4-7-web-apps-in-beta/) ## [Opus 4.7, Web Apps in Beta + more!](/whats-new/opus-4-7-web-apps-in-beta/) [Claude Opus 4.7 is here with sharper multi-step reasoning and more reliable tool use inside the sandbox. Web Apps are now in beta on a brand-new stack — React 19, Vite 6, Tailwind v4, React Router v7, and shadcn/ui. Plus a polished agent and model selector, a more resilient preview server, a faster code editor, and a long list of reliability fixes across publishing, assets, and Git.](/whats-new/opus-4-7-web-apps-in-beta/) [](/whats-new/public-share-pages-prompt-polish-publish-from-staging-more/) ## [Public Share Pages, Publish From Staging + more!](/whats-new/public-share-pages-prompt-polish-publish-from-staging-more/) [You can now create a public share page for any app — no sign-in required for viewers. iOS and Android publishing now works from the staging environment. Sandbox resources scale by billing tier, syntax errors get caught before saving, and the editor and mobile builder got a round of polish.](/whats-new/public-share-pages-prompt-polish-publish-from-staging-more/) [](/whats-new/whats-new-march-19th-live-preview/) ## [Added Live Preview, Dashboard Revamp, Custom MCPs & More](/whats-new/whats-new-march-19th-live-preview/) [We've (finally!) added Live Preview on your device, revamped the dashboard, added custom MCP servers, newer models, faster code editing and more.](/whats-new/whats-new-march-19th-live-preview/) [](/whats-new/smarter-code-editor-faster-startup-more/) ## [Smarter Code Editor, Faster Startup + more!](/whats-new/smarter-code-editor-faster-startup-more/) [The code editor now has full TypeScript autocomplete and hover types. Theme color pickers pull from your actual theme files. And sandbox startup is dramatically faster thanks to a new prewarming system.](/whats-new/smarter-code-editor-faster-startup-more/) [](/whats-new/whats-new-feb-5-2026/) ## [Opus 4.6, Tons of improvements, and Building From Your Couch 🛋️](/whats-new/whats-new-feb-5-2026/) [Claude Opus 4.6 is here, along with a unified model selector, improved mobile-responsive builder, full billing plans with credit bundle discounts, and conditional components for more dynamic UIs. Plus, we've improved thread summaries, message copying, and styling controls to make building even smoother.](/whats-new/whats-new-feb-5-2026/) [](/whats-new/whats-new-jan-21-2026/) ## [We're headed out of beta soon! (Credits, Plans, and Coming soon!)](/whats-new/whats-new-jan-21-2026/) [We're leaving closed beta soon, and with it means some changes to billing and credits. Check it out to learn all the details.](/whats-new/whats-new-jan-21-2026/) [](/whats-new/mcp-integrations-screen-design-blocks-updated-agents-and-models-more/) ## [MCP Integrations, Screen Design Blocks, Updated Agents and Models + more!](/whats-new/mcp-integrations-screen-design-blocks-updated-agents-and-models-more/) [The latest releases include a ton of improvements, fixes, and some big additions - check it out!](/whats-new/mcp-integrations-screen-design-blocks-updated-agents-and-models-more/) [](/whats-new/saved-prompts-better-git-history-more/) ## [Saved Prompts, Better Git History + more!](/whats-new/saved-prompts-better-git-history-more/) [These are all about reducing friction, speeding up common workflows, and giving you better visibility into what’s happening inside your app as it evolves.](/whats-new/saved-prompts-better-git-history-more/) [](/whats-new/design-blocks-environments-variables-and-claude-code/) ## [Design Blocks, Environment Variables + Claude Code](/whats-new/design-blocks-environments-variables-and-claude-code/) [The latest releases include a ton of improvements, fixes, and some big additions - check it out!](/whats-new/design-blocks-environments-variables-and-claude-code/) [](/whats-new/whats-new-oct-2025/) ## [What's New For October 2025](/whats-new/whats-new-oct-2025/) [We've been hard at work the last few weeks fixing bugs and improving stability for folks coming into the beta, and now that we've worked through most of those issues we're turning our attention to adding more visual editing features and better integrations with external services.](/whats-new/whats-new-oct-2025/) [](/whats-new/welcome/) ## [Welcome to the Draftbit Next Beta!](/whats-new/welcome/) [We're excited to see what you build, and we need your help to make Draftbit better.](/whats-new/welcome/) [](/whats-new/introducing-draftbit-v2/) ## [Introducing Draftbit v2!](/whats-new/introducing-draftbit-v2/) [Welcome to the next generation of Draftbit!](/whats-new/introducing-draftbit-v2/) --- # BYO Claude & ChatGPT, Supabase Backend, Theme and Typography Editing + more! > Bring your own Claude (Pro/Max) or ChatGPT subscription so the AI agent runs on your plan instead of Draftbit credits. Connect a Supabase backend — database,… ### Bring your own Claude (Pro/Max) or ChatGPT subscription so the AI agent runs on your plan instead of Draftbit credits. Connect a Supabase backend — database, auth, and storage — in open beta. Themes, palettes, and typography are now fully editable for v1 and v2 apps with a searchable Google Fonts picker. Plus a smarter agent chat with queued prompts, a visual Starter UI picker for mobile, QR-code phone previews, and new models including Claude Opus 4.8, Qwen 3.7 Max, and Gemini 3.5 Flash. Dave Sebekon June 16, 2026  Hey builders! It's been a busy stretch since our last big update — more than a dozen releases — and we've packed in a lot we're excited to walk you through. Grab a coffee and let's dig in. > **TL;DR:** Bring your own Claude (Pro/Max) or ChatGPT subscription so the agent runs on your plan instead of Draftbit credits. Themes, palettes, and typography are now fully editable from the Themes page — for v1 *and* v2 apps — complete with a searchable Google Fonts picker. Connect a Supabase backend (database, auth, and storage) in open beta. Start new mobile apps from a visual Starter UI picker, queue follow-up prompts in chat, paste images and files directly. Plus QR-code phone previews, a much more usable mobile builder, welcome credits that now last a full year, and a refreshed model lineup including Claude Opus 4.8, Qwen 3.7 Max, and Gemini 3.5 Flash. ## Bring Your Own Claude or ChatGPT Subscription This is the big one. If you already pay for Claude Pro/Max or ChatGPT, you can now sign in to that subscription right from the Builder and have Draftbit's AI agent run on *your* plan — no Draftbit credits consumed. Connect your provider once from the [agent settings page](https://help.draftbit.com/features/agent-instructions#provider-keys-byok), where your Claude and ChatGPT subscriptions now live together under a single, unified "BYOK Subscriptions" section.  To make this genuinely useful for teams who'd rather bring their own keys, we also added new "No bundled AI Credits" options to the Standard and Pro plans at a lower base price. Pay for the platform, plug in your own model access, and skip the credit bundle entirely. A few thoughtful touches came along with it. When you're running on your own subscription, Draftbit's identity and brand instructions step back so the underlying model can do its thing without extra noise. And when something goes wrong on your provider's side — an auth issue, a rate limit, or hitting your plan's usage cap — you now see the real provider error message naming your provider, with a link to upgrade, instead of a generic "the AI run stopped with an error." Bringing your own ChatGPT subscription is the newer of the two and still in beta, so expect it to keep improving. ## Connect a Supabase Backend Your app needs a backend, and now one of the most popular options is built right in. You can connect [Supabase](https://help.draftbit.com/features/integrations#supabase-backend) — database, auth, and storage — to your app from the Integrations tab or right when you create it, and it's free to use during the open beta.  The Supabase dashboard inside Draftbit defaults to the preview branch the AI agent works in, so any tables and schema it creates show up right away, and you can switch between your preview and production branches whenever you need to. There's also a new Edge Functions tab that lists your project's functions with their status, invoke path, version, and last update. It's the fastest path yet from "I have an idea" to a real, data-backed app. ## Start From a Template Starting from a blank screen is hard. So we've made starting from a great-looking one easy. When you [create a new app](https://help.draftbit.com/features/ai-app-builder), you can now pick from a gallery of designed UI kits — fully built screens and components ready to wire up to your backend — each with clearer descriptions and expanded tags to help you find the right fit. Before you commit, flip through multiple screenshots of each template in an auto-advancing carousel, so you know exactly what you're starting from.  For mobile, this got even better: creating a new Expo app — whether from a prompt, the enhance step, or "Create project without AI" — now starts with a visual Starter UI picker. Choose from a dozen polished, iPhone-framed starting points, including Events, Ecommerce, Marketplace, Social, Property, Fitness, Recipe, and Chat, each with a refreshed name, description, and screenshot so you can see exactly what you're building on. ## Preview on Your Phone With a QR Code Sharing a live preview just got easier. [Share pages](https://help.draftbit.com/features/publishing#share-page) now show a QR code that visitors can scan to open the live preview on their phone, plus a one-click Copy link button for desktop. Anyone you share with can see your app running on a real device without signing in.  And apps created from a public prompt link can now be claimed and saved to your own account. ## A Faster, Smarter Agent Chat Two changes here make working with the agent feel a lot more fluid. First, prompt queueing is now rolled out to everyone: queue follow-up prompts while the agent is still working. Type your next instruction and it lands in an "Up next" list, running in order as the agent finishes each task — with conversation context carried across runs. You can edit, reorder, or cancel anything in the queue, and stop or resume the whole thing at any time. Second, you can paste images and files directly into the [chat composer](https://help.draftbit.com/features/ai-app-builder#ai-chat). Drop in a screenshot, an image copied from a webpage, or a supported text, code, or document file — no more round-tripping through the file picker. It's a small thing that you'll feel every single day. ## Edit Themes, Palettes & Typography — Now for v1 Apps Too The [Themes page](https://help.draftbit.com/features/themes) got a major upgrade, and the biggest news is that apps imported from v1 now render right alongside v2 apps in the same surface. No more hunting through code to recolor your app. Theme color rows now show a searchable token picker grouped by palette, with a "Use custom value" mode for those one-off hex values. There's a dedicated Palettes tab where you can edit the underlying token values directly — change a palette color once and every theme row referencing it updates instantly. Dark-mode overrides, leading-zero token names, and palettes with spaces in their names all round-trip safely. Typography got the same treatment. The new Typography tab works for both v1 and v2 apps, and the font family picker is a searchable list of Google Fonts with live previews. Pick a font and Draftbit wires up the right Expo font name (or a CSS import for non-Expo apps) and saves it to disk for you. Each typography row even previews at its pending size, weight, and letter spacing so you can see your changes before committing. ## A Refreshed Model Lineup Your [model picker](https://help.draftbit.com/features/agent-instructions) keeps getting better. **Claude Opus 4.8** is now available, routed via direct Anthropic and OpenRouter (1M-token context) or Azure Foundry (200k context), with prompt caching. **Qwen 3.7 Max** brings a top-tier option with a 1M-token context window via OpenRouter and BYOK. **Gemini 3.5 Flash** adds Google's fast model with a 1M-token context for larger projects. And by popular demand, **Claude Haiku 4.5** is back as a fast, low-cost option. The agent also got smarter about how it uses these models. Instead of a fixed limit, it now waits until 75% of the selected model's actual context window before compacting a conversation — so on large-context models, sessions run much longer before anything gets summarized, and the agent keeps more of your work in view. ## Small But Notable #### Manage your packages without a prompt A new [Packages panel](https://help.draftbit.com/features/build-config#packages) lets you view, add, edit, and remove the npm dependencies in your project's `package.json` directly — no AI prompt required. #### Upload your own fonts Drop TTF, OTF, WOFF, and WOFF2 files into the [Assets panel](https://help.draftbit.com/features/cloud-storage) or attach them in an AI chat. Font files now upload cleanly and show up with a proper font icon in the asset browser. #### A static preview fallback When the [live preview](https://help.draftbit.com/features/ai-app-builder#app-previews) hits an error or fails to start, the Builder now offers an automatically-built static snapshot of your last working state — so you can keep previewing while the agent fixes the issue. #### A redesigned prop config panel [Component props](https://help.draftbit.com/features/ai-app-builder#config) now get type-aware editors: text inputs for strings, number fields, toggles for booleans, and dropdowns for fixed-value props — with the option to drop into code mode whenever you need it. #### More components, and the v1 icons are back We've brought more `@draftbit/ui` components into the Add Components panel — media, swiper, pin input, progress, and others — each automatically pinned to the version compatible with your project's Expo SDK. We also restored the cleaner, purpose-drawn v1 icon set across the component panels, with dedicated dark and light variants. #### The latest framework versions Generated apps now build on Expo SDK 54 and React Native 0.81, and can use the latest Tailwind v4 and NativeWind v5 with all the PostCSS, Babel, and Metro config wired up automatically. Older setups continue to work unchanged. #### A refreshed Hire an Expert page Our [expert services](https://draftbit.com/services/) page got a full redesign with packages, monthly plans, real testimonials, and use-case cards for upgrading, migrating, or fixing vibe-coded apps. The Hire Expert tab is back in the top nav and mobile menu. #### Start building the moment you land Create, prompt, onboarding, import, and v1 migration flows now all land directly inside the [Builder](https://help.draftbit.com/intro/building-with-draftbit/builder-overview) instead of separate setup pages, so you start chatting with the agent right away. #### A calmer, cleaner Builder The Screens, Files, and Component Tree panels now use a single `+` dropdown instead of a row of icons, the right-side editor/chat panel keeps a consistent width as you switch tabs, logs now open in an inline panel instead of a separate page, and the bottom of the [left nav](https://help.draftbit.com/intro/building-with-draftbit/builder-overview#main-menu) is tidied into a single "More" menu. Lots of small papercuts, gone. #### The mobile builder is genuinely usable now Several Builder screens were cramped on phones. They now use mobile-first bottom tabs to switch between the page content, the AI agent, and — on the Visual, Code, and Themes editors — the live preview, instead of squeezing a desktop layout onto a small screen. The preview also stays loaded as you switch tabs, so it no longer reloads every time. #### A focused Simulator for mobile previews Expo apps get a new [Simulator](https://help.draftbit.com/features/ai-app-builder#in-browser-previews) tab with a single-device mobile preview — including an iOS/Android toggle, a device picker, and an orientation control — for checking exactly how your app looks on one device. #### Everything build-related in one place Environment variables, packages, and (for v1 imports) legacy global variables now live together on a dedicated [Build Config page](https://help.draftbit.com/features/build-config#environment-variables), instead of being tucked inside Publishing. #### Git history and publishes load instantly The Builder no longer loads your entire commit history or every publish up front. [Git History](https://help.draftbit.com/features/history) and the Publishing Activity and Simulators tabs now page in with a "Load more" button, so they open fast even with thousands of entries — and you can page further back for rollbacks than before. #### Bring your own Android signing keystore When [publishing to Android](https://help.draftbit.com/features/publishing/one-click-publishing/android-publishing), you can now upload and reuse your own signing keystore, so apps already on the Play Store keep their existing key instead of resetting it. Publishing also tells you which step failed — the build or the store submission — and build logs are cleaner, with iOS (Xcode) errors and warnings standing out clearly. #### Welcome credits last a full year — and more ways to earn them [Signup credits](https://help.draftbit.com/intro/account/credits) used to expire after 7 days; they now stay usable for a full year, applied retroactively to existing grants. You can also earn more credits by leaving a review on sites like G2, Capterra, and Trustpilot, reviewing the Draftbit Preview app, or mentioning Draftbit in the community. #### Delete your account yourself [Account settings](https://help.draftbit.com/features/project-settings#delete-app) now include a self-serve deletion flow that cancels owned subscriptions at period end and removes your owned orgs and apps after a 72-hour delay. The same email can sign up fresh later. #### More reliable previews We squashed a class of blank/white-screen previews that could appear even when the sandbox looked healthy, made stuck previews easier to recover with a highlighted restart control, and stopped prewarmed apps from hanging on "Installing dependencies…". Native preview and publishing also no longer overwrite custom [iOS bundle IDs or Android package names](https://help.draftbit.com/features/app-configuration#ios) you've set. #### Tighter security around exports [GitHub export](https://help.draftbit.com/features/publishing#github-export) now only accepts `github.com` URLs, and generated `.env` files are kept out of your Git history — closing a couple of paths where tokens or secrets could leak. *** That's a wrap for this round — thanks for building with us, and as always, keep the feedback coming. Happy building! 🚀 --- # Design Blocks, Environment Variables + Claude Code > The latest releases include a ton of improvements, fixes, and some big additions - check it out! ### The latest releases include a ton of improvements, fixes, and some big additions - check it out! Dave Sebekon November 19, 2025  Hey everyone! I'm excited to share what we've been up to in the past few weeks. We're getting some great feedback from all our beta users and it's really helping us to refine and improve the experience overall. Thanks to everyone who's participating 💜. Let's dive in... ## Design Blocks First up are Design Blocks. If you're coming from the original 'Classic' Draftbit you may be familiar with Blocks over there, but these are a bit different. These Design Blocks are individual sections of UI that follow common design patterns and help the agent understand your design intentions. Browse the gallery of designs and choose a block to pass to the agent as a starting point for adding new sections to your screen.   You can open the Design Blocks gallery using the blocks icon above the [Component Tree](https://help.draftbit.com/features/ai-app-builder/#component-tree). When you click on a design you like it will be added to the chat where you can provide specific instructions on the way you want to change the design to make it uniquely yours. The agent will customize it to your liking in the chat and match your app's existing theme automatically. ## Environment Variables Environment variables are key-value pairs that store configuration data outside of your application code. In apps built with Draftbit, environment variables are injected into your app at build time. This means they’re available throughout your app code, but they’re not included in your source code repository, keeping sensitive data secure.  These variables can be used to: * **Store API keys and secrets** - Keep sensitive credentials out of your codebase * **Configure API endpoints** - Use different backend URLs for development vs production * **Set feature flags** - Enable or disable features based on the environment * **Manage app configuration** - Store app IDs, bundle identifiers, and other build settings [Check out the docs to learn more.](https://help.draftbit.com/features/environments/) ## Advance Agent Selection There's a new set of **Advanced Configuration** options below the AI chat where you can now select between using OpenAI's Codex agent and Anthropic's Claude Code agent.  Depending on which agent you select, you'll see different models to choose from which the agent will then use. For example, with Codex you can select from different versions of GPT-5 or if you've selected Claude you can select between Sonnet and Haiku models. Beyond that, you can put the agent into 'Read-only' mode which prevents the AI from making any changes. Once you select an agent and model for a thread it stays configured with those settings. Different agents and models usually have their strengths and weaknesses, so play around and try different ones out depending on the task at hand. Soon we'll also have Google Gemini and other agents and models to choose from. ## Staying Productive Now that the state of Draftbit 'Next' is solidify, we're starting to invest more in resources to help you get started and stay productive as you build.  Visit the [site of our new docs](https://help.draftbit.com) where you can find in-depth details on features and building with Draftbit, including some initial guides to help you along: ### Best practices * [Writing your initial prompt](https://help.draftbit.com/intro/best-practices/writing-your-initial-prompt/) * [Composing task prompts](https://help.draftbit.com/intro/best-practices/composing-task-prompts/) * [Using tokens efficiently](https://help.draftbit.com/intro/best-practices/using-tokens-efficiently/) ### Building your app * [Understanding Navigation](https://help.draftbit.com/guides/understanding-navigation) * [Adding Packages with AI Chat](https://help.draftbit.com/guides/adding-packages-with-ai-chat) * [Setting up Supabase](https://help.draftbit.com/guides/setting-up-supabase) ## Coming Soon We've got a lot more that we want to add and improve, but the next big thing coming soon will be the ability to connect the AI agent with third-party provider MCP servers to act on your behalf. This includes connecting to backend services like [Supabase](https://supabase.com/) and [Xano](https://www.xano.com/) so the AI agent can help build your backend right inside of Draftbit! ## Wrapping Up Don't forget to check out the [Changelog](https://next.draftbit.com/changelog) for frequent updates on all the changes happening in Draftbit on a weekly basis. And, be sure to let us know in the [Roadmap](https://next.draftbit.com/roadmap) if you have issues or feature requests - we want to hear from you! That's it for this update, stay tuned for more and happy building! --- # GPT-5.6, Grok 4.5, Organization-wide AI Providers, Free Plan Model Choice, Native File Uploads + more! > GPT-5.6 Sol, Terra, and Luna join Draftbit alongside Grok 4.5, and Claude Code can now be used with active OpenRouter-native models. Organizations can connect… ### GPT-5.6 Sol, Terra, and Luna join Draftbit alongside Grok 4.5, and Claude Code can now be used with active OpenRouter-native models. Organizations can connect Claude and ChatGPT subscriptions plus OpenAI, Anthropic, and OpenRouter API keys once and share them across every app. Free-plan users on Draftbit Credits can choose any supported OpenAI Codex model instead of being locked to GPT-5.4. Plus the Add Component panel, native file uploads, code-editor downloads, and more reliable planning, projects, sandboxes, and docs. Brian Luerssenon July 10, 2026  Hey builders! Quick update focused on giving you more choice in how you build and removing a few more obstacles from the workflow. We have added a new generation of OpenAI models, expanded what you can run through OpenRouter, added organization-wide AI provider connections, opened up more model choice on the Free plan, made visual component assembly more direct with the Add Component panel, brought native mobile project files into AI chat, and shipped another round of project, sandbox, Astro, export, and docs improvements. > **TL;DR:** GPT-5.6 Sol, Terra, and Luna join Draftbit alongside Grok 4.5, and Claude Code can now be used with active OpenRouter-native models. Organizations can connect Claude and ChatGPT subscriptions plus OpenAI, Anthropic, and OpenRouter API keys once and share them across every app. Free-plan users on Draftbit Credits can choose any supported OpenAI Codex model instead of being locked to GPT-5.4. Plus the Add Component panel, native file uploads, code-editor downloads, and more reliable planning, projects, sandboxes, and docs. ## The GPT-5.6 Family Is Here Draftbit now supports GPT-5.6 Sol, Terra, and Luna as Codex model options. All three models support context windows of up to 1.05 million tokens and outputs of up to 128,000 tokens, giving the agent substantially more room for large codebases, long conversations, and complex multi-step work. These are the newest, most powerful and capable models. In a few weeks, if we like performance, we will likely start to phase out the gpt 5.4 models as these gain more usage.  ## Grok 4.5 and More OpenRouter Flexibility Grok 4.5 is now available through OpenRouter with either Draftbit Credits or your own OpenRouter key. It supports a 500,000-token context window and can be selected for Codex-based work. We've found Grok 4.5 surprisingly capable AND fast, so definitely check it out.  Claude Code can now be used in combination with OpenRouter keys. That currently includes Grok 4.5, DeepSeek V4 Pro, DeepSeek V4 Flash, and GLM 5.2. If you prefer Claude Code's workflow but want to use a model available through OpenRouter, you have more combinations to choose from without switching agents.\ \ We also retired Qwen 3.7 Max from the active model list while preserving compatibility with existing threads that previously used it. Behind the scenes, we fixed xAI compatibility and moved plan approval into Draftbit's own event flow. Planning with Grok now works even when xAI does not support MCP namespace tools, and plan approvals or revision requests survive queued prompts and thread reloads. ## Connect AI Providers Once for Your Organization Organization admins can now connect OpenAI, Anthropic, and OpenRouter API keys, Claude Pro or Max subscriptions, and ChatGPT subscriptions from **Settings → AI Providers**. Every app in the organization, including newly created apps, can inherit those connections without signing in or adding the same key again. App-level connections still take priority, so teams can share sensible organization defaults while individual apps use their own provider when needed. Draftbit now shows whether a key or subscription is coming from the app or the organization, and thread history records which credential scope funded the work. Subscription credentials now live encrypted in Draftbit's database instead of being stored in sandbox Git history. Existing app logins migrate automatically the next time their sandbox starts, so teams get the safer storage model without needing to authenticate again. ## More Model Choice on the Free Plan Free-plan users building with Draftbit Credits are no longer locked to GPT-5.4. Codex remains the available agent for free Draftbit-credit threads, but the model picker now lets you choose any active OpenAI model that Codex supports on credits, including the new GPT-5.6 options. GPT-5.4 remains the safe fallback if an old or unsupported selection is encountered. Claude Code and OpenRouter models remain unavailable on free Draftbit-credit threads, while existing bring-your-own-key and connected subscription behavior is unchanged.  ## Add Components Visually We have been steadily improving the **Add Component** panel, but it has never had a proper introduction. Select an element in the Component Tree, open the **+** menu, and choose **Add Component**. From there, click a component to add it beneath the selected element or drag it onto the exact parent you want—without asking the agent or writing the import and JSX by hand. The **Available** tab lets you search a curated catalog of ready-to-use components, grouped by source. **Existing** surfaces reusable components already in your app and gives you a shortcut to edit their source. The panel uses the selected parent to keep incompatible choices out of the way, while still letting you reveal them when you want to see every option. Draftbit handles the repetitive setup when you add a component, including imports, compatible package versions, useful starter values, and any required configuration. It is a faster, more precise way to assemble and extend an interface visually while keeping the generated code clean and editable. ## Bring Native Mobile Files Into AI Chat You can now attach native iOS and Android project files directly to AI chat. Supported files include Swift, Objective-C, Kotlin, Java, Gradle, Xcode project and configuration files, storyboards, CocoaPods files, Ruby and Fastlane files, native C and C++ modules, and related lockfiles. Extensionless files such as `Podfile`, `Gemfile`, `Fastfile`, and `Appfile` are supported as well. Uploaded filenames keep their capitalization, and nested `ios` or `android` directories used by plugins and custom native modules can be tracked without being hidden by top-level generated-folder rules. This makes it much easier to ask the agent for help with native configuration, custom modules, build settings, plugins, and publishing issues without first converting or renaming the files. ## Projects Keep Getting Sharper Project app cards now show a clear app-type icon for mobile apps, web apps, and Astro sites. Their “Updated” timestamps also reflect real work such as agent runs, saves, commits, visual edits, and publishes instead of only app settings changes. Apps are ordered using that recent activity, making it easier to jump back into the work you touched most recently. We also fixed the Builder app switcher so it shows the correct project name when an app belongs to a different organization than the one most recently selected. Builder browser tabs now include the project name alongside the app name, making it easier to identify the right tab when you have several projects or apps open at once. ## + More #### Download files from the code editor The code editor's file menu now includes a **Download file** action in both the three-dot menu and right-click context menu. Files are downloaded without text conversion, so images and other binary assets stay intact. #### More reliable Astro previews Astro previews no longer flip into a failed state because of a transient full-reload error, and static fallback builds no longer create unnecessary watcher churn. Unsupported Design, Styles, and Properties controls are now clearly disabled for Astro apps while visual editing is still in beta, so the available code, agent, configuration, and history workflows are easier to understand. #### GitHub exports are working again We fixed an authentication-helper issue that could prevent an app from being exported to GitHub. Export now uses the same safe credential handling as our newer sandbox workflow. #### Faster, steadier sandbox startup Repository cloning and sandbox server startup now allow more time for normal initialization instead of prematurely restarting work that was still making progress. This reduces avoidable startup delays and timeout failures, especially for larger projects. #### Cleaner preview consoles We removed a source-map error produced by analytics canvas replay that could make a working preview look broken. DOM and iframe session replay remain available, while the noisy canvas worker is no longer started. #### Faster docs on mobile Draftbit Docs now serve responsive image sizes across the site, use smaller source screenshots, and defer nonessential support scripts until interaction or idle time. The iOS and Android publishing guides also host their screenshots directly with the docs, keeping those guides reliable and allowing the images to use the same optimization pipeline as the rest of the site. *** That's a wrap for this round. Thanks for building with us, and keep the feedback coming. Happy building! --- # Introducing Draftbit v2! > Welcome to the next generation of Draftbit! ### Welcome to the next generation of Draftbit! Dave Sebekon July 31, 2025  Hey everyone! We're so excited to introduce you to the next generation of Draftbit 🚀 This new version is designed to make Draftbit both more powerful and easier to use. It addresses some of the longest standing requests users have made of Draftbit, while also adding in the AI-based tooling you've been asking us about. We've been focused on making Draftbit's new version the best tool to help non-technical and semi-technical builders launch and iterate on their app. As you explore and experiment, be sure to reach out and let us know what you think. We're continuing to add features and improve performance with the help of your input. You can post feature requests and issues in the [Roadmap](https://next.draftbit.com/roadmap) and stay current on what's changed in the [What's New](https://next.draftbit.com/whats-new) section. More updates soon. Happy Building! --- # MCP Integrations, Screen Design Blocks, Updated Agents and Models + more! > The latest releases include a ton of improvements, fixes, and some big additions - check it out! ### The latest releases include a ton of improvements, fixes, and some big additions - check it out! Dave Sebekon January 9, 2026  Hey everyone! I hope you all had a great holiday season and are ready to kick off the new year full of excitement. Let's make things happen in 2026! We've been working on lots of new features, fixes, and improvements since the last update and there's a lot to cover so let's get to it. > We want to hear feedback from you! For those that are willing to do a video testimonial, we will provide 3 months of Draftbit Next for FREE to help us launch. [Submit yours here →](https://testimonials.draftbit.com/) **TL;DR:** Draftbit Next is moving to open beta in the next few weeks (and free unlimited AI credits will end at that time). Since the last update we shipped MCP integrations (Supabase, Xano, Directus, RevenueCat, Stripe, Linear, Sentry), full-screen Design Blocks, pixel-perfect App Store screenshot exports, more agent/model choices, and big upgrades to threads/messages, previews, importing, and sandbox stability—plus a responsive mobile builder and better code navigation/export. Next up: more MCPs (Figma/Webflow/Apollo + custom), a Live Preview app, and a new Component Library. ## Open Beta Coming Soon First of all, thanks to everyone who's helped us during the closed beta period while we iron out the kinks, gather feedback, and refine the experience. Your input and requests have helped us get the product to where it is today and we hope you've gotten a lot of value out of it so far. We'll soon be opening up Draftbit Next to all users and, at the same time, discontinuing the free unlimited AI credits. We expect the switch to happen within the next few weeks, so take advantage of this time to really put some work into your app! We'll follow up with more details as we get closer to that date. ## MCP Integrations [MCP Integrations](https://help.draftbit.com/features/integrations/) let you connect the AI agent to third-party services. This allows the AI agent to access and use the data from these services in your app, in addition to managing these services for you. For example, if you connect to your [Supabase](https://supabase.com) project the agent can create tables, set up user authentication in your app, write and deploy edge functions, and more! All you have to do is ask.  For most services, you'll simply be prompted to sign in to the service and grant access to Draftbit to allow the AI agent access to these services. For a few services, you'll need to provide additional credentials or API keys. This initial batch of MCP servers includes [Supabase](https://supabase.com/), [Xano](https://xano.com/), [Directus](https://directus.io/), [RevenueCat](https://revenuecat.com/), [Stripe](https://stripe.com/), [Linear](https://linear.app/), and [Sentry](https://sentry.io/). ## Screen Design Blocks In November we [announced Design Blocks](https://next.stagingbit.com/whats-new/design-blocks-environments-variables-and-claude-code) which started as just designs of screen sections and components that you could pass to the agent to have built. We've since expanded Design Blocks to include full screen designs. You can access the new screen designs using the screen icon at the top of the [Screens section](https://help.draftbit.com/features/ai-app-builder/) in the left panel of the Builder.  ## App Store Screenshots You can now export pixel-perfect App Store screenshots directly from the builder. A new export feature allows you to capture screenshots of your app screens in the correct dimensions for both iOS and Android App Store submissions. Launch it from the top toolbar in the [Preview panel](https://help.draftbit.com/features/ai-app-builder/#preview-panel). The feature includes a multi-step wizard to select screens, choose device sizes, and download screenshots with device frames overlaid. This streamlines the process of preparing your app for store submission.  ## App Configuration UI We made it easier to update your [app configuration](https://help.draftbit.com/features/app-configuration/) details like app name, icon, splash screen, permissions and more! There's a new menu item to open the view where you can update the app configuration using a simple form UI.  And you can still edit the **app.json** file manually in the Code Editor, of course! ## Updated AI Agents and Models > **In Draftbit Next, you can use the latest models from OpenAI and Anthropic with their AI agents - Codex and Claude Code. Google’s Gemini models are also available through Claude Code.** You may have wondered what the difference is between an AI agent and a model. Put simply: the agent is the “doer” and the model is the “thinker” powering it. Imagine an **agent** as a worker - it can plan steps toward a goal, use tools (like tools to build apps), check what happened (errors, logs, diffs, test output), and keep iterating until it finishes or hits a limit. In other words, an agent can take actions. A **model** is like the brain the worker uses. You can often swap brains in and out. Some are better at writing code, some at reasoning, some at following instructions, etc.  Different AI providers offer both models (the brains) and agent-style products (the workers that use those brains plus tools). [OpenAI](https://openai.com/) has their models you've probably heard of like [GPT-5.2](https://platform.openai.com/docs/models/gpt-5.2), but they also have their own coding agent - [Codex](https://openai.com/codex/). The same goes for [Anthropic](https://www.anthropic.com/) with their [Claude Code](https://claude.com/product/claude-code) agent and models like [Sonnet-4.5](https://www.anthropic.com/claude/sonnet) and [Opus-4.5](https://www.anthropic.com/claude/opus). Draftbit allows you to use these agents and models to build apps for/with you. When you start a [new chat thread](https://help.draftbit.com/features/ai-app-builder/#ai-chat), you can choose which agent and model you'd like to use. Keep in mind that in most cases Codex can only use OpenAI models and Claude can only use models from Anthropic (with the exception of Google Gemini as mentioned above). Once you start a thread with an agent and model, each message in that thread will use your chosen combination. Also, be aware that more advanced models like Opus can consume significantly more credits than average models which work perfectly fine for most tasks. But as always, experiment and find what works best with your app and preferences. ## Thread and Message Upgrades AI session context is now automatically saved after every turn with a 5-second debounce, ensuring your conversation progress is preserved even if deployments or interruptions occur. This is especially important during long conversations like the [create app flow](https://help.draftbit.com/intro/building-with-draftbit/creating-a-new-app/), where losing session information could mean losing significant progress. The system now maintains up-to-date session state in the background without blocking your interactions. Chat events now properly show as completed when a thread is stopped, even if the sandbox fails or restarts before the agent finishes. This ensures you always have accurate visual feedback about the status of ongoing operations in your conversations. We also fixed an issue where users could not continue conversations in threads that were stopped after a sandbox restart or crash. The system now automatically clears orphaned run status, allowing you to continue your conversations without interruption. ## Better Sandbox Stability We've continued to improve the stability and reliability of the sandboxes that run each app as you're building. This includes better error handling, request timeouts, and rate limiting to prevent crashes caused by request storms or hanging operations. Retry logic for sandbox operations was also added to handle transient network failures. When performing sandbox operations, the system will automatically retry failed requests, reducing the likelihood of errors due to temporary network issues. And the system now includes enhanced monitoring and automatic recovery mechanisms to keep your previews running smoothly. ## Preview Enhancements [App previews](https://help.draftbit.com/features/ai-app-builder/#preview-panel) have also received lots of attention. Apps can now access device APIs in preview mode, including geolocation, camera, microphone, clipboard, fullscreen, autoplay, and screen-wake-lock. This allows you to test apps that use these features directly in the preview without needing to build a full mobile app. When previews fail or crash, you now have better recovery options. A "View Logs" button lets you quickly navigate to the [app preview logs](https://help.draftbit.com/features/preview-logs/) to diagnose issues, and an "Ask Agent to Fix" button starts a new conversation thread with the AI agent pre-seeded with context about the preview failure to help resolve the problem. ## App Importing Improvements We've continued to make improvements to the whole process for [importing apps from Draftbit 'Classic' to Draftbit 'Next'](https://help.draftbit.com/intro/building-with-draftbit/importing-an-existing-app/). The flow is now more reliable and the UI is easier to use. The page has been redesigned with a clearer workflow. You can now search for apps by name, description, or UUID, and apps are automatically categorized into "Ready to Import" and "Requires Action" sections. The import process now includes workspace selection and better visual feedback throughout. ## Small But Notable #### Responsive Builder The Draftbit builder is now fully responsive and optimized for mobile devices. When accessing the builder on a mobile device, you'll see a redesigned interface with tabbed panels, swipe navigation, and a mobile-friendly navigation drawer. The desktop experience remains unchanged with resizable panels, while mobile users get an optimized interface that makes it easier to build apps on the go. More improvements to come. #### Code Navigation You can now **Cmd+Click (or Ctrl+Click on Windows/Linux)** on any symbol in the [code editor](https://help.draftbit.com/features/code-editor/) to jump to its definition. This works both within the current file and across files, making it easier to navigate your codebase. #### Better Code Export [Exported apps](https://help.draftbit.com/features/publishing/#code-export) now have cleaner code by removing unnecessary initialization code and internal package dependencies. This results in smaller, more maintainable exported projects without any Draftbit-specific dependencies that aren't needed in the final exported app. #### Prompt Character Limit Added a character counter to help you track prompt length. [Prompts](https://help.draftbit.com/features/ai-app-builder/#ai-chat) are now limited to 4,000 characters, with a warning shown after 2,000 characters to help you stay within the limit. ## Coming Soon Here's a look at just a few of the upcoming features we have in the works. #### More MCP Integrations We'll continue to expand and improve on existing features, like adding MCP integrations for more services like Figma, Webflow, and Apollo GraphQL, as well as giving you an option to make custom MCP connections. #### Live Preview App We're close to releasing a new Live Preview app for Draftbit Next that will let you preview your app live on your physical device as you build. This new version doesn't require scanning a QR code - you just sign in to your Draftbit account and select the app you want to preview. #### Component Library It's the spiritual successor to the old Component Picker. Here you can browse a ton of different components that can be quickly added to your screens. And of course, the AI agent can help you fully customize them to fit your design needs. ## Staying Productive Don't forget to visit our new documentation for Draftbit Next at where you can learn more about Draftbit's features and best practices for building your app with AI. > **Did you know? **You can ask the AI agent to search our docs and answer questions about the Builder right in the chat! Just say: "Search Draftbit docs for..." *** That's all for now - happy building! --- # New Tasks Board, Earn Free Credits + more! > Tasks are now available to everyone — track, organize, delegate, and start work from a shared task board inside the Builder. Earn Credits is fully rolled out… ### Tasks are now available to everyone — track, organize, delegate, and start work from a shared task board inside the Builder. Earn Credits is fully rolled out so you can submit challenges and claim rewards from a new Earn tab. Plus GPT-5.5 is the new Codex default, Cloudflare and HighLevel join MCP integrations, billing upgrades reset cleanly with itemized credit breakdowns, and saves are more reliable under concurrent edits. Dave Sebekon April 29, 2026  Hey everyone! Two big things we'd been teasing have now shipped to everyone, plus a round of polish across billing, Tasks, Claude Code rendering, and reliability. **TL;DR:** [Tasks](https://help.draftbit.com/features/tasks/) are now generally available to everyone — track, organize, delegate, and start work from a shared task board inside the Builder. The ability to earn free credits is fully rolled out, with a new [Earn Credits tab](https://next.draftbit.com/earn) for submitting challenges and claiming rewards. GPT-5.5 is the new Codex default, Cloudflare and HighLevel are now MCP integrations, billing upgrades reset cycles cleanly with itemized credit breakdowns, and concurrent-edit saves are more reliable. ## Manage Work Better with Tasks [Tasks](https://help.draftbit.com/features/tasks) — the project management view we previewed last update — is now available to everyone with editor access on your projects.  You can create tasks, set priorities, assign to teammates or hand-off to an AI agent, and more. Agents can also break down complex work into tasks and keep them updated automatically. Don't know how to describe what you want? Use **Draft with AI** to turn a rough idea into a clean task description before you start. And once you have a few tasks going, you can manage them from a Kanban-style board or a flat list view, see who (or which agent) is on what, and pick up wherever the team left off. Read more in the [Tasks docs](https://help.draftbit.com/features/tasks). ## Earn Free AI Usage Credits [Earn Credits](https://help.draftbit.com/intro/account/credits/) is now rolled out to all users. There's a new **Earn** tab in the dashboard where you can browse challenges, submit your work, and — once a submission is reviewed — claim rewards directly into your org's credit balance.  See the [credits docs](https://help.draftbit.com/intro/account/credits/) for the full breakdown. ## Small But Notable #### GPT-5.5 is the new Codex default GPT-5.5 is now selectable as a Codex model and is the default for new Codex threads. If you've been using GPT-5.4 by default, expect a noticeable bump. #### Cloudflare and HighLevel are now MCP integrations Two new [MCP integrations](https://help.draftbit.com/features/integrations#mcp-integrations) are available: **Cloudflare** and **HighLevel**. Connect them up and your agent can work with them directly inside the builder. #### Cleaner Claude Code thread rendering Claude Code threads now render more like Codex threads: consecutive file reads collapse into a single "Read N files" row, the LS tool renders as "Listed files (path)" instead of a generic MCP call, reasoning sections flatten redundant single-event groups, and paths with spaces render cleanly. Less visual noise, easier to follow what the agent actually did. #### Smoother billing upgrades Paid subscription upgrades now start a fresh Stripe billing period immediately, with proration credited against the new term. The upgrade dialog has been redesigned with a clearer breakdown — current vs. new plan pricing, an itemized credit summary (new grant, overuse deduction, removed credits), and an explicit charge breakdown with proration credit and due-now total. The builder topbar's Manage Plan link now opens the internal [billing overview](https://next.draftbit.com/billing/overview) page, and the Stripe portal button there is renamed to **Invoices & Payments** so it's clearer what it does. #### Better visibility into preview errors Runtime errors from the web preview are now surfaced in the builder as toasts and reflected in the dev-server state, so you can catch issues without digging through the browser console. #### More reliable saves Saves from the builder are more resilient — if a save conflicts with a concurrent update from another collaborator or agent, Draftbit now pulls and retries automatically instead of failing. #### GitHub export improvements The [GitHub export](https://help.draftbit.com/features/publishing#github-export) config now accepts **org/repo** slugs (not just full URLs), validates the URL, branch, and token before saving, and adds a **Check Access** button so you can confirm the repo is reachable before you commit. When an export does fail, the actual git/GitHub error is shown instead of a generic "something went wrong." #### Faster app delete and restart Deleting and restarting apps is noticeably faster across the board. #### Minor fixes worth calling out * Published PWAs now serve the app's own favicon instead of the default Draftbit logo.  * The Save button in the builder top bar shows a tooltip when there are no unsaved changes, so it's clear why it's disabled. * Also, the Xano proxy error message now mentions realtime resources, making it easier to diagnose configuration issues. * And we fixed a sandbox error where bundle uploads were sometimes rejected with a payload hash mismatch, which could block the preview from starting. ## Coming Soon #### Bring your own OpenRouter API key Soon you'll be able to plug in your own [OpenRouter](https://openrouter.ai) API key and use it for model calls inside Draftbit. That means access to OpenRouter's full model catalog, billing through your own OpenRouter account, and the freedom to run models that aren't part of our default lineup. #### Supabase backend, built in Still on the way: spin up and connect your app to a **Supabase** backend — database, APIs, cloud functions, realtime, and more — directly from inside the builder, with the [Supabase MCP connector](https://help.draftbit.com/features/integrations#supabase) pre-configured for you so your agent is ready to start building your backend the moment the project exists. *** That's all for now — happy building! --- # Opus 4.7, Web Apps in Beta + more! > Claude Opus 4.7 is here with sharper multi-step reasoning and more reliable tool use inside the sandbox. Web Apps are now in beta on a brand-new stack — React… ### Claude Opus 4.7 is here with sharper multi-step reasoning and more reliable tool use inside the sandbox. Web Apps are now in beta on a brand-new stack — React 19, Vite 6, Tailwind v4, React Router v7, and shadcn/ui. Plus a polished agent and model selector, a more resilient preview server, a faster code editor, and a long list of reliability fixes across publishing, assets, and Git. Dave Sebekon April 17, 2026  Hey everyone! It's been a busy couple of weeks since our last update, with a new flagship model, the start of the web app era for Draftbit, and a long list of quality-of-life improvements across the builder, editor, and AI assistant. **TL;DR:** Claude Opus 4.7 is now available and brings noticeable gains in multi-step reasoning and tool use. Web Apps in Beta ships on a brand-new stack — React 19, Vite 6, Tailwind CSS v4, React Router v7, and shadcn/ui — giving you a modern foundation for shipping web apps alongside your mobile builds. And across the product, we've polished the agent and model selectors, made the preview server more resilient, tightened up publishing, and fixed a bunch of sharp edges. ## Claude Opus 4.7 Anthropic's newest flagship model, [Claude Opus 4.7](https://www.anthropic.com/news/claude-opus-4-7), is now available in Draftbit. Building on Opus 4.6, this release brings improvements where you actually feel them: sharper multi-step reasoning, more reliable tool use inside the sandbox, and better judgment about when to ask for approval versus keep going on its own. In our own testing, Opus 4.7 is noticeably better at holding context across long sessions, picking up on subtle patterns in your codebase, and planning out larger, multi-file changes before it starts editing. If you were getting good results with 4.6 on complex tasks, expect 4.7 to take them a step further — with fewer hand-holds and less back-and-forth. You can pick Opus 4.7 from the model selector in any chat on our Pro plan and above. A quick heads-up: Opus 4.7 is a **premium model** and consumes credits faster than most other options. It's the right pick for complex, multi-step work where the extra horsepower pays off — for lighter tasks, you'll usually get more mileage out of Sonnet or one of the smaller models. One strategy we've seen work really well: use Opus to *plan* the work, then switch to a cheaper model like Sonnet to *execute* it. Opus is excellent at breaking down a fuzzy request into a clear, step-by-step plan and spotting the tricky parts up front. Once the plan is solid, Sonnet can usually carry out the actual edits just as well for a fraction of the credits. Switching models mid-thread is one-click. ## Web Apps in Beta This is a big one: Draftbit now supports building **web apps in beta**, alongside our existing mobile support. Instead of the React Native + Expo stack we use for mobile apps, web apps ship on a fresh, modern stack purpose-built for the web: * **React 19** * **Vite 6** * **TypeScript** (strict mode) * **Tailwind CSS v4** for styling * **React Router v7** with file-based routing for navigation * **shadcn/ui** for UI components That means you can use the same AI-assisted building experience you love for mobile to ship marketing sites, dashboards, admin tools, internal apps — anything web-based — with the latest and greatest in the React ecosystem under the hood. Since web apps are brand-new to Draftbit, we've been actively polishing the experience as we go. In this wave of releases: published web apps now generate a sitemap and robots.txt and prerender static pages where possible so search engines can actually index your site; web app previews default to a desktop-sized canvas (while mobile apps still default to a phone preview); and the preview iframe is more reliable on first load, cutting down on blank or crashy preview states. This is still beta, so expect things to keep evolving quickly — but we're excited to get it into your hands. ## Small But Notable #### A polished agent and model selector The agent and model selectors in the prompt input and chat bar got a new dropdown design that's consistent across the dashboard and builder. The model list now filters to only show models compatible with the selected agent, and in threads where the agent is locked, it renders as a chip with a tooltip explaining why. Switching models on an existing thread is also handled more gracefully — if the selected model isn't compatible, you'll see a one-click option to start a new thread with it instead of a confusing warning. #### Better AI error handling When an AI provider request fails — rate limits, auth errors, unavailable models — you'll now see a friendly inline error in the chat, and your unsent message text gets restored so you don't lose work. Long conversations also show a clearer message when a prompt exceeds the selected model's context window, instead of surfacing a raw provider error. And Codex users can now see reasoning summaries inline as the model works through your request. #### Sensitive action approvals are back We've restored the agent's habit of asking for your approval before performing sensitive or irreversible actions in the sandbox — publishing, destructive changes, or connecting external services. No more surprise side effects. #### A more resilient preview server The preview server no longer auto-restarts when it hits non-fatal errors. Instead, it shows a "running (with errors)" status so your preview stays live, and you can trigger a manual restart from the preview toolbar whenever you want. #### Components panel improvements You can drag components into your app more flexibly, click outside the panel to dismiss it, and for app-based components you can now jump straight to the source file. Billing-gated features now open upgrade prompts in context instead of relying on awkward overlays. #### A snappier editor We moved in-editor ESLint work out of the typing path (while keeping save-time checks in place), so the code editor should feel faster day-to-day. Git change indicators are now simplified to small colored dots, making it easier to scan file state at a glance. And you can now view hidden files — including `.github` — for easier access to advanced project files that were previously out of reach. #### More reliable publishing Fixed a nested-lock error that could stop web publishes while Draftbit committed config changes. Publish rollbacks now complete more reliably without leaving your working state out of sync. And recent preview builds and standard publishes are sorted together correctly, making recent activity easier to scan. #### Asset fixes Renaming or moving assets with spaces, unicode, or other special characters no longer fails with an invalid-character error. We've also made project syncs more resilient to brief network hiccups, so you'll see fewer random errors on flaky connections. #### Cleaner free plan experience Free plan users are now locked to the Codex agent and GPT-5.4 Mini model, with a cleaner locked state on the selectors and an in-context upgrade modal that opens consistently across the new thread panel, the active thread header, and the prompt toolbar. When credits run out mid-run, you'll see a clear "Your credits have been depleted" message instead of a raw API response — and it always renders as a top-level message now, not sometimes buried inside a reasoning block. Free plan users also get GPT-5.4 during initial app creation for a stronger starting point, and upgrade emails when they hit key credit milestones. #### Small fixes worth calling out AI-generated app names are now capped at 2 words and 30 characters, and long app names truncate with an ellipsis in the app card. The agent completion notification sound no longer replays every time you switch navigation tabs. Exported project zips no longer appear empty when opened on Windows. Live preview deep links now include the Expo version so we can warn about version mismatches before the app opens. And website sign-up flows now pass an explicit redirect so new users reliably land in the builder after creating an account. ## Coming Soon #### Agent planning & project management We're making the agent much better at planning work up front. During the create-app flow, the agent will break your idea down into tasks on a task board and then execute against that plan — so you can see what it's going to do before it starts, and track progress as it goes. Alongside that, we're adding a dedicated project management view where you can manage and assign tasks across your teammates and AI agents, all in one place. #### Supabase backend, built in Soon you'll be able to spin up and connect your app to a **Supabase** backend — database, APIs, cloud functions, realtime, and more — directly from inside the builder. As part of the setup, we'll pre-configure the Supabase MCP connector for you, so your agent is wired up and ready to start building your backend as soon as the project is created. #### More on web apps Web apps are still in beta, and we have a lot more coming — expanded component coverage, deeper routing tools, and tighter feedback loops between preview and publish. If you try it and have thoughts, please send them our way. *** That's all for now — happy building! --- # Projects, Websites, Billing Plan Changes, Revamped Dashboard, Version History, Docs Updates + more! > Projects now have dashboards, settings, activity, project-level assets, tasks, MCPs, and Supabase connections. Website apps are open to all users. Billing… ### Projects now have dashboards, settings, activity, project-level assets, tasks, MCPs, and Supabase connections. Website apps are open to all users. Billing plans now use clearer Base naming, BYOK availability is easier to understand, and free plans get a simpler 5,000-credit starting grant. The dashboard has a new collapsible left sidebar. Version History has been redesigned with paginated commit history. Docs now live at docs.draftbit.com. Plus AI chat search, SSH gateway improvements, safer uploads, sandbox reliability fixes, model updates, and more. Brian Luerssenon July 6, 2026  Hey builders! This release is a big one across the core Draftbit experience: Projects are becoming the center of your workspace, websites are now available to everyone, billing plans are clearer, the dashboard has a new shape, Version History is much easier to use, and docs have a new home. > **TL;DR:** Projects now have dashboards, settings, activity, project-level assets, tasks, MCPs, and Supabase connections. Astro-powered website apps are open to all users. Billing plans now use clearer Base naming, BYOK availability is easier to understand, and free plans are moving away from recurring credit grants. The dashboard has a new collapsible left sidebar. Version History has been redesigned with paginated commit history. Docs now live at [docs.draftbit.com](https://docs.draftbit.com). Plus AI chat search, safer uploads, sandbox reliability fixes, model updates, and more. ## Projects Have Arrived We've always had users building related apps in Draftbit: a customer-facing app and an admin app, a mobile app and a website, or multiple apps that share the same backend, credentials, assets, and integrations. Projects give all of that work a shared home. Every app in Draftbit now belongs to a Project. From the project details page, you can view related apps, activity, and project details without needing to start a sandbox. Over time, Projects will become the main workspace for more of your app-building workflow.  A lot of app-related resources are now project-related instead. Shared Assets, Integrations, Tasks, MCPs, and Supabase Backends are organized at the Project level, meaning all apps in the project can access them without duplicating the same setup across each app. You can also create a new app directly from the project app switcher, move apps between projects, and manage project settings from inside the Builder. This should make Draftbit feel much more natural once you're working on a real product with multiple apps, integrations, assets, tasks, and teammates involved. ## Astro-powered Websites We've added a new type of app: Astro websites. You can now create website apps in Draftbit and use the same AI-powered building workflow to generate, edit, preview, and iterate on web experiences. That means your marketing site, landing pages, docs-style pages, and other web surfaces can live alongside your app.  Astro is a great fit for websites because it is built for fast, content-heavy pages with strong SEO defaults, while still letting you add interactive components where you need them. In practice, that makes it a strong foundation for landing pages, marketing sites, resource pages, and lightweight product websites. ## Billing Plan Changes We've made some big changes to how our billing plans work, especially around AI usage. Recently, we made it possible for all users, including Free plan users, to connect their existing Claude or OpenAI subscriptions to Draftbit. You can also connect API keys for Claude, OpenAI, and OpenRouter. This lets you use Draftbit with your own AI provider access instead of relying only on Draftbit credits. That direction is important to us. Our goal is to make Draftbit an open building environment that works well with the AI services you already use. Over time, we expect to support more agents, more model providers, and more bring-your-own subscription options. As part of that shift, we're moving away from recurring free credit grants. Newer models use more tokens, costs can vary a lot from one task to another, and recurring grants made it harder for users to understand what they had available and how long it would last. Instead, we recommend that Free plan users bring their own AI subscription or API key while trying Draftbit. We've also expanded ways to earn Draftbit credits by helping us spread the word about Draftbit. Draftbit Credits are not going away. Any credits you've purchased, earned, or been granted are still available to use, and credits will remain an option for users who prefer not to connect their own AI providers. We've also launched plan options without bundled credits, so you can choose the Draftbit plan that best matches how you want to pay for AI usage. ## A Revamped Dashboard The dashboard has a new layout built around an inset, collapsible left sidebar. Navigation is more consistent, project and app cards are cleaner, and the workspace is easier to scan when you have more than one thing going on.  The goal is to make Draftbit feel less like a set of separate pages and more like a workspace. Projects, apps, billing, resources, docs, and account actions now have clearer places to live, and the new layout gives us more room to keep improving navigation without crowding the top of the screen. We'll be expanding this in the future with more capabilities for your projects and apps. ## Version History Got a Major Upgrade Version History has been redesigned to be easier to read and more useful on long-running projects. The page now supports paginated commit history, so you're no longer capped at the old 50-commit limit when reviewing older work.  Commits triggered by users are also attributed to the person who started the action, which makes history easier to understand on teams and in projects where both humans and agents are making changes. This should make Version History a more reliable place to answer questions like "what changed?", "who kicked this off?", and "how far back can I go?" ## Docs Updates Draftbit docs now live primarily at [docs.draftbit.com](https://docs.draftbit.com). We've merged together our v1 docs and our new platform docs into a single resource, so you can always find what you need regardless of which version of Draftbit you're using. ## + More #### Search your AI chats AI chat history is now searchable, so you can find previous threads and messages without digging through a long thread list. #### More reliable sandbox behavior Sandbox startup, preview initialization, repo service handling, package installation, and legacy prewarming all got reliability improvements. Simulator pages now show logs, and the app loading view includes a transcript copy action. #### Safer uploads and imports File uploads are more reliable, font files are protected from editing, keystore uploads are capped at 10 KB, and V1 migration/import flows received several fixes. #### Model and agent updates We updated the OpenAI, Codex, Anthropic, and agent SDK libraries, added Claude Sonnet 5 support, added GLM 5.2 through OpenRouter, and disabled GPT-5.4 Nano for Codex. #### Fixes We've also fixed a few bugs here and there to make your experience faster and easier. *** That's a wrap for this round. Thanks for building with us, and keep the feedback coming. Happy building! --- # Public Share Pages, Publish From Staging + more! > You can now create a public share page for any app — no sign-in required for viewers. iOS and Android publishing now works from the staging environment.… ### You can now create a public share page for any app — no sign-in required for viewers. iOS and Android publishing now works from the staging environment. Sandbox resources scale by billing tier, syntax errors get caught before saving, and the editor and mobile builder got a round of polish. Dave Sebekon April 1, 2026  Hey everyone! It's been a productive couple of weeks and we've got a lot to share. Across eight releases (v0.2.63 through v0.2.73), we've shipped a proper way to share your apps publicly, opened up publishing from staging, and landed a bunch of reliability improvements that make everyday building smoother. **TL;DR:** You can now create a public share page for any app — no sign-in required for viewers. iOS and Android publishing now works from the staging environment. Sandbox resources scale by billing tier, syntax errors get caught before saving, and the editor and mobile builder got a round of polish. ## Public Share Pages You can now create a public share page for any app in Draftbit. This gives your project a clean, standalone page where anyone can view and try it — no Draftbit account required. Great for sharing a prototype with a client, showing off a side project, or sending something to a friend for feedback.  Just click the Publish button in the top right of the builder and enable the Share option to generate a public link. Your share page will be generated and a public URL will be provided which you can send to others. ## Publish iOS and Android From Staging Previously, publishing native apps was blocked entirely in the staging environment. That meant if you were testing publishing workflows or validating a build before going live, you had to switch over to production to do it. Not ideal. Now you can publish iOS and Android apps directly from staging. You'll see a clear warning that you're publishing from a non-production environment, but the hard block is gone. We've also improved how app versions are tracked during publishing, so when multiple publishes start close together, iOS and Android version numbers don't get mixed up. ## Sandbox Resources Scale by Plan Your sandbox now scales with your billing tier. Higher-tier plans get more CPU, memory, and disk capacity — which means faster builds, smoother preview sessions, and more room for larger projects. If you've been bumping into resource limits on a growing app, upgrading your plan now directly improves the underlying compute your sandbox has access to. ## Syntax Checking Before Saves Draftbit now checks file syntax before saving code and JSON files. If there's a syntax error — a missing bracket, an extra comma — you'll see it immediately before the save goes through, rather than after a confusing build failure downstream. This is a small guardrail that prevents a surprisingly common class of issues. We also fixed a false positive where valid **.js** files containing JSX were being incorrectly flagged by the syntax checker. ## Small But Notable #### New model options Added **gpt-5.4-mini** and **gpt-5.4-nano** as available AI model options. If you want a lighter, faster model for certain tasks, you've got more choices now. #### QR code in viewer mode The live preview QR code is now available in viewer mode too, so you can launch a device preview without needing to switch to the full editor. #### Smarter live presence The top bar no longer shows your own avatar in the live presence indicators, and duplicate viewer avatars are cleaned up. You'll only see other people who are actively viewing the same project. #### Billing button improvements The billing button in the top bar now shows plan and credit details for the app's organization specifically, so you won't get confused when working across multiple orgs. Upgrade credits are also granted more reliably after confirmed Stripe billing events. #### AI thread and MCP reliability Agent threads now recover more gracefully from sandbox crashes and orphaned runs. Unsupported persisted events are safely skipped instead of breaking thread loading. And we fixed crashes related to deleted or failed MCP integrations being retried from the config flow. #### Sandbox and editor reliability Fixed sandbox startup issues where Git checkout conflicts could block first-time repo initialization. Improved idle sandbox cleanup so background health checks no longer keep truly idle sandboxes alive. Concurrency handling around locks and file operations is more stable during active editing. And slow image downloads during caching now retry safely instead of crashing the sandbox. *** That's everything from the past couple of weeks. We've got more fun stuff coming soon. Happy building! --- # REST APIs, BYO Keys for Everyone, Expo 54 + more! > REST APIs are now available to every user, with one-click setup for popular services like Webflow, Shopify, Xano, Supabase, and more. Bring-your-own API keys… ### REST APIs are now available to every user, with one-click setup for popular services like Webflow, Shopify, Xano, Supabase, and more. Bring-your-own API keys for OpenAI, Anthropic, and OpenRouter are live and free on every plan — no Pro required. Expo 54 is now the default SDK for new apps. Plus a new Summarize + Start New flow on threads, richer credit usage breakdowns, an Integrations Agent, and the ability to unpublish web deployments. Dave Sebekon May 7, 2026  Hey everyone — a lot has shipped since the last update, and this one's a meaty one. We've been heads-down on the connective tissue between your apps and the outside world: REST APIs, your own model provider keys, and a fresh Expo runtime under every new project. **TL;DR:** REST APIs are now available to every user, with one-click setup for popular services like Webflow, Shopify, Xano, Supabase, and more. Bring-your-own API keys for OpenAI, Anthropic, and OpenRouter are live and free on every plan — no Pro required. Expo 54 is now the default SDK for new apps. Plus a new Summarize + Start New flow on threads, richer credit usage breakdowns, an Integrations Agent, and the ability to unpublish web deployments. ## Bring Your Own API Keys — Free for Everyone You can now connect your own **OpenAI**, **Anthropic**, or **OpenRouter** API key from the [Agents](https://help.draftbit.com/features/agent-instructions/) **Defaults** tab. Threads using your key route directly to the provider and bypass Draftbit credits entirely — handy if you've already got provider credits sitting around, or you want full control over which models and rate limits you're using.  And the headline: **BYOK is now available on every plan, including Free.** When we shipped OpenRouter BYOK two weeks ago it was Pro-only; we've since flipped the switch to make all three providers available to everyone, no subscription required. OpenRouter BYOK now also exposes the same curated catalog of OpenAI and Anthropic models you'd get on Draftbit credits, so a single OpenRouter key can drive cross-provider workflows. You can grab keys directly from each provider: * [OpenAI API keys](https://platform.openai.com/api-keys) * [Anthropic API keys](https://console.anthropic.com/settings/keys) * [OpenRouter API keys](https://openrouter.ai/settings/keys) Under the hood, each thread remembers which gateway it's running on, so switching between Draftbit credits and your own key — or coming back to an older thread later — keeps things predictable. Provider labels are shown throughout chat and thread history so you always know where your requests are going. ## REST API Integrations Are Live One of our most-requested features since v2 launched: a real, first-class way to connect REST APIs to your app. It's here, and it's open to all users.  You'll find it under the new **REST APIs** tab on the [Integrations](https://help.draftbit.com/features/integrations/) page, right alongside MCP servers. We took a page out of the MCP playbook and built REST APIs as a productized catalog: instead of starting from a blank form, you pick from a list of preconfigured services with sensible defaults, or start with **Custom REST API** if you're connecting something we don't ship out of the box. One-click services include **Webflow**, **Bubble**, **WordPress**, **Shopify**, **Xano**, **Supabase**, **Directus**, **Sanity**, **Zapier**, and more — drop in your credentials, and you're connected. The new two-column detail view gives endpoints all the room they need on the left, with configuration and a live tester on the right. The best part: every REST service you connect is automatically exposed to your agents as tools. So once you've wired up an endpoint, you can ask the agent to "fetch the user's orders and render them in a list" and it'll just work — no hand-coded fetch calls required. There's also an agent sidebar on each REST service page so you can spin up endpoints conversationally, the same way the Tasks page works. ## Expo 54 Is the New Default Every new app you create now scaffolds on **Expo SDK 54**. The full toolchain — preview app, builder, publish pipeline, example screens — has been updated to support it, and we've worked through the migration issues that came up across both v1 and v2 apps (file system imports, FlashList rendering, the iOS preview crash, deprecated notification handlers, and a few more). Existing apps stay on whatever SDK they're on; this affects new apps only. Expo 54 brings precompiled builds for dramatically faster iOS dev cycles, the new Liquid Glass design language on iOS 26, React Native 0.81, and a long list of platform improvements. You can read the full [Expo SDK 54 announcement](https://expo.dev/changelog/sdk-54) for the deep dive. If you've got an older app and want to upgrade, the agent can walk you through it — most of the breaking changes are mechanical (renamed imports, new permission flows) and the agent knows about them. ## Summarize + Start New on Threads Long, productive threads are great — until the conversation grows so long that the agent starts losing the plot, or the context gets heavy enough to slow things down. We've added a **Summarize and Start New** action you can trigger from any thread to keep momentum without keeping the bloat. Hit the action and we'll generate a continuation summary of what's been built, what decisions were made, and what's still in progress, then pre-fill it into a fresh thread so you can pick right back up. It's the cleanest way to carry forward weeks of work into a focused new conversation. ## Better Credit Usage Visibility The thread credit usage dialog had a major overhaul. Credit spend is now broken down by model and provider in a clean grouped view, and every user — not just admins — can open it to see exactly where their credits went. The same dialog also powers the per-run "Agent Run Finished" breakdown, so you can audit a single run as easily as a whole thread. ## Small But Notable #### Integrations Agent sidebar The Integrations page now has its own agent sidebar that mirrors the panel on Tasks — resizable, collapsible to a rail, and ready to help you wire up MCPs or REST APIs without leaving the screen. #### Unpublish web deployments You can now unpublish web deployments straight from the Builder publish popover, with production and staging controlled separately. Unpublished sites show as inactive and their share/staging URLs become unavailable. #### A /whats-new page on draftbit.com We're surfacing recent changelog entries at [draftbit.com/whats-new](https://draftbit.com/whats-new) so you can keep tabs on shipping without digging through release notes. #### Monthly credits get a 30-day grace window Subscription credits used to expire the moment the Stripe billing period ended. They now expire 30 days after, so you've got a buffer to spend down whatever's left. #### More welcome credits for new signups We bumped the credit allotment new accounts get on signup so you've got more room to explore before deciding what plan you want. #### Free-plan default model is now gpt-5.4 We moved the Free plan default back to **gpt-5.4** for both new threads and new app creation. In our internal testing it produces results comparable to higher-tier models on most building tasks while burning roughly half the credits — which means a lot more runway on a Free account. #### The agent reaches for Chrome DevTools less aggressively It only opens DevTools after simpler debugging steps fail, or when you explicitly ask for it — so most threads stay snappier and consume fewer credits along the way. #### Polished agent and gateway pickers The chat agent picker is now a proper Select with logo and description, matching the gateway and model selectors. The chat input shows a small icon-only gateway indicator (OpenRouter or Draftbit) only when you have multiple gateways — single-path users see nothing. #### Fixes Safari now switches between iOS and Android preview tabs reliably (it used to just toggle the tooltip). Codex multi-file edits no longer skip refreshing the screens/files list when multiple files are touched in one batch. New-thread panels can no longer land on a mismatched model + agent combination (e.g. Codex + Claude Sonnet). Stopped sandboxes restart correctly on the next interaction. The required **title** field on save dialogs is now visually prominent when missing, so you don't lose a save to a silent validation error. ## Coming Soon #### Automatic Supabase Backends We're working on first-class Supabase backends inside the Builder — spin up a fully provisioned Supabase project for your app in a click, with tables, auth, and storage wired up automatically and exposed to your agents. In the meantime, the Supabase MCP connector and the Supabase REST API integration both work great today. *** That's all for now — happy building! --- # Saved Prompts, Better Git History + more! > These are all about reducing friction, speeding up common workflows, and giving you better visibility into what’s happening inside your app as it evolves. ### These are all about reducing friction, speeding up common workflows, and giving you better visibility into what’s happening inside your app as it evolves. Dave Sebekon December 18, 2025  Hey everyone — I've got a freshly baked batch of updates for you to check out. Let’s get into it! ## Saved Prompts If you’ve found yourself retyping the same instructions to the AI over and over, that’s now a solved problem. You can save prompts and reuse them whenever you need, which makes repeat workflows faster and more consistent.  Once you've saved a prompt you can then access it easily from the AI agent chat.  Set up your best guidance once, then stop wasting time recreating it. This is especially useful if you’ve dialed in prompts that reliably get good results. ## Git History We’ve added a dedicated Git History page so you can better see how your app has changed over time without digging around or guessing what happened when. This gives you an interactive view of commits, making it much easier to understand how features evolved, when changes were introduced, and how things fit together.  You can access Git History from the main navigation and the Activity tab in the right utility panel, so it’s always close at hand. ## Device Preview Orientation We’ve made device previews more flexible with a new orientation toggle in the preview toolbar. You can now switch between portrait and landscape instantly for each device in the preview canvas.  This makes it much easier to design, test, and sanity-check layouts that need to work well in both orientations without breaking your flow. **Pro Tip**: On iOS and Android, portrait-only is common by default. If you need landscape support, tell the agent—supporting rotation may require enabling landscape and adjusting screen layouts. ## Improved Preview Logs The new Preview Logs page available from the main navigation has been updated to also include the device preview canvas and agent chat.  ## Edit Text Directly in Previews You can now double-click text directly inside the device preview to edit it in place. No hunting through trees or panels just to tweak a little copy. This is meant for fast, lightweight edits — the kind of changes that shouldn’t interrupt your momentum. It’s a small interaction change, but it adds up quickly when you’re iterating. You can still make quick updates to component text from the Content tab in the right utility panel as well. And, of course, directly in the code. ## In The Works We're getting closer to releasing our first set of MCP connectors, including Figma, Supabase, Xano, Webflow, Linear, Github, and more so be on the lookout for those. Also available soon will be an update to the [recently introduced Design Blocks](https://next.draftbit.com/whats-new/design-blocks-environments-variables-and-claude-code). We've been expanding this to include full screen designs, navigators, and more components. ## Wrapping Up That’s it for this update. As always, drop feedback or requests in the [Roadmap](https://next.stagingbit.com/roadmap) — it directly influences what we ship next! Check the [Changelog](https://next.stagingbit.com/changelog) for smaller updates landing between announcements. Let me know in the comments if there's specific guides you'd like us to add to [our new help site](https://help.draftbit.com) for Draftbit Next. Happy building! --- # Smarter Code Editor, Faster Startup + more! > The code editor now has full TypeScript autocomplete and hover types. Theme color pickers pull from your actual theme files. And sandbox startup is… ### The code editor now has full TypeScript autocomplete and hover types. Theme color pickers pull from your actual theme files. And sandbox startup is dramatically faster thanks to a new prewarming system. Dave Sebekon February 26, 2026  Hey there! We've been laser-focused on crushing bugs and making meaningful improvements to your experience since the last update, and there's a lot to share. Across eight releases (v0.2.7 through v0.2.16), we've made the builder meaningfully faster, smarter, and more pleasant to use day-to-day — whether you're building on a big monitor or squeezing in a session from your phone. **TL;DR:** The code editor now has full TypeScript autocomplete and hover types. Theme color pickers finally pull from your actual theme files. And sandbox startup is dramatically faster thanks to a prewarming system we've been quietly building in the background. ## Import Publishing Credentials from v1 If you published an app with Draftbit v1 and migrated to v2, you may have run into frustrating authentication failures when trying to publish — wrong signing keys, invalid credentials, the works. We've fixed the root cause. v2 can now import your publishing credentials from v1, so you don't have to re-enter signing keys or recreate certificates that already exist. Under the hood, this involved making sure app metadata — version numbers, bundle IDs — travels correctly during import. Apple Bundle ID validation is also now more flexible, catching fewer false positives that were blocking valid IDs. ## Code Editor: Autocomplete and Hover Types The code editor just got a lot smarter. We've integrated `tsserver` — the same language server that powers VS Code's TypeScript support — so you now get real autocomplete, hover type information, and inline linting as you type. If you're working with components, props, or any typed interfaces in your app, the editor will now tell you what's available and what a function expects, right in context. We also added a small but handy workflow improvement: you can now add lines of code from the editor to the AI chat as references. Instead of describing what you want changed ("that function on line 47"), you can select the code in Code view then right-click and choose to add the reference to the current thread or start a new one. The AI knows exactly what you're pointing at.  ## Theme Color Pickers That Actually Know Your Theme Color pickers in the Styles panel now read from your app's actual theme files — both light and dark variants — instead of a generic palette. You'll see your real theme colors as swatches, with search so you can find the right token quickly. If for some reason the theme data can't be loaded, there's a graceful fallback so you're never stuck. This also fixes a long-standing inconsistency where the color picker UI wouldn't reflect changes you'd made to the theme through code. The picker now stays in sync with your theme files, so what you see in the Styles panel matches what's actually in your app.  ## AI Assistant Panel: Resizable, Dockable, and More Accessible The AI Assistant panel has gotten a polish pass. It's now more easily resizable — drag it to the width that works for your screen — and it can toggle between docked mode (anchored to the side of the builder) and overlay mode (floating over the canvas). This applies to the App Configuration, Publishing, and Agent Customization pages, where the panel previously felt a bit bolted-on. "Ask user" questions — where the agent needs input from you before proceeding — now appear above the chat input instead of inline with the conversation. That means they stay visible and easy to answer even when there's a long message thread above them. ## Faster App Startup Creating a new app or spinning up a sandbox is now noticeably faster. We built a prewarming system that keeps a pool of initialized sandbox instances ready to go, so when you hit "Create," you're not waiting for a cold start. App name generation is also significantly faster, and we fixed issues that were intermittently blocking name and icon generation from completing at all. ## Small But Notable #### Consistent panel sizing across the builder The right-hand panel now has a consistent size (25% by default, adjustable between 20–40%) across Visual Editor, Code Editor, Logs, Themes, Config, and Agents pages. Jumping between sections no longer causes the panel to snap to unexpected widths. #### Code-preview linking in the editor Hovering over a component in the preview now highlights the matching code in the editor. It's a small thing, but if you're debugging layout and trying to find where a specific element lives in code, it removes a lot of hunting. #### Versioned build logs Build logs now label older runs as "outdated" so you can immediately distinguish the current build's output from a previous run. If you've ever stared at a log wondering "is this from the build I just kicked off?", this one's for you. #### Billing fixes One-time credit top-ups now require an active paid subscription — free users will see a clear message and an upgrade link instead of a confusing dead end. We also fixed a billing calculation issue that could result in undercharges, and legacy plan pricing now displays correctly in the billing overview. #### Reliability improvements Fixed HTTP 431 errors that could occur when viewing large chat threads. The page now auto-reloads on "Failed to load chunk" errors so you can recover without a manual refresh. Version update notifications no longer fire too frequently. And agent image uploads are now always converted to PNG before processing, which eliminates a class of image-handling errors. *** That's everything from the past few weeks. We're moving fast — more to come soon. Happy building! --- # Welcome to the Draftbit Next Beta! > We're excited to see what you build, and we need your help to make Draftbit better. ### We're excited to see what you build, and we need your help to make Draftbit better. Brian Luerssenon October 18, 2025  Welcome to the **Draftbit Next Beta!** We’re so excited to have you join us as we shape the future of app building together. As an early beta user, you’ll get **unlimited AI usage during the beta period** — no credits, limits, or extra fees. This is your chance to explore freely, experiment with AI-driven features, and push the boundaries of what Draftbit Next can do. Your feedback means everything right now. We’d love your help identifying what’s working well, what’s missing, and what could make the experience even better. Whether it’s small UX tweaks, new AI ideas, or bigger product improvements — we want to hear it all. * 💡 **Feature ideas & feedback:** [Roadmap](/roadmap) * 💬 **Connect with other builders:** [Community](https://community.draftbit.com/) * 🚀 **See what’s new:** [Changelog](/changelog) We’ll be rolling out updates every week, so you’ll see things evolve quickly based on what you and other early users share. Thanks again for being part of this next chapter. We can’t wait to see what you build — and to build Draftbit Next *with you.* —\ Brian Luerssen\ Founder & CEO, Draftbit --- # Opus 4.6, Tons of improvements, and Building From Your Couch 🛋️ > Claude Opus 4.6 is here, along with a unified model selector, improved mobile-responsive builder, full billing plans with credit bundle discounts, and… ### Claude Opus 4.6 is here, along with a unified model selector, improved mobile-responsive builder, full billing plans with credit bundle discounts, and conditional components for more dynamic UIs. Plus, we've improved thread summaries, message copying, and styling controls to make building even smoother. Brian Luerssenon February 6, 2026  Hey Everyone! We've been hard at work on some new features and improvements to the Draftbit builder. Here's what's new: ## New Models & Smarter Selection We've added **Claude Opus 4.6**, Anthropic's latest and most capable model, to Draftbit. Opus 4.6 brings improved reasoning, better code generation, and more nuanced understanding of complex app requirements. Whether you're building intricate data flows or refining UI details, this model delivers noticeably better results. But that's not all: we've also expanded support for additional models and providers, giving you more flexibility to choose the right tool for your task, including those from xAI, DeepSeek, and Moon that are lower cost and higher quality. With Draftbit, you can now use all of the major providers and models in one place. ### Unified Model Selector Finding and switching between models is now much easier with our new **unified model selector**. Instead of navigating through separate agent and model dropdowns, you can now browse models first and see which agents support them. This "model-first" approach makes it faster to find exactly what you need, especially when you want to try out a specific model like Opus 4.6 or compare results across different providers.  ## Mobile Responsive Builder We know not everyone is at their desk when inspiration strikes. The Draftbit builder is now **fully responsive on mobile devices**, so you can review your apps, check on builds, or even make quick edits from your phone or tablet. While we still recommend a larger screen for deep building sessions, having mobile access means you're never stuck waiting to get back to your computer.  ## Better Thread Summaries & Message Copying Working with long threads just got easier. We've improved how **thread summaries** are generated, making them more accurate and useful for quickly understanding what happened in a conversation. You can also now easily **copy messages** from your threads—perfect for sharing context with teammates, documenting your progress, or referencing AI suggestions in other tools. ## Full Billing Plans Are Here We've rolled out our **complete billing system** with plans designed for individuals, teams, and growing organizations. Each plan comes with a monthly credit allocation, and you can see exactly what you're getting before you commit. Whether you're just getting started or scaling up a production app, there's a plan that fits. Key improvements include: * **Team Plans** – Collaborate with your team under a single billing account with shared credits and unified management * **Annual billing options** – Save with yearly subscriptions and get better visibility into your credit usage over time * **Clearer plan comparisons** – Easily see what's included at each tier so you can make the right choice ## Discounts on Credit Top-Up Bundles Need more credits? We've introduced **discounted credit bundles** so you can top up without breaking the bank. The more credits you purchase at once, the better the value. This is especially useful for teams with variable usage or anyone working on a big project push. ## Improved Credit Awareness & Refill Timing Understanding your credit balance shouldn't require a calculator. We've added a **smart credit reset countdown** that shows you exactly when your credits will refill—whether that's in hours, days, or at a specific time. You'll also see clearer indicators when you're running low, so you can plan ahead and never get caught off guard mid-conversation. The billing page now provides better context around: * Your current credit balance and usage * When your next credit allocation arrives * How your usage compares to your plan limits ## Conditional Components in the Component Tree Building dynamic UIs just got more powerful. You can now see **conditional operators** like `&&`, `||`, and `??` directly in your component tree. ## Better Visual Styling in the Styles Panel The styles panel has received a visual refresh to make it easier to work with. We've added an **opacity slider** for fine-tuned control over element transparency, and improved how style values are displayed so you can see at a glance what's applied. These refinements make the styling experience feel more polished and intuitive, especially when you're tweaking designs to get them just right. *** That's what's new this week! As always, we're listening to your feedback and working on making Draftbit better every day. If you have questions or ideas, drop us a line—we'd love to hear from you. Happy building! 🚀 --- # We're headed out of beta soon! (Credits, Plans, and Coming soon!) > We're leaving closed beta soon, and with it means some changes to billing and credits. Check it out to learn all the details. ### We're leaving closed beta soon, and with it means some changes to billing and credits. Check it out to learn all the details. Brian Luerssenon January 21, 2026  🚀 What’s New in Draftbit Next Hey everyone 👋\ The last few months have been a whirlwind for the Draftbit team, and we’re excited to share a big update on what’s new, what’s improved, and what’s coming next in **Draftbit Next**. ### ✨ Recently Shipped Over the past month or two, we’ve rolled out a ton of new features and improvements, including: * **Environment Variables** * **Design Blocks** * **Claude Code & More Models** * **Improved Component Tree & File Editing** * **Saved Prompts** * **Major Preview Improvements** * **Sandbox Stability & GI Visualization** * **MCP Integrations** * **App Store Screenshots & App Configuration** Behind the scenes, we’ve also invested heavily in more server capacity, more reliable sandboxes, and better agent behavior, responses, and tooling. All of this is driven directly by your feedback — thank you for helping us make Draftbit better every day. ### 📱 Coming Very Soon * **Live Preview App for Draftbit Next**\ View your apps on your phone — and eventually make changes directly from it. * **Theme Editing** * **Updated Styles & Configs Panel** (more aligned with V1) * **Direct Component Editing & Full Code Control**\ Use agents, make manual changes, or go full code — all within Draftbit. ### 💳 Important Update: Credits & Usage As Draftbit Next continues to grow, we’ve welcomed a huge number of new beta users. To keep things sustainable, we’re introducing **credit limits starting today**. **Here’s how it works:** * Your usage now pulls from a **monthly credit balance** tied to your plan. * **$1 = 1,000 credits** * Monthly plans include matching monthly credits: * * $25 plan → $25 in credits  (25,000) * $50 plan → $50 in credits (50,000) * Team & Enterprise plans → more credits * You can now **purchase additional credits** (starting at $5) via Stripe from the dashboard. * New **credits visibility & reporting** lets you see usage by agent, thread, and team member. ### 🎁 Beta Thank-You Credits * You’ll receive **2,500 free credits every day** for the next few weeks (possibly a bit longer). * We’ve also added **$25 in credits** to your account today as a thank you.  Use these to get a feel for how different requests and models impact credit usage. ### 🤖 Model Choice & Cost Control * Choose **which agent and model** you want to use * Use **lower-cost models** for simpler tasks * Expect higher credit usage for: * * Larger requests * More advanced models (e.g. Opus 4.5) * Big multi-screen builds in a single run More cost-effective model options are coming soon. ### 🧭 Looking Ahead We’re in the **final phase of the beta**, with many users still waiting to get access. During the beta, **all features remain available**, regardless of plan. After the beta (in a couple of weeks), feature access will vary by plan. You can preview this now in the **Billing → Pricing Plans** section of the dashboard. Your feedback on pricing and feature alignment is incredibly important to us. *** **Thanks again for building with Draftbit ❤️**\ We love seeing what you’re creating, and we’re excited about what’s next. If you have questions or feedback, please reach out — and keep building! --- # Added Live Preview, Dashboard Revamp, Custom MCPs & More > We've (finally!) added Live Preview on your device, revamped the dashboard, added custom MCP servers, newer models, faster code editing and more. ### We've (finally!) added Live Preview on your device, revamped the dashboard, added custom MCP servers, newer models, faster code editing and more. Brian Luerssenon March 19, 2026  We've been shipping fast this month — here's everything that's new in Draftbit. 🚀 ## 📱 Live Preview on Your Dashboard You can now preview your apps natively on your phone using the Draftbit Preview apps, available in both app stores. Just scan the QR code, and you'll be taken right into your app preview if you have the app, or to the App Store to download the app if you don't. ## 🏠 Revamped Dashboard The dashboard got a major facelift. We've redesigned the layout with a cleaner look, a more prominent prompt area for starting new projects, and better overall app organization, as well as making it easier to start new projects. We now show all of your apps (v1 and v2) directly on your dashboard so you can access everything in one place, and we renamed "Import" to "Migrate" to better describe what's actually happening when you bring apps over from V1. ## 🎨 Styles Panel Improvements The styles panel has reached full UI parity with V1 — all the controls you're used to are now available in the new builder. We've also added a **current vs. working toggle**, so you can compare your in-progress style changes against the committed version before saving. Section headers have been redesigned to make it easier to scan and find what you need at a glance. ## 🔌 Custom MCP Servers This one's big for power users. If you're on a Pro plan, you can now connect your own **custom MCP (Model Context Protocol) servers** to Draftbit. That means your AI agent can access your own tools, APIs, and data sources — directly inside the builder. Think of it as giving your agent superpowers tailored to your specific workflow. ## 🧠 AI Model Upgrades & Additions **GPT-5.4** is now the default model across the platform, paired with Codex as the default agent. But we didn't stop there: * **GPT-5.4 Mini and Nano** have been added for lighter, faster tasks that don't need the full horsepower * **OpenRouter model support** — use a wider range of models through OpenRouter with both Codex & Claude Code. * **Claude Sonnet 4.6** is now available via updated Anthropic SDKs * A new **model selector** in the chat view lets you switch models on the fly, mid-conversation * A **reasoning effort dropdown** gives you control over how deeply the model thinks through problems — great for balancing speed vs. thoroughness * We've also made our agents a ton more efficient, using significantly fewer credits for same or better outcomes.  ## ⚡ Code Editing Speed Improvements File edit latency has been reduced from **\~3-10 seconds down to under \~500 milliseconds**. That's up to a 20x+ improvement. Edits from the agent and the code editor now feel nearly instant.  ## 🎯 Improved Preview Selection Tool The element picker in the live preview has been overhauled for better reliability and visual quality. Selecting elements is now more precise, with cleaner hover highlights and more consistent behavior across different component types. It's a small thing that makes a big difference when you're clicking around your app to style or inspect elements. ## 💳 Billing & Credits Visibility in the Builder You no longer have to leave the builder to check your plan status. A new **billing plan indicator** lives right in the top bar, so you always know where you stand. If you're on a free plan, you'll see clear upgrade prompts when you try to access paid features like the model selector or agent chooser — no more guessing about what's available on your tier. ## 🏎️ Faster Sandboxes Behind the scenes, we've made major infrastructure improvements to how sandboxes start, run, and recover. We fixed restart loops that could leave a sandbox stuck, reduced transaction timeouts, improved container lifecycle management, and optimized our prewarmed app pools so there's usually a sandbox ready to go before you even need one. The result: sandboxes start faster, stay stable longer, and use fewer resources overall — which also contributes to better credit efficiency. ## 📋 Changes to Free Plans To keep the platform sustainable as we scale, we've introduced a **lifetime spend cap** on free daily credits. This means free accounts have a total credit ceiling over the life of the account. This does not affect **Paid plans**. w ## 🛠️ And a Whole Lot More We've made a ton of improvements, fixed bugs, and made things faster overall -- and we have some even bigger news to share with you soon about massive upgrades in capabilities to Draftbit, so stay tuned.   Thanks for building with Draftbit — we're just getting started. 💜 --- # What's New For October 2025 > We've been hard at work the last few weeks fixing bugs and improving stability for folks coming into the beta, and now that we've worked through most of those… ### We've been hard at work the last few weeks fixing bugs and improving stability for folks coming into the beta, and now that we've worked through most of those issues we're turning our attention to adding more visual editing features and better integrations with external services. Brian Luerssenon October 30, 2025  Hey everyone,\ \ We’re about 2-3 weeks into our beta at this point. Thanks for those of you who have shared feedback and improvements — we really appreciate it.\ \ The one bit of feedback we’ve heard consistently is that you want more “visual editing” features in Draftbit Next. This is what Draftbit has always been good at, and Draftbit Next while better in a lot of ways (Previews, Code Editing, AI Agent Editing) is a step back in terms of visual editing — things like adding new components, reordering screens, setting styles directly, etc. We’ve heard and completely agree that you should be able to make changes to your Draftbit apps directly. We’ll be prioritizing those features moving forward so that you can get the best of all three editing modalities: Visual Editing, AI Agentic Editing, and Full Code Editing.\ \ For the past few weeks we’ve been primarily focused on addressing a number of small issues and bugs found thanks to all of your help. We’ve now fixed a bunch of these, including:\ \- Importing from v1 is much more reliable for large apps.\ \- We’ve made the agent better and more reliable, and faster.\ \- You can target selection for v1 apps and Javascript files now.\ \- We’ve fixed Agent Threads not getting titles and fixed up the UI a bit for this.\ \- We’ve improve publishing reliability and we’ve also fixed a number of Native Preview issues.\ \- We’ve made it possible to edit content / text for more components and types.\ \- If you have more than 20 screens in your app, you can now view all of them in the All Screens view.\ \ We’ve added new capabilities, including:\ \- Advanced Configuration For New Agent Threads: You can now choose model and mode (ie Full vs Read Only). Soon you’ll also be able to select different agents.\ \- Activity Log for files: You can now see the changes specific to that file.\ \- We’ve added and updated our docs at http\://help.draftbit.com, and we’ve also made the agent aware of Draftbit Docs in case you want to ask it questions (combine with read-only mode if you just want to learn).\ \ We’re wrapping up a number of behind-the-scenes stability improvements so that we don’t have to alert you of upcoming deploys and we can keep everything seamless over long periods of time even while deploying out new fixes.\ \ Next up we’re actively working on bringing MCP servers and integrations, Environments and Environment Variables, and better direct/visual editing features to the table.\ \ As usual, if you have feedback, improvements, or ideas for us — Please share them!\ \ Thank you\ Brian\ Draftbit --- # Untitled > Privacy policy for Draftbit. --- # Untitled > Terms of service for Draftbit. --- # Untitled > Cookie policy for Draftbit. --- # Untitled > End User License Agreement for Draftbit.