Make your Next.js site visually editable.

Unlock your Next.js site in minutes. Give your marketing team control over content and layout, page by page.

Watch how it works

Arrow pointing down
Details of Makeswift Builder Experience

Trusted by companies big and small

Wayfair logo
Toyota logo
Catepillar logo
Recurrency logo
Echobind logo
Render logo

Step 1

Integrate in minutes.

Whether you have a custom Next.js site that you want to unlock or you’re starting fresh, we’ve got you covered.

1 // pages/[[...path]].js

2

3 export {

4 getStaticPaths,

5 getStaticProps,

6 Page as default,

7 } from "@makeswift/runtime/next"

Step 2

Make any React component visually editable.

Bring your React components and quickly create a visual interface for marketing teams to configure in our builder. Stop sacrificing time to market for performance and functionality. With Makeswift you can have both.

Locations
Dot size
Dot color
Globe color
Location color
Rotate speed
ReactRuntime.registerComponent(Globe, {
  type: "Globe",
  label: "Globe",
  props: {
    locations: List({
      label: "Locations",
      type: Typeahead({
        label: "Address",
        getItems: q => fetch(`/api/search?q={q}`).then(r => r.json()),
      }),
      defaultValue: initialLocations ?? [],
      getItemLabel: (item) => item?.label ?? "No address",
    }),
    dotSize: Select({
      label: "Dot size",
      defaultValue: "medium",
      options: [
        { label: "Small", value: "small" },
        { label: "Medium", value: "medium" },
        { label: "Large", value: "large" },
      ],
    }),
    dotColor: Color({ label: "Dot Color" }),
    globeColor: Color({ label: "Globe color" }),
    locationColor: Color({ label: "Location color" }),
    autoRotate: Checkbox({ label: "Auto-rotate" }),
    rotationSpeed: Select({
      label: "Rotate speed",
      defaultValue: "average",
      options: [
        { label: "🐢 Slow", value: "slow" },
        { label: "🐶 Average", value: "average" },
        { label: "🐰 Fast", value: "fast" },
        { label: "⚡️ Unreasonable", value: "unreasonable" },
      ],
    }),
  },
});
Incremental adoption icon

Incremental adoption

Don't wait for your next website redesign to unlock your Next.js site. You can integrate Makeswift at the component level and make your site editable page-by-page.

Unlock icon

No vendor lock-in

Makeswift is an open source package you install into your repository so you can self host and control your deployment workflow. All Makeswift pages can be ejected at anytime.

Next.js icon

Optimized for Next.js

With support for SSR and ISR out of the box, Makeswift seamlessly integrates into your Next.js app without compromising the performance you love.

Website builder icon

Simple, intuitive API

Makeswift is designed to work with your existing components. Simply map UI controls to props to make your components configurable building blocks for the rest of your team.

"Makeswift fundamentally changes things for us because it allows our marketing team to maintain a world-class website. Suddenly we’re not developer-constrained on marketing efforts. If the marketing team wants to iterate on something or spin up a new campaign or page, we just give them the building blocks."

Michelle Lung photo

Hunter Hancock

Solutions Engineering Lead at Recurrency

Step 3

Give your team a visual builder they will love.

Easy-to-learn layout controls give marketing teams everything they need without any of the bloat found in other website builders. Makeswift eliminates the tradeoffs with custom code, headless CMS, and no code builders.

Try it out for yourself

Arrow pointing right

"Makeswift is just really freaking easy to use. I love how simple it is to organize and lay out sections using boxes. The built-in design system features for text and colors also make it painless to create and manage these pages."

Michelle Lung photo

Michelle Lung

Designer at Marketwake

Go ahead and build.

Don't have a Next.js project yet? Get started with our no code builder and extend when you're ready.

Arrow

* No credit card required