Droppable

type: product

tagline: Your App. Now Editable.

description: Browser-based AI that enables anyone on your team to make real production changes through natural language prompts. Drop one line of code and transform your workflow.

category: Development Tools, AI-Powered Development, Team Collaboration


Visual Element Selection

type: feature

description: Click any element on your webpage to select it. Droppable highlights the element and extracts its context for AI-powered modifications.

benefit: Eliminates the need to describe what you want to change - just point and click.


Natural Language Prompts

description: Describe changes in plain English. Examples: 'Make this button green', 'Change text to Start Free Trial', 'Add rounded corners'. The AI understands context and makes precise code changes.

benefit: No coding knowledge required. Product managers, designers, and founders can ship changes directly.


Automated Pull Requests

description: Droppable generates the code changes and creates a pull request automatically. Your team reviews and merges through your existing workflow.

benefit: Maintains code quality and review processes while eliminating developer handoffs for simple changes.


Environment Management

description: Create isolated development environments from any GitHub repository. Droppable handles Docker containers, dependency installation, and development server orchestration.

benefit: Each team member can work in isolated environments without conflicts.


Team Collaboration

description: Multi-tenant account system with role-based access control. Owner, Admin, Member, and Client roles with granular permissions. Team invitations via email.

benefit: Give different team members appropriate access levels. Clients can view and interact with their assigned environments.


Whitelabel Support

description: Agencies can fully whitelabel the client dashboard with custom logos, colors, company name, and custom domains. Clients see your brand, not Droppable.

benefit: Perfect for agencies managing multiple client projects. Professional client experience under your brand.


Traditional Development Workflow

type: workflow

steps:
Designer creates mockup
PM writes ticket
Developer waits for assignment
Developer implements change
Code review and testing
Deployment

time: Days to weeks

bottleneck: Developer availability and handoffs


Droppable Workflow

steps:
Select element on page
Describe change in natural language
AI generates code and creates PR
Review and merge

time: Minutes to hours

bottleneck: None - anyone can make changes


title: Product Manager Shipping Features

description: PM wants to change button text and color based on A/B test results. Instead of waiting for developer, PM opens Droppable widget, selects button, types 'Change text to Start Free Trial and make it green', and creates PR.

user_type: Product Manager

time_saved: 2-3 days


title: Founder Making Quick Fixes

description: Founder notices typo on landing page during customer demo. Opens Droppable, clicks text, fixes typo, creates PR. Change is live within minutes after review.

user_type: Founder

time_saved: Hours to days


title: Designer Iterating on UI

description: Designer wants to test different button styles with real users. Uses Droppable to try multiple variations quickly without developer involvement.

user_type: Designer

time_saved: Multiple days per iteration


title: Agency Managing Client Projects

description: Agency uses whitelabel feature to give clients direct access to their environments. Clients can request simple changes themselves, reducing agency workload.

user_type: Agency

benefit: Reduced support burden, happier clients


Installation

type: technical

description: Add one script tag to your HTML with your environment ID. The Droppable widget loads and connects to your environment.


Technology Stack

backend: Node.js, Express, PostgreSQL with pgvector, WebSocket, Docker, AWS Fargate

frontend: React, Vite, PrimeReact

[Assistant] Claude AI (Anthropic)

deployment: Multi-target: Docker, AWS Fargate, Local


Security

features:
Role-based access control
Multi-tenant account isolation
Encrypted token storage
Session management with Passport.js
Environment-level permissions
Activity logging and audit trails


type: pricing

plan: Free Tier

features:
5 environments
Unlimited team members
GitHub integration
AI-powered changes
Pull request automation

price: Free


plan: Pro

features:
Unlimited environments
Whitelabel support
Custom domains
Priority support
Advanced analytics

price: Contact for pricing


type: benefit

title: Eliminate Developer Handoffs

description: Simple changes no longer require developer tickets, assignment, implementation, and review cycles. Non-technical team members make changes directly.


title: Ship Updates in Seconds

description: What used to take days now takes minutes. See changes in real-time, create PR instantly.


title: Maintain Code Quality

description: All changes go through PR review process. Your existing workflows and quality standards remain intact.


title: Empower Your Entire Team

description: Everyone can contribute - PMs, designers, founders, marketers. No coding skills required.


GitHub

type: integration

description: Seamless OAuth integration with GitHub. Sync repositories, create PRs automatically, manage environment permissions based on GitHub access.


AWS Fargate

description: Deploy production environments to AWS Fargate with automatic container orchestration, load balancing, and health monitoring.


Docker

description: Every environment runs in isolated Docker containers. Consistent development and production environments.


type: faq

question: What types of changes can Droppable make?

answer: Droppable excels at UI changes: text content, colors, styling, layout adjustments, button modifications, form changes. It can also handle simple logic changes, but works best for visual and content updates.


type: faq

question: Do I need to know how to code?

answer: No. Droppable is designed for non-technical users. Just select an element and describe what you want to change in plain English.


type: faq

question: How does Droppable maintain code quality?

answer: All changes create pull requests that go through your existing review process. Developers review and approve changes before they merge to production.


type: faq

question: Can I use this with any framework?

answer: Yes. Droppable works with React, Vue, Angular, vanilla JavaScript, and any web framework. The widget is framework-agnostic.


type: faq

question: What about security?

answer: Droppable uses role-based access control, encrypted token storage, multi-tenant isolation, and comprehensive audit logging. All changes require authentication and authorization.


type: faq

question: Can agencies whitelabel this for clients?

answer: Yes. The Pro plan includes full whitelabeling with custom logos, colors, company name, and custom domains.


type: comparison

traditional: Wait for developer availability

droppable: Anyone makes changes immediately

category: Speed


traditional: Write detailed tickets and specs

droppable: Point and describe in natural language

category: Ease of Use


traditional: Developer implements changes

droppable: AI implements changes

category: Resource Efficiency


traditional: Manual PR creation

droppable: Automated PR generation

category: Automation


traditional: Limited to technical team

droppable: Everyone can contribute

category: Team Empowerment


type: meta

company: Droppable

mission: Eliminate engineering bottlenecks for simple changes and empower entire teams to ship updates without developer handoffs.

target_audience:
Product Managers
Founders
Designers
Agencies
Startups
Development Teams