What Is Makeswift?
Makeswift is a composable visual editor designed to equip marketers to create rich, high-quality web experiences without the friction of steep learning curves or never-ending development cycles.
Building beautiful content experiences often involves trade-offs between clunky editing interfaces, frustrating guesswork about what published content will really look like, or heavy reliance on development teams for small updates. The Makeswift visual editor takes an innovative approach that allows marketers to build sophisticated content presentations and guarantees that what you see is really what you get, without sacrificing the power of developers to customize and integrate for any need.
In contrast with a traditional content management system (CMS) or digital experience platform (DXP), visual building blocks and layouts are front and center in the Makeswift architecture and editing experience. Authors edit these building blocks directly, rather than editing a collection of fields without having control over their visual presentation.
Catalyst, BigCommerce’s officially supported composable storefront, seamlessly integrates Makeswift, offering out-of-the-box visual editing for the entire e-commerce user experience.
Key Makeswift Features
What You See Is What You Get
Makeswift’s interactive, drag-and-drop builder allows you to edit your true content presentation in real time. Compose your visual experiences with intuitive component building blocks that interact in a predictable, reliable way.
Makeswift’s component-focused architecture enables developers to effortlessly create custom components that are intuitive and reliable.
Optimized Out of the Box
Makeswift leverages the native tooling of Next.js for exceptional performance and also gives you access to key SEO tools - manage metadata, easily set up redirects, and take advantage of auto-generated sitemaps.
Fully Responsive
The editor is designed with full responsiveness in mind, allowing you to both see an accurate representation of your content at various breakpoints and truly custom-tailor the experience for each.
Use the built-in breakpoints or easily create the ones you need.
Team Collaboration
Makeswift supports real-time collaboration between multiple users in a workspace, never locking out editors because someone else is updating a page.
Varied roles and permissions make it possible to allow wide collaboration without endangering the stability of your content, and enterprise teams can take advantage of Single Sign-on to simplify the security of their workspaces.
Enhanced Localization
Localization features go beyond translation, allowing you to create truly varied content experiences for every locale.
Versioning Features
Edit your content freely while remaining in control of what gets published and when. The editor interface allows you to effortlessly revert to previous versions of your content and to review a history of your changes.
Freedom of Integration
Use the Makeswift editor as your primary content system, or else leverage its visual editing capabilities for content provided by your chosen CMS or DXP. The tools in the Makeswift tech stack make it possible to integrate any backend into the building experience.
The Tech Stack
Makeswift’s unique composable architecture allows for rapid customization, scalability, and maximum freedom to make your frontend application your own.
Makeswift is built on a set of tools that have wide adoption and popularity in enterprise web application development.
- React - A widely used library for rapidly building user interfaces, and the key toolset that powers Makeswift’s visual components
- Next.js - One of the most popular and fully featured full-stack React frameworks
- TypeScript - A JavaScript language extension powering the type inference that helps you avoid errors and unpredictable code
- Tailwind - A CSS framework focused on rapid development
The combination of these toolsets and Makeswift’s component concept makes for a smooth and flexible developer experience.
Click each row to expand.
Composable
You fully own and control the front-end application that powers the Makeswift editor and your rendered content. This means you have the freedom to integrate Makeswift-powered visual building into your web experience as you see fit.
Start with a default Makeswift implementation within minutes, or integrate the builder into your existing Next.js application incrementally or all at once.
Because Makeswift is built on a headless front-end with universal and widely adopted tools, standardized techniques can be used to integrate data from third-party systems into your custom components.
Component-Based
Rapid customization in Makeswift is easy because the editor is centered not around content schemas, but around the building blocks that actually make up rich experiences - visual components. You’ll spend your time crafting the presentation and interactions of components instead of writing meticulous data models.
Decoupled
Custom components are loosely coupled with Makeswift. Because your component code is simply React code with no builder-specific wiring, you can avoid the learning curve of a proprietary framework. This also gives you the freedom to use your components in code or in the editor.
BigCommerce Storefronts
Makeswift brings visual editing capabilities to both BigCommerce storefront styles: Catalyst, the composable Next.js storefront, and Stencil, the theme-based storefront platform. Whichever approach you use to build a shopping experience, Makeswift lets your content team compose and edit pages visually.
Catalyst
BigCommerce’s first-class composable storefront, Catalyst, comes with built-in support for the Makeswift editor. Catalyst is a fully built Next.js storefront with an opinionated set of tools, designed to jumpstart your composable BigCommerce shopping experience.
Pairing Catalyst as a fully implemented headless storefront with Makeswift as a premier content editing experience is one particularly powerful way to build an enterprise-level composable storefront.
Unlike Stencil, where Makeswift edits content within the bounds of a hosted theme, Catalyst gives you full control over the composable application. You own the Next.js codebase and can shape every aspect of the storefront in code, then expose exactly the components and controls your content team needs in the editor.
Because this course is focused on the developer experience, including creating custom React components for the editor, the main content and hands-on labs will be focused on a Catalyst storefront scenario.
If you want to dive deeper into Catalyst, see the dedicated Catalyst Core course.
Stencil
Makeswift support for Stencil storefronts is in beta.
Stencil is BigCommerce’s theme-based storefront platform. Makeswift-enabled Stencil storefronts come with their own set of unique components, tailored to the theme-based editing experience.
The Stencil experience does not support building custom React components for the editor. If your content strategy requires building such custom components, Catalyst is the right fit.