{"id":13423818,"url":"https://github.com/liveduo/destack","last_synced_at":"2025-05-14T16:14:01.627Z","repository":{"id":37250545,"uuid":"360328891","full_name":"LiveDuo/destack","owner":"LiveDuo","description":"Page builder for Next.js 🅧. Zero-config deployment 🚀. React now supported!","archived":false,"fork":false,"pushed_at":"2024-10-22T23:55:12.000Z","size":22592,"stargazers_count":1757,"open_issues_count":18,"forks_count":348,"subscribers_count":33,"default_branch":"main","last_synced_at":"2025-04-10T01:03:11.142Z","etag":null,"topics":["grapesjs","landing-page","nextjs","reactjs","tailblocks","tailwindcss"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LiveDuo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-04-21T23:00:49.000Z","updated_at":"2025-04-09T05:58:05.000Z","dependencies_parsed_at":"2022-07-12T04:31:05.991Z","dependency_job_id":"154bdd39-6aba-48e5-80a3-b6dd52e87ae3","html_url":"https://github.com/LiveDuo/destack","commit_stats":{"total_commits":785,"total_committers":5,"mean_commits":157.0,"dds":"0.15923566878980888","last_synced_commit":"87e01f444526a774606abc4231c9953923e59e10"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiveDuo%2Fdestack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiveDuo%2Fdestack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiveDuo%2Fdestack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiveDuo%2Fdestack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LiveDuo","download_url":"https://codeload.github.com/LiveDuo/destack/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251520046,"owners_count":21602427,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["grapesjs","landing-page","nextjs","reactjs","tailblocks","tailwindcss"],"created_at":"2024-07-31T00:00:43.186Z","updated_at":"2025-04-29T14:36:56.816Z","avatar_url":"https://github.com/LiveDuo.png","language":"HTML","readme":"# Destack 🔌 Embrace design. Own the stack.\n\nBuild landing pages visually right in your React or Next.js projects. Deploy them zero further configuration!\n\n**🏭 Examples:** [prettyfunnels.com](https://www.prettyfunnels.com/landing), [getdestack.com](https://www.getdestack.com/)\n\n# Announcements\n\n📣 [13/03/2024] Destack v3 has just been released on NPM. Learn more at [pull/103](https://github.com/LiveDuo/destack/pull/103) and [issues/104](https://github.com/LiveDuo/destack/issues/104). Note that pages created with v2 have to be recreated with v3 to function smoothly.\n\n📣 [10/10/2023] Destack v3 is in beta. This release is an rewrite of the editor from scratch. Check it out at [destack-starter-beta](https://github.com/LiveDuo/destack-starter-beta). More at [pull/103](https://github.com/LiveDuo/destack/pull/103) and [issues/104](https://github.com/LiveDuo/destack/issues/104).\n\n📣 [13/06/2023] Three more themes have been added [Preline](https://preline.co/), [Flow Bite](https://flowbite.com/) and [Flow Rift](https://flowrift.com/).\n\n📣 [04/02/2023] Version 2 has just been released on NPM. Try it out with destack@2 or destack@latest.\n\n📣 [17/12/2022] Destack v2 is now in beta. It's a major rewrite that comes new custom page builder based on Craft.js. Check it out at [destack-starter-beta](https://github.com/LiveDuo/destack-starter-beta). More at [pull/62](https://github.com/LiveDuo/destack/pull/62) and [issues/22](https://github.com/LiveDuo/destack/issues/22).\n\n📣 [11/10/2022] Destack now supports multiple themes. Two new themes have been added [Meraki UI](https://merakiui.com/) and [Hyper UI](https://www.hyperui.dev/).\n\n[![Tutorial](https://raw.githubusercontent.com/LiveDuo/destack/main/assets/youtube/craft.jpg)](https://www.youtube.com/watch?v=JTfUCCGaUd4 \"Tutorial\")\n\n# What's Destack?\n\nIt's a tool to build landing pages within your [React](https://reactjs.org/) or [Next.js](https://nextjs.org/) projects. Destack includes multiple components from [Tailblocks](https://tailblocks.cc/), [Meraki UI](https://merakiui.com/), [Hyper UI](https://www.hyperui.dev/), [Preline](https://preline.co/), [Flow Bite](https://flowbite.com/) and [Flow Rift](https://flowrift.com/).. It also supports image uploads and form submissions.\n\n*Destack helps you stop worrying about marketing pages so you can focus on your project.*\n\n# Themes\n\nDestack now supports theme selection.\n\n\u003ctable border=\"0\"\u003e\n\n \u003ctr\u003e\n    \u003ctd width=\"48%\"\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/LiveDuo/destack/main/assets/themes/screenshot-craft.png\"/\u003e\n    Theme selection\n\u003c/td\u003e\n    \u003ctd width=\"48%\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/LiveDuo/destack/main/assets/themes/screenshot-meraki-ui.png\"/\u003eMeraki UI (\u003ca href=\"https://merakiui.com/components\"\u003eComponents\u003c/a\u003e)\u003c/td\u003e\n \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"48%\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/LiveDuo/destack/main/assets/themes/screenshot-hyper-ui.png\"/\u003eHyper UI (\u003ca href=\"https://www.hyperui.dev/components/marketing\"\u003eComponents\u003c/a\u003e)\u003c/td\u003e\n    \u003ctd width=\"48%\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/LiveDuo/destack/main/assets/themes/screenshot-tailblocks.png\"/\u003eTailblocks (\u003ca href=\"https://tailblocks.cc/\"\u003eComponents\u003c/a\u003e)\u003c/td\u003e\n \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"48%\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/LiveDuo/destack/main/assets/themes/screenshot-preline.png\"/\u003ePreline (\u003ca href=\"https://preline.co/examples.html\"\u003eComponents\u003c/a\u003e)\u003c/td\u003e\n    \u003ctd width=\"48%\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/LiveDuo/destack/main/assets/themes/screenshot-flowrift.png\"/\u003eFlow Rift (\u003ca href=\"https://flowrift.com/\"\u003eComponents\u003c/a\u003e)\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n    \u003ctd width=\"48%\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/LiveDuo/destack/main/assets/themes/screenshot-flowbite.png\"/\u003eFlow Bite (\u003ca href=\"https://flowbite.com/blocks/\"\u003eComponents\u003c/a\u003e)\u003c/td\u003e\n \u003c/tr\u003e\n\u003c/table\u003e\n\n\n### Contribute (add a new theme)\n\nThere are many open source Tailwind themes that Destack can support. If you want to help adding a new theme create a new topic in [discussions](https://github.com/LiveDuo/destack/discussions) or reach out to me on [twitter](https://twitter.com/andreas_tzionis).\n\n# Features\n\n#### 🧱 Powerful Blocks\n\nThere are hundreds of well designed and heavily functional blocks from [Tailblocks](https://tailblocks.cc/), [Meraki UI](https://merakiui.com/), [Hyper UI](https://www.hyperui.dev/), [Preline](https://preline.co/), [Flow Bite](https://flowbite.com/) and [Flow Rift](https://flowrift.com/).. Supports Tailwind's theme colors ie. Red, Yellow, Green, Blue, Indigo, Purple \u0026 Pink.\n\n#### 🃏 Delightful Builder\n\nPowered by a custom-made minimal page-builder that was created with simplicity in mind. It supports altering tailwind CSS classes and CSS properties with the inspector in browser DevTools.\n\n#### 🕹 Data Ownership\n\nDestack stores all your assets on Github, Bitbucket etc through the editor. There are no external dependencies to manage or worry about.\n\n#### 🏞 Assets \u0026 Forms Support\n\nStores the images uploaded in the editor in your repository \u0026 displays them when needed on production. Also supports HTML and API form submission out of the box.\n\n#### 👩🏻‍💻 Easy Setup \u0026 Deployment\n\nWorks existing \u0026 new [React](https://reactjs.org/) and [Next.js](https://nextjs.org/) projects. Requires minimal setup and no extra configuration to deploy your landing pages to production.\n\n# Getting Started\n\n### With a new Next.js project:\n\n- Fork the [destack-starter](https://github.com/LiveDuo/destack-starter) project\n\n- OR deploy a project to Vercel: [\u003cimg src=\"https://raw.githubusercontent.com/LiveDuo/destack/main/assets/deploy/vercel_big.png\" width=\"92\"\u003e](https://vercel.com/new/git/external?repository-url=https://github.com/LiveDuo/destack-starter\u0026project-name=destack-starter\u0026repository-name=destack-starter)\n\n- OR preview it online with Gitpod: [\u003cimg src=\"https://raw.githubusercontent.com/LiveDuo/destack/main/assets/deploy/gitpod_big.png\" width=\"92\"\u003e](https://gitpod.io/#https://github.com/LiveDuo/destack-starter)\n\n### With an existing Next.js project:\n\n##### 1. Install Destack on your Next.js project\n\n```sh\nnpm i destack\n```\n\n##### 2. Setup the builder endpoint\n\nCreate `pages/api/builder/handle.js` and add the following:\n```js\nexport { handleEditor as default, config } from 'destack/build/server'\n```\n\n##### 3. Then create a new page\n\nOn any Next.js page you want to setup Destack:\n```js\nexport { getStaticProps } from 'destack/build/server'\nexport { ContentProvider as default } from 'destack'\n```\n\n### With a new React.js project:\n\n- Fork the [destack-react-starter](https://github.com/LiveDuo/destack-react-starter) project\n\n- OR deploy a project to Vercel: [\u003cimg src=\"https://raw.githubusercontent.com/LiveDuo/destack/main/assets/deploy/vercel_big.png\" width=\"92\"\u003e](https://vercel.com/new/git/external?repository-url=https://github.com/LiveDuo/destack-react-starter\u0026project-name=destack-react-starter\u0026repository-name=destack-react-starter)\n\n- OR preview it online with Gitpod: [\u003cimg src=\"https://raw.githubusercontent.com/LiveDuo/destack/main/assets/deploy/gitpod_big.png\" width=\"92\"\u003e](https://gitpod.io/#https://github.com/LiveDuo/destack-react-starter)\n\n### With an existing React.js project:\n\n##### 1. Install Destack on your React.js project\n\n```sh\nnpm i destack\n```\n\n##### 2. Setup the builder endpoint\n\nIn `package.json`:\n- Replace the \"start\" script with `destack -d \\\"react-scripts start\\\"`\n- Then, replace the \"build\" script with `destack -b \\\"react-scripts build\\\"`\n\n##### 3. Then create a new page\n\nIn any React.js component you want to setup Destack:\n```js\nexport { ContentProviderReact as default } from 'destack'\n\n```\n\n# How it works\n\n🛠 Destack is composed of two main components, the first is a React component that shows the editor or the generated page and the second is a Next.js API route that saves your progress to your repository.\n\n👨‍💻 When you run the project in `development` (ie. with `npm run dev`) the React component understands it from the `NODE_ENV` environment variable and shows you the editor where you can create your landing page visually. \n\n💡 Every change you make goes to the API route which updates a `default.json` file. That file contains the HTML for your landing page and it remembers how you structure your page so you can come back later to update it. \n\n🚀 When is time to go in `production` (ie. do `npm run build`  or deploy to Vercel) the React component reads `NODE_ENV` again and statically generates the HTML version of the page you build in the editor from the `default.json` file Destack created for you earlier.\n\n\u003e Note: The above description is for Next.js. In React.js, the `destack -b` script creates an API route similar to the one described above that handles template changes and file uploads in development. In production the `destack -d` script copies `default.json` to the `public` folder and builds a static version of the page.\n\nMore on the project's architecture [here](assets/design/overview.md).\n\n# How to's \u0026 guides\n\n### Adding an HTML form\n\n- Drop a block that contains a form\n- Click on the form \u0026 head to components settings\n- Add form URL \u0026 check `async` if don't want a redirection\n- To handle a `async` forms you can create an API route\n  - Next.js: Create a file in [api/submit.js](https://github.com/LiveDuo/destack/blob/main/dev/nextjs-project/pages/api/submit.js)\n  - React.js: You will need a seperate Node.js server listening on `/api/submit`\n\n### Uploading images\n\n- Drop a block that contains an image or use image block\n- Click on an image to open the upload modal\n- Select the image you want to update and click on it to add it to the page\n- Note: Images are uploaded to `public/uploaded` with their original filenames\n\n### Create a blog\n\n- Create the blog related [pages](https://github.com/LiveDuo/destack-landing/tree/master/pages/blog).\n- Reuse the [header and footer](https://github.com/LiveDuo/destack-landing/blob/master/pages/_app.js) components. Note that this requires setting up tailwind CSS.\n\n**Example:** https://github.com/LiveDuo/destack-landing\n\n# Multi-page Support\n\n### Next.js\n\nCreate a new page file in `pages` folder of the Next.js project and import `destack` as described in [#with-an-existing-nextjs-project](#with-an-existing-nextjs-project) to various pages.\n\n### React.js\n\nInstall a routing library such as `react-router-dom` or `router-tutorial` in the React.js project and import `destack` as described in [#with-a-new-reactjs-project](#with-a-new-reactjs-project) to various routes. For more info check out [destack-react-starter](https://github.com/LiveDuo/destack-react-starter).\n\n# Contributing to the project\n  See [CONTRIBUTING.md](CONTRIBUTING.md)\n\u003cbr\u003e\n\n# How this project came to existence\n\nThis project evolved out of the need to prototype quickly, maintain ownership of the generated pages and be compatible with serverless JAM-stack frameworks.\n\n\u003e Next.js 🅧 ➕ Tailwind CSS 🍃 = 💣💣\n\nPlease go and show these projects some love (⭐️). \n\nDon't forget to check out [Tailblocks](https://tailblocks.cc/), [Meraki UI](https://merakiui.com/), [Hyper UI](https://www.hyperui.dev/), [Preline](https://preline.co/), [Flow Bite](https://flowbite.com/) and [Flow Rift](https://flowrift.com/)., without their amazing open sourced components none of this would have been possible.  \n\n# Contributors\n\u003ca href=\"https://github.com/liveduo/destack/graphs/contributors\"\u003e\n  \u003cimg src=\"https://contrib.rocks/image?repo=LiveDuo/destack\" /\u003e\n\u003c/a\u003e  \n\nMade with [contributors-img](https://contrib.rocks).  \n\n# Upcoming Tasks\n- [ ] Add admin UI as a Next.js route\n\n","funding_links":[],"categories":["Extensions","Landing Pages"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fliveduo%2Fdestack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fliveduo%2Fdestack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fliveduo%2Fdestack/lists"}