When building apps for the Wix ecosystem, selecting the right development framework will ensure you have the right tools to support your app development.
This guide will help you navigate the decision-making process by matching development goals and required extensions to the most suitable framework or combination of frameworks.
To choose the right framework(s) for your app, follow these steps:
- Map your app’s functionality to Wix’s extensions.
- Learn about Wix’s development frameworks.
- Map your app extensions to Wix’s frameworks.
- Decide which framework(s) to use.
First determine which extensions you’ll need for your app. Reference Map your app’s functionality to Wix’s extensions for help.
Once you’ve identified the specific Wix extensions you’ll need, use these to guide your framework selection.
Wix offers 3 distinct development frameworks, each with its own strengths:
| Framework | Best for | Key features | Hosting | Development experience |
|---|
| Wix Blocks | Visual designers, low-code developers, and those who prefer a web-based IDE. | Drag-and-drop UI editor, native JS coding, built-in settings panels, built-in CMS collections for connecting UI elements directly to data fields. | Automatically deployed to Wix cloud. | Web-based IDE within the Wix platform or VSCode based IDE. |
| Wix CLI | Experienced developers, especially those comfortable with React and Node.js. | TypeScript support, local development in your preferred IDE, local testing with hot module replacement, Git integration. | Automatically deployed to Wix cloud. | Standard JavaScript/TypeScript workflow with robust CLI tools to streamline development. |
| Self-Hosting | Developers with existing infrastructure or specialized tech stacks. | Use any tech stack, complete deployment control. | Your choice of external hosting platform. | Your own development workflow with URLs provided to Wix. |
For teams that want to separate their design and coding concerns and enjoy Wix's tailored solution for each, Wix offers the Blocks-CLI integration:
- In Blocks: Design widgets, configure editor experiences, and customize installation settings
- In CLI: Write widget and panel logic, define API properties, and test your app with hot module reloading
Currently supported only for site widgets. Dashboard pages, plugins, and collections in Blocks are not available with this integration.
When planning your Wix app, understanding which extensions work with which frameworks is essential for successful development. Check out which frameworks support each extension type in the extension catalog, and consider the following practical guidance:
- If you prefer visual development and design-first workflows, Blocks excels for creating site pages and widgets with its intuitive drag-and-drop interface.
- For teams with both designers and developers who prefer coding in TypeScript with their favorite IDE tools, the Blocks-CLI integration offers an ideal balance—design visually and code in a familiar environment. Only supported for site widgets.
- Embedded scripts (for analytics, chat widgets, etc.) require either CLI or self-hosting, as Blocks doesn't support this extension type.
- Site plugins that integrate with Wix business solutions are supported in Blocks and CLI, but not in the Blocks-CLI integration.
- Editor add-ons (tools that enhance the Wix Editor experience) are only available through self-hosted iframes.
- Dashboard pages work well in both Blocks and CLI, with Blocks offering faster layout creation for teams comfortable with visual tools.
- For developers who prefer working with React components and TypeScript in their own IDE, CLI provides a more familiar development experience for building dashboard interfaces.
- If you need dashboard plugins that integrate directly with existing Wix business dashboards, CLI is your only native option.
- Dashboard menu plugins and modals are also CLI-exclusive features, which is significant if you want deep dashboard integration.
- External links to your own hosted tools are framework-independent and serve as a simple way to connect to external systems.
- Service plugins, which are crucial for injecting custom business logic, require CLI or self-hosting; Blocks doesn't support these.
- Schema plugins for extending Wix data models are framework-independent and configured through the App Dashboard.
- Notifications are configured through the App Dashboard and require self-hosted trigger logic.
- Automation extensions are configured through the App Dashboard and require self-hosted trigger logic.
When choosing your framework(s), consider these factors:
- Match the framework to your team's preferred workflow: Visual designers and low-code developers typically thrive in Blocks, while developers who value IDE features, TypeScript, and Git workflows will be more productive with CLI.
- Consider the development experience you value most: Do you prefer the immediacy of visual feedback from drag-and-drop interfaces, or the structure and completion features of TypeScript in your favorite code editor?
- Evaluate your collaboration needs: Blocks offers an accessible environment for diverse team members, while CLI integrates better with standard software development practices like version control and CI/CD pipelines.
- Think about iteration speed: Blocks enables rapid visual changes especially for UI-focused features, while CLI provides faster iteration for teams already familiar with React and TypeScript.
- Plan for hybrid approaches when necessary: Many successful Wix apps combine frameworks—perhaps using Blocks for visually-rich components while leveraging CLI for parts of your app where your team values a more traditional development workflow.
- Consider onboarding new team members: Blocks typically has a gentler learning curve for those new to Wix development, while CLI aligns with industry-standard development practices for web developers.
The following examples illustrate how different developer needs and skill sets align with specific Wix frameworks, helping you identify which approach might work best for your particular situation.
The following examples illustrate how different developer needs and skill sets align with specific Wix frameworks.
Developer profile:
- Strong with visual design and drag-and-drop interfaces.
- Basic JavaScript knowledge.
- Limited CLI experience.
- Prefers visual development environments.
Required extensions:
- Site widget (to display testimonials on the site).
- Dashboard page (for testimonial management).
- The visual editor aligns with the developer's design-focused skill set.
- Low-code approach allows for quick implementation despite limited coding experience.
- Built-in database capabilities simplify storing and managing testimonial content.
- No need for external hosting or complex setup.
Developer profile:
- Experienced React/Node.js developer.
- Comfortable with TypeScript and command line tools.
- Strong software engineering background.
- Limited experience with visual builders.
- Prefers code-first approach.
Required extensions:
- Dashboard page (for SEO settings and recommendations).
- Service plugin (for SEO analysis logic).
- Complex React components for detailed analytics visualizations match developer's expertise.
- Integration with third-party SEO APIs leverages Node.js skills.
- Development team's strong React/TypeScript experience can be fully utilized.
- Need for version control and collaborative development with git.
Note: This app could also include a self-hosted editor add-on for inline SEO optimization while editing, and an automation for scheduled SEO checks, making this a CLI/self-hosted hybrid.
Developer Profile:
- Mixed team with UI/UX designers and experienced TypeScript developers
- Strong visual design skills
- Good React/Node.js expertise
- Values both visual design capabilities and powerful development tools
Required extensions:
- Site widgets (for interactive design elements)
- Designers can create visually impressive UI in Blocks
- Developers can write complex widget logic in their preferred IDE
- Team can leverage hot module reloading and local development environment
- Workflow supports clear separation of UI design and functional logic
Developer profile:
- Experienced with custom tech stack (Python/Django).
- Has existing analytics platform built in-house.
- Limited knowledge of React.
- Prefers to leverage existing code.
Required extensions:
- Dashboard page (using iframe to your hosted analytics platform).
- Embedded script (for tracking customer behavior).
- External link (for deep analytics features).
- Existing analytics platform built with specialized technologies can be reused.
- Developer can continue working in familiar tech stack.
- Need to process and store large amounts of e-commerce data on existing infrastructure.
- Team expertise in specific non-React frameworks can be leveraged.
Developer profile:
- Mixed team with varied expertise.
- Some members are strong in React/Node.js.
- Other members are experienced with visual development tools.
- External consultants with specialized visualization library.
- Team willing to use multiple approaches for optimal results.
Required extensions and frameworks:
- Dashboard plugin (CLI) - For integration with Wix Stores dashboard.
- Service plugin (CLI) - For inventory calculation logic.
- Dashboard page (Blocks) - For inventory management interface.
- Site widget (Self-Hosted) - For custom inventory displays on storefront.
- Automation (Self-Hosted) - For inventory alerts and reordering.
- CLI for complex logic leverages team's React expertise.
- Blocks for rapidly building the management interface suits visual developers.
- Self-hosted widget allows reuse of specialized inventory visualization library.
- Different team members can work in their preferred environments.