diff --git a/docs/accounts-billing/imgs/pricing-timeline-2025-dark.png b/docs/accounts-billing/imgs/pricing-timeline-2025-dark.png index 6d1de0a3..521f6422 100644 Binary files a/docs/accounts-billing/imgs/pricing-timeline-2025-dark.png and b/docs/accounts-billing/imgs/pricing-timeline-2025-dark.png differ diff --git a/docs/accounts-billing/imgs/pricing-timeline-2025-light.png b/docs/accounts-billing/imgs/pricing-timeline-2025-light.png index cb1d6056..8f34e71b 100644 Binary files a/docs/accounts-billing/imgs/pricing-timeline-2025-light.png and b/docs/accounts-billing/imgs/pricing-timeline-2025-light.png differ diff --git a/docs/accounts-billing/new-pricing-comparison.md b/docs/accounts-billing/new-pricing-comparison.md new file mode 100644 index 00000000..4d32db4c --- /dev/null +++ b/docs/accounts-billing/new-pricing-comparison.md @@ -0,0 +1,793 @@ +--- +slug: plan-comparison +title: "Plan Comparison" +description: "Compare FlutterFlow plans and features to find the right plan for your needs" +hide_table_of_contents: true +sidebar_position: 3 +--- + +
+ + + +import {useState, useEffect} from 'react'; + +export const PricingToggles = () => { + const [currency, setCurrency] = useState('USD'); + const [billingPeriod, setBillingPeriod] = useState('monthly'); + + // Update sticky header when pricing changes + useEffect(() => { + // Trigger sticky header recreation when pricing data changes + const event = new CustomEvent('pricingChanged'); + window.dispatchEvent(event); + }, [currency, billingPeriod]); + + const pricingData = { + USD: { + monthly: { + free: 0, + individual: 39, + growth: '1st seat: $80, \n 2nd seat: $55', + business: '1st seat: $150, \n Seats 2-5: $85 each*', + enterprise: 'Custom' + }, + annual: { + free: 0, + individual: 351, // $360/year = $30/month effective + growth: '1st seat: $720, \n 2nd seat: $495', + business: '1st seat: $1,350, \n Seats 2-5: $765*', // $4752/year = $396/month effective + enterprise: 'Custom' + } + }, + INR: { + monthly: { + free: 0, + individual: 1300, // Official INR rate + growth: '1st seat: ₹2,650, \n 2nd seat: ₹1,850', // Official INR rate + business: '1st seat: ₹5,100, \n Seats 2-5: ₹2,850 each*', // Official INR rate + enterprise: 'Custom' + }, + annual: { + free: 0, + individual: 11700, // ₹11,700/year = ₹975/month effective + growth: '1st seat: ₹27,000, \n 2nd seat: ₹13,500', + business: '1st seat: ₹45,900, \n Seats 2-5: ₹25,650*', + enterprise: 'Custom' + } + } + }; + + const formatPrice = (price) => { + // Return the string directly if the price is a string + + if (typeof price === 'string') return price; + + if (currency === 'USD') { + return `$${price}`; + } else { + return `₹${price.toLocaleString('en-IN')}`; + } + }; + + const getPeriodText = () => { + return billingPeriod === 'annual' ? ( + <> + billed annually + > + ) : 'per month'; + }; + + const currentPrices = pricingData[currency][billingPeriod]; + + return ( +Plan | +Free {formatPrice(currentPrices.free)} {getPeriodText()} |
+ Basic {formatPrice(currentPrices.individual)} {getPeriodText()} |
+ Growth {formatPrice(currentPrices.growth)} {getPeriodText()} |
+ Business {formatPrice(currentPrices.business)} {getPeriodText()} |
+ Enterprise {formatPrice(currentPrices.enterprise)} pricing |
+
---|---|---|---|---|---|
Core Platform Features | +|||||
Visual Development Environment Drag & drop builder for creating apps visually |
+ ✅ | +✅ | +✅ | +✅ | +✅ | +
1K+ Prebuilt Templates Ready-to-use app templates and components |
+ ✅ | +✅ | +✅ | +✅ | +✅ | +
Project Count Number of projects you can create |
+ 2 projects | +Unlimited | +Unlimited | +Unlimited | +Unlimited | +
AI Generation AI-powered assistance for building and coding |
+ 5 requests/lifetime | +50 requests/mo | +200 requests/mo | +500 requests/mo | +Custom | +
Data & Integrations | +|||||
Firebase Integration Connect to Firestore, Firebase Auth, and more |
+ ✅ | +✅ | +✅ | +✅ | +✅ | +
Supabase Integration Connect to Supabase for database and auth |
+ ✅ | +✅ | +✅ | +✅ | +✅ | +
AI Agents Create AI agents with OpenAI, Anthropic, and Google |
+ 0 | +1 | +Unlimited | +Unlimited | +Unlimited | +
API Endpoints Connect to external APIs and services |
+ 2 | +Unlimited | +Unlimited | +Unlimited | +Unlimited | +
Swagger/OpenAPI Imports Import API specifications automatically |
+ ❌ | +✅ | +✅ | +✅ | +✅ | +
Development Environments Separate databases and configuration values for testing and production |
+ 1 (default only) | +1 (default only) | +Up to 1 additional (+default) | +Up to 2 additional (+default) | +Custom | +
Development Features | +|||||
Code Extensibility Add custom code to extend functionality |
+ ✅ | +✅ | +✅ | +✅ | +✅ | +
Live Debugging Test your app in the browser and hot reload |
+ ✅ | +✅ | +✅ | +✅ | +✅ | +
Visual Logic Builder Create app logic with a visual editor |
+ ✅ | +✅ | +✅ | +✅ | +✅ | +
State Management Manage app data and user interface states |
+ ✅ | +✅ | +✅ | +✅ | +✅ | +
Custom Code Expressions Write custom expressions and logic |
+ ❌ | +✅ | +✅ | +✅ | +✅ | +
One-Click Localization (i18n) Automatically translate your app using Google Translate API |
+ ❌ | +❌ | +✅ | +✅ | +✅ | +
Push to GitHub Push your project code to GitHub |
+ ❌ | +❌ | +✅ | +✅ | +✅ | +
VS Code Extension Sync custom code files back and forth between FlutterFlow and VS Code |
+ ❌ | +❌ | +✅ | +✅ | +✅ | +
Automated Testing Run automated tests on your applications |
+ ❌ | +❌ | +❌ | +Up to 3 tests per project | +Unlimited tests | +
Custom Classes Bring custom Dart classes into your app |
+ ❌ | +✅ | +✅ | +✅ | +✅ | +
YAML Editing Refactor your project with by editing the YAML representation |
+ ❌ | +✅ | +✅ | +✅ | +✅ | +
Project API Programmatic access to project data |
+ ❌ | +✅ | +✅ | +✅ | +✅ | +
MCP Server (Experimental) Model Context Protocol server integration |
+ ❌ | +✅ | +✅ | +✅ | +✅ | +
Cloud Functions Write and deploy Firebase Cloud Functions directly from FlutterFlow |
+ ❌ | +✅ | +✅ | +✅ | +✅ | +
CLI Command-line interface for downloading code and project management |
+ ❌ | +✅ | +✅ | +✅ | +✅ | +
Configuration File Snippets Directly modify Info.plist, main.dart, Android manifest, and other config files |
+ ❌ | +✅ | +✅ | +✅ | +✅ | +
Local Run Desktop Emulator Run code locally with automatic environment setup |
+ ❌ | +✅ | +✅ | +✅ | +✅ | +
Design Features | +|||||
Design Systems Consistent color schemes, typographic, icons, and more |
+ ✅ | +✅ | +✅ | +✅ | +✅ | +
Animations & Haptic Touch Add animations and haptic feedback to your app |
+ ✅ | +✅ | +✅ | +✅ | +✅ | +
Custom Fonts & Icons Upload and use custom fonts and icons |
+ ✅ | +✅ | +✅ | +✅ | +✅ | +
Custom Typography Presets Create reusable text styles and presets |
+ ❌ | +❌ | +❌ | +✅ | +✅ | +
Screenshot Generator Generate app screenshots automatically for App Store review |
+ ✅ | +✅ | +✅ | +✅ | +✅ | +
Figma Theme Import Import color and typography themes from Figma |
+ ✅ | +✅ | +✅ | +✅ | +✅ | +
Figma Frame Import AI-powered import of Figma frames to FlutterFlow |
+ ❌ | +❌ | +❌ | +100 requests/mo | +Custom | +
Advanced App Features | +|||||
Push Notifications Send notifications to app users |
+ ❌ | +✅ | +✅ | +✅ | +✅ | +
Payments Integration Integrate Stripe and other payment providers |
+ ❌ | +✅ | +✅ | +✅ | +✅ | +
Ads Integration Monetize your app with advertisements |
+ ❌ | +✅ | +✅ | +✅ | +✅ | +
Third-Party Package Imports Add pub.dev packages and GitHub dependencies |
+ ❌ | +✅ | +✅ | +✅ | +✅ | +
Debug Panel Advanced debugging tools and console |
+ ❌ | +✅ | +✅ | +✅ | +✅ | +
Collaboration Features | +|||||
Number of Editors Team members who can edit projects |
+ 1 | +1 | +Up to 2 | +Up to 5* | +Unlimited | +
Single Project Collaborator Add-Ons Allow non-team members to collaborate on a single project |
+ None | +None | +Up to 4 collaborators available for purchase | +Up to 10 collaborators available for purchase | +N/A (unlimited team editors) | +
Real-Time Collaboration Work together on projects simultaneously |
+ ❌ | +❌ | +✅ | +✅ | +✅ | +
Project Commenting Add comments and feedback to projects |
+ ❌ | +✅ | +✅ | +✅ | +✅ | +
Manual Commits Make explicit named commits to the current branch for version control |
+ ✅ | +✅ | +✅ | +✅ | +✅ | +
Number of Branches Create and manage multiple project branches (all plans include main branch) |
+ 1 (main only) | +1 (main only) | +Up to 2 open branches (+main) | +Up to 5 open branches (+main) | +Custom | +
Automated Snapshot Backups Automatic project backups and version control |
+ Up to 1 hour prior | +Up to 1 day prior | +Up to 3 days prior | +Up to 7 days prior | +Custom | +
Activity Logging Track project changes and user activity |
+ ❌ | +❌ | +❌ | +❌ | +✅ | +
Project Level Access Control Manage permissions for individual projects |
+ Manage view-only collaborators only | +Manage view-only collaborators only | +✅ | +✅ | +✅ | +
Centralized Billing Manage team billing from one account |
+ ❌ | +❌ | +✅ | +✅ | +✅ | +
Library Features | +|||||
Library Imports Add FlutterFlow libraries to your projects |
+ ✅ | +✅ | +✅ | +✅ | +✅ | +
Library Publishing Publish your projects as reusable libraries |
+ ❌ | +✅ | +✅ | +✅ | +✅ | +
Deployment | +|||||
Web Deployment Deploy your app as a web application |
+ ✅ | +✅ | +✅ | +✅ | +✅ | +
Free Subdomains Deploy your web app to FlutterFlow subdomains |
+ Up to 2 | +Up to 20 | +Up to 20 | +Up to 20 | +Unlimited | +
Custom Domains Deploy to your own custom domain |
+ ❌ | +1 free domain, more available for purchase | +1 free domain, more available for purchase | +1 free domain, more available for purchase | +Custom | +
Custom Web Favicon Set custom favicon for web publishing |
+ ❌ | +✅ | +✅ | +✅ | +✅ | +
FlutterFlow Watermark Removal Remove FlutterFlow branding from published apps |
+ ❌ | +✅ | +✅ | +✅ | +✅ | +
Code Download Download your project's source code |
+ ❌ | +✅ | +✅ | +✅ | +✅ | +
APK Download Download Android APK files |
+ ❌ | +✅ | +✅ | +✅ | +✅ | +
One-Click Apple & Google Store Deployment Deploy directly to app stores with one click |
+ ❌ | +✅ | +✅ | +✅ | +✅ | +
Support | +|||||
Account and Billing Support Help with account management and billing questions |
+ ✅ | +✅ | +✅ | +✅ | +✅ | +
Community Support Access to FlutterFlow community forums |
+ ✅ | +✅ | +✅ | +✅ | +✅ | +
Email Support Get help via email from our support team |
+ ❌ | +✅ | +✅ | +✅ | +✅ | +
In-App Support Chat support directly within FlutterFlow |
+ ❌ | +❌ | +✅ | +✅ | +✅ | +
Dedicated Live Support Direct access to dedicated support specialists |
+ ❌ | +❌ | +❌ | +❌ | +✅ | +
Advanced Controls & Extensibility | +|||||
Version Pinning Control FlutterFlow platform upgrades |
+ ❌ | +❌ | +❌ | +❌ | +✅ | +
Single Sign-On (SSO) Integrate with your organization's SSO provider |
+ ❌ | +❌ | +❌ | +❌ | +✅ | +
Accessibility Advanced accessibility features and compliance |
+ ❌ | +❌ | +❌ | +❌ | +✅ | +
Access to Custom Engineering Solutions Custom development and engineering support |
+ ❌ | +❌ | +❌ | +❌ | +✅ | +
Current Plan | -New Plan | -What's Changing? | -
---|---|---|
Solo Plans | -||
Free ($0) | -Free ($0) | -
-
|
-
Standard ($30) | -Individual ($39) ⬆️ | -
-
|
-
Pro ($70) | -Individual ($39) ⬇️ | -
-
|
-
Collaboration Plans | -||
Teams ($140) 2 users |
- Growth ($135) ⬇️ | -
-
|
-
Teams ($210–$350) 3–5 users |
- Business ($495) ⬆️ | -
-
|
-
Teams ($420+) 6+ users |
- Enterprise (Contact Sales) ⬆️ | -
-
|
-
-- For new users, the pricing and packaging will apply immediately on August 4, 2025. After this date, no legacy plans (Standard, Pro, Teams) can be purchased or updated. -- For existing Free, Standard, Pro, and Teams plan users, billing and feature access will remain unchanged during a **30-day transition period** where you will have the ability to elect into a new plan. On September 4, 2025, your account will be moved to one of the new plans if no action is taken. - - **Important exception:** If you're currently on a Teams plan, you will no longer be able to use your team features on personal projects starting August 4, 2025. To maintain existing Teams plan feature access on those projects, you must either: +- For new users, the pricing and packaging will apply immediately on August 18, 2025. After this date, no legacy plans (Standard, Pro, Teams) can be purchased or updated. +- For existing Free, Standard, Pro, and Teams plan users, billing and feature access will remain unchanged during a **30-day transition period** where you will have the ability to elect into a new plan. On September 17, 2025, your account will be moved to one of the new plans if no action is taken. + - **Important exception:** If you're currently on a Teams plan, you will no longer be able to use your team features on personal projects starting August 18, 2025. To maintain existing Teams plan feature access on those projects, you must either: - Move your personal projects into your Team, or - - Convert your current Teams plan to a new Growth or Business plan and purchase a separate Individual plan for your personal work. + - Convert your current Teams plan to a new Growth or Business plan and purchase a separate Basic plan for your personal work. - **Note:** All plan updates will take effect at 12:00 AM local time on the specified effective date.
-When we launched FlutterFlow, we had one goal: make it radically easier to build beautiful, powerful digital products. Four years later, we're a full development platform that goes from idea to app store. We now have collaboration features, AI tools, lots of integrations, branching, development environments, and more, built in. +When we launched FlutterFlow, we had one goal: make it radically easier to build beautiful, powerful digital products. Four years later, we’re a full development platform that goes from idea to app store. We now have collaboration features, AI tools, lots of integrations, branching, development environments, and more, built in. + +Now our plans are evolving to reflect that growth. We’ve introduced new features across every tier and restructured our plans to better align with the way people build today and how their needs change as they move from MVP to scaling production apps. -Now our plans are evolving to reflect that growth. We've introduced new features across every tier and restructured our plans to better align with the way people build today and how their needs change as they move from MVP to scaling production apps.
@@ -212,7 +110,7 @@ The new plans introduce pricing by team size and more structured feature access-For a detailed comparison of the current and new plans, including feature breakdown and pricing, please see the [Detailed Plan Changes](#detailed-plan-changes) table above. +For a detailed comparison of the current and new plans, including feature breakdown and pricing, please see the **[Detailed Plan Changes](new-pricing-comparison.md)** table above.
@@ -220,10 +118,10 @@ For a detailed comparison of the current and new plans, including feature breakdWe recommend:
+The tiers are designed as a general guide to help highlight which plans tend to work best for different types of use cases, but we know that every user’s needs are different and you’re always welcome to choose the one that works best for you. That said, here’s how we generally recommend thinking about the tiers based on common usage patterns:
-If you do not make a selection during the election period (August 4, 2025 - September 4, 2025), your new plan will be automatically determined based on your current team size. For example: +If you do not make a selection during the election period (August 18, 2025 - September 17, 2025), your new plan will be automatically determined based on your current **team size**. For example:
-We'll notify you directly in the app and by email before the September 4, 2025 migration, so you'll have a chance to review or adjust your plan if needed. If you're unsure, contact us and we'll help you confirm your new plan. +We’ll notify you directly in the app and by email before the September 17, 2025 migration, so you’ll have a chance to review or adjust your plan if needed. If you’re unsure, contact us and we’ll help you confirm your new plan
-Yes! By proactively choosing to move to any of the new plans with annual billing during the election period (before September 4, 2025), you will receive 20% off your first year. +Yes! By proactively choosing to move to any of the new plans with annual billing during the election period (before September 17, 2025), you will receive **20% off your first year**.
@@ -268,17 +166,17 @@ Yes! By proactively choosing to move to any of the new plans with annual billing Can I stay on my old plan?-No. All existing plans will be retired on September 4, 2025, and users will be automatically transitioned to the new plans based on their current team size. This helps us simplify billing, improve feature alignment, and deliver a more consistent experience across all teams. +No. All existing plans will be retired on September 17, 2025, and users will be automatically transitioned to the new plans based on their current team size. This helps us simplify billing, improve feature alignment, and deliver a more consistent experience across all teams.
-If you're currently a paying user and would prefer not to be part of the migration to one of the new paid plans, you have two paths: +If you’re currently a paying user and would prefer not to be part of the migration to one of the new paid plans, you have two paths:
-If you'd like to review your options or adjust your usage ahead of time, our support team is here to help. You will receive an email confirming the plan your account will move to, but can also confirm by logging into your account after August 4, 2025 to see how your team maps to the new tiers. +If you’d like to review your options or adjust your usage ahead of time, our support team is here to help. You will receive an email confirming the plan your account will move to, but can also confirm by logging into your account after August 18, 2025 to see how your team maps to the new tiers.
@@ -311,10 +209,9 @@ To learn more or explore a custom Enterprise solution for your team, please reac Will my existing FlutterFlow apps stop working?-No, your current apps will continue to function and remain deployed, though access to certain features may change depending on your new plan tier starting September 4, 2025. -
-
-If you choose to elect into a new plan during the election period before September 4, 2025, those feature changes will take effect as soon as your new plan becomes active.
+1. No, your current apps will continue to function and remain deployed, though access to certain features may change depending on your new plan tier starting September 17, 2025\.
+2. If you elect into a new plan during the election period before September 17, 2025, those feature changes will take effect as soon as your new plan becomes active.
+
-Access to features will be updated according to your new plan beginning September 4, 2025. If you're currently using a feature that is moving to a higher tier, there are two possible outcomes: -
-This approach ensures existing work isn't disrupted, while still aligning future access with your selected plan. -
+ + ### Free Users-Starting August 4, 2025 for new users and September 4, 2025 for existing users, 1:1 support will no longer be included with the Free plan. However, we offer a collection of self-serve resources to help you continue building with confidence: -
-These resources are designed to help all users succeed without needing to rely on 1:1 technical support. -
--Our Support team will still be available at support@flutterflow.io to all users to assist with billing or account-related issues. -
-Starting September 4, 2025, all personal Free plan projects will be archived until you actively select two to keep editable. This selection is lifetime and cannot be changed afterwards. All other projects will be archived – they'll still appear on your dashboard, and live apps will remain live, but you won't be able to open, edit, or publish updates unless you upgrade. -
--For users on a team-based plan but not on a personal paid plan, this 2-project selection requirement only applies to your personal projects. You will still be able to edit any projects that belong to your team. -
-We've set this policy to ensure everyone can explore FlutterFlow for free while keeping heavy usage sustainable. We won't remove any of your existing projects. They're safe and accessible whenever you decide to upgrade. -
-Any existing projects already live will remain deployed, even if you have more than 2 projects currently deployed. However, on the new Free plan, you'll be limited to editing and publishing updates to at most 2 active projects. All other projects will remain deployed, but you won't be able to make changes or redeploy them unless you upgrade to a paid plan. +Any existing projects already live will remain deployed, even if you have more than 2 projects currently deployed. However, on the new Free plan, you’ll be limited to editing and publishing updates to at most 2 active projects. All other projects will remain deployed, but you won’t be able to make changes or redeploy them unless you upgrade to a paid plan.
-If you delete one of your active projects, we'll automatically unarchive your most recently edited archived project to replace it. +If you delete one of your active projects, we’ll automatically unarchive your most recently edited archived project to replace it.
-If you only had 2 projects total and delete one, you'll be able to create a new project instead. +If you only had 2 projects total and delete one, you’ll be able to create a new project instead.
@@ -416,30 +340,25 @@ If you only had 2 projects total and delete one, you'll be able to create a new What happens to projects with multiple collaborators?-Starting September 4, 2025, all project collaboration must occur within a team (Growth or Business). This means: +Starting September 17, 2025, all project collaboration must occur within a team (Growth or Business). This means:
-If you plan to continue collaborating with users outside your organization, we recommend purchasing separate team plans per organization to maintain separation between projects and collaborators. -
--Note: If you choose to migrate to a new paid plan before September 4, 2025, any collaborators not on your team will immediately move to view-only access at the time of conversion. +Note: If you choose to migrate to a new paid plan before September 17, 2025, any collaborators not on your team will immediately move to view-only access at the time of conversion. +
-No. As a part of the existing Teams plan retirement, team size will be locked on August 4, 2025. To adjust your team size after that date, please transition to one of the new plans (Growth or Business). +No. As a part of the existing Teams plan retirement, team size will be locked on August 18, 2025. To adjust your team size after that date, please transition to one of the new plans (Growth or Business).
-Teams with more than 5 users who do not wish to move yet to an Enterprise contract will be priced in bundles of 5 seats under the Business tier, based on the number of users in their team as of September 4, 2025 and billed on a monthly basis. For example: +- Teams with more than 5 users who do not wish to move yet to an Enterprise contract can continue on the Business tier under a transitional pricing structure. These teams will be billed at the standard Business tier seat pricing and then $85/seat/month for each additional seat over 5. Pricing will be based on the number of users in the team as of September 17, 2025 and billed on a monthly basis.
--This option allows larger retail teams to continue operating under the Business feature set without immediate contract negotiation but will be available only to existing 6+ seat teams for 12 months from September 4, 2025 through September 4, 2026 to ensure continuity without immediate contract negotiation. +- This option allows larger retail teams to continue operating under the Business feature set without immediate contract negotiation, but will be available only to existing 6+ seat teams for 12 months from September 17, 2025 through September 17, 2026 to ensure continuity without immediate contract negotiation.
-Note: Your seat count will be locked based on your team size as of September 4, 2025. You may reduce seats later, but will not be able to add more or expand beyond the feature set and usage limits of the current Business tier (except for any run-time features already in use that are grandfathered). +- Note: Your seat count will be locked based on your team size as of September 17, 2025. You may reduce seats later, but will not be able to add more or expand beyond the feature set and usage limits of the current Business tier (except for any run-time features already in use that are grandfathered).
However, if you would like to maintain a single account, collaboration across all of your team members, enterprise level features and support, please reach out to sales@flutterflow.io. @@ -470,7 +385,7 @@ However, if you would like to maintain a single account, collaboration across al Can I belong to multiple teams? How will that be billed?
-Yes, users will be able to belong to multiple teams in FlutterFlow in the new plans – this is a new capability as part of our updated team and collaboration structure. Each team is treated as a separate billing entity, with its own plan, users, and usage limits. +Yes, starting August 18, 2025, users will be able to belong to multiple teams in FlutterFlow in the new plans – this is a new capability as part of our updated team and collaboration structure. Each team is treated as a separate billing entity, with its own plan, users, and usage limits.
If you are added as an editor on more than one team, you will count toward the seat total on each of those teams, and each team will manage your seat and billing as part of their own subscription. You will not be billed individually – all billing remains centralized at the team level. @@ -485,13 +400,8 @@ Note: you can also be added as a view-only collaborator on projects that are a p Can I share projects across multiple teams?
-No, projects cannot be shared across multiple teams. Each project belongs to at most one team, and access is managed within that team's structure. -
--If you want someone from another team to collaborate on a project, they must be invited into your team as an editor. They will then count toward your team's seat usage and billing. -
--This approach ensures consistent permissions, secure collaboration, and clean billing across organizations. +- No, projects cannot be shared across multiple teams. Each project belongs to at most one team, and access is managed within that team’s structure. +- If you want someone from another team to collaborate on a project, they must be invited into your team as an editor or granted access using a Single Project Collaborator Pass.
@@ -500,21 +410,14 @@ This approach ensures consistent permissions, secure collaboration, and clean bi What if I want to continue collaborating with project collaborators who are not on a Teams plan with me?-With the new pricing model, collaboration is only supported within shared Teams plans. This means that to work together on a project, all collaborators must be part of the same Growth, Business, or Enterprise team. However, users can now be members of multiple teams at the same time, which allows you to create separate teams for different projects, depending on who you need to collaborate with. -
--Project-level collaboration (where individuals outside your team could be added to specific projects) is being phased out to simplify permissions, ensure security, and support shared billing. -
--Project-level collaboration (where individuals outside your team could be added to specific projects) is being phased out to simplify permissions, ensure security, and support shared billing. -
-If you would like to continue collaborating:
--This change ensures that every project has clear ownership, consistent permissions, and a scalable path for team-based collaboration. +- With the new pricing model, collaboration is only supported within shared Teams plans. This means that to work together on a project, all collaborators must be part of the same Growth, Business, or Enterprise team. However, users can now be members of multiple teams at the same time, which allows you to create separate teams for different projects, depending on who you need to collaborate with. +- Project-level collaboration (where individuals outside your team could be added to specific projects) is being phased out to simplify permissions, ensure security, and support shared billing. +- If you would like to continue collaborating: + - You can invite others to join your team (additional seats may require an upgrade depending on your plan). + - Or, they can create a new team and invite you, depending on who should own billing and project access. + - **New:** If you're on a Growth or Business plan, you may also purchase Single Project Collaborator passes, which allows you to grant another paid user access to a single project without adding them to your full team. Each pass is $15/month and can be reassigned to different collaborators or projects as needed. You can purchase up to 4 (Growth) or up to 10 (Business). This collaborator must themselves have also purchased a paid Basic plan to be eligible to be a single project collaborator. +- This change ensures that every project has clear ownership, consistent permissions, and a scalable path for team-based collaboration. +
@@ -522,44 +425,51 @@ This change ensures that every project has clear ownership, consistent permissio-We will now offer multiple plan options to support agencies of all sizes – whether you're a solo freelancer, a fast-growing studio, or an established consultancy. We believe the best path depends on your team size and how you prefer to work with your clients: -
-If you are currently on an annual plan and choose to cancel your subscription during the transition period (August 4, 2025 - September 4, 2025), you will be eligible for a prorated refund. This is to account for any features you may have prepaid for under your current plan that will no longer be available once the new plans take effect. +If you are currently on an annual plan and choose to cancel your subscription during the transition period (August 18, 2025 - September 17, 2025), you will be eligible for a pro-rated refund. This is to account for any features you may have prepaid for under your current plan that will no longer be available once the new plans take effect. +
++If you have questions about your billing, please contact support at support@flutterflow.io
-Localized pricing will continue where applicable. If you're in a supported region, your billing will reflect adjusted rates at existing discounts based on your location. +Localized pricing will continue where applicable. If you’re in a supported region, your billing will reflect adjusted rates at existing discounts based on your location.
@@ -620,10 +534,10 @@ What if I am billed in INR right now? If your account is billed in INR, your pricing will follow our localized rates:All INR pricing reflects the same features and plan structures as USD pricing, with adjustments for local purchasing power. @@ -637,7 +551,11 @@ All INR pricing reflects the same features and plan structures as USD pricing, w I have special access. How will this change impact me?
-If you currently have Special Access (such as through a community program, academic use, or other exception), your FlutterFlow experience will remain unchanged. You will continue to have the same benefits provided under your existing Special Access status, which is separate from the new plan structure. +- If you currently have Special Access (such as through a community program, academic use, or other exception), your FlutterFlow experience will remain unchanged. You will continue to have the same benefits provided under your existing Special Access status, which is separate from the new plan structure. +- **Note:** + - Users with Special Access can collaborate with an unlimited number of users, but those collaborators must also have either Special Access or be on a paid plan. + - Special Access may be granted at either the individual or team level. If only the individual has Special Access, they will not have full feature access when working on team projects unless the team also has Special Access. +
@@ -646,10 +564,9 @@ If you currently have Special Access (such as through a community program, acade Will the referral program still exist with the new plans, now that the Pro plan is going away?-With the retirement of the Pro plan, our current referral program will also be sunset. This means any active referral discounts will end at your next renewal. However, any earned referral credits will remain in your account and can be redeemed for equivalent free months of the new Individual plan. -
--We're actively exploring what a future referral or incentive program could look like under the new pricing model, with the goal of better supporting and rewarding our community as we grow. +- With the retirement of the Pro plan, our current referral program will also be sunset. This means any active referral discounts will end at your next renewal. However, any earned referral credits will remain in your account and can be redeemed for equivalent free months of the new Growth plan. +- We’re actively exploring what a future referral or incentive program could look like under the new pricing model, with the goal of better supporting and rewarding our community as we grow. +
diff --git a/docusaurus.config.ts b/docusaurus.config.ts index 524c8f8a..aeec2c39 100644 --- a/docusaurus.config.ts +++ b/docusaurus.config.ts @@ -11,6 +11,9 @@ const config: Config = { onBrokenMarkdownLinks: 'throw', onBrokenAnchors: 'throw', favicon: 'logos/favicon.png', + clientModules: [ + require.resolve('./src/js/table-helpers.js'), + ], i18n: { defaultLocale: 'en', locales: ['en'], diff --git a/src/js/table-helpers.js b/src/js/table-helpers.js new file mode 100644 index 00000000..4217df30 --- /dev/null +++ b/src/js/table-helpers.js @@ -0,0 +1,197 @@ +import ExecutionEnvironment from "@docusaurus/ExecutionEnvironment"; + +let floatingHeader = null; +let cleanup = null; + +function createFloatingHeader(originalHeader) { + if (floatingHeader) return floatingHeader; + + // Get the original table for width measurements + const originalTable = originalHeader.closest("table"); + + // Clone the original header + const headerClone = originalHeader.cloneNode(true); + + // Create floating container + floatingHeader = document.createElement("div"); + + // Check if we're on a wide screen where sidebar is visible + const isWideScreen = window.innerWidth >= 997; + + // Get the actual sidebar width from CSS variables + let sidebarWidth = "0px"; + if (isWideScreen) { + const computedStyle = getComputedStyle(document.documentElement); + const docSidebarWidth = computedStyle.getPropertyValue( + "--doc-sidebar-width" + ); + sidebarWidth = docSidebarWidth || "300px"; // fallback to 300px + } + + floatingHeader.style.cssText = ` + position: fixed; + top: 60px; + left: ${sidebarWidth}; + right: 0; + z-index: 1000; + background: var(--ifm-background-color); + box-shadow: 0 2px 4px rgba(0,0,0,0.1); + display: none; + overflow-x: auto; + padding: 0 20px; + `; + + // Create table wrapper for the floating header + const floatingTable = document.createElement("table"); + floatingTable.className = "simplified-pricing-table"; + floatingTable.style.cssText = ` + margin: 0 auto; + width: 100%; + max-width: 1200px; + table-layout: fixed; + border-collapse: collapse; + `; + + floatingTable.appendChild(headerClone); + floatingHeader.appendChild(floatingTable); + document.body.appendChild(floatingHeader); + + // Copy column widths from original table to floating table + const originalCells = originalHeader.querySelectorAll("th"); + const floatingCells = headerClone.querySelectorAll("th"); + + // Get the computed width of the original table + const originalTableRect = originalTable.getBoundingClientRect(); + floatingTable.style.width = originalTableRect.width + "px"; + + originalCells.forEach((originalCell, index) => { + if (floatingCells[index]) { + const cellRect = originalCell.getBoundingClientRect(); + floatingCells[index].style.width = cellRect.width + "px"; + floatingCells[index].style.minWidth = cellRect.width + "px"; + floatingCells[index].style.maxWidth = cellRect.width + "px"; + } + }); + + return floatingHeader; +} + +function handleScroll(originalHeader) { + if (!originalHeader) return; + + const headerRect = originalHeader.getBoundingClientRect(); + const isHeaderVisible = headerRect.bottom > 60; // Account for navbar + + if (!isHeaderVisible) { + // Original header is out of view, show floating header + const floating = createFloatingHeader(originalHeader); + floating.style.display = "block"; + } else { + // Original header is visible, hide floating header + if (floatingHeader) { + floatingHeader.style.display = "none"; + } + } +} + +function findPricingTable() { + // Try multiple selectors to find the table + let table = document.getElementById("pricing-table"); + if (!table) { + table = document.querySelector(".simplified-pricing-table"); + } + + let originalHeader = document.getElementById("table-header"); + if (!originalHeader && table) { + originalHeader = table.querySelector("thead"); + } + + return { table, originalHeader }; +} + +function initFloatingHeader() { + // Clean up any existing setup + if (cleanup) cleanup(); + + const { table, originalHeader } = findPricingTable(); + + if (!table || !originalHeader) { + // Table might not be rendered yet (React component), try again later + setTimeout(initFloatingHeader, 500); + return; + } + + const scrollHandler = () => handleScroll(originalHeader); + + // Use passive event listeners for better performance + window.addEventListener("scroll", scrollHandler, { passive: true }); + + // Handle window resize to update column widths + const resizeHandler = () => { + if (floatingHeader) { + // Remove and recreate floating header with new measurements + if (floatingHeader.parentNode) { + floatingHeader.parentNode.removeChild(floatingHeader); + } + floatingHeader = null; + } + }; + window.addEventListener("resize", resizeHandler, { passive: true }); + + // Listen for pricing changes from React component + const pricingChangeHandler = () => { + if (floatingHeader) { + // Remove and recreate floating header with updated pricing + if (floatingHeader.parentNode) { + floatingHeader.parentNode.removeChild(floatingHeader); + } + floatingHeader = null; + } + }; + window.addEventListener("pricingChanged", pricingChangeHandler); + + // Cleanup function + cleanup = () => { + window.removeEventListener("scroll", scrollHandler); + window.removeEventListener("resize", resizeHandler); + window.removeEventListener("pricingChanged", pricingChangeHandler); + if (floatingHeader && floatingHeader.parentNode) { + floatingHeader.parentNode.removeChild(floatingHeader); + floatingHeader = null; + } + }; +} + +if (ExecutionEnvironment.canUseDOM) { + // Initialize on route changes + if (typeof window !== "undefined") { + // Safari might need a longer delay + const isSafari = + navigator.userAgent.includes("Safari") && + !navigator.userAgent.includes("Chrome"); + const delay = isSafari ? 300 : 100; + + // Initial setup with longer delay for React rendering + setTimeout(initFloatingHeader, delay); + + // Setup for route changes + const originalPushState = history.pushState; + const originalReplaceState = history.replaceState; + + const onRouteChange = () => { + setTimeout(initFloatingHeader, delay); + }; + + history.pushState = function (...args) { + originalPushState.apply(this, args); + onRouteChange(); + }; + + history.replaceState = function (...args) { + originalReplaceState.apply(this, args); + onRouteChange(); + }; + + window.addEventListener("popstate", onRouteChange); + } +} diff --git a/static/css/table_style.css b/static/css/table_style.css index ae9484bd..b528f064 100644 --- a/static/css/table_style.css +++ b/static/css/table_style.css @@ -2,10 +2,11 @@ * Pricing table styles for plan-pricing.md */ - .pricing-table-container { +/* Pricing table container */ +.pricing-table-container { max-width: 1200px; margin: 0 auto; - overflow: hidden; + overflow: auto; } .mobile-scroll-hint { @@ -33,11 +34,12 @@ border-spacing: 0; margin: 1rem 0; table-layout: fixed; + line-height: 1.3; } .simplified-pricing-table th, .simplified-pricing-table td { - padding: 1rem; + padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid #ebeaf0; border-left: 0; @@ -45,21 +47,10 @@ vertical-align: top; } -/* Light mode table borders */ -[data-theme='light'] .simplified-pricing-table th, -[data-theme='light'] .simplified-pricing-table td { - border-bottom: 1px solid #ebeaf0; -} - -/* Dark mode table borders */ -[data-theme='dark'] .simplified-pricing-table th, -[data-theme='dark'] .simplified-pricing-table td { - border-bottom: 1px solid #404040; -} - .simplified-pricing-table th { background-color: #f5f5f5; font-weight: 600; + border-bottom: 2px solid #ddd; } /* Light mode header background */ @@ -74,6 +65,18 @@ color: #ffffff; } +/* Light mode table borders */ +[data-theme='light'] .simplified-pricing-table th, +[data-theme='light'] .simplified-pricing-table td { + border-bottom: 1px solid #ebeaf0; +} + +/* Dark mode table borders */ +[data-theme='dark'] .simplified-pricing-table th, +[data-theme='dark'] .simplified-pricing-table td { + border-bottom: 1px solid #404040; +} + .whats-changing-col { width: 50%; } @@ -116,6 +119,24 @@ color: #ffffff; } +/* Feature description styling - increased specificity */ +.simplified-pricing-table td .feature-description, +.pricing-table-container .feature-description { + font-size: 12px !important; + opacity: 0.6 !important; + line-height: 1.1 !important; + margin-top: 0.2em; + display: block; + font-weight: normal !important; + color: inherit !important; +} + +/* Dark mode feature description */ +[data-theme='dark'] .simplified-pricing-table td .feature-description, +[data-theme='dark'] .pricing-table-container .feature-description { + opacity: 0.7 !important; +} + .feature-list { padding-left: 1.5rem; margin: 0; @@ -167,7 +188,7 @@ .simplified-pricing-table th, .simplified-pricing-table td { - padding: 0.75rem 0.5rem; + padding: 0.5rem 0.4rem; } .whats-changing-col {