(Cross-posted from https://medium.com/plasmic-app/introducing-plasmic-the-visual-page-builder-for-next-js-4b1cf4b4e6e8)

2021 is going to be a year of tremendous growth for Next.js. The company behind Next.js, Vercel, raised a monumental $40MM Series B. The ecosystem around the framework has picked up enormous momentum. It’s an exciting time to be building upon Next.js and the Jamstack more broadly.

The Jamstack as a whole brings significant strides forward in performance, security, scalability, and developer experience. Yet it has also seen increased dependence upon developers. For non-technical audiences, such as content creatives and designers, traditional CMSes and platforms like WordPress are still significantly more approachable. On the Jamstack, many more requests for changes land instead at the feet of resource-strapped development teams.

We need a tool that empowers designers and content creators to use the Jamstack and plugs into its vibrant CMS ecosystem, in order to enable teams to iterate faster toward better products.

Rethinking the collaboration workflow

Plasmic is a no-code visual page builder that plugs into your codebase, with a special focus on Next.js codebases. By dropping a snippet into your next.config.js, anyone can now start publishing pages or parts of pages directly from Plasmic.

Designers, marketers, product managers, and more can use Plasmic to create pages — from landing pages to content pages to page templates. Or they can create parts of pages, such as banners and promotional sections. The content can then be generated as production-ready React code, or it can be transparently integrated at build-time, similar to content coming from a headless CMS.

Unlike a structured-data CMS, Plasmic enables free-form content with total visual control — entire sites can be built from scratch without code. Plasmic lets you easily create bespoke, responsive layouts without being a CSS expert. And everything ultimately results in production-grade CSS and the appropriate Next.js abstractions of pages, routes, and links.

Plasmic isn’t limited to static pages; it was designed to work deeply with code. Developers can override anything, attach arbitrary logic (such as specialized form handling), swap in existing code components (such as a Google Maps widget), and wire up data (such as content from a headless CMS). And this isn’t a one-time code export — you can continue to iterate on the design visually while also editing the code. Importantly, developers would continue using all their existing development workflow, code editors, etc. This is the first and only page builder that truly never limits what you can do. As one example, Plasmic itself was built in Plasmic!

Even when wielded by only developers, Plasmic accelerates time to ship. With a layout system built for humans, no longer do you need to puzzle over what does or doesn’t affect your declared vs. used height values or why that min-height: 0 incantation is needed to scroll your flex items. Enjoy instantaneous feedback unrivaled by any hot loader even for large sites; see your changes across all variants of your page or component simultaneously; and use principled abstractions like tokens, mixins, and variants to build and maintain your designs at scale.

To top it off, you can directly import designs from Figma using Plasmic’s best-in-class Figma-to-code converter, so that you can hit the ground running.

So what does this new workflow look like?

1. Build your site visually in Plasmic.
2. At any point, connect Plasmic with your GitHub repo or your build webhooks.
3. Start publishing changes directly from Plasmic.

Developers can continue to make code edits directly in the same GitHub repo, using the same git workflow, code editors, etc. And designers and content creators can continue evolving the design and copy, with minimal involvement from developers.

Opening up Plasmic to the Next.js community

We have been running a private beta with users from teams small and large, but today we’re thrilled to open up Plasmic, starting with the entire community of Next.js developers — because we ❤️ Next.js! Try out the Quickstart and sync a Plasmic starter project into your codebase in a few minutes.

This is just the start for Plasmic. We’re excited about what’s yet to come. We want to make Plasmic into the most versatile page builder and design tool — one that is approachable to anyone, but which works with code and integrates anywhere. We’d love to hear from you — your input will directly help shape the future direction of the tool.

Got questions? Want to show off what you built? Join our Slack community to share and get help. We can’t wait to see what you create!