Visually build landing pages on Next.js and easily host them on Vercel or Netlify.

Check out the editor: Destack Builder

It's a tool to build landing pages within your Next.js project. It's powered by Grapes.js and supports the complete set of blocks from Tailblocks.cc. It also handles asset uploading for you and soon form submission.

Destack is a tool to help you stop worrying about the marketing sites and focus on your project.

🧱 Powerful Blocks: There are 92 well designed and heavily functional blocks from the Tailblocks project.

🏞 Assets Uploading: Stores the images uploaded in the editor in your repo. Displays them when needed on production.

🃏 Delightful Builder: Powered by Grapes.js, a flexible and feature-full editor with CSS like options similar to Webflow.

🕹 Data Ownership: Destack stores all your assets on Github, Bitbucket etc through the editor. There are no external dependencies to manage or worry about.

👩🏻‍💻 Developer Ready: Works out of the box with any Next.js project. Build a few landing pages with Destack and the rest of your app with the usuall Next.js toolkit.

🏃🏽 Instant Deployment: Destack supports environment detection. The visual editor comes up only in development and the compiled version on production.

📸 Easy Setup: Click the Deploy button below to create a new Destack project on Vercel or head to Installing the plugin for instructions for your existing Next.js projects.

Deploy a new Next.js app on Vercel with Destack configured or preview in Gitpod:

   

👨‍💻 When you run the project locally you will see the editor and a large number of Tailwind blocks to play with.

💡 Notice the changes you are making are saved into a default.json file. That file contains the HTML for the and is used when your Next.js project is built. Also, images are saved in the public/uploaded folder. After testing Destack locally, remember to head back to Vercel and checkout deployed version!

npm i destack

Create pages/api/builder/handle.js and add the following:

export { handleData as default, config } from 'destack/build/server'

On any Next.js page you want to setup Destack:

import 'grapesjs/dist/css/grapes.min.css'
export { getStaticProps } from 'destack/build/server'
export { ContentProvider as default } from 'destack'

import { ContentProvider } from 'destack'
import 'grapesjs/dist/css/grapes.min.css'

export { getStaticProps } from 'destack/build/server'

export default function Page(props) { 
    return (
        <div style={{height: '100%'}}>
            <ContentProvider {...props}/>
            <span>Hello world</span>
        </div>)
}

This project was none's bright idea. It was not something that was planned and design in depth in advance. Instead it was evolved out of the need and enjoyment of using some amazing tools and prototype quickly. These projects heavily improved my developer life and a few of my friends'.

Next.js 🅧 ➕ Tailwind CSS 🍃 ➕ Grapes.js 🍇 = 💣💣

Please go and show these projects some love (⭐️). Don't forget to check out Tailblocks.cc, without Mert's amazing designs none of this would have been possible.

• Fix forms blocks (tailwind HTML & icons)
• Write tests for ContentProvider
• Max width & colors settings
• Move builder API route to next.config.js
• Add support for form submission