Destack

Destack is an open-source visual page builder for React and Next.js projects that generates landing pages directly inside your codebase and saves the output as static HTML. It takes visual edits made in a browser-based editor and writes them to a default.json file in your repository, from which it statically generates the final page at build time. The project is maintained by Andreas Tzionis, distributed via NPM as destack, and can be used in both new and existing projects with minimal setup.

What is Destack?

Destack is an open-source visual page builder that runs inside your existing or new React and Next.js projects. It takes visual edits made in a browser-based editor and saves them to a default.json file in your repository, then statically generates the final HTML page when you build or deploy. The project is maintained by Andreas Tzionis, distributed via NPM as destack, and includes prebuilt blocks from Tailblocks, Meraki UI, Hyper UI, Preline, Flow Bite, and Flow Rift.

Key Features

• Hundreds of UI blocks — Bundles components from Tailblocks, Meraki UI, Hyper UI, Preline, Flow Bite, and Flow Rift, covering marketing sections like heroes, features, pricing, and CTAs.
• Theme selection — Choose between six open-source Tailwind CSS themes: Tailblocks, Meraki UI, Hyper UI, Preline, Flow Bite, and Flow Rift.
• Custom builder — A Craft.js-powered page builder lets you drag and drop blocks, edit Tailwind CSS classes and CSS properties using the inspector in browser DevTools, and supports Tailwind theme colors (Red, Yellow, Green, Blue, Indigo, Purple, Pink).
• Image uploads — Uploaded images are stored in your repository under public/uploaded with their original filenames and displayed in production.
• Form submissions — Supports both HTML and API-based form submission out of the box; for async forms you create an API route.
• Zero-config deployment — Once built, the page is static HTML, so it deploys to Vercel, Netlify, or any JAM-stack host without extra configuration.
• Multi-page support — Works across multiple pages in Next.js (pages in the pages folder) and React (with a routing library like react-router-dom).

Who is it for?

• Next.js developers who want to hand over landing page edits to non-technical people without leaving the repo or losing control of the code.
• React developers who need a quick visual builder integrated into a Create React App project, using the destack -b and destack -d scripts.
• Startups and agencies building marketing pages for multiple clients, because each page is stored as JSON in the client's repository and can be version-controlled.

What can you do with Destack?

• Create a landing page from scratch: fork the destack-starter (Next.js) or destack-react-starter (React) template, deploy to Vercel, or preview it in Gitpod, then start editing blocks visually.
• Add a form to a landing page: drop a block containing a form, set the form URL in component settings, and handle async submissions through an /api/submit route.
• Upload images without a CMS: use the image block's upload modal; the file is saved to public/uploaded and referenced by its original filename.
• Reuse site chrome for a blog: create blog pages and reuse the header/footer components from the destack-landing example (requires setting up Tailwind CSS).

How does Destack work?

Destack consists of a React component that renders either the editor or the built page, and a Next.js API route that saves changes to your repository. When NODE_ENV is development, the component displays the visual editor; every edit triggers the API route to write a default.json file that stores the page's HTML structure. When NODE_ENV is production, the component reads that file and statically generates the HTML page, so no server-side rendering or external service is needed at runtime.

FAQ

Is Destack free?

Yes, Destack is an open-source project. You install it from NPM and use it in your own React or Next.js project; the code and editor are distributed under an open-source license (see the repository for details).

Does Destack work with Vercel?

Yes. The starter projects include one-click deploy buttons to Vercel, and because Destack generates static HTML, it works with Vercel's build pipeline without additional configuration.

Can I use Destack in an existing Next.js project?

Yes. Install destack with npm i destack, create pages/api/builder/handle.js with the exported handleEditor and config, then export getStaticProps and ContentProvider from the Destack package on any page.

What happens to pages created with v2 when v3 is released?

According to the v3 release announcement, pages created with v2 must be recreated with v3 to function smoothly. There is no automatic migration path mentioned in the announcement.

Does Destack support image uploads and forms?

Yes. Images uploaded through the editor are saved to your repository under public/uploaded, and forms support both traditional HTML POSTs and async API submissions. For async form handling, you create your own API route.